Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédenteProchaine révisionLes deux révisions suivantes | ||
tutoriel:internet:dokuwiki:titres:number:start [2021/02/26 16:04] – [Autres étapes] admin | tutoriel:internet:dokuwiki:titres:number:start [2021/02/26 16:23] – [Affichage du compteur] admin | ||
---|---|---|---|
Ligne 12: | Ligne 12: | ||
La première étape consiste à réinitialiser le compteur et à le nommer. | La première étape consiste à réinitialiser le compteur et à le nommer. | ||
- | Pour cela, on peut utiliser la propriété counter-reset, | + | Pour cela, on peut utiliser la propriété counter-reset, |
body { | body { | ||
counter-reset: | counter-reset: | ||
Ligne 22: | Ligne 22: | ||
La propriété peut également prendre une deuxième valeur optionnelle qui définit la valeur de départ du compteur. | 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 :< | + | Voici comment faire pour que le compteur commence à compter à partir de 5 :< |
body { | body { | ||
counter-reset: | counter-reset: | ||
Ligne 30: | Ligne 30: | ||
==== Incrémentation du compteur ==== | ==== 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 ===== |