CSS Liste

Les propriétés de liste CSS fonctionnent comme suit :

  • Définir différents marqueurs d'élément de liste pour les listes ordonnées
  • Définir différents marqueurs d'élément de liste pour les listes non ordonnées
  • Définir le marqueur d'élément de liste comme une image

Liste

En HTML, il existe deux types de listes :

  • Liste non ordonnéeul- Les marqueurs d'élément de liste utilisent des graphiques spéciaux (tels que de petits points noirs, de petits carrés, etc.)
  • Liste ordonnéeol- Les marqueurs d'élément de liste peuvent être des nombres ou des lettres

Avec CSS, vous pouvez styliser davantage les listes et utiliser des images comme marqueurs d'élément de liste.

Une liste non ordonnée se présente comme suit :

  • Café
  • Thé
  • Coca Cola
  • Café
  • Thé
  • Coca Cola

Une liste ordonnée est affichée comme suit :

  1. Café
  2. Thé
  3. Coca Cola
  1. Café
  2. Thé
  3. Coca Cola

Différents marqueurs d'élément de liste

La propriété list-style-type spécifie le type de marqueur d'élément de liste :

Exemple

ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}

Essayez-le vous-même »

Certaines valeurs concernent les listes non ordonnées, et d'autres les listes ordonnées.

Images comme marqueurs d'élément de liste

Pour spécifier une image pour le marqueur d'élément de liste, utilisez la propriété list-style-image :

Exemple

ul { list-style-image: url('sqpurple.gif'); }

Essayez-le vous-même »

L'exemple ci-dessus ne s'affiche pas de la même manière dans tous les navigateurs. IE et Opera affichent le marqueur d'image légèrement plus haut que Firefox, Chrome et Safari.

Si vous souhaitez placer le même marqueur d'image dans tous les navigateurs, vous devez utiliser une solution de compatibilité entre navigateurs, comme suit :

Solutions de compatibilité entre navigateurs

De même, dans tous les navigateurs, l'exemple suivant affichera le marqueur d'image :

Exemple

ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }

Essayez-le vous-même »

Explication de l'exemple :

  • ul:
    • Définir le type de liste sur aucun marqueur d'élément de liste
    • Définir le padding et la marge à 0px (compatibilité entre navigateurs)
  • Tous les li dans ul :
    • Définissez l'URL de l'image et configurez-la pour qu'elle ne s'affiche qu'une seule fois (pas de répétition)
    • Vous devez positionner l'image (left 0px et top 5px)
    • Utilisez la propriété padding-left pour placer le texte dans la liste

Liste - propriété raccourcie

Toutes les propriétés de liste peuvent être spécifiées dans une seule propriété. C'est ce qu'on appelle la propriété raccourcie.

Pour les listes, utilisez la propriété raccourcie en définissant la propriété list-style comme suit :

Exemple

ul { list-style: square url("sqpurple.gif"); }

Essayez-le vous-même »

Il est possible de définir les propriétés suivantes dans l'ordre :

  • list-style-type
  • list-style-position (Pour les notes associées, veuillez consulter le tableau des propriétés CSS ci-dessous)
  • list-style-image

Si l'une des valeurs ci-dessus est manquante, cela n'a pas d'importance tant que les autres restent dans l'ordre spécifié.

Examples

Plus d’exemples

Tous les différents marqueurs d'élément de liste
Cet exemple illustre tous les différents marqueurs d'élément de liste CSS.

Supprimer les paramètres par défaut

The list-style-type:none property can be used to remove the small markers. By default, lists <ul> or <ol> also have padding and margins set, which can be usedmargin:0andpadding:0to remove:

Exemple

ul { list-style-type: none; margin: 0; padding: 0; }

Essayez-le vous-même »

Toutes les propriétés CSS de liste

Propriété Description
list-style Propriété raccourcie. Utilisée pour définir toutes les propriétés d'une liste dans une seule déclaration.
list-style-image Définir une image comme marqueur d'élément de liste.
list-style-position Définir la position du marqueur d'élément de liste dans la liste.
list-style-type Définir le type du marqueur d'élément de liste.
autres extensions