Formation 36

Mise en forme des listes

Type de liste : list-style-type

Pour chaque liste, vous pouvez définir le type de puce ou de numérotation à employer. Les différents types possibles sont :

  • disque (disc en CSS) - c’est le type de puce employé par défaut

  • cercle (circle)

  • carré (square)

  • décimal (decimal)

  • romain minuscule (lower-roman)

  • romain majuscule (upper-roman)

  • alpha minuscule (lower-alpha)

  • alpha majuscule (upper-alpha)

  • aucune (none)

D’autres styles de puces existent mais sont très peu employés. Voici un aperçu du rendu que l’on obtient pour chaque type de puces :

 


 

Dans le code CSS, vous pouvez imposer un type de puce comme ceci :

list-style-type: disc;

Sélectionner une image comme puce de liste : list-style-image

Si les puces proposées ne vous conviennent pas, le langage CSS vous donne la possibilité d’utiliser un fichier image en tant que puce. Bien évidemment, cette image doit être de petite taille (< 16 px de côté) pour que la puce s’insère parfaitement devant le texte.

 

Directement dans le code CSS, vous pouvez saisir le chemin d’accès (absolu ou relatif) à l’image de la puce.

list-style-image: url(“ dossier/fichier.gif ”);

Retrait des listes : list-style-position

En HTML, les listes sont par défaut légèrement en retrait par rapport au reste du texte. C’est la position dite outside en CSS. Vous pouvez opter pour la position sans retrait, inside.

list-style-position: inside;

Propriété globale des listes : list-style

Tout comme pour les bordures, les marges intérieures et extérieures, il existe une propriété globale pour définir en une ligne de code les particularités d’une liste : c’est la propriété list-style.

 

Comme attributs, vous devez spécifier au moins l’une des caractéristiques suivantes : type de puce ou image personnalisée, position.

list-style: inside decimal;



Pour plus d'informations, vous pouvez nous contacter par mail ou aux coordonnées suivantes :


Contacter CS Formation

 

Tutos et cours en ligne

HTML / CSS