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;
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 ”);
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;
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.