Le langage CSS/Listes

Le langage CSS

1. Introduction
   • Premier exemple
   • Structure et syntaxe
   • Les sélecteurs
   • Valeurs et unités utilisées
2. Mise en forme
   • Texte
   • Fonds, bordures, marges et espacements
   • Listes
   • Tableaux
   • Héritage
3. Mise en page
   • Le positionnement des éléments
   • Le modèle de boîte
   • Transformation géométrique
4. Pour aller plus loin
   • Techniques avancées
   • Navigateurs et débogage
   • CSS 3
   • Bootstrap
5. Annexes
   • Glossaire
   • Mots réservés
   • Notions de design et de colorimétrie
   • Interface HTML

Les listes en HTML

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

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.

Listes ordonnées

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
...
99. É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

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

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