Traduction
Tutoriel CSS - sommaire
Tutoriel CSS3 - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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.
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é ???
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.
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.
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).
Il est strictement identique à celui du premier exemple.
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) ". " ;}
Il y a numérotation automatique mais elle n'est pas hiérarchique et faites par défaut de chiffres arabes.
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.
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.
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.
Seriez vous capable de produire une numérotation décimale hiérarchique du genre : 1.1, 1.2 .... 2.1, 2.2 ... ?
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.
Ne regardez qu'après avoir cherché un peu.
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.
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.
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".