Listes CSS

Liste non ordonnée :

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

Liste ordonnée :

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

Listes HTML et attributs CSS

Dans HTML, il y a principalement deux types de listes :

  • Liste non ordonnée (ul) - Les éléments de liste sont marqués par des points de liste
  • Liste ordonnée (ol) - Les éléments de liste sont marqués par des nombres ou des lettres

Les attributs de liste CSS vous permettent :

  • Définir différents marqueurs d'éléments de liste pour les listes ordonnées
  • Définir différents marqueurs d'éléments de liste pour les listes non ordonnées
  • Définir une image comme marqueur d'élément de liste
  • Ajouter une couleur de fond aux listes et aux éléments de liste

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

list-style-type L'attribut spécifie le type de marqueur d'élément de liste.

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

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

Remarque :Certaines valeurs sont utilisées pour les listes non ordonnées, tandis que d'autres sont utilisées pour les listes ordonnées.

L'image en tant que marqueur d'élément de liste

list-style-image L'attribut spécifie une image comme marqueur d'élément de liste :

Exemple

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

Essayez-le vous-même

Positionner le marqueur de l'élément de liste

list-style-position L'attribut spécifie la position du marqueur d'élément de liste (point de liste).

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

  • Café - Boisson infusée à partir de grains de café torréfiés
  • Thé
  • Coca-cola

"list-style-position: à l'intérieur;" Cela signifie que le point de liste sera à l'intérieur de l'élément de liste. Comme il fait partie de l'élément de liste, il deviendra une partie du texte et décalera le texte au début :

  • Café - Boisson infusée à partir de grains de café torréfiés
  • Thé
  • Coca-cola

Exemple

ul.a {
  list-style-position: à l'extérieur;
}
ul.b {
  list-style-position: à l'intérieur;
}

Essayez-le vous-même

Supprimer les réglages par défaut

list-style-type:none Ces propriétés peuvent également être utilisées pour supprimer les signes de section ou les points. Notez que les listes ont également des marges et des marges internes par défaut. Pour supprimer ce contenu, ajoutez marge:0 et marge-interne:0 :

Exemple

ul {
  list-style-type: none;
  marge: 0;
  marge-interne: 0;
}

Essayez-le vous-même

Liste - Propriété abrégée

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

Exemple

ul {
  list-style: carré à l'intérieur url("sqpurple.gif");
}

Essayez-le vous-même

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

  • list-style-type(Si l'image spécifiée pour list-style-image ne peut pas être affichée pour une raison quelconque, cette valeur de l'attribut sera affichée)
  • list-style-position(Spécifier si le marqueur d'élément de liste doit être affiché à l'intérieur ou à l'extérieur du flux de contenu)
  • list-style-image(Spécifier l'image comme marqueur d'élément de liste)

Si l'une des valeurs d'attribut mentionnées ci-dessus manque, la valeur par défaut de l'attribut manquant (s'il y en a une) sera insérée.

Définir le style de couleur de la liste

Nous pouvons également utiliser les couleurs pour définir le style des listes, afin qu'elles soient plus intéressantes.

Toute règle ajoutée à la balise <ol> ou <ul> affecte l'ensemble de la liste, tandis que les attributs ajoutés à la balise <li> affectent chaque élément de la liste :

Exemple

ol {
  arrière-plan: #ff9999;
  marge-interne: 20px;
}
ul {
  arrière-plan: #3399ff;
  marge-interne: 20px;
}
ol li {
  arrière-plan: #ffe5e5;
  marge-interne: 5px;
  marge-gauche: 35px;
}
ul li {
  arrière-plan: #cce5ff;
  marge: 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 montre comment créer une liste avec une bordure gauche rouge.
Liste de bordure de pleine largeur
Cet exemple montre comment créer une liste boudée sans puces.
Toutes les différentes marques de liste
Cet exemple montre toutes les différentes marques de liste de la CSS.

Toutes les propriétés de liste CSS

Propriété Description
list-style Propriété abrégée. Définir tous les attributs de la liste en une seule déclaration.
list-style-image Spécifier une image comme marqueur de liste.
list-style-position Définir la position du marqueur de liste (pointillés).
list-style-type Définir le type de marqueur de liste pour les éléments de liste.