Listes

propriétés gérées:
list-style-image, list-style-position, list-style-type, content, counter-reset, counter-increment

list-style-type (aspect du marqueur)

  • disc,
  • circle,
  • square.
  • decimal : nombres décimaux, commençant à partir de 1
  • decimal-leading-zero : décimaux, précédés d'un zéro (ex. 01, 02,… 99)
  • lower-roman : chiffres romains minuscules (i, ii, iii, iv, v, etc.)
  • upper-roman : chiffres romains majuscules (I, II, III, IV, V, etc.)

list-style-position (position du marqueur)

  • outside : le marqueur est placé en dehors de la boîte de texte.
  • inside : le marqueur est placé à l'intérieur de la boîte de texte, la première ligne étant décalée à droite.

list-style-image (image de liste)

  • Défaut annule les réglages précédement réalisés,
  • None veut dire que la liste n'a aucune image,
  • Définir image permet de remplacer le marqueur par cette image.

Effacer réinitialiser les réglages de styles

Cliquez ce bouton pour effacer les réglages présents.

Content et gestion de compteurs

content

Cette propriété est utilisée en conjonction avec les pseudo-éléments :before et :after pour générer un contenu dans un document. Les valeurs possibles sont, notamment :

content

Exemples de puces avec la propriété content CSS :

li {list-style-type: none;}
li:before { content: "- "; }
➥ affiche la chaîne de caractères "- ".
li:before { padding-top:0; padding-right:20px; padding-bottom:6px; padding-left:20px; content:counter(monCompteur) url("../images/puce.png"); } ➥ affiche un compteur et une image de puce, ajustée au moyen du padding.

counter-reset

La propriété 'counter-reset' contient une liste de noms de compteurs, un ou plusieurs, chacun d'eux étant suivi d'un entier facultatif. Cet entier indique la valeur que prend un compteur à chaque fois que survient l'élément. Par défaut, celui-ci a une valeur nulle.

counter-reset: réinitialisation du compteur

Exemple de reset :

ol {counter-reset: monCompteur;} ➥ initialise et nomme le compteur monCompteur

counter-increment

La propriété 'counter-increment' accepte un ou plusieurs noms de compteurs (des identifiants), chacun d'eux étant suivi d'un entier facultatif. Cet entier indique la valeur de l'incrémentation du compteur à chaque fois que survient l'élément. L'incrémentation par défaut est d'une unité. Les entiers nuls ou négatifs sont admis.

counter-increment: incrémentation du compteur

Exemple d'increment :

li { list-style-type: none; counter-increment: monCompteur; } ➥ incrémente le compteur monCompteur à chaque nouveau li.