CSS Listes

Une liste non ordonnée :

  • Café
  • Thé
  • Coca Cola

Une liste ordonnée :

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

CSS Styliser les Listes

En HTML, il existe deux types principaux de listes :

  • <ul> - listes non ordonnées (les éléments de la liste sont marqués par des puces)
  • <ol> - listes ordonnées (les éléments de la liste sont marqués par des numéros ou des lettres)

CSS propose les propriétés suivantes pour styliser les listes HTML :

CSS Styliser les Marqueurs d'Éléments de Liste

La propriété CSS list-style-type spécifie le type de marqueur d'élément de liste dans une liste.

L'exemple suivant montre quelques-uns des marqueurs d'éléments de liste disponibles :

Exemple

ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: upper-roman;}
ol.e {list-style-type: lower-roman;}
ol.f {list-style-type: lower-alpha;}
ol.g {list-style-type: decimal;}
Essayez-le Vous-Même »

Remarque : Certaines valeurs sont pour des listes non ordonnées, et d'autres pour des listes ordonnées.

CSS Remplacer le Marqueur d'Élément de Liste par une Image

La propriété CSS list-style-image est utilisée pour remplacer le marqueur d'élément de liste par une image.

Remarque : Spécifiez toujours une propriété list-style-type en plus. Cette propriété est utilisée si l'image est indisponible pour une raison quelconque.

Exemple

Remplacer les marqueurs d'éléments de liste par une image :

ul {
list-style-image: url('sqpurple.gif');
list-style-type: square;
}
Essayez-le Vous-Même »

CSS Positionner les Marqueurs d'Éléments de Liste

La propriété CSS list-style-position spécifie la position des marqueurs d'éléments de liste (puces).

list-style-position: outside; signifie que les puces seront à l'extérieur de l'élément de liste. Le début de chaque ligne d'un élément de liste sera aligné verticalement. C'est le comportement par défaut :

  • Café
  • Thé
  • Coca-cola

list-style-position: inside; signifie que les puces seront à l'intérieur de l'élément de liste. Comme cela fait partie de l'élément de liste, cela fera partie du texte et poussera le texte vers la droite :

  • Café
  • Thé
  • Coca-cola

Exemple

Positionner les marqueurs d'éléments de liste :

ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}
Essayez-le Vous-Même »

CSS Supprimer les Marqueurs d'Éléments de Liste

La propriété list-style-type:none; est utilisée pour supprimer les marqueurs d'éléments de liste.

Remarque : Une liste a une marge et un remplissage par défaut. Pour les supprimer, ajoutez margin:0 et padding:0 à l'élément <ul> ou <ol> :

Exemple

Supprimer les marqueurs d'éléments de liste :

ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Essayez-le Vous-Même »

Propriété Abrégée list-style CSS

La propriété list-style est une propriété abrégée. Elle est utilisée pour définir toutes les propriétés de liste en une seule déclaration.

Lors de l'utilisation de la propriété abrégée, l'ordre des valeurs de propriété est :

Si l'une des valeurs de propriété ci-dessus est manquante, la valeur par défaut pour la propriété manquante sera insérée.

Exemple

Utiliser la propriété abrégée list-style :

ul {
list-style: square inside url("sqpurple.gif");
}
Essayez-le Vous-Même »

CSS Styliser les Listes Avec des Couleurs

Nous pouvons également styliser les listes avec des couleurs, des marges et des remplissages pour les rendre un peu plus intéressantes.

Tout ce qui est ajouté à la balise <ol> ou <ul> affecte l'ensemble de la liste, tandis que les propriétés ajoutées à la balise <li> affecteront les éléments de liste individuels :

Exemple

Styliser les listes avec des couleurs, des marges et des remplissages :

ol {
background: salmon;
padding: 20px;
}

ol li {
background: mistyrose;
color: darkred;
padding: 10px;
margin-left: 20px;
}

ul {
background: powderblue;
padding: 20px;
}

ul li {
background: mistyrose;
color: darkblue;
margin: 5px;
}

Résultat :

  1. Café
  2. Thé
  3. Coca Cola
  • Café
  • Thé
  • Coca Cola
Essayez-le Vous-Même »

Plus d'Exemples

Liste personnalisée avec une bordure gauche rouge
Cet exemple démontre comment créer une liste avec une bordure gauche rouge.

Liste bordée pleine largeur
Cet exemple démontre comment créer une liste bordée sans puces.

Tous les différents marqueurs d'éléments de liste pour les listes
Cet exemple démontre tous les différents marqueurs d'éléments de liste en CSS.

Toutes les Propriétés de Liste CSS

Propriété Description
list-style Définit toutes les propriétés d'une liste en une seule déclaration
list-style-image Spécifie une image comme marqueur d'élément de liste
list-style-position Spécifie la position des marqueurs d'éléments de liste (puces)
list-style-type Spécifie le type de marqueur d'élément de liste