couleur Li CSS. Ajouter des puces ou une numérotation au texte

Maison / Windows 7
  • Modification de l'apparence de la puce standard pour les listes numérotées
  • Définition du type de puce pour les listes à puces
  • Définir une image au lieu d'une puce pour les éléments de la liste

À l'aide des balises HTML, vous pouvez créer deux types de listes comportant des puces : numérotées et à puces. Par défaut, la plupart des navigateurs affichent les marqueurs de liste à puces sous forme de cercle et les marqueurs de liste numérotés sous forme de nombres dans l'ordre. CSS offre la possibilité de modifier l'apparence des marqueurs standard. Ensuite, nous montrerons des exemples avec différents types de marqueurs, à l'aide desquels vous pouvez modifier l'apparence de vos listes.

Modification et suppression de marqueurs

Pour modifier l'apparence standard d'un marqueur en CSS, utilisez la propriété list-style-type ; la valeur est définie sur le type de marqueur par lequel vous souhaitez remplacer le standard.

Un exemple illustrant certains types de puces pour les listes numérotées :

Propriété CSS :

type de style de liste :

Résultat:

  1. Cliquez sur la valeur de la propriété list-style-type
  2. Regardez les marqueurs changer
  3. Utilisez les puces les plus appropriées pour vos listes

Ol#maListe (
type de style de liste : décimal ;
}

Cliquez sur n'importe quelle valeur de propriété pour voir le résultat

Pour les listes à puces, il n'existe que trois types de marqueurs, qui peuvent être spécifiés à l'aide des valeurs cercle, disque et carré :

Titre du document

  • Café
  • Thé
  • Café
  • Thé
  • Café
  • Thé
Essayer "

En utilisant la valeur none, vous pouvez supprimer les marqueurs des éléments de la liste, mais l'indentation à gauche restera :

Titre du document

  • Café
  • Thé
  1. Café
  2. Thé
Essayer "

Remplacer les marqueurs par des images

Si aucun des marqueurs par défaut ne vous convient, alors CSS offre la possibilité de les remplacer par n'importe quelle image ; la propriété list-style-image vous y aidera, dans la valeur de laquelle vous devez spécifier le chemin d'accès à l'image sélectionnée.

Tenez compte du fait que l'image ne sera pas automatiquement mise à l'échelle pour s'adapter à la liste et sera affichée à sa propre taille, vous devrez donc sélectionner une image de taille appropriée ou en modifier une existante, en la réduisant ou en l'agrandissant à la taille souhaitée :

Titre du document

  • Café
  • Thé
  1. Café
  2. Thé
Essayer "

Indentation de la liste

Lorsque vous supprimez des puces des éléments de la liste, vous pouvez également supprimer ou réduire la taille de remplissage gauche par défaut du navigateur. Pour suppression complète padding, vous devrez utiliser la propriété padding-left, qui vous permet d'ajuster rembourrage:

Titre du document

  • Café
  • Thé
  1. Café
  2. Thé
Essayer "

Dans l'exemple, nous avons complètement supprimé l'indentation sur le côté gauche, de sorte que les éléments de la liste s'ajustent désormais au bord de la fenêtre du navigateur. Et comme vous pouvez le voir dans l'exemple, la liste à puces s'affiche exactement comme prévu, mais les marqueurs sont manquants dans la liste numérotée. La raison réside dans les marqueurs eux-mêmes - par défaut, les marqueurs ne font pas partie du contenu des éléments de la liste, donc si vous supprimez l'indentation à gauche, ils ne bougent pas avec le contenu des éléments.

  • , mais cachez-vous simplement derrière le bord de la fenêtre du navigateur.

    La propriété list-style-position spécifie si la puce doit être positionnée à l'intérieur ou à l'extérieur des éléments de la liste. Cette propriété peut prendre deux valeurs :

    • à l'extérieur - le marqueur est situé à gauche du contenu (c'est la valeur par défaut)
    • à l'intérieur - le marqueur est situé à l'intérieur de l'élément de liste avec le contenu

    Vous pouvez maintenant réécrire l'exemple précédent afin que l'indentation sur le côté gauche soit supprimée, mais que les marqueurs ne sortent pas du bord du navigateur :

    Titre du document

    • Café
    • Thé
    • Café
    • Thé
    • Café
    • Thé
    Essayer "

    Dans l'exemple, une bordure a été ajoutée à chaque élément de la liste pour afficher visuellement les limites des éléments de la liste.

    Cet article du didacticiel se concentrera sur l'utilisation des listes en CSS, vous apprendrez comment modifier le type de puce, la position de la puce par rapport à l'élément de liste, créer vos propres puces et même changer la couleur de la puce.

    Je pense que vous savez déjà que HTML 5 utilise deux principaux types de listes (hors listes de descriptions et éléments de menu) :

    • Choix de l'éditeur

    © 2024 ermake.ru -- À propos de la réparation de PC - Portail d'information