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… :-)

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
Prochaine révisionLes deux révisions suivantes
tutoriel:internet:dokuwiki:titres:number:start [2021/02/26 15:50] – [Numérotation automatique avec des compteurs CSS] admintutoriel:internet:dokuwiki:titres:number:start [2021/02/26 16:27] – [Utilisation de deux ou plusieurs compteurs] 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, comme dans l'exemple suivant :<code css >
 +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 css >
 +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 ===== ===== 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 css >
 +body {
 +    counter-reset: section 4;
 +}
 +h2 {
 +    counter-increment:section;
 +}</code>Si vous préférez l'incrémenter de deux, spécifiez-le :<code css >
 +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 css >
 +h2 {
 +    counter-reset:section;
 +    counter-increment:section;
 +}</code>
 +
 +==== Affichage du compteur ====
 +
 +Une fois le compteur en place, il faut l'afficher.
 +
 +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:section 4;
 +}
 +h2 {
 +    counter-increment:section;
 +}
 +h2:before {
 +    counter(section) ' ';
 +}</code>
 +
 +Si vous utilisez un compteur et que vous l'incrémentez sur le même élément, comme dans les exemples ci-dessus sur l'élément <h2>, il est alors incrémenté avant d'être utilisé.
 +
 +==== Utilisation de deux ou plusieurs compteurs ====
 +
 +La fonction counter peut être utilisée plusieurs fois sur la propriété content.
 +
 +Dans l'exemple suivant, j'utilise deux compteurs pour la numérotation des sections et des sous-sections.
 +
 +Le compteur de sous-sections est remis à zéro pour chaque nouvelle section.<code css >
 +body {
 +    counter-reset:section;
 +}
 +h2 {
 +    counter-increment:section;
 +    counter-reset:sub-section;
 +}
 +h2:before,
 +h3:before {
 +    content:counter(section) '.' counter(sub-section) ' ';
 +}
 +h3:before  {
 +    counter-increment:sub-section;
 +}</code>
 +
 +==== Utilisation de compteurs emboîtés ====
  
 ===== Conclusion ===== ===== Conclusion =====

Piste :