Les listes - CSS
Noter ce cours :
Les listes peuvent servir à plein de choses en CSS : menus, barres d'outils, table des matières...On dispose pour mettre en forme ces listes de différentes propriétés et valeurs.
Numérotation :
On utilise pour modifier la numérotation ou/et l'affichage des puces la propriété list-style-type.
Cette propriété peut prendre les valeurs suivantes :
- decimal : affiche les puces sous forme de nombres décimaux
- decimal-leading-zero : Nombres de deux décimales (01,02, etc...)
- lower-roman : Chiffres romains minuscules
- upper-roman : Chiffres romains majuscules
- lower-latin : lettres minuscules (forme alphabétique)
- upper-latin : lettres majuscules (forme alphabétique)
- lower-greek : lettres grecques (forme alphabétique)
Exemple :
ul{
list-style-type:decimal;
}
Mettre des images (à la place des puces rondes ou carrées habituelles):
On utilise la propriété list-style-image pour modifier les puces par défaut.
Exemple :
ul{
list-style-image:url(puce.gif);
}
Position de la boîte de liste :
Pour modifier la position de l'emplacement des puces on utilise la propriété list-style-position.
Elle peut prendre deux valeurs :
- inside : la liste est positionnée dans la boîte conteneur
- outside : la liste est positionnée à l'extérieur de la boîte conteneur
Exemple :
ul{
list-style-position:outside;
}