Les listes

Nous abordons ici la stylisation des listes. Avant d'aller plus loin, deux remarques importantes sont de mise.

Remarques importantes

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.

Principales propriétés

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és les plus utiles des listes

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

  • 1, 2, 3, … (decimal)
  • 01, 02, 03, … (decimal-leading-zero)
  • a, b, c, … (lower-alpha, lower-latin)
  • α, β, γ, … (lower-greek)
  • i, ii, iii, … (lower-roman)
  • A, B, C, … (upper-alpha, upper-latin)
  • I, II, III, … (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 automa­tiquement les sections et sous-sections d'une page web.

Accueil