Listes

 

Cette page explique comment utiliser CSS pour spécifier l'apparence des listes.

Vous créerez un nouveau document d'exemple contenant des listes, et une nouvelle feuille de style habillant celles-ci.

Information : les listes

Si vous avez relevé le challenge sur la page précédente (Contenu), vous avez vu comment on ajoutait du contenu devant un élément pour l'afficher comme un élément de liste.

Mais CSS fournit des propriétés spécialement conçues pour les listes. Il est généralement plus aisé d'utiliser ces propriétés lorsque c'est possible.

Pour spécifier le style d'une liste, utilisez la propriété list-style pour changer le type de marque.

Le sélecteur dans votre règle CSS peut soit sélectionner les éléments de la liste (par exemple example, LI), ou il peut sélectionner l'élément de liste parent (par exemple, UL) afin que les éléments héritent du style.

Listes non ordonnées

Dans une liste non ordonnée , chaque élément de la liste est marqué de la même façon.

CSS propose trois types de marques. Voici comment votre navigateur les affiche :

  • disc (rond plein)
  • circle (cercle)
  • square (carr√©)

Vous pouvez également spécifier l'URL d'une image.

Exemple
Ces r√®gles sp√©cifient diff√©rentes marques pour diff√©rentes classes d'√©l√©ments de liste :
li.ouvert {list-style: circle;}
li.ferme {list-style: disc;}

Lorsque ces classes sont utilis√©es dans une liste, elle diff√©rencient les √©l√©ments ouverts et ceux qui sont ferm√©s :

<UL>
  <LI class="ouvert">Lorem ipsum</LI>
  <LI class="ferme">Dolor sit</LI>
  <LI class="ferme">Amet consectetuer</LI>
  <LI class="ouvert">Magna aliquam</LI>
  <LI class="ferme">Autem veleum</LI>
</UL>

Le r√©sultat peut ressembler √† ceci :

  • Lorem ipsum
  • Dolor sit
  • Amet consectetuer
  • Magna aliquam
  • Autem veleum

Listes ordonnées

Dans une liste ordonnée , chaque élément de la liste est marqué différemment afin de montrer sa position dans la séquence.

Utilisez la propri√©t√© list-style pour sp√©cifier le type de marque :

  • decimal (chiffres d√©cimaux)
  • lower-roman (chiffres romains minuscules)
  • upper-roman (chiffres romains majuscules)
  • lower-latin (lettres minuscules)
  • upper-latin (lettres majuscules)
Exemple
Cette règle spécifie que les éléments OL de la classe info sont identifiés par des lettres majuscules.
ol.info {list-style: upper-latin;}

Les √©l√©ments LI de la liste h√©ritent de ce style :

  1. Lorem ipsum
  2. Dolor sit
  3. Amet consectetuer
  4. Magna aliquam
  5. Autem veleum
Plus de détails
La propriété list-style est un raccourci. Dans des feuilles de style complexes, il peut être préférable d'utiliser des propriétés séparées pour régler les différentes valeurs. Pour des détails sur ces propriétés séparées, consultez Lists dans la spécification CSS.

Si vous utilisez un langage de balisage comme HTML qui fournit des balises conventionnelles pour les listes ordonnées (OL) et non ordonnées (UL), il est préférable d'utiliser les balises de la manière prévue. Cependant, il est possible d'utiliser CSS pour que des listes UL s'affichent ordonnées et que des listes OL s'affichent non ordonnées si vous le désirez.

Les navigateurs n'implémentent pas tous de la même façon les styles de liste. Ne vous attendez pas à obtenir un résultat identique pour une même feuille de style dans tous les navigateurs.

Compteurs

Note :  Certains navigateurs ne g√®rent pas les compteurs.

Vous pouvez utiliser les compteurs pour numéroter toutes sortes d'éléments, pas seulement des éléments de liste. Par exemple, dans certains documents, vous pouvez avoir besoin de numéroter les titres ou les paragraphes.

Pour spécifier la numérotation, vous avez besoin d'un compteur (counter) auquel vous devrez donner un nom.

Dans un √©l√©ment plac√© avant l'endroit o√Ļ le comptage doit commencer, remettez le compteur √† z√©ro √† l'aide de la propri√©t√© counter-reset et le nom de votre compteur. Le parent des √©l√©ments √† compter est un bon endroit pour faire cela, mais vous pouvez utiliser n'importe quel √©l√©ment qui pr√©c√®de votre liste.

Dans chaque √©l√©ment o√Ļ le compteur doit augmenter, utilisez la propri√©t√© counter-increment et le nom de votre compteur.

Pour afficher votre compteur, ajoutez :before ou :after au sélecteur et utilisez la propriété content (comme vous avez fait à la page précédente, Contenu).

Dans la valeur de la propriété content, spécifiez counter() avec le nom de votre compteur. Optionellement, spécifiez aussi un type. Ceux-ci sont les mêmes que dans la section Listes ordonnées ci-dessus.

Normalement, l'élément qui affiche le compteur l'incrémente également.

Exemple
Cette r√®gle initialise un compteur pour chaque √©l√©ment H3 de la classe numerote :
h3.numerote {counter-reset: mynum;}

Cette r√®gle affiche et incr√©mente le compteur pour chaque √©l√©ment P de la classe numerote :

p.numerote:before {
  content: counter(mynum) " : ";
  counter-increment: mynum;
  font-weight: bold;}

Le r√©sultat ressemble √† ceci :

Titre

1 : Lorem ipsum

2 : Dolor sit

3 : Amet consectetuer

4 : Magna aliquam

5 : Autem veleum

Plus de détails
Vous ne pouvez pas utiliser les compteurs s'il n'est pas certain que tous les lecteurs de votre document ont un navigateur qui permet de les afficher.

Si cela s'avère possible, un de leurs avantages est que vous pouvez styler les compteurs d'une façon différente des éléments de liste. Dans l'exemple ci-dessus, les compteurs sont en gras mais les éléments de liste ne le sont pas.

Vous pouvez √©galement utiliser les compteurs de fa√ßon plus complexe ‚ÄĒ par exemple, pour num√©roter des, titres, sous-titres et paragraphes dans des documents formels. Pour plus de d√©tails, consultez Automatic counters and numbering dans la sp√©cification CSS.

Action : listes styl√©es

Cr√©ez un nouveau document HTML, doc2.html. Copiez et collez le contenu ci-dessous, en faisant d√©filer pour vous assurer de l'obtenir en entier :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Document exemple 2</TITLE>
<LINK rel="stylesheet" type="text/css" href="style2.css">
</HEAD>
<BODY>

<H3 id="oceans">Les océans</H3>
<UL>
<LI>Arctique</LI>
<LI>Atlantique</LI>
<LI>Pacifique</LI>
<LI>Indien</LI>
<LI>Antarctique</LI>
</UL>

<H3 class="numerote">Paragraphes numérotés</H3>
<P class="numerote">Lorem ipsum</P>
<P class="numerote">Dolor sit</P>
<P class="numerote">Amet consectetuer</P>
<P class="numerote">Magna aliquam</P>
<P class="numerote">Autem veleum</P>

</BODY>
</HTML>

Cr√©ez une nouvelle feuille de style, style2.css. Copiez et collez le contenu ci-dessous :

/* paragraphes numérotés */
h3.numerote {counter-reset: mynum;}

p.numerote:before {
  content: counter(mynum) " : ";
  counter-increment: mynum;
  font-weight: bold;}

Si la mise en page et les commentaires ne sont pas √† votre go√Ľt, modifiez-les.

Ouvrez le document dans votre navigateur. Si votre navigateur g√®re les compteurs, vous verrez quelque chose comme ci-dessous. Sinon, vous ne verrez pas les nombres (et probablement m√™me pas les deux points) :

Les océans

  • Arctique
  • Atlantique
  • Pacifique
  • Indien
  • Antarctique

Paragraphes numérotés

1 : Lorem ipsum

2 : Dolor sit

3 : Amet consectetuer

4 : Magna aliquam

5 : Autem veleum

 

Challenges
Ajoutez une r√®gle √† votre feuille de style pour num√©roter les oc√©ans en chiffres romains de i √† v :

Les océans

  • Arctique
  • Atlantique
  • Pacifique
  • Indien
  • Antarctique


Si votre navigateur g√®re les compteurs, modifiez votre feuille de style pour identifier les titres avec des lettres majuscules entre parenth√®ses comme ceci :

(A) Les océans

. . .

(B) Paragraphes numérotés

. . .

 

Pour continuer

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

Lorsque votre navigateur affiche votre document, il crée de l'espace autour des éléments lorsqu'il les dispose sur la page.

La page suivante explique comment utiliser CSS pour travailler sur les formes sous-jacentes aux √©l√©ments : Bo√ģtes.