Nous abordons ici la stylisation des listes. Avant d'aller plus loin, deux remarques importantes sont de mise.
Tout d'abord, il faut noter que les propriétés vues dans cette page sont applicables aux éléments li. Cela signifie qu'il esi possible d’avoir une liste où les éléments li ont
des propriétés différentes. Il est néanmoins permis d’appliquer plutôt ces propriétés aux éléments ol ou ul. Dans ce cas, cela revient à appliquer ces propriétés
uniformément à tous les enfants li de cette liste.
Il faut ensuite remarquer que les propriétés CSS qu’on
applique aux éléments li ne tiennent absolument pas compte de quelle sorte de liste (ol ou
ul) ces éléments sont enfants. Contrairement à ce qui se passe en HTML, quand on utilise le CSS pour styliser une liste, on peut très bien avoir une liste ordonnée avec des puces
ou une liste non-ordonnée avec des numéros. On peut même avoir une liste où les puces et les numéros se retrouvent simultanément ! Il faut donc s'assurer d'être consistant.
Le tableau suivant donne les propriétés des listes parmis les plus utiles. La valeur inherit pour une propriété indique que sa valeur doit être héritée de l'élément parent;
les valeur par défaut sont indiquées en gras.
| Propriété | Principales valeurs possibles |
|---|---|
| list-style-type | circle | disc | square | decimal | decimal-leading-zero | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit |
| list-style-image | url(URL de l'image) | none | inherit |
| list-style-position | inside | outside | inherit |
| list-style | type | image | position | type position | type image position (défaut: disk none outside) | none | inherit |
Le sens de ces déclarations est comme suit :
list-style-type spécifie le genre de puce (cercle, disque, carré) ou le genre de numérotage utilisé. Parmi les numérotations possibles, on retrouve
decimal)decimal-leading-zero)lower-alpha, lower-latin)lower-greek)lower-roman)upper-alpha, upper-latin)upper-roman)et bien d'autres.
list-style-image sert lorsqu'on veut remplacer les puces ou les numéros par des images, par exemple :
list-style-image: url(../images/puce.gif);
list-style-position indique si, lorsque le navigateur aligne les éléments li, il doit considérer que le contenu inclut (inside) ou n'inclut pas
(outside) la puce ou le numéro.
list-style est une propriété combinée qui permet de spécifier simultanément le type de liste, l'image à utiliser et la position. Il y a plusieurs combinaisons possibles qui sont données
dans le tableau.
Autres propriétés : Il existe d'autres propriétés qui ne sont pas mentionnées ici, qui permettent par exemple de numéroter automatiquement les sections et sous-sections d'une page web.