La séparation du fond de la forme est une recommandation récurrente au W3C. En effet, le concepteur est responsable du fond du document : il organise son discours suivant une hiérarchie simple : un document est composé d'un ensemble de paragraphes qui possèdent éventuellement des titres. Les paragraphes peuvent prendre différentes formes : un texte simple, une citation, une liste à puces, une liste ordonnée, un tableau, ... Les titres sont définis en appliquant une structuration à six niveaux (accessibles par les balises <h1> à <h6>).
La responsabilité du navigateur est alors de réaliser une mise en page adaptée au document défini par le concepteur. C'est le navigateur qui est chargé de faire ressortir les titres des paragraphes (en changeant la police par exemple), de définir la largeur des colonnes des tableaux afin d'obtenir un affichage du document agréable à lire. Pour s'acquitter de cette tàche, les navigateurs appliquent un ensemble de règles par défaut. Par exemple, le texte compris entre les balises <h1> et </h1> sera affiché en gras avec une taille de police supérieure à la taille d'un texte classique. Les feuilles de style (Cascading Style Sheets (CSS)) renforcent les concepteurs dans cette philosophie. Elles ont été introduites en 1996 par le W3C. Aujourd'hui, tous les navigateurs internet supportent la définition de feuilles de style. Elles permettent de définir l'ensemble des règles par défaut appliquables par un navigateur à une balise html quelconque. Ainsi, les feuilles de style permettent de préciser, par exemple, la couleur de fond d'un paragraphe introduit par les balises <p> et </p>. Il existe deux recommandations du W3C concernant les feuilles de style : c'est pourquoi nous parlons des recommandations CSS1 et CSS2. Ces recommandations sont disponibles en français à l'adresse suivante : http://www.yoyodesign.org/doc/w3c/css.html.fr
Dans ce chapitre, nous verrons dans un premier temps la syntaxe et les propriétés des sélecteurs : comment nous pouvons modifier l'apparence d'une balise en précisant la valeur associée à chaque propriété liée à cette balise. Ensuite, nous examinerons la division d'un document, ou comment modifier l'apparence d'une partie d'un document en le séparant explicitement (à l'aide des balises <div> et <span>) du reste du document. Enfin, nous verrons comment la recommandation CSS2 permet de fixer précisément la position d'une image ou de tout objet au sein d'une page HTML.
La définition des éléments d'une feuille de style respecte une syntaxe relativement simple. Dans un premier temps, nous allons définir la syntaxe utilisée dans une feuille de style externe (c'est à dire faisant l'objet d'un fichier distinct du document html). On appelle sélecteur toute balise HTML (<h1>, <p>, ...) privée des caractères < et >. Chaque sélecteur possède un ensemble de propriétés qui peuvent être définies par une (ou plusieurs) feuilles de style. Par exemple, la police de caractères utilisée, sa taille, sa couleur ou bien encore la couleur du fond,... Les recommandations CSS1 et CSS2 définissent 53 propriétés. Pour définir un ensemble de propriétés associées à une balise HTML, la syntaxe est la suivante : sélecteur {propriété1 :valeur1;propriété2 :valeur2;... ;propriétén :valeurn} Par exemple, si nous souhaitons fixer la couleur d'arrière-plan d'un document, il suffit de définir : body {background-color :white} Enfin, il est possible de définir une (ou plusieurs) propriété(s) pour un groupe de sélecteurs. La syntaxe à utiliser dans ce cas est assez simple, il nous suffit de séparer chaque sélecteur par des virgules avant de définir les valeurs associées aux propriétés. Voici par exemple comment justifier à droite les titres de niveau 1 et 2 : h1, h2 {text-align : right}
Les recommandations du W3C concernant les feuilles de style autorisent non seulement la définition de feuilles de style externes, mais aussi la définition de propriétés directement à l'intérieur d'une page HTML. Dans ce cas, la syntaxe utilisée est légèrement différente que celle déjà présentée. En fait, nous pouvons modifier localement les propriétés liées à une balise particulière d'un document HTML ou bien définir, toujours à l'intérieur de la page, l'ensemble des propriétés à appliquer à toutes les balises du document.
Pour définir au niveau d'une balise précise les valeurs de ses propriétés, il est nécessaire de définir l'attribut style de cette balise. L'utilisation de l'attribut <style> à l'intérieur du code HTML (entre <body> et </body> permet de modifier l'apparence d'un élément :
<sélecteur style="propriété :valeur">
Voici un exemple où nous définissons la couleur de fond de la page et du premier paragraphe (respectivement à blanc et à bleu), nous modifions la police de caractères utilisée pour le titre du premier paragraphe (police helvetica) et enfin, nous modifions également la couleur du texte du second paragraphe (en vert foncé) :
Exemple 15. Feuille de style locale
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"> <title> Utilisation locale des feuilles de style </title> </head> <body style="background-color : white"> <h1 style=" font-family : helvetica ; border-style : inset "> CE TITRE UTILISE LA POLICE HELVETICA </h1> <p style="background-color : blue"> La couleur du texte de ce paragraphe est le bleu. </p> <h1> CE TITRE UTILISE TOUTES LES VALEURS PAR DEFAUT DES PROPRIETES </h1> <p style="color : darkgreen"> Ce deuxième paragraphe utilise la police par défaut, la couleur choisie pour le texte est le vert foncé. </p> </body> </html>
L'utilisation locale des feuilles de style se montre très rapidement limitée. En effet dans la majorité des cas, la définition des attributs est suffisante pour obtenir les mêmes effets. C'est pourquoi, il est recommandé de définir des feuilles de style globales. En utilisant des feuilles de style globales, nous obtenons la garantie d'une mise en page uniforme de toute la page ; garantie que nous ne pouvons obtenir en utilisant des feuilles locales ou bien la définition d'attributs. La définition d'une feuille de style globale a lieu dans la partie entête du document (entre les balises <head> et </head>). Une feuille de style globale est introduite par la balise <style> et terminée par la balise </style>. Il est conseillé de placer entre commentaires les propriétés définies : ainsi les navigateurs ne supportant pas les feuilles de style les ignoreront. Dans l'exemple suivant, nous définissons la couleur par défaut du fond de la page, des paragraphes ainsi que la police des titres de niveau 1.
Exemple 16. Utilisation globale des feuilles de styles
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML4.01Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html;charset=iso-8859-1">
<title>Utilisation globale des feuilles de style</title>
<style type="text/css">
<!--body{background-color:white}
p{background-color:lightgreen;color:darkgreen}
h1{font-family:helvetica}
-->
</style>
</head>
<body>
<h1>Propriétés de la balise <body></h1>
<p>Nous redéfinissons la propriété <i>background-color</i> du sélécteur
<i>body</i> à blanc.</p>
<h1>Propriétés de la balise <p></h1>
<p>Chaque paragraphe a pour couleur de fond le vert clair et le texte
est écrit en vert foncé.</p>
<h1>Propriétés de la balise <h1></h1>
<p>La police de caractères de la balise <h1>est <i>helvetica.</i></p>
</body>
</html>>
Comme vous l'avez sans doute compris, une feuille de style regroupe un ensemble de règles qui indique au navigateur comment il doit interpréter (ou afficher) chaque balise.
Ces règles peuvent être définies directement dans le document
HTML (utilisation locale ou globale), ou bien (et c'est beaucoup
plus intéressant) à l'extérieur du document. L'avantage des
feuilles de style externes réside dans le fait de pouvoir appliquer
un même ensemble de règles à toutes les pages d'un site internet, ce
qui est impossible avec une utilisation locale ou globale. Supposons
définie une feuille de style nommée style.css, dont
voici le contenu :
h1,h2{text-align:center}
h3,h4{text-align:right;color:rgb(50%,50%,0)}Vous remarquerez comment il est aisé de créer une nouvelle couleur à l'aide d'une feuille de style (ici, un jaune clair). Il est également possible de préciser l'intensité de chaque composante non pas en pourcentage mais par une valeur comprise entre 0 et 255. Pour lier (appliquer) cette feuille de style à un document html, il nous suffit de définir la balise <link> dans ce document :
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <meta http-equiv="Content-Type"content="text/html;charset=iso-8859-1"> <title>Feuille de style externe</title> <link rel=stylesheet type="text/css" href="v2l.css" title="v2l"> </head> <body> <h1>Ce titre est centré</h1> <h2>Ce titre est également centré</h2> <h3>Ce titre est aligné à droite et de couleur jaune</h3> <h4>Idem</h4> </body> </html>
Voici quelques explications concernant les attributs utilisés :
rel : précise que nous lions une feuille de style à ce document.
type : la feuille de style est conforme au standard CSS.
href : l'URL de la feuille de style.
title : nous nommons la feuille de style au cas o๠le navigateur devrait ultérieurement y faire référence (facultatif dans la majorité des cas).
font-family : la police de caractères utilisée.
font-size : la taille de la police de caractères. Cette valeur peut être définie en points ou bien à l'aide d'une valeur prédéfinie : xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger.
font-style : définit l'inclinaison de la police : normal, oblique, italic.
font-weight : épaisseur du trait : bold, bolder, lighter,normal. Il est également possible de préciser une valeur (multiple de 100) comprise entre 100 (le trait le plus fin) et 900 (le trait le plus épais). La valeur 400 correspond à normal.
color : la couleur de la police de caractères utilisée.
text-align : précise l'alignement du texte, quatre valeurs sont possibles : left, center, justify, right.
text-decoration : définit l'enrichissement dont fait l'objet le texte, cinq valeurs sont possibles : none (valeur par défaut) underline, overline, line-through, blink.
text-transform : autorise une modification automatique des textes, quatre valeurs possibles : capitalize, uppercase, lowercase, none (valeur par défaut).
text-indent : retrait du premier mot du paragraphe. La valeur associée à cette propriété peut être exprimée en points (pt), en centimètres (cm), en millimètres (mm) en pouces (in) ou bien en pourcentage. Par défaut, la valeur est égale à zéro.
background-color : la couleur de fond de l'objet.
background-image : définit l'image de fond utilisée, par défaut la valeur est none (aucune).
background-repeat : précise si la répétition d'une image de fond est autorisée, les valeurs possibles sont repeat, repeat-x, repeat-y, no-repeat (valeur par défaut).
list-style-type : précise le type de puces utilisées, les valeurs possibles sont : disc (valeur par défaut), circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.
list-style-image : permet l'utilisation d'une image comme puce, la valeur attendue est l'adresse de l'image. Par défaut, la valeur est none.
list-style-position : précise si la position de la puce par rapport au texte, deux valeurs sont autorisées inside et outside, valeur par défaut.
border-style : définit les quatre bordures d'un élément. Les valeurs possibles sont : none, dashed, dotted, double, groove, inset, outset, ridge, solid.
border-color : définit la couleur de la bordure. Une couleur peut être définie de trois faà§ons différentes : 1. Par son nom (par exemple blue). 2. Par sa définition suivant le modèle RGB en hexadécimal, la notation est alors la suivante : color : #rrvvbb. 3. Par sa définition suivant le modèle RGB en décimal, une couleur est dans ce cas définie ainsi : color : rgb(rrvvbb). Les valeurs peuvent également être des pourcentages, par exemple : color : rgb(100%,50%,0).
border-width : définit l'épaisseur du trait de la bordure. Les valeurs autorisées sont : thin, medium (valeur par défaut), thick ou bien une valeur.
margin-top : définie la marge en haut. Par exemple, la définition suivante est autorisée : h2 { margintop : 1em }. Ici, la marge en haut d'un titre de niveau 2 est fixée égale à la taille de la police utilisée.
margin-bottom : définie la marge en bas.
margin-right : définie la marge à gauche.
margin-left : définie la marge à droite.
padding-left : définie l'espacement à gauche. Les propriétés padding-right, padding-bottom, padding-top sont également définies.
Quand il s'agit de rédiger un rapport, il est appréciable de pouvoir appliquer une présentation du résumé du document différente du reste du document. La définition de classes au niveau des feuilles de style autorise ce type de modification.
Les classes régulières permettent la définition de plusieurs règles d'affichage pour un même sélecteur.
Exemple 17. Classes régulières
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional //EN">
<html>
<head>
<meta http-equiv = "Content-Type" content="text/html;charset=iso-8859-1">
<style type="text/css">
<!--body{background-color:white}
p{color:darkgreen}
p.resume{background-color:lightyellow;
text-align:justify;margin-left:5em;margin-right:5em}
-->
</style>
</head>
<body>
<p class= "resume">Voici le résumé du document.
Un retrait à gauche et à droite est appliqué.
La couleur de fond est un jaune clair.
Le texte est justifié.
Vous remarquerez que les propriétésd éfinies pour un paragraphe <i>classique</i> s'appliquent également ici.</p>
<p>Voici un paragraphe du corps du document.
Ici, seule la couleur de la police de couleur a été définie en vert foncé.</p>
</body>
</html>Nous sommes libres de définir un nombre quelconque de classes pour chaque sélecteur. Ces définitions peuvent également intervenir au niveau des feuilles de style externes. L'utilisation d'une classe au niveau d'un document HTML est très simple, il suffit de préciser le nom classe utilisée par l'intermédiaire de l'attribut class qui existe pour toutes les balises HTML.
Dans l'exemple précédent, nous avons défini une classe qui s'appliquait à la balise <p>. Le standard CSS autorise également des définitions de classes génériques qui pourront être appliquées à toutes balises.
Exemple 18. Classe générique
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional //EN">
<html>
<head>
<meta http-equiv = "Content-Type" content="text/html;charset=iso-8859-1">
<title> Classe générique </title>
<style type="text/css">
<!-- .bleu {color : blue }
-->
</style>
</head>
<bdy>
<p class= " bleu "> Ce paragraphe est en bleu. </p>
<p> Mais pas ici !!! </p>
</body>
</html>Dans certains cas, il est nécessaire de pouvoir "oublier" pendant quelques mots ou lignes une feuille de style. C'est l'objectif des balises <span> et <div> qui autorisent une modification locale de la feuille de style.
Supposons, que nous souhaitions appliquer une classe générique à plusieurs mots d'un paragraphe. L'utilisation de la balise <span> est alors fortement recommandée.
Exemple 19. Exemple d'emploi de <span>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>La balise span</title>
<style type="text/css">
<!--.fondvert{background-color:lightgreen}
-->
</style>
</head>
<body>
<p>Voici un paragraphe.<span class="fondvert">Cette partie du texte est
affichée en utilisant la classe <i>fondvert</i>.</span>
Ici,nous appliquons de nouveau les propriétés d'affichage par défaut.</p>
</body>
</html>Les feuilles de style apporte une solution facile d'emploi quand il s'agit de placer précisément un objet dans un document HTML. En effet, nous pouvons préciser les coordonnées relatives ou absolues de n'importe quel objet composant la page.
Les coordonnées absolues sont définies par rapport au coin supérieur gauche de la fenêtre du navigateur qui a pour coordonnées (0,0). La première coordonnée est associée à la largeur de la fenêtre, la seconde à la hauteur.
Supposons que la fenêtre de votre navigateur possède une taille de 400 x 300 pixels, alors : le sommet haut gauche a pour coordonnées (0,0); le sommet haut droit a pour coordonnées (400,0) ; le sommet bas droit a pour coordonnées (400,300); le sommet bas gauche a pour coordonnées (0,300).
Le positionnement relatif se détermine par rapport à d'autres objets de la page. Il est beaucoup plus difficile à maÎtriser et est par conséquent beaucoup moins utilisé. L'utilisation des balises <span> et <div> est fortement conseillé dans ce cas. Nous allons présenter rapidement comment utiliser le positionnement absolu à l'aide de trois exemples : placement d'un texte, d'une image et superposition d'un texte sur une image.
Pour placer un texte précisément, nous pouvons introduire une division du document (en utilisant la balise <div>) et fixer les coordonnées du texte à l'aide d'une feuille de style locale. Voici un exemple oÙ nous plaà§ons en (200,50) le texte HYPERTEXT MARKUP LANGUAGE. Donc ce texte sera décalé de 200 pixels sur la droite et de 50 pixels vers le bas.
Exemple 20. Placement du texte
<!DOCTYPE HTML PUBLIC "-//W3C //DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"> <title>Placement de texte</title> </head> <body> <span style="position:absolute;left:200px;top:50px;color:navy"> HYPERTEXT<br> MARKUP<br> LANGUAGE </span> </body> </html>
Le placement d'une image n'est pas différent du placement d'un texte. Nous pouvons tout simplement remplacer le texte par l'affichage de l'image avec la balise <img>. Voici cependant une autre faà§on de procéder : nous allons utiliser, non pas la balise <span>, mais la balise <div>. De plus, nous allons définir une classe au niveau d'une feuille de style globale pour placer l'image
Exemple 21. Placement d'image
<!DOCTYPE HTML PUBLIC "-//W3C //DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Placement d'image</title>
<style>
.v2l {position:absolute;left:70px;top:80px}
</style>
</head>
<body>
<div class="v2l">
<img src="image1.gif" width="180" height="180" alt="image GIF">
</div>
</body>
</html>Il est temps de mettre en oeuvre vos talents artistiques ! Mettez un peu de gaieté aux pages précédemment créées, en utilisant une feuille de style CSS externes. Si vous êtes en manque d'inspiration, le site http://www.oswd.org/ peut sans doute vous être utile.