Dominique Meeùs, retour à la page personnelle

Documentation de ma feuille de style CSS

Remarques préliminaires

1. La référence est la page CSS du World Wide Web consortium (W3C).

2. Pour fixer le vocabulaire, en HTML, on a des éléments (lesquels ont souvent un contenu) avec d’éventuels attributs qui reçoivent eux-mêmes une valeur :
<élément attribut="valeur" attribut="valeur" ...>contenu</élément>

En CSS, un sélecteur est mis en relation avec des propriétés qui reçoivent elles-mêmes une valeur. Une règle en CSS est formée d’un ou plusieurs sélecteurs séparés par des virgules (pour repérer à quels éléments la règle va s’appliquer) suivi d’un bloc entre {} de (zéro ou plus) déclarations séparées par des ; (un ; final ne fait pas de tort). Une déclaration est une propriété suivie de : et d’une valeur. Un sélecteur est le plus souvent un élément HTML (ou rien) suivi d’un point et du nom d’une classe (ou rien). Donc une règle ressemble souvent à
élément.classe, élément.classe ... { propriété: valeur; propriété: valeur; ...}
La classe CSS servira de valeur pour l’attribut HTML class qui est applicable à presque tous les éléments HTML. Un élément html peut se voir attribuer plusieurs classes, par exemple
<p class="alinea registre"></p>.

3. Le HTML est issu du SGML qui est un langage de structuration par balises. J’essaie d’utiliser les éléments HTML et les classes CSS dans un esprit de structuration logique et pas seulement de rendu visuel (exemple ci-dessous avec class="ouvrage").

Feuille de style

Voici, dans une fenêtre séparée, la feuille de style telle qu’en elle-même.

Police

Choix de la police

Par défaut, je préfère les polices avec empattement et je l’avais indiqué dans une règle concernant le <body>. Mais apparemment, Internet Explorer 5.5 ne supporte pas cela et j’ai dû la retirer. Au fond, il vaut mieux laisser la liberté à l’agent de rendu d’optimiser l’affichage.

Les tailles en pixels sont plus appropriées à l’écran, celles en points à l’impression. (Il y a pour l’impression une feuille de style séparée en corps 12 pt.
<link rel="stylesheet" href="monprint.css" type="text/css" media="print">
Sans cela, les impressions du html/css destiné à l’écran donnent de trop gros caractères.)

Variantes

J’ai des classes inline pour modifier la police. Certaines ont aussi un objectif de structuration des données. Par exemple, la classe "small-caps" ne fait que transformer le caractère en petites capitales. Au contraire, la classe "ouvrage" sert à la fois à composer le titre d’un livre en italiques et à marquer ce titre comme un titre. Ainsi l’élément <i class="ouvrage"> n’ajoute rien à <i> quant au rendu mais permet de repérer (au niveau du code) les titres de livres. Le nom de la classe "exposant" dit bien ce que ça veut dire. (J’y ai mis la déclaration "vertical-align: top;" pour éviter que l’exposant n’affecte l’interligne.) Les classes "appel" et "ordinal" ne font rien de plus pour le rendu mais marquent structurellement les appels de note et distinguent les abréviations du genre 1er ou 2e de l’exponentielle ex.

J’ai mis du rouge brun dans la couleur d’encre de l’élément inline <code> pour en faire ressortir le contenu.

Les liens sont automatiquement mis en évidence par le navigateur. Je trouve que le souligné habituel des liens fait un peu coup de poing par rapport au reste du texte et je l’ai donc supprimé., sauf au passage du pointeur de souris (du moins dans certains navigateurs).

Citations

On peut désirer composer en italiques les citations pour les rendre plus visibles. Pour le cas où elles forment un bloc, j’ai prévu l’élément <blockquote class="ital">. (Avec un tel bloc, je choisis de faire l’économie des guillemets.) Si la citation est inline, j’utilise <q class="ital">. Si dans une citation ou autre phrase en italiques, j’ai une emphase ou une citation, j’inverse l’italique par la classe "inverse" (<em class="inverse"> ou <q class="inverse">). Ainsi, je ne balise pas la fin et le recommencement de l’italique autour de l’exception (exemple : </i>exception<i>) mais je balise l’exception elle-même (exemple <em class="inverse">exception</em>) à l’intérieur de l’italique (ce qui vaut à mon esprit logique une très intense satisfaction d’ordre esthétique).

En fait je ne suis pas très chaud pour ce jeu compliqué d’italiques. Je tiens cependant à faire l’économie des guillements dans la citation en bloc. Il faut alors que le <blockquote> soit bien visible. Je lui ai donc mis un peu de bordure gauche.

Titres

Je considère que le grand titre d’un ouvrage ne fait pas partie de la hiérarchie des titres qui structurent l’ouvrage. (Dans une table des matières, on met disons les chapitres comme niveau 1, pas le titre du livre lui-même que je qualifierais de niveau zéro.) J’ai donc créé une classe "h0". (J’ai de même créé un style Titre 0 dans mes modèles Word ou OpenOffice.org Writer.) Ce h0 est centré. Les suivants, <h1>, <h2>… sont alignés à gauche. J’ai aussi une classe "intertitre" pour des titres hors hiérarchie.

Listes

J’ai défini des <ol class="iii"> en lower-roman et <ol class="abc"> en lower-alpha pour les variantes de numérotation.

Style livre

Dans l’édition de texte continu, je veux me rapprocher du style des livres sur papier. Dans un livre, le texte est justifié. J’ai créé une classe "texte" à utiliser normalement dans <body> (ou comme <div class="texte"> pour la partie texte de la page : on pourrait laisser en dehors des barres de navigation ou autres en tête et en pied de page).

Les alinéas ne sont pas séparés (déclaration margin: 0em;). Ils ont un retrait de première ligne (classe "alinea"). Dans l’édition anglaise, le premier alinéa d’un chapitre n’a pas de retrait mais un enjolivement du ou des premiers mots (lettrine ou petites capitales). Dans l’édition en néerlandais, ce ne serait pas seulement le premier d’un chapitre mais tout alinéa qui suit une quelconque rupture (classe "firstalinea"). La classe "sepalinea" donne un "firstalinea" séparé par de l’espace avant.

J’ai encore les classes "chapeau" pour introduire un article et "question" pour servir dans les interviews. La classe "texteNote" sert aux notes de fin mais, voir ci-dessous, je les préfère en marge.

Notes de fin ou de marge

Dans un livre, je préfère les notes de bas de page que l’on a toujours sous les yeux aux notes de fin de chapitre ou de livre qui imposent de lire avec un doigt coincé pour marquer la page des notes. Si on lit à l’écran, à moins de faire toutes les pages assez petites pour tenir dans la fenêtre du navigateur (butineur, browser…), les notes ne sont pas non plus visibles en bas. Une solution consiste à faire de l’appel de note un lien (<a class="appel" name="appel-1" href="#note-1">1) vers la note1 et inversément du numéro de celle-ci un lien vers l’appel pour reprendre la lecture là où on l’avait abandonnée. Une autre solution est de mettre les notes en marge. J’utilise donc la propriété float pour mettre les notes dans les marges.

Classe "NoteGauche"
(respectivement
"NoteDroite")

Il faut que la note soit légèrement séparée du texte, ce qu’on peut réaliser par du padding et  de la margin de la note. Le texte enveloppe la note. Une autre solution est que le texte qui accueille la note lui laisse une marge. C’est un <div> ou un <p> avec class="RetraitNoteGauche" ou class="RetraitNoteDroite" (avec une marge de 5 cm) tandis que la note elle-même est (sur fond grisé de 4,5 cm) :

(*) Note avec appel pour voir exactement à quel point du texte elle intervient.

Une telle note est moins strictement positionnée qu’un appel de note. On pourrait juger utile d’y mettre un appel (*) à l’endroit voulu. L’ennui des notes latérales c’est qu’elles s’entrechoquent si elles sont nombreuses et rapprochées.

La classe "clear" sert à passer au-delà de l’élément flottant. Le <h1> et les notes de marge elles-mêmes sont clear d’office.


1. Exemple de note de bas de page. Cliquer le numéro (<a class="Nnote" name="note-1" href="#appel-1">1) pour retourner au texte.

Dominique Meeùs, retour en haut de la page