Accueil

Traduction

Tutoriel CSS - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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,...).

Ou bien vous optez pour la numérotation hiérarchique décimale. Ce qui donne alors :

Bonne nouvelle : c'est désormais possible dans une page Web d'obtenir la numérotation automatique des titres (balises h1 à h6) grâce à CSS. Cette fonctionnalité peut être particulièrement utile pour la version imprimable d'une page c'est à dire dans le cadre de la feuille de style pour impression. Voir le chapitre suivant.

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 la chaine 'chapitre : ", ou la chaine 'section :' selon qu'ils sont balisés Par H1 ou H2.
Or ces chaines n'ont pas été saisies à l'intérieur des balises titres (h1, h2). Par quel miracle le contenu des balises H1 et H2 est modifié ???

Le code de la page (extrait)

Tout est dans la feuille de style donc dans le code CSS !
h1::before { content : 'Chapitre : ' ;} : on fait précéder le texte d'une balise H1 du texte : chapitre :
h2::before { content : 'Section : ' ; } : on fait précéder le texte d'une balise H2 du texte : section :

Il existe aussi le pseudo élément ::after qui permet, vous en doutez, d'insérer du texte à la fin.

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".
Mais j'ai introduit le pseudo élément ::before qui est indispensable pour la numérotation automatique.

La numérotation automatique des titres - exemple2

Maintenant nous 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

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

Le texte de la balise H1 est précédé du contenu du compteur niveau1 suivi d'un point :
h1:before{content: counter(niveau1) " . " ;}

Le texte de la balise H2 est précédé du contenu du compteur niveau2 suivi d'un point :
h2:before{content: counter(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 balises 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.

Le rendu

Les titres de niveau 1 (balises H1) sont précédées d'un chiffre romain majuscule ; les titres de niveau 2 (balise 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 de la balise H2 (titre de niveau 2) 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.

Evitez l'application en cascade

Remarque

Vous avez noté que dans les iframes les éléments H1 & H2 ont un fond transparent et un texte noir.
Or la définition des ces éléments dans la feuille de style externe que j'utilise dans toutes mes pages est la suivante :

Les balises titres ont donc une couleur de fond et le texte est en blanc.

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 interne et à défaut de style interne, il applique une règle externe.

Evitez la cascade

Dans tous les exemples de ce chapitre je veux des titres avec des fonds transparents et un texte en noir.
Pour chaque page d'exemple je fais cependant un lien vers la feuille de style externe que je corrige légèrement via une feuille de style interne.

Il suffit d'écrire dans la feuille de style interne de chaque page d'exemple :
h1,h2 {background : none; color : black; }
Comme la feuille de style interne est prioritaire sur la feuille externe les boites H1 & H2 seront transparentes avec un texte noir.

Toutes les propriétés CSS peuvent prendre la valeur "none".