Aller au contenu

Le langage CSS/Listes

Un livre de Wikilivres.

Les listes en HTML

[modifier | modifier le wikicode]

Les listes en HTML sont de différents types :

  • Liste non-ordonnée (Unordered List) : La balise <ul> est utilisée et contient une série d'item encapsulés dans des balises <li>. Chaque item est précédé d'une puce.
  • Liste ordonnée (Ordered List) : La balise <ol> est utilisée et contient une série d'item encapsulés dans des balises <li>. Chaque item est numéroté.
  • Liste de définitions (Definition List) : La balise <dl> est utilisée et contient une série d'item sous la forme de paires termes-définition encapsulées respectivement dans des balises <dt> (Terme) et <dd> (Description).

Numérotation et puces des items de la liste

[modifier | modifier le wikicode]

La propriété list-style-type s'applique aux balises <li> et permet de modifier le style de numérotation dans une liste ordonnée[1].

Listes ordonnées

[modifier | modifier le wikicode]

Par défaut la numérotation HTML s'incrémente automatiquement en chiffres arabes :

<ol>
<li>Premier</li>
<li>Deuxième</li>
...
<li value=99>Énième</li>
</ol>

donne :

  1. Premier
  2. Deuxième
  3. ...
  4. Énième


De plus, elle peut avoir l'une des valeurs suivantes (liste non exhaustive) pour les listes ordonnées :

upper-roman
Numéro en chiffres romains, en utilisant des majuscules,
lower-roman
Numéro en chiffres romains, en utilisant des minuscules,
upper-latin
Lettre de l'alphabet latin, en utilisant des majuscules,
lower-latin
Lettre de l'alphabet latin, en utilisant des minuscules.

Exemple, en définissant un style :

.list-upper-roman li {  list-style-type: upper-roman;  }
En utilisant le style défini dans la feuille de style :
<div class="list-upper-roman">
<ul>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
<li>Quatrième</li>
<li>Cinquième</li>
</ul>
</div>
ou en appliquant directement un style à chaque item :
<ol>
<li style="list-style-type: katakana-iroha">Premier
<li style="list-style-type: katakana-iroha">Deuxième
<li style="list-style-type: katakana-iroha">Troisième
<li style="list-style-type: katakana-iroha">Quatrième
<li style="list-style-type: katakana-iroha">Cinquième
</ol>

Cela donne :


En utilisant le style défini dans la feuille de style :

  1. Premier
  2. Deuxième
  3. Troisième
  4. Quatrième
  5. Cinquième

ou en appliquant directement un style à chaque item :

  1. Premier
  2. Deuxième
  3. Troisième
  4. Quatrième
  5. Cinquième

Listes non ordonnées

[modifier | modifier le wikicode]

Elle peut avoir l'une des valeurs suivantes (liste non exhaustive) pour les listes non ordonnées :

disc
Disque plein (par défaut),
circle
Cercle (vide),
square
Carré,
none
Rien.

Exemple :

<ul>
<li style="list-style-type: disc;">disc
<li style="list-style-type: circle;">circle
<li style="list-style-type: square;">square
<li style="list-style-type: none;">none
<li style="list-style-type: inherit;">inherit
</ul>

Cela donne :


  • disc
  • circle
  • square
  • none
  • inherit

Si l'on veut utiliser un autre caractère, typiquement un tiret cadratin ou demi-cadratin, il faut utiliser la propriété :before, par exemple

ul {
  list-style-type: none;
}

ul li:before {
  content: "\2014";
  position: absolute;
  margin-left: -1.5em;
}

Cela donne :


  • item 1
  • item 2
  • item 3

Utiliser une image comme puce

[modifier | modifier le wikicode]

La propriété list-style-image peut être utilisée pour spécifier l'URL d'une image à utiliser comme puce pour les items de la liste.

<li style="list-style-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikibooks-logo.svg/30px-Wikibooks-logo.svg.png);">image

Ce qui donne :

  • image