Documentation du Dr FRAPPE

Ce wiki regroupe les résultats de mes expériences en informatique accumulés au cours de mes recherches sur le net.

Dans la mesure du possible, j'ai cité mes sources ; il en manque certainement…

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.

{{tag>tutoriel}}

====== Numérotation automatique avec des compteurs CSS ======

Pour la rédaction de documents, il est souvent utile de numéroter les sections et d'avoir une table des matières.

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 =====

===== 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, comme dans l'exemple suivant :<code - >
body {
    counter-reset:section;
}
</code>

Le compteur est remis à zéro pour l'élément <body>, et le compteur a pour identifiant <<section>>. Ce nom est à votre convenance.

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 - >
body {
    counter-reset:section 4;
}</code>Cette valeur est fixée à 4 car le compteur est toujours incrémenté juste avant de l'afficher. Si vous le mettez à 4, la valeur passe à 5 avant l'affichage.

===== 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'incrément est de 1 :<code - >
body {
    counter-reset: section 4;
}
h2 {
    counter-increment:section;
}</code>Si vous préférez l'incrémenter de deux, spécifie-le :<code - >
h2 {
    counter-increment:section 2;
}</code>

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'abord remis à zéro puis incrémenté de la valeur spécifiée, donc dans l'exemple suivant, la valeur sera toujours 2 :<code - >
h2 {
    counter-reset:section;
    counter-increment:section;
}</code>

==== Affichage du compteur ====

===== Conclusion =====

===== Problèmes connus =====

===== Voir aussi =====

  * **(fr)** [[https://dev.opera.com/articles/automatic-numbering-with-css-counters/]]

----
//Basé sur << [[https://dev.opera.com/articles/automatic-numbering-with-css-counters/|Automatic Numbering With CSS Counters]] >> par David Storey.//

Piste : • DNSmasq : un serveur DNS local pour un PC sous Ubuntu • Numérotation automatique avec des compteurs CSS • Live usb Multisystem • LLMP : un serveur HTTP sous Linux, Lighty, PHP et MySQL • VirtualBox : installation depuis le dépôt d'Oracle (version la plus à jour) • Owncloud sur Raspberry Pi (clone de Dropbox) • Ventoy Multiboot USB • RAID 1 logiciel : Simuler une panne de disque et rétablir le RAID • Démonter un PC portable (exemple d'un ASUS X53S) • Routeur TpLink TL-MR3020 : Guide utilisateur

Documentation du Dr FRAPPE

Recherche

Navigation

Imprimer/exporter

Outils