# Le langage CSS/Listes

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

## 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 :
donne :
* Premier
* Deuxième
* É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 :
Cela donne :
En utilisant le style défini dans la feuille de style :
* Premier
* Deuxième
* Troisième
* Quatrième
* Cinquième
ou en appliquant directement un style à chaque item :
* Premier
* Deuxième
* Troisième
* Quatrième
* 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 :
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
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.
Ce qui donne :
* image

## Références

* ↑ http://www.w3schools.com/cssref/pr_list-style-type.asp