list-style |
Style de liste |
|---|---|
| CSS |
Syntaxe
| list-style: paramètres; |
Paramètres
| Paramètre | Description | |
|---|---|---|
| list-style-image | Ce paramètre de propriété permet d'indiquer le chemin URL du fichier d'image : | |
| Valeur | Description | |
| url(image.ext) | Cette valeur permet d'indiquer le nom de l'image. | |
| none | Cette valeur permet d'indiquer qu'il n'y a pas d'image. | |
| list-style-position | Ce paramètre de propriété permet d'indiquer le type de positionnement : | |
| Valeur | Description | |
| inside | Cette valeur permet d'indiquer de mettre à l'intérieur le marqueur et le texte. | |
| outside | Cette valeur permet d'indiquer de garder le marqueur à la gauche du texte. | |
| list-style-type | Ce paramètre de propriété permet d'indiquer le type de liste : | |
| Valeur | Description | |
| armenian | Cette valeur permet d'indiquer un format de points de liste de nombres Arménien traditionnel. | |
| circle | Cette valeur permet d'indiquer un format de points de liste en cercle | |
| cjk-ideographic | Cette valeur permet d'indiquer un format de points de liste de nombres idéographique. | |
| decimal | Cette valeur permet d'indiquer un format de points de liste d'ordre décimal (1, 2, 3, 4,...). | |
| decimal-leading-zero | Cette valeur permet d'indiquer un format de points de liste d'ordre décimal avec des zéros pour composé pour les chiffres manquants (01, 02, 03, 04,...). | |
| disc | Cette valeur permet d'indiquer un format de points de liste en disque | |
| georgian | Cette valeur permet d'indiquer un format de points de liste de nombres Georgien traditionnel (an,ban, gan,...). | |
| hebrew | Cette valeur permet d'indiquer un format de points de liste de nombres hébreux traditionnel. | |
| hiragana | Cette valeur permet d'indiquer une liste d'ordre hiragana en minuscule (a, i, u, e, o, ka, ki,...). | |
| hiragana-iroha | Cette valeur permet d'indiquer une liste d'ordre hiragana-iroha en minuscule (i, ro, ha, ni, ho, he, to,...). | |
| katakana | Cette valeur permet d'indiquer une liste d'ordre katakana en majuscule (A, I, U, E, O, KA, KI,...). | |
| katakana-iroha | Cette valeur permet d'indiquer une liste d'ordre katakana-iroha en majuscule (I, RO, HA, NI, HO, HE, TO,...). | |
| lower-alpha | Cette valeur permet d'indiquer une liste d'ordre alphabétique en minuscule (a, b, c, d,...). | |
| lower-greek | Cette valeur permet d'indiquer une liste d'ordre grecque en minuscule (alpha, beta, gamma,...). | |
| lower-latin | Cette valeur permet d'indiquer une liste d'ordre latin en minuscule (a, b, c, d,...). | |
| lower-roman | Cette valeur permet d'indiquer une liste d'ordre numérique en chiffre roman en minuscule (i, ii, iii, iv,...). | |
| none | Cette valeur permet d'indiquer qu'il n'y a pas de point pour la liste. | |
| square | Cette valeur permet d'indiquer un format de points de liste en carré | |
| upper-roman | Cette valeur permet d'indiquer une liste d'ordre numérique en chiffre roman en majuscule (I, II, III, IV,...). | |
| upper-alpha | Cette valeur permet d'indiquer une liste d'ordre alphabétique en majuscule (A, B, C, D,...). | |
| upper-latin | Cette valeur permet d'indiquer une liste d'ordre latin en majuscule (A, B, C, D,...). | |
| ... | ... | |
Description
Cette propriété permet de fixer le format de la liste.
Remarques
- Propriété raccourcie pour les listes : list-style est une propriété raccourcie permettant de définir en une seule déclaration trois propriétés : list-style-type (type de puces ou de numérotation), list-style-position (position des puces) et list-style-image (image personnalisée pour les puces). Cela simplifie la gestion des styles de listes.
- Options pour list-style-type : La propriété list-style-type permet de définir différents styles de puces ou de numérotations, comme disc, circle, square, decimal, ou encore roman. Elle est particulièrement utile pour personnaliser l'apparence des listes tout en restant accessible et légère en termes de performances.
- Personnalisation avec list-style-image : L'utilisation de list-style-image permet d'ajouter une image personnalisée en tant que puce. Cela donne une grande liberté de design. Cependant, il est recommandé de prévoir des valeurs de secours (list-style-type) pour garantir une apparence fonctionnelle si l'image ne se charge pas.
- Contrôle de la position des puces : Avec list-style-position, on peut choisir entre inside (les puces sont alignées avec le texte et déplacées à l'intérieur de la marge) et outside (les puces restent en dehors de la marge, le comportement par défaut). Cette propriété influence directement l'alignement visuel.
- Héritage implicite : La propriété list-style n'est pas héritée par défaut, mais ses sous-propriétés peuvent être explicitement héritées avec inherit. Cela peut être utile pour maintenir un style de liste cohérent dans des sous-sections ou des composantes.
- Compatibilité et valeurs par défaut : La prise en charge de list-style est très large dans les navigateurs modernes. Par défaut, les listes non ordonnées utilisent disc, tandis que les listes ordonnées utilisent decimal. Il est important de vérifier les styles par défaut du navigateur pour éviter des comportements inattendus.
- Combinaison avec display : Lorsque display: inline ou display: flex est appliqué à une liste, les puces ou numérotations définies par list-style disparaissent automatiquement. Dans ces cas, il peut être nécessaire d'utiliser des styles supplémentaires pour conserver une apparence similaire.
- Accessibilité des styles de liste : Les listes stylées avec list-style restent accessibles aux lecteurs d'écran, surtout lorsqu'on utilise des valeurs standards pour list-style-type. En revanche, des images ou des éléments personnalisés pour simuler les puces peuvent nuire à l'accessibilité et nécessitent des descriptions alternatives.
Voir également
Articles - URL (Uniform Resource Locator)
Dernière mise à jour : Dimanche, le 20 décembre 2015