Copyright © 2003 Yves Mettier
Cette création est mise à disposition sous un contrat Creative Commons.
L'article original se trouve sur http://ymettier.free.fr/articles_lmag/.
Article publié dans le numéro 51 (juin 2003) de GNU/Linux France Magazine
Table des matières
Les feuilles de style CSS sont un sujet un peu à part dans ce dossier. En effet, pour réaliser un site web ce serait dommage de passer à côté. Mais elles n'ont rien à voir avec XML ou XSLT, et encore moins avec XSLT malgré le fait qu'on parle de feuilles de style CSS!
Qu'est-ce qu'une feuille de style CSS alors ? Une feuille de style CSS sert à mettre en forme une page html, ou même tout simplement un document XML dans le cas des CSS niveau 2.
Pour bien définir à quoi servent les feuilles de styles CSS, partons d'un fond que nous allons mettre en forme. Le fond est défini dans un document, par exemple un fichier XML comme c'est le cas dans les autres articles. Ce document est travaillé, par exemple à l'aide des feuilles de styles XSLT, pour générer un nouveau document avec les données à afficher. Ce nouveau document a, jusqu'à peu, quasiment toujours été en HTML losqu'il s'agissait de le diffuser via un navigateur web. Actuellement, on commence à voir des documents XHTML, quand il ne sont pas en XML.
Le navigateur web, jusqu'à récemment, récupérait un fichier HTML via le web et l'affichait avec un style défini. Revenez il y a 5 ans par exemple, le look des sites web était non seulement rudimentaire, mais tous les sites se ressemblaient. Voyez par exemple le site de GNU (http://www.gnu.org), ou les HOWTO en HTML: la police de caractères est la même, il y a peu de décorations, et les liens sont tous des textes soulignés. Allez maintenant sur des sites plus modernes, comme un site de vente en ligne, un site portail ou http://linuxfr.org: vous verrez la différence. Pourtant le HTML a peu évolué entre temps. Ce qui fait la différence, c'est la forme de ces documents web, forme définie par les feuilles de style CSS.
Les feuilles de style CSS servent donc à changer le style par défaut des éléments HTML. Les feuilles de style CSS niveau 1 datent de fin 1996 et ont été revues début 1999. Cependant, si elles datent de fin 1996, il a fallu attendre un peu qu'elles soient implémentées dans les navigateurs, dont le plus évolué était probablement netscape 3.0 à l'époque ! C'est pour cela qu'elles semblent plus récentes. Les feuilles de style CSS niveau 1 permettent principalement de redéfinir l'aspect des balises HTML, comme la taille ou la police de caractères pour un texte, ou alors les marges, taille des bords et marges intérieures dans le cas d'un tableau et de ces cellules.
Les feuilles de style CSS ont été revues et bien améliorées pour ce qui est maintenant les feuilles de style CSS2, recommendation datant de mai 1998, il y a à peine plus de 5 ans ! Les feuilles de style CSS2 reprennent quasiment tout des feuilles de style CSS1, mais rajoutent une nouvelle dimension: elles permettent de travailler non plus au niveau des balises mais au niveau du document. Par exemple, on pourra décider qu'un bloc sera affiché en haut à droite de manière fixe, même quand l'utilisateur scrolle l'écran pour afficher le bas de la page. De plus, les feuilles de style CSS2 permettent de définir le style de balises autres que les balises HTML, ce qui permet de mettre en forme un document XML.
Attention donc, on pourrait de nouveau confondre les feuilles de style XSLT et CSS2 puisqu'avec les deux on peut partir du XML pour générer un document affichable via un navigateur web digne de ce nom. Mais relisez ce qui précède: une feuilles de style XSLT sert à générer un document à partir d'un document XML: on travaille sur le fond; alors qu'une feuille de style CSS2 met en forme un document: on travaille sur la forme.
Ecrire un article sur toutes les possibilités des feuilles de style ne présente pas énormément d'intérêt: il serait beaucoup trop long. La spécification des feuilles de style CSS2, ou du moins le document postscript disponible sur le site du W3C, fait plus de 300 pages. Je vais donc me contenter d'une courte introduction aux feuilles de style CSS1 et CSS2, puis continuer sur la mise en forme des balises, ce qui reviendrait à me limiter aux feuilles de style CSS1, mais je n'oublierai pas les améliorations que CSS2 apporte sur ce sujet.
Pour modifier le style d'une balise, nous allons voir les trois manières de faire. Nous allons mettre la couleur du texte en vert.
Première méthode: nous travaillons dans le contenu même de la balise. Ainsi, <p>texte</p> va devenir <p style="color: green">texte</p>. Le style de la balise se définit via l'attribut style.
Deuxième méthode: nous définissons le style de toutes les balises qui nous intéressent au début du document. Cela donne:
1 <!doctype html public "-//W3C//DTD HTML 4.0//EN">
2 <html>
3 <head>
4 <title>Le titre</title>
5 <style type="text/css">
6 P { color: green }
7 </style>
8 </head>
9 <body>
10 <p>texte</p>
11 </body>
12 </html>
Cette méthode a l'avantage sur la précédente de définir le style de toutes les balise <p>, alors que ce n'est pas le cas avec la première méthode.
Troisième méthode: nous mettons le style dans un fichier séparé, qui s'appelle souvent style.css, mais dont le nom, après tout, est quelconque. Le fichier HTML devient:
1 <!doctype html public "//W3C//DTD HTML 4.0//EN"> 2 <html> 3 <head> 4 <title>Le titre</title> 5 <link rel="stylesheet" href="style.css" type="text/css"> 6 </head> 7 <body> 8 <p>texte</p> 9 </body> 10 </html>
Une feuille de style CSS, cela contient CSS, qui veut dire Cascading Style Sheet, donc en fait feuille de style en cascade? S'il semble évident qu'un type défini dans une balise s'applique à une balise, il faut savoir maintenant ce que signifie le terme de cascade.
En fait, le style défini dans la feuille de style s'applique non seulement à la balise que l'on veut, mais aussi à tous les noeuds fils et à toute la descendance du noeud dont on a défini le style. En d'autres termes, si j'ai <p><b>texte</b> bleu</p>, alors le style qui s'appliquerait à la balise <p> s'applique aussi à la balise <b> fille de <p>. Déjà dans cet exemple, vous voyez que cela est très pratique: nous n'avons pas besoin de définir le style pour les balises <b> si le style standard nous convient outre les modifications apportées sur la balise <p>.
Avec les feuilles de style CSS, on définit en fait pour chaque balise, donc pour chaque type de données, une manière, un style, pour représenter la donnée. Si une balise n'a pas de style particulier, on cherche un style particulier défini pour les balises parentes et on l'applique. Si on n'en trouve pas, on prend le style par défaut.
Cependant, il existe certaines manières de limiter le champ d'application du style à certaines balises et pas à d'autres, alors que ce sont les mêmes. Pour cela, on utilise l'attribut class. Nous avons entrevu dans l'article qui décrivait comment générer les pages web, que le menu était défini dans un paragraphe délimité par une balise <p class="menu">. Nous pouvons, dans la feuille de style, définir un style pour les balises <p> de classe menu et un style pour les autres balises <p>. Voici ce que cela pourrait donner dans notre feuille de style myprog.css que nous utilisons dans l'autre article:
p { color:blue }
p.menu { color:green }
Dans ce cas, les deux styles peuvent être appliqués. C'est celui le plus spécifique qui s'applique, donc celui p.menu.
Les classes sont des manières de sélectionner un style. Il en existe un autre qui utilise l'arborescence du HTML.
h1 b { color:red }
Cet exemple permet de n'appliquer le style qui met le texte en rouge, uniquement sur le contenu des balises <b> elles-mêmes contenus de balises <h1>. Ainsi, du texte en gras à l'intérieur d'un paragraphe ne sera pas mis en rouge.
Les feuilles de styles CSS1 définissent encore quelques autres modes de sélection des balises, et CSS2 en rajoute une couche, en particulier en fonction des attributs des balises. Voyez pour cela les spécifications des feuilles de style CSS2.
Si l'on veut non seulement spécifier la couleur, mais aussi la taille de la police de caractères, voici comment faire:
p { color:yellow; font-size: 14pt }
Les espaces étant gérés comme en HTML, c'est-à-dire que peu importe leur nombre et le nombre de retours à la ligne, ce qui suit est une manière équivalente de dire la même chose:
p {
color: yellow;
font-size: 14pt
}
Je profite de cette similitude sur les espaces avec le HTML pour dire que, tout comme en HTML, le texte de définition d'une feuille de style CSS n'est pas sensible à la casse. Si vous aimez les majuscules, ne vous en privez pas. Un petit rappel pourtant: le XML est lui sensible à la casse, donc méfiance si vous écrivez une feuille de style CSS pour un document XML.
Différentes unités sont disponibles pour définir la taille des polices de caractères, la taille des marges, etc. Nous avons:
em: La taille de la police de caractères correspondante. Attention, si vous vous amusez à définir
font-sizeavec l'unité em, par exemplefont-size: 2em, on ne va pas prendre deux fois la taille de la police actuelle puisque nous sommes en ce moment même en train de la redéfinir. C'est dans ce cas la police de l'élément parent qui sert de référence. Dans tous les autres cas, c'est la police de l'élément courant qui sert de référence quand même;ex: La taille de la lettre x de la police de caractères correspondante (si la lettre x n'est pas définie, cette taille existe pourtant d'une manière ou d'une autre);
px: un nombre de pixels, sachant que le pixel a une taille différente suivant qu'il est sur l'écran, à l'imprimante...;
pt: Un nombre de points. Un point est défini comme 1/72e de pouce (soit 25,4/72 mm);
pc: Un pica, soit 12 points;
in: Un pouce (soit 2,54 cm);
cm: Un centimètre, soit un centième de la longueur du trajet parcouru par la lumière, dans le vide, pendant une durée de 1/299 792 458 seconde;
mm: Un millimètre, soit un millième de la longueur du trajet... lumière... vide... secondes.
On peut aussi donner des pourcentages, comme en HTML, avec le symbole %.
Nous allons voir ce que l'on peut modifier en changeant le style d'un élément. Cela n'est pas exhaustif, mais vous permettra au moins de démarrer avec les styles.
Modifier le style du texte est chose très courante, pour mettre en valeur du texte suivant son importance. Voici un exemple:
p.special {
font-family: "times", serif;
font-style: italic;
font-weight: bolder;
font-stretch: expanded;
font-size: 24pt;
color: orange;
text-indent: 2em;
text-align: justify;
text_decoration: underline;
white-space: pre;
}
Je n'ai pas osé voir ce que donne ce style, mais il a le mérite de vous présenter différentes manières de modifier le texte.
font-familypermet de spécifier la police de caractères, un nom de famille ou un nom générique de famille, ou les deux comme ci-dessus.font-styleest l'un de: italic, oblique, normal ou inheritfont-weightpeut être soit lighter, normal, bold ou bolder. Il peut aussi être une valeur entre 100 et 900, mais uniquement par centaines: 100, 200, 300 et ainsi de suite.font-stretchindique comment la police est étirée: normal, wider, narrower, expanded, condensed et j'en passe.font-size: comme son nom l'indique. On peut aussi mettre autre chose qu'une taille, mais je vous laisse fouiller dans la spécification CSS2.color: définit la longueur d'onde dans laquelle le navigateur va émettre pour afficher le textetext-indent: ceci est la longueur de l'alinéa pour un paragraphetext-align: l'indentation se fait left, center, right ou justify, ou inherit ou même... mais voyez la spécification CSS2 à nouveau!text-decoration: rajoute une ligne, underline, overline ou line-through... ou la specification CSS2 encore!white-space: normal, ou pre pour avoir un formatage comme avec la balise <pre>, ou encore nowrap qui fait comme normal mais ne va pas à la ligne après une balise <br>
Les liens, c'est comme du texte, mais ils ont quelques spécificités supplémentaires. On peut spécifier leur couleur quand ils sont sélectionnés, ou quand le ointeur de la souris est dessus. Ce ne sont pas des propriétés, mais des pseudo-classes. Voyez l'exemple suivant:
A.link { color: blue }
A.visited { color: purple }
A.hover { color: green }
A.active { color: yellow }
A.focus { color: red }
En bleu vous aurez donc les liens normaux, non visités, non sélectionnés, bref, vierges. En violet, ce sont ceux qui ont été visités. Les trois suivants définissent le style lorsque le pointeur de la souris touche le lien. Le lien passe en vert si la souris est sur le lien, mais qu'on ne clique pas. Amusez-vous à changer non seulement la couleur, mais aussi la taille de la police ou même la police elle-même, c'est assez amusant! En jaune, pareil, mais quand l'utilisateur presse le bouton de la souris. Et le dernier, en rouge, concerne les liens qui ont le focus, lorsque le clavier est en jeu et pas la souris.
Il existe dans les spécifications CSS2 d'autres pseudo-éléments, non pas pour les liens, mais pour le texte en général, comme par exemple pour spécifier un style précis aux premières lettres d'un paragraphe. Je vous laisser vous jeter sur la documentation pour en savoir plus.
Les bordures concernent tous les éléments de type boîte, comme évidemment les cellules d'un tableau, mais aussi tout simplement un paragraphe entre deux balises <p>, les listes, etc. Un tel élément est donc constitué d'un contenu, et de ce que j'appelle la bordure, bordure qui est elle-même constutiée de trois zones. La zone intérieure s'appelle le padding, la zone centrale border et la zone extérieure margin.
Pour ces trois zones, vous pouvez définir la taille, soit de manière globale:
padding: 1px 2px 3px 4px border: 1px 2px 3px 4px margin: 1px 2px 3px 4px
soit de manière précise:
padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;
Vous pouvez faire de même pour border et margin.
Vous pouvez encore indiquer border: 1px qui fixe 1 pixel pour chaque bord. Ou encore border: 1px 2px qui fixe 1 pixel pour le bord du haut et celui du bas, et 2 pixels pour les bords de droite et gauche. Ou encore border: 1px 2px 3px qui fixe à 1 pixel la bordure du haut, à 3 celle du bas, et à 2 celles de droite et de gauche.
En ce qui concerne le bord, non seulement on peut spécifier sa taille, mais aussi son style et sa couleur. Pour cela, comme nous avions border, nous avons border-style et border-color. Et comme nous avions entre autres border-top nous avons border-top-style et border-top-color. Pour la valeur de la couleur, nous avons les valeurs habituelles, plus transparent. Pour les styles:
noneethiddenreviennent à peu près au même. Le premier force la taille du bord à 0 alors que le second non.solid: la ligne est pleine. Lors de vos premiers tests, vous oublierez surement de mettre cette valeur au style en voulant tester la couleur!dotted: ligne en pointillésdashed: ligne ségmentéedouble: ligne double. L'espace intérieur se fixe avecborder-widthgroove: ligne semblant incrustée dans l'écranridge: ligne semblant sortir de l'écraninset: ligne donnant l'impression que le contenu de la boîte est enfoncé dans l'écranoutset: ligne donnant l'impression que le contenu de la boîte est en relief par rapport au reste de l'écran
Voici ce que donne le HTML suivant, rendu par galeon (version 1.3.3):
1 <table> 2 <tr style="margin: 3pt; padding: 3pt; font-size: 30pt;"> 3 <td style="border: 2pt; border-color: blue; border-style: solid">solid</td> 4 <td style="border: 2pt; border-color: blue; border-style: dotted">dotted</td> 5 <td style="border: 2pt; border-color: blue; border-style: dashed">dashed</td> 6 <td style="border: 2pt; border-color: blue; border-style: double">double</td> 7 <td style="border: 2pt; border-color: blue; border-style: groove">groove</td> 8 <td style="border: 2pt; border-color: blue; border-style: ridge">ridge</td> 9 <td style="border: 2pt; border-color: blue; border-style: inset">inset</td> 10 <td style="border: 2pt; border-color: blue; border-style: outset">outset</td> 11 </tr> 12 </table>
Pour le site web construit avec XSLT, vous pouvez maintenant définir le style du menu par exemple, en mettant ceci:
table.menu td {
border: 2px;
border-style: solid;
border-color: red;
}
span.menuitem a.link { color: red; text-decoration: none }
span.menuitem a.visited { color: purple; text-decoration: none }
span.menuitem a.hover { color: black; text-decoration: none }
span.menuitem a.active { color: black; text-decoration: none }
span.menuitem a.focus { color: black; text-decoration: none }
A vous de vous amuser avec les différentes balises et les différentes classes de la page web!
Je ne terminerai pas sans vous montrer très rapidement un exemple amusant, impossible à faire facilement en HTML. Comment placer une boîte de texte à un endroit précis de la page. Essayez donc le style suivant:
div.magique {
position: absolute;
top: 100px;
right: 100px;
width: 80px;
color: grey;
border: 2px;
border-color: green;
border-style: inset;
}
Ailleurs, dans la page web, mettez du texte entouré de balises <div class='magique'>.
Ce que vous devriez voir est une boîte contenant votre texte, positionnée à 100 pixels du haut et à 100 pixels du bord droit, de largeur 80 pixels, et donc la hauteur dépend de votre texte. Ceci est assez compliqué à faire en HTML pur, et oblige à une gestion lourdre des tableaux. Mais je ne vous en dis pas plus. Voyez la spécification CSS2, et les propriétés position, float et display. Peut-être même pourriez-vous vous passez de tout tableau ? Attention tout de même, les navigateurs netscape-4 n'ont pas encore tous disparu et il arrive souvent qu'en entreprise, le choix se limite à netscape-4 ou à internet explorer. Mais ceci est un autre discours.
Les feuilles de style permettent d'améliorer beaucoup l'aspect visuel d'une page web. Et nous n'en avons vu qu'une faible partie ici, le sujet est large et les exemples ne manquent pas. Par ailleurs, avec deux feuilles de style différentes, vous pouvez totalement changer l'aspect d'une page web. Les feuilles de style CSS permettent donc d'avoir très facilement des thèmes. A vous de jouer!