Stylez vos pages !

Styler une liste !

Les listes n'ont que très peu de propriétés spécifiques. Leur propriété principale se nomme list-style-type. Elle permet de contrôler l'aspect des puces et peut prendre les valeurs suivantes:

• disc
  
  
• circle
  
  
• square
  
  
• none
  
  

Dans certaines situations, il est nécessaire de pouvoir personnaliser les puces des listes. A ce dessein, les CSS proposent la propriété list-style-image qui permet d'indiquer qu'une image remplace la puce standard. Essayons-la pour la liste de Marc:

Remarquons que nous avons ajouté un peu de marge supplémentaire pour mettre un peu d'air à gauche des items de la liste ainsi qu'un peu d'espacement au-dessus de chaque item. Nous reviendrons sur les propriétés padding et margin dans la section suivante.

Numérotée ou non, une liste se style de la même façon. La différence est qu'une liste numérotée n'a pas de puce mais des chiffres ou des lettres. Les CSS permettent de choisir entre des chiffres décimaux, des chiffres romains ou des lettres dans l'ordre alphabétique grâce à la propriété list-style-type. Les valeurs usuelles sont decimal (chiffres décimaux), upper-alpha (lettres en majuscules), lower-alpha (lettres en minuscules), upper-roman (chiffres romains en majuscules) et lower-roman (chiffres romains en minuscules).