Différences
Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédenteProchaine révisionLes deux révisions suivantes | ||
tutoriel:internet:dokuwiki:titres:number:start [2021/02/26 12:43] – créée admin | tutoriel:internet:dokuwiki:titres:number:start [2021/02/26 16:23] – [Affichage du compteur] admin | ||
---|---|---|---|
Ligne 3: | Ligne 3: | ||
====== Numérotation automatique avec des compteurs CSS ====== | ====== Numérotation automatique avec des compteurs CSS ====== | ||
+ | Pour la rédaction de documents, il est souvent utile de numéroter les sections et d' | ||
+ | |||
+ | Le protocole CSS 2.1 automatise la génération de numéros à l'aide de compteurs CSS, et cet article vous guidera dans leur utilisation. | ||
===== Pré-requis ===== | ===== Pré-requis ===== | ||
===== Première étape ===== | ===== Première étape ===== | ||
+ | |||
+ | La première étape consiste à réinitialiser le compteur et à le nommer. | ||
+ | |||
+ | Pour cela, on peut utiliser la propriété counter-reset, | ||
+ | body { | ||
+ | counter-reset: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Le compteur est remis à zéro pour l' | ||
+ | |||
+ | La propriété peut également prendre une deuxième valeur optionnelle qui définit la valeur de départ du compteur. | ||
+ | |||
+ | Voici comment faire pour que le compteur commence à compter à partir de 5 :<code css > | ||
+ | body { | ||
+ | counter-reset: | ||
+ | }</ | ||
===== Autres étapes ===== | ===== Autres étapes ===== | ||
+ | |||
+ | ==== Incrémentation du compteur ==== | ||
+ | |||
+ | Vous devez préciser quand le compteur augmente et de quelle valeur. | ||
+ | |||
+ | La propriété **counter-increment** permet de le spécifier. | ||
+ | |||
+ | La valeur par défaut de l' | ||
+ | body { | ||
+ | counter-reset: | ||
+ | } | ||
+ | h2 { | ||
+ | counter-increment: | ||
+ | }</ | ||
+ | h2 { | ||
+ | counter-increment: | ||
+ | }</ | ||
+ | |||
+ | La propriété autorise aussi les valeurs 0 ou négatives. | ||
+ | |||
+ | Si le compteur est remis à zéro puis incrémenté sur le même élément, il est d' | ||
+ | h2 { | ||
+ | counter-reset: | ||
+ | counter-increment: | ||
+ | }</ | ||
+ | |||
+ | ==== Affichage du compteur ==== | ||
+ | |||
+ | Une fois le compteur en place, il faut l' | ||
+ | |||
+ | Cela peut être fait avec le contenu généré en utilisant la fonction counter, et la pseudo classe :before :<code css > | ||
+ | body { | ||
+ | counter-reset: | ||
+ | } | ||
+ | h2 { | ||
+ | counter-increment: | ||
+ | } | ||
+ | h2:before { | ||
+ | counter(section) ' '; | ||
+ | }</ | ||
+ | |||
+ | Si vous utilisez un compteur et que vous l' | ||
+ | |||
+ | ==== Utilisation de deux ou plusieurs compteurs ==== | ||
===== Conclusion ===== | ===== Conclusion ===== |