Listes CSS

Les propriétés de liste CSS vous permettent de placer, de changer l'icône de l'élément de liste ou d'utiliser une image en tant qu'icône de l'élément de liste.

Listes CSS

Dans un sens, tout contenu qui n'est pas textuel peut être considéré comme une liste. Recensement, système solaire, arbre généalogique, menu de visite, même tous vos amis peuvent être représentés comme une liste ou une liste de listes.

Comme les listes sont si variées, cela rend les listes très importantes, donc, le fait que les styles de liste en CSS ne soient pas aussi riches est vraiment une grande déception.

Type de liste

Pour influencer le style de la liste, la méthode la plus simple (et la plus complète) consiste à changer le type d'icône.

Par exemple, dans une liste non ordonnée, l'icône de l'élément de liste (marker) est un point apparaissant à côté de chaque élément de liste. Dans une liste ordonnée, l'icône pourrait être une lettre, un chiffre ou un symbole d'un système de numérotation différent.

Pour modifier le type d'icône utilisé pour les éléments de liste, vous pouvez utiliser l'attribut list-style-type:

ul {list-style-type : square}

La déclaration ci-dessus définit l'icône de l'élément de liste dans une liste non ordonnée comme étant un carré.

Image de l'élément de liste

Parfois, les icônes conventionnelles ne sont pas suffisantes. Vous pourriez vouloir utiliser une image pour chaque icône, ce qui peut être réalisé en utilisant list-style-image L'attribut permet de faire :

ul li {list-style-image : url(xxx.gif)}

Il suffit simplement d'utiliser une valeur url() pour utiliser une image comme icône.

Position de l'icône de liste

CSS2.1 peut déterminer si l'icône apparaît à l'extérieur ou à l'intérieur du contenu de la liste. Cela est réalisé en utilisant list-style-position Terminé.

Style de liste abrégé

Pour simplifier, les 3 propriétés de style de liste ci-dessus peuvent être combinées en une propriété pratique :list-styleComme ceci :

li {list-style : url(example.gif) square inside}

Les valeurs de list-style peuvent être répertoriées dans n'importe quel ordre et peuvent toutes être ignorées. Tant qu'une valeur est fournie, les autres seront remplies avec leurs valeurs par défaut.

Exemple d'instance de liste CSS :

Les balises de liste différentes dans une liste non ordonnée
Cet exemple montre tous les types d'icônes de liste différents dans CSS.
Les éléments de liste de type différent dans une liste ordonnée
Cet exemple montre tous les types d'icônes de liste différents dans CSS.
Tous les types de styles de liste
Cet exemple montre tous les types d'icônes de liste différents dans CSS.
Utiliser une image comme marqueur de liste
Cet exemple montre comment utiliser une image comme marqueur de liste.
Placement des marqueurs de liste
Cet exemple montre où placer les marqueurs de liste.
Définir toutes les propriétés de liste dans une déclaration
Cet exemple montre comment regrouper toutes les propriétés de liste dans une propriété abrégée.

Propriétés de liste CSS (list)

Propriété Description
list-style Propriété abrégée. Utilisée pour regrouper toutes les propriétés de liste dans une seule déclaration.
list-style-image Définir l'image comme icône de liste.
list-style-position Définir la position de l'icône de liste dans la liste.
list-style-type Définir le type d'icône de liste de l'élément.
marker-offset