Tutoriel CSS3 - sommaire

CSS2 : numéroter automatiquement les balise 'titre'

Si vous maitrisez l'emploi d'un traitement de textes vous savez que l'on dispose d'une fonctionnalité très intéressante : la numérotation automatique des titres. Par exemple les titres de niveau 1 sont précédés d'un chiffre romain en majuscules (I, II, ...), les titres de niveau 2 sont précédés d'une lettre majuscule (A,B, ...) et les titres de niveau 3 d'un chiffre arabe (1,2,...).
Vous pouvez aussi opter pour la numérotation hiérarchique décimale. Ce qui donne alors :

1-Titre de niveau 1
	11-Titre de niveau 2
	12 -Titre de niveau 2
2-Titre de niveau 1
	21-Titre de niveau 2
	22-Titre de niveau 2
		221 -Titre de niveau 3
	...

C'est possible dans une page Web d'obtenir la numérotation automatique des titres (balises h1 à h6) grâce à CSS.

Une page numérotée - exemple 1

Pour obtenir la numérotation automatique dans une page web il faut entre autres utiliser le pseudo élément ::before avec la propriété CSS content. C'est ce dont nous allons voir dans ce chapitre.

Dans l'exemple ci-dessous les titres commencent toujours soit par le mot 'chapitre : " ou le mot 'section :' selon qu'il s'agit d'un élément H1 ou H2.

Le code de la page (extrait)

la feuille de style interne

	h1::before {content : 'Chapitre : ' ;}
	h2::before {content : 'Section : ' ; }

Expliquons ces règles :
• première règle : on fait précéder le texte de chaque élément H1 de la chaine "chapitre : ".
• deuxième règle : on fait précéder le texte de chaque élément H2 de la chaine "section : ".

Le code HTML

Il existe aussi le pseudo élément ::after qui permet, vous en doutez, de rajouter une chaine après le texte initial.

Le rendu

Il n'y a pas encore numérotation des balises H1 à H6. Je me suis contenté de faire précéder un titre de niveau 1 de la chaîne "chapitre :" et d'un titre de niveau 2 de la chaîne "section".

La numérotation automatique des titres - exemple2

Maintenant passons aux choses sérieuses : la numérotation automatique des titres.
Dans ce deuxième exemple de page les titres sont numérotés (numérotation décimale non hiérarchique).

Le code HTML de l'exemple 2

Il est strictement identique à celui du premier exemple.

Le code CSS

Attention on introduit deux nouvelles propriétés CSS :
• counter-reset
• counter-increment

Par ailleurs on vous montre que la notion de variable existe en CSS.
En effet on manipule deux compteurs qui se nomment respectivement "niveau1" & "niveau2". body {counter-reset : niveau1 ; } h1{counter-reset : niveau2 ; } h1{counter-increment : niveau1 ; } h2{counter-increment : niveau2 ; } h1::before {content: counter(niveau1) " . ";} h2::before {content: counter(niveau2) ". "; }

Il faut donc créer des compteurs : le compteur niveau1 pour numéroter les titres H1 et le compteur niveau2 pour numéroter les éléments H2.

Le texte de la balise H1 doit être précédé du contenu du compteur niveau1 suivi d'un point d'où la règle :
h1:before{content: counter(niveau1) " . " ;}

Le texte de la balise H2 doit être précédé du contenu du compteur niveau2 suivi d'un point d'où la règle :
h2:before{content: counter(niveau2) ". " ;}

Mais attention il faut aussi programmer l'incrémentation des compteurs :
• le compteur niveau1 doit être incrémenté pour chaque élément H1 : h1{counter-increment : niveau1 ; }
• le compteur niveau2 doit être incrémenté pour chaque élément H2 : h2{counter-increment : niveau2 ; }

Il faut aussi réinitialiser (remettre à zéro) les compteurs avec la propriété counter-reset :
• le compteur niveau1 doit être initialisé au chargement de la page : body {counter-reset : niveau1 ; }
• le compteur niveau2 doit être initialisé sur chaque élément H1 : h1{counter-reset : niveau2 ; }

Le rendu

Il y a numérotation automatique mais elle n'est pas hiérarchique et faites par défaut de chiffres arabes.

Personnaliser la numérotation automatique : exemple 3

Dans la page précédente les titres H1 et H2 étaient précédées d'un nombre. En effet par défaut la numérotation est décimale. Mais au prix d'une légère adaption du CSS on peut numéroter les titres avec des lettres OU des chiffres romains majuscules ou minuscules.

Le code CSS correspondant

La feuille de style est identique à celle de l'exemple précédent, à une exception près. l'attribut counter comprend désormais deux paramètres : le nom du compteur suivi du type de numérotation.

Quelques valeurs possibles du deuxième paramètre de content :
• upper-roman : chiffres romains majuscules
• upper-alpha : lettres majuscules
• lower-roman : chiffres romains minuscules
• lower-alpha : lettres minuscules

Le rendu

Les titres H1 sont précédées d'un chiffre romain majuscule ; les titres H2 d'une lettre majuscule.

Exercice

Seriez vous capable de produire une numérotation décimale hiérarchique du genre : 1.1, 1.2 .... 2.1, 2.2 ... ?

Le rendu

Coup de main

Je vous mets sur la piste. En fait c'est très simple. A partir d'un titre de niveau 2 il faut faire précéder le texte d'une expression complexe récupérant les valeurs de plusieurs compteurs !
Donc on pourra trouver une règle de style telle : h2:before {content: counter(niveau1) "." counter(niveau2); }
Ce qui veut dire que le texte du titre H2 est précédé du contenu du compteur "niveau1" puis d'un point et enfin du contenu du compteur "niveau2".

Rien ne vous interdit de produire une numérotation hiérarchique avec des chiffres romains ou des lettres. Il suffira alors de rajouter un deuxième argument à l'attribut counter.

La solution

Ne regardez qu'après avoir cherché un peu. body {counter-reset : niveau1 ; } h1 {counter-reset : niveau2 ; } h1 {counter-increment: niveau1; } h2 {counter-increment: niveau2 ; } h1::before {content: counter(niveau1) ".";} h2::before {content: counter(niveau1) "." counter(niveau2); }

Evitez l'application en cascade

Remarque

Vous avez noté que dans toutes les documents HTML insérés dans cette page, les éléments H1 & H2 ont un fond transparent avec un texte noir. De plus pour les titres H1 le texte est ombré.
Pour tous ces documents j'établis un lien avec une feuille de style externe dans laquelle on trouve entre autres les règles suivantes concernant les éléments H1 & H2 :

...
h1,h2 {text-align : center; }
h1{font-size : 1.5em ; color : white ; background : skyblue ; 
	line-height : 1.7em; margin: 15px auto; 
	text-shadow : 5px 5px 5px gray;}
h2{font-size : 1.4em ; color : white ; background : turquoise ; 
	line-height : 1.6em; margin : 0.5em auto;}
... 

La cascade : rappel

N'oubliez pas que CSS signifie "Cascading Style Sheets".
Donc pour un élément donné et à défaut de style en ligne, CSS applique la règle dans la feuille de style interne et à défaut dans la feuille de style externe et à défaut le style prévu par le navigateur.

Evitez la cascade

Dans tous les exemples de ce chapitre les titres (éléments H1 & H2) doivent avoir un fond transparent avec un texte en noir.
Il faut donc ici "bloquer la cascade" pour deux propriétés : background & color. Aussi dans chaque document HTML inséré dans cette page, j'ai rajouté la règle CSS interne ci-dessous :
h1,h2 {background : none; color : black; }

Numérotation automatique des titres et feuille de style pour impression

Pour votre site vous pouvez proposez une feuille de style en cas d'impression de la page courante. Dans ce cadre la numérotation des titres devient une option intéressante ...
Je vous invite donc à lire le chapitre suivant.