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édente | ||
| tutoriel:internet:dokuwiki:titres:number:start [2021/02/26 16:20] – [Première étape] admin | tutoriel:internet:dokuwiki:titres:number:start [2022/08/13 22:27] (Version actuelle) – modification externe 127.0.0.1 | ||
|---|---|---|---|
| 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: | ||
| Ligne 48: | Ligne 48: | ||
| La propriété autorise aussi les valeurs 0 ou négatives. | 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' | + | Si le compteur est remis à zéro puis incrémenté sur le même élément, il est d' |
| h2 { | h2 { | ||
| counter-reset: | counter-reset: | ||
| Ligne 58: | Ligne 58: | ||
| Une fois le compteur en place, il faut l' | 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 :< | + | Cela peut être fait avec le contenu généré en utilisant la fonction counter, et la pseudo classe :before :< |
| body { | body { | ||
| counter-reset: | counter-reset: | ||
| Ligne 70: | Ligne 70: | ||
| Si vous utilisez un compteur et que vous l' | 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: | ||
| + | }</ | ||
| + | |||
| + | Le compteur de chaque élément de liste sera ainsi incrémenté, | ||
| + | |||
| + | Il est important de remettre le compteur au bon endroit, pour qu'il se remette à zéro pour chacun des éléments imbriqués. | ||
| + | |||
| + | Dans ce cas, je réinitialise le compteur sur l' | ||
| + | |||
| + | Dans l' | ||
| + | |||
| + | La deuxième liste imbriquée commencera à 1.1.1 et comptera jusqu' | ||
| + | <ol> | ||
| + | < | ||
| + | <ol> | ||
| + | < | ||
| + | <ol> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ol> | ||
| + | </li> | ||
| + | < | ||
| + | </ol> | ||
| + | </li> | ||
| + | < | ||
| + | </ol> | ||
| + | </ | ||
| + | |||
| + | ==== Styliser les compteurs ==== | ||
| + | |||
| + | Il est possible de mettre en forme le compteur en mettant un deuxième argument dans les fonctions du compteur. | ||
| + | |||
| + | Les valeurs sont les mêmes que pour la propriété de type liste. | ||
| + | |||
| + | Bien que toutes les valeurs soient possibles, pour les compteurs, seul un sous-ensemble a un sens, car les valeurs telles que disque, carré et cercle restent les mêmes quelle que soit la valeur du compteur. | ||
| + | |||
| + | Le style peut être spécifié comme suit :<code - > | ||
| + | ol li:before { | ||
| + | counter(answer, | ||
| + | }</ | ||
| ===== Conclusion ===== | ===== Conclusion ===== | ||