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
logiciel:internet:dokuwiki:plugins:headingnumbers:start [2021/02/26 12:15] – [Numérotation automatique des titres par CSS] adminlogiciel:internet:dokuwiki:plugins:headingnumbers:start [2022/08/13 22:27] (Version actuelle) – modification externe 127.0.0.1
Ligne 8: Ligne 8:
 ??? démarrer à h2** ??? démarrer à h2**
 !!! h1 est réservé au titre de la page - il ne doit donc pas être numéroté. Le premier titre à numéroter est donc le premier élément h2. !!! h1 est réservé au titre de la page - il ne doit donc pas être numéroté. Le premier titre à numéroter est donc le premier élément h2.
- +  ??? pouvoir désactiver la numérotation pour un titre donné**
-??? pouvoir désactiver la numérotation pour un titre donné**+
 Il est parfois utile d'inclure un titre sans numérotation, il faut donc pouvoir la désactiver. Il est parfois utile d'inclure un titre sans numérotation, il faut donc pouvoir la désactiver.
  
Ligne 17: Ligne 16:
   * voici un h3 qui n'incrémente pas le compteur :<code - ><h3 id="nocountDemo" class="nocount">Ce titre n'a pas de numéro</h3></code>   * voici un h3 qui n'incrémente pas le compteur :<code - ><h3 id="nocountDemo" class="nocount">Ce titre n'a pas de numéro</h3></code>
   * et pour relancer la numérotation :<code - ><h3 id="countAgain">Ce titre a un numéro</h3></code>La numérotation reprend là où elle s'est arrêtée.   * et pour relancer la numérotation :<code - ><h3 id="countAgain">Ce titre a un numéro</h3></code>La numérotation reprend là où elle s'est arrêtée.
- +  ??? Ici, il ne s'agit pas de donner un style aux titres
-??? Ici, il ne s'agit pas de donner un style aux titres+
 !!! c'est autre chose. Il ne s'agit que des numéros. !!! c'est autre chose. Il ne s'agit que des numéros.
  
-===== Le CSS =====+==== Le CSS ==== 
 + 
 +Et voici le CSS :<code - > 
 +body {counter-reset: h2} 
 +h2 {counter-reset: h3} 
 +h3 {counter-reset: h4} 
 +h4 {counter-reset: h5} 
 +h5 {counter-reset: h6} 
 + 
 +h2:before {counter-increment: h2; content: counter(h2) ". "} 
 +h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ". "} 
 +h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ". "} 
 +h5:before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "} 
 +h6:before {counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "} 
 + 
 +h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before { content: ""; counter-increment: none } 
 +</code> 
 + 
 +David Storey donne une bonne explication satisfaisante dans son article intitulé **[[http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/|Automatic numbering with CSS Counters]]** (numérotation automatique à l'aide de compteurs CSS). 
 + 
 +En gros, vous définissez d'abord vos compteurs (en les réinitialisant), puis vous les incrémentez et les insérez au contenu généré en utilisant la pseudo-classe :before 
 + 
 +=== Surveillez la cascade ! === 
 + 
 +Pour utiliser le moins de lignes de CSS possible, j'ai d'abord essayé cela :<code - > 
 +h2 {counter-reset:h2; counter-reset:h3; counter-reset:h4; counter-reset:h5; counter-reset:h6;}</code> 
 + 
 +Pourquoi cela ne fonctionne-t-il pas ? C'est le C dans CSS - la cascade. Vous produisez une série de valeurs différentes pour la même propriété et chacune d'entre elles remplace l'autre, de sorte qu'en fait, ici, le seul compteur remis à zéro est le dernier.
  
-===== Pré-requis =====+==== Pré-requis ====
  
-===== Installation =====+==== Installation ====
  
-===== Configuration =====+==== Configuration ====
  
-===== Utilisation =====+==== Utilisation ====
  
-===== Désinstallation =====+==== Désinstallation ====
  
-===== Voir aussi =====+==== Voir aussi ====
  
   * **(en)** [[https://philarcher.org/diary/2013/headingnumbers/]]   * **(en)** [[https://philarcher.org/diary/2013/headingnumbers/]]

Piste :