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:12] – [Incrémentation du compteur] admin | tutoriel:internet:dokuwiki:titres:number:start [2021/02/26 16:31] – [Utilisation de compteurs imbriqués] 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 35: | Ligne 35: | ||
La propriété **counter-increment** permet de le spécifier. | La propriété **counter-increment** permet de le spécifier. | ||
- | La valeur par défaut de l' | + | La valeur par défaut de l' |
body { | body { | ||
counter-reset: | counter-reset: | ||
Ligne 41: | Ligne 41: | ||
h2 { | h2 { | ||
counter-increment: | counter-increment: | ||
- | }</ | + | }</ |
h2 { | h2 { | ||
counter-increment: | 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 ==== | ||
+ | |||
+ | La fonction counter peut être utilisée plusieurs fois sur la propriété content. | ||
+ | |||
+ | Dans l' | ||
+ | |||
+ | Le compteur de sous-sections est remis à zéro pour chaque nouvelle section.< | ||
+ | body { | ||
+ | counter-reset: | ||
+ | } | ||
+ | h2 { | ||
+ | counter-increment: | ||
+ | counter-reset: | ||
+ | } | ||
+ | h2:before, | ||
+ | h3:before { | ||
+ | content: | ||
+ | } | ||
+ | h3: | ||
+ | counter-increment: | ||
+ | }</ | ||
+ | |||
+ | ==== Utilisation de compteurs imbriqués ==== | ||
+ | |||
+ | La fonction counters() permet de spécifier les compteurs imbriqués. | ||
+ | |||
+ | Cela fonctionne bien pour des éléments tels que les listes, où les listes peuvent être imbriquées les unes dans les autres. | ||
+ | |||
+ | Cela ne fonctionnerait pas pour l' | ||
+ | |||
+ | Les compteurs imbriqués peuvent être spécifiés comme suit :<code css > | ||
+ | ol { | ||
+ | counter-reset: | ||
+ | list-style-type: | ||
+ | } | ||
+ | ol li { | ||
+ | counter-increment: | ||
+ | } | ||
+ | ol li:before { | ||
+ | content: | ||
}</ | }</ | ||
===== Conclusion ===== | ===== Conclusion ===== |