CSS Listes

Les propriétés de la liste CSS vous permet de:

• Définir les différents éléments de la liste des marqueurs pour les listes ordonnées
• Définir les différents éléments de la liste des marqueurs pour les listes à puces
• De définir une image comme marqueur élément de la liste

---

Liste

En HTML, il existe deux types de listes:

• les listes à puces - les éléments de la liste sont marquées avec des balles
• des listes ordonnées - les éléments de la liste sont identifiées par des numéros ou des lettres

Avec CSS, les listes peuvent être de style plus loin, et les images peuvent être utilisées comme marqueur élément de la liste.

---

Différents marqueurs éléments de liste

Le type de marqueur élément de la liste est spécifiée avec la propriété list-style-type:

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 vous-même »

Certaines des valeurs sont données pour les listes à puces, et quelques-uns pour les listes ordonnées.

---

Une image comme marqueur article sur la liste

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

Exemple

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

Essayez vous-même »

L'exemple ci-dessus ne s'affiche pas également dans tous les navigateurs. IE et Opera affichera l'image-repère un peu plus élevé que Firefox, Chrome et Safari.

Si vous voulez que l'image-marqueur pour être placé aussi dans tous les navigateurs, une solution Crossbrowser est expliqué ci-dessous.

Solution Crossbrowser

L'exemple suivant affiche l'image-repère aussi dans tous les navigateurs:

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 vous-même »

Exemple expliqué:

• Pour ul:
  • Réglez le list-style-type à none pour supprimer le marqueur élément de la liste
  • Réglez la fois padding et une marge à 0px (pour compatibilité inter-navigateur)
• Pour tous les li ul:
  • Définissez l'URL de l'image, et montrer qu'une seule fois (no-repeat)
  • Positionnez l'image où vous le souhaitez (à gauche et en bas 0px 5px)
  • Positionner le texte dans la liste avec padding-left

---

Liste - propriété raccourcie

Il est également possible de spécifier toutes les propriétés de la liste dans un seul, une seule propriété. C'est ce qu'on appelle un raccourci.

La propriété raccourcie utilisé pour les listes, est la propriété list-style:

Exemple

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

Essayez vous-même »

Lorsque vous utilisez le raccourci de propriété, l'ordre des valeurs sont les suivantes:

• list-style-type de
• list-style-position (pour une description, voir le tableau ci-dessous les propriétés CSS)
• list-style-image

Il n'a pas d'importance si l'une des valeurs ci-dessus sont manquantes, aussi longtemps que le reste sont dans l'ordre spécifié.

---

Exemples

Tous les différents list-item marqueurs pour les listes
Cet exemple montre toutes les différentes list-item marqueurs en CSS.

---

Tous les Propriétés de la liste CSS

Propriété	Description
list-style	Définit toutes les propriétés pour une liste dans une déclaration
list-style-image	Indique une image en tant que marqueur d'élément de liste
list-style-position de	Indique si les marqueurs list-item doit apparaître à l'intérieur ou à l'extérieur du flux de contenu
list-style-type de	Indique le type de liste-élément marqueur