Les listes - CSS

Noter ce cours :

Liens sponsorisés :

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;
}

Vous avez aimé cet article intitulé Les listes - CSS ? Partagez-le !
Vulgarisation-informatique.com
Cours en informatique & tutoriels