backgroundpolice et texteborduresmargin et paddingposition et blocslistescolonnespaginationboîtes flexiblesoutil crayon

Listes

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

aspect du marqueur list-style-type ▾

  • 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.)

position du marqueur list-style-position ▾

  • 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.

image de liste list-style-image ▾

  • 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

Cliquez le bouton Effacer ❌ 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 { content:"☞ "counter(monCompteur);); } ➥ affiche un compteur précédé du signe ☞ ;
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 de numérotation automatique des titres sur 3 niveaux

<style type="text/css">
body {counter-reset:cH1;} /* compteur titre 1 à zéro */
h1 {counter-increment:cH1; counter-reset:cH2;} /* incrémente H1 et compteur titre 2 à zéro */
h2 {counter-increment:cH2; counter-reset:cH3;} /* incrémente H2 et compteur titre 3 à zéro */
h3 {counter-increment:cH3;} /* incrémente H3 */
h1:before {content:counter(cH1) " "; }
h2:before {content:counter(cH1) "." counter(cH2) " "; } /* compteurs séparés par un point */
h3:before {content:counter(cH1) "." counter(cH2) "." counter(cH3) " "; }
</style>