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 15:50] – [Numérotation automatique avec des compteurs CSS] admin | tutoriel:internet:dokuwiki:titres:number:start [2021/02/26 16:31] – [Utilisation de compteurs imbriqués] admin | ||
---|---|---|---|
Ligne 9: | Ligne 9: | ||
===== 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 ==== | ||
+ | |||
+ | 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 ===== | ||