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.
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 :
|
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)
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 :
|
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.
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
p.numerote:before {
content: counter(mynum) " : ";
counter-increment: mynum;
font-weight: bold;}
Le résultat ressemble à ceci :
|
| 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
Paragraphes numérotés 1 : Lorem ipsum 2 : Dolor sit 3 : Amet consectetuer 4 : Magna aliquam 5 : Autem veleum |
Ajoutez une règle à votre feuille de style pour numéroter les océans en chiffres romains de i à v :
|
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.