Dominique Meeùs, retour à la page personnelle
Documentation de ma feuille de style CSS
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").
Voici, dans une fenêtre séparée, la feuille de style telle qu’en elle-même.
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.)
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).
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.
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.
J’ai défini des <ol class="iii">
en lower-roman et <ol
class="abc"> en lower-alpha pour les
variantes de numérotation.
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.
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