Comment styliser des listes avec CSS

Récapitulatif des listes HTML

Il existe deux principaux types de listes en HTML: ordonnées et non ordonnées .

Dans les listes ordonnées (

    ), l'ordre des éléments de la liste est important. Les éléments peuvent apparaître dans l'ordre par numéro, chiffre romain, chiffre alpha ou autre type de marqueur. Le marqueur par défaut des listes ordonnées est un nombre (ou decimal):

    Dans les listes non ordonnées (

      ), l'ordre des éléments de la liste n'a pas d'importance. Les éléments apparaissent au format puce. Le marqueur par défaut pour les listes non ordonnées est une puce ronde ou disc.

      Chaque élément de liste dans une liste ordonnée ou non est créé avec la balise.

      Styles spécifiques à la liste

      Il y a trois propriétés communes spécifiques aux listes style: list-style-type, list-style-positionet list-style-image. Il existe également une propriété sténographique qui comprend les trois.

      list-style-type

      Les marqueurs (ou puces) qui apparaissent dans les listes ordonnées et non ordonnées peuvent être stylisés de différentes manières. La propriété CSS pour styliser le type de marqueur est list-style-type. La list-style-typevaleur par défaut pour une liste ordonnée est decimal, tandis que la valeur par défaut pour une liste non ordonnée est disc.

      Exemple de liste ordonnée:

      /* css */ ol { list-style-type: upper-roman; }

      Exemple de liste non ordonnée:

      /* css */ ul { list-style-type: square; }

      Aucun exemple de marqueur:

      /* css */ ul { list-style-type: none; }

      Les valeurs acceptées pour la list-style-typepropriété incluent:

      Non ordonné:

      • disque ( par défaut )
      • cercle
      • carré

      Commandé:

      • décimal ( par défaut )
      • décimal-principal-zéro
      • bas-romain
      • supérieur-romain
      • bas-grec
      • bas-latin
      • latin supérieur
      • arménien
      • géorgien
      • alpha inférieur
      • alpha supérieur

      Autre:

      • aucun

      Remarque: toutes les valeurs de propriété répertoriées ci-dessus peuvent être utilisées pour styliser des listes ordonnées et non ordonnées (ex: une liste ordonnée avec des squaremarqueurs de liste).

      list-style-position

      list-style-positioncontrôle si le marqueur de liste apparaît à l'intérieur ou à l'extérieur de chaque élément d'élément de liste ( ). La propriété accepte deux valeurs, outside(par défaut) ou inside.

      Positionnez le marqueur outsidede l'élément d'élément de liste, et toutes les lignes de texte et sous-lignes de chaque élément de liste s'aligneront verticalement:

      /* css */ ul { list-style-position: outside; /* default */ }

      Placez le marqueur insideet la première ligne de texte de chaque élément de la liste sera en retrait pour faire de la place pour le marqueur. Toutes les sous-lignes du même élément de liste s'aligneront sur le marqueur plutôt que sur la première ligne de texte:

      /* css */ ul { list-style-position: inside; }

      list-style-image

      La list-style-imagepropriété accepte une URL d'image à la place du marqueur de liste. La valeur par défaut de cette propriété est none.

      /* css */ ul { list-style-image: url(//url-to-image); }

      list-style Shorthand

      list-style is a shorthand property for the three style properties listed above. The order of values list-style accepts is list-style-type, list-style-position, and list-style-image. If any value is omitted, the default value for that property will be used.

      Example:

      /* css */ ul { list-style: circle inside none; }

      More List-Specific Styling

      Ordered list tags also accept attributes that control the flow, count, or specific marker values of its list items. These include the start, reversed, and value attributes. See the MDN resources listed below for further details.

      General Styling

      List content can be styled just like other p or div elements. color, font-family, margin, padding, or border are just a few examples of properties that can be added to either the ul, ol, or li elements.

      Note that any styles added to the ul or ol element will affect the entire list. Styles added directly to the li elements will affect the individual list items. In the example below, the border and background-color properties are styled differently between the list and list item elements:

      /* css */ ul { list-style-type: circle; border: 2px solid blue; background-color: lightblue; } li { margin: 5px; background-color: lightyellow; }

      List Spacing

      You may notice extra spacing in front of the list items when list-style-type is set to none. Setting padding to 0 (or whatever spacing is preferred) on the list element will override this default padding.

      /* css */ ul { list-style: none; padding: 0; } li { padding: 5px 10px; background-color: #EEEEEE; border: 1px solid #DDDDDD; }

      Sources:

      The links below were referenced in compiling information found in this article. Please visit them for further details about this topic.

      More Information:

      MDN - Styling Lists

      W3Schools - CSS Lists

      CSS Tricks - list-style