Up First Previous

Mises en forme des pages
feuilles de style CSS

Next Last

Nous avons pour l'instant appris à définir du contenu et de la sémantique (balises code ou cite par exemple). Cependant, la mise en forme joue également un rôle primordial pour la lisibilité d'un site et donc pour sa promotion. Il est inenvisageable et surtout inefficace de définir tout l'aspect visuel d'un site avec des balises font et l'attribut style (rappelons que la balise font est obsolète). Nous allons voir qu'il est simple de définir et de modifier l'apparence d'un site grâce aux feuilles de style en cascade (CSS) :

 Écriture de CSS 

Les feuilles de style en cascade (ou Cascading Style Sheets) permettent de définir proprement et dynamiquement l'apparence d'une page. Elles sont intégrées à Internet Explorer depuis la version 3.0 et à Netscape depuis la version 4.0. En pratique, cela revient à redéfinir le rôle d'une balise XHTML en lui imposant de nouvelles propriétés. Pour cela on peut utiliser :

  • l'attribut style dans une balise :
    <p style="font-size: 12pt; color: green;">
  • la balise style en en-tête :
    <head>
      <style type="text/css"><!--
        p { font-size: 12pt; color: green; }
      //--></style>
    </head>
  • la balise style avec appel à une feuille de style externe (fichier texte avec l'extension .css) :
    <style type="text/css"><!--
      @import url(http://www.site.fr/monstyle.css);
    //--></style>
  • la balise link pour utiliser une feuille de style externe (fichier texte avec l'extension .css) :
    <head>
      <link rel="stylesheet" type="text/css" href="monstyle.css">
    </head>

Comme pour les navigateurs ignorant le JavaScript, il faut cacher le code des feuilles de styles à l'aide des balises de commentaires : <!-- //-->. De plus, la première version ne modifie le style que de cette instance de la balise p alors que dans les autres cas, toutes les instances de la balise p seront modifiées.

La dernière des quatre techniques proposées est la plus courament utilisée et la plus intéressante comme il sera montré dans la suite. En outre, les feuilles de styles ne font pas partie intégrante d'XHTML, il est donc préférable d'ajouter la balise meta suivante dans l'en-tête de la page (entre les balises <head> et </head>) : <meta http-equiv = "content-style-type" content = "text/css">

Le paramètre media permet d'obtenir des présentations différentes en fonction du type de média utilisé (ordinateur, Pocket PC, synthétiseur vocal, ...). Il se place dans la balise style et peut prendre les valeurs suivantes :

Valeur Sens
all pour tous les types de périphériques
screen type classique, pour tous les moniteurs courants
tty type télévision (basse résolution)
projection type projecteur
handheld type PC de poche (Psion, Windows CE, Pilot ...)
print type impression (pour les imprimantes)
braille pour les dispositifs de représentation en braille
aural pour les synthétiseurs vocaux

Le gros avantage des feuilles de style est qu'elles permettent de dissocier le contenu et l'apparence des pages XHTML et donc de redéfinir facilement et sans oubli toute la maquette d'une page (ou d'un site si toutes les pages utilisent une même feuille de style externe) ! Par exemple, la police utilisée dans cette page pour les éléments de code XHTML est gérée dans une feuille de style, et il suffit ainsi de modifier le style de la balise code pour changer la couleur de tous les éléments de code. D'autre part, pour un site utilisant une feuille de style externe les temps de chargements des pages seront diminués puisque la feuille de style ne sera chargée qu'une seule fois dans le cache du visiteur puis ré-utilisée pour chaque page. Les feuilles de style permettent donc de gros gains de temps lors de la refonte d'un style, des versions adaptées à chaque support (ordinateur, Pocket PC, ...) et surtout un accès plus large à l'information pour les handicapés (media="braille" et media="aural"), alors faites ce petit effort !!

 Syntaxe 

Une définition de style ne peut pas contenir de code XHTML. La syntaxe est simple : balise - accolade ouvrante - liste de propriétés - accolade fermante. Chaque propriété étant définie par : nom - deux points - valeur - point virgule. Ainsi, on définit les titres de type h1 de couleur orange avec une taille de 28 points et une police cursive de la manière suivante :
h1
{
  color: #FF9933;
  font-size: 28pt;
  font-family: cursive;
}

Propriétés du texte

Propriété Valeur Description
font-size

xx-small (extra-extra-petit), x-small, small, medium (moyen), large, x-large, xx-large (extra-extra-large), smaller (+ petit), larger (+ large)

taille définie en pixels (px), cm (cm), mm (mm), point (pt), pourcentage (%), relativement à la largeur de la lettre m (em) ou à la hauteur de la lettre x (ex)

 taille de la police
font-weight

normal, bold (gras), bolder (+ gras), lighter (fin)

valeur numérique de 100 à 900 (par tranche de 100)

 poids de la police
font-style normal, italic, oblique
 style de la police
font-variant normal, small-caps (petites capitales) variante de la police
font-family

serif, sans-serif, cursive,
fantasy, monospace

ou nom de la police (Arial, Verdana, etc...)

 type de police. plusieurs polices peuvent être spécifiées en alternative si la (les) première(s) est(sont) inconnue(s) du navigateur. Elles sont séparées par des virgules.
font-stretch

normal, wider (plus espacé), narrower (plus serré), condensed (condensé), semi-condensed, extra-condensed, ultra-condensed, expanded (étendu), semi-expanded, extra-expanded, ultra-expanded

 espacement entre les lettres d'un mot.
word-spacing cf font-size pour les notations de distance. espacement entre deux mots.
letter-spacing cf font-size pour les notations de distance. espacement entre deux lettres.
line-height point (pt), pourcentage (%) hauteur de l'interligne
font ex: font: Times 13px bold; permet de spécifier plusieurs caractéristiques en une seule fois.
text-decoration none (normal), underline (souligné), overline (surligné), line-through (barré), blink (clignotant) apparence du texte
text-transform none (normal), capitalize (première lettre de chaque mot en majuscule), uppercase (majuscules), lowercase (minuscules) transformation du texte
color nom ou #RRGGBB (code hexadécimal) ou rgb(0-255,0-255,0-255) ou rgb(%,%,%) couleur de la police
background-color nom ou #RRGGBB (code hexadécimal) ou rgb(0-255,0-255,0-255) ou rgb(%,%,%) couleur du fond du texte
background-image

url('monima.jpg')

Si l'image est locale, son adresse est relative à la position de la feuille de style et pas à celle de la page html.

On gère la répétition de l'image avec les paramètres norepeat, repeat-x, repeat-y

 couleur du fond du texte

Propriétés des tableaux

Propriété Valeur Description
vertical-align top (en haut) ou middle (au milieu) ou bottom (en bas) alignement vertical de la cellule
border-color nom ou #RRGGBB (code hexadécimal) ou rgb(0-255,0-255,0-255) ou rgb(%,%,%) couleur de la bordure
border-color-light nom ou #RRGGBB (code hexadécimal) ou rgb(0-255,0-255,0-255) ou rgb(%,%,%) couleur des bordures haute et gauche
border-color-dark nom ou #RRGGBB (code hexadécimal) ou rgb(0-255,0-255,0-255) ou rgb(%,%,%) couleur des bordures basses et droite
border-style solid (normal), dashed (pointillés), dotted (points), double, groove, ridge, inset, outset style de la bordure
border-width thin (fine), medium (moyenne), thick (épaisse) épaisseur de la bordure

Pour spécifier des styles de bordures différentes en haut, en bas, à gauche ou à droite, utiliser border-top ou border-bottom ou border-left ou border-right plutôt que border au début des propriétés de style.

Propriétés de ??? (en travaux)

Propriété Valeur Description

En attendant que ce soit fini, allez voir l'excellent site selfhtml.com

 Cascading Style Sheets 

Pourquoi parle-t-on de feuilles de style en cascade ? Tout simplement parce que l'on peut définir des hiérarchies de spécifications. Ainsi, on peut ajouter à la définition d'un bloc div des propriétés particulières (tailles et couleurs différentes, ...) en définissant une nouvelle classe div.cettezone spécialisant la classe div. Pour cela, il suffira de définir la classe div.cettezone dans la feuille de style et d'ajouter l'attribut class="cettezone" aux balises div concernées.

Pour plus de détail sur les CSS, voir les spécifications du W3C. Attention, la troisième mouture des CSS est en cours mais tous les navigateurs ne supportent pas toutes les feuilles de style :

  • CSS1 : IE3, IE4, IE5 et Netscape 3, 4+ et 6 supportent les spécifications CSS1. IE3 contient quelques bugs et tous les navigateurs cités ne supportent pas toutes les spécifications.
  • CSS2 : Opera 3.5+, IE5, Netscape 6 supportent CSS2. IE4 en supporte quelques spécifications.

Il faut définir le style d'un site en fonction du public visé et pas uniquement pour se faire plaisir. Rappelons que la compatibilité à 100% interdit toute fioriture et effets de styles :-(, il faut donc faire des choix sans être trop ambitieux au risque de priver un site de nombreux visiteurs. La feuille de style suivante est celle qui est recommandée comme feuille de style par défaut :

(A REDIGER)

 Les couleurs 

Les couleurs utilisées pour la conception de pages web sont décomposée en trois composantes rouge, verte et bleue (synthèse additive). Ces composantes ont une valeur entière comprise entre 0 et 255, ce qui offre donc un total de 256 x 256 x 256 = 16.777.216 couleurs ! Une couleur est alors représentée par un code hexadécimal de 6 digits dont chacune des paires représente une composante. Ainsi, le code hexadécimal #RRVVBB sera interprété comme une couleur ayant pour composante rouge la valeur RR, pour composante verte la valeur VV et pour composante bleue la valeur BB. Chaque composante est décrite sur deux digits en hexadécimal, c'est-à-dire que pour retrouver sa valeur en base 10 (nombres classiques), il faut multiplier le premier digit par 16 puis lui ajouter le second digit. On a donc XY équivalent en base 10 à X*16+Y où X et Y ont une valeur comprise entre 0 et F (0,1,...,8,9,A,B,C,D,E,F où A vaut 10, ..., F vaut 15). Les niveaux de gris sont décrits par des valeurs identiques des trois composantes.

Les vieux navigateurs Internet et les écrans un peu agés ne peuvent cependant pas utiliser toute la palette graphique offerte actuellement et sont limités à 256 couleurs :-(. Si une conversion de palette se fait automatiquement, les résultats obtenus ne seront peut-être pas ceux escomptés. Aussi, lorsqu'une page doit apparaître de façon similaire sur toutes les configurations possibles, on se limite généralement à 216 couleurs.

Les tableaux ci-dessous présentent ces 216 couleurs et peuvent servir de guide pour la définition d'une des 16 millions de couleurs proposées. Chaque tableau est décrit pour une valeur constante de la composante bleue, la composante rouge variant de manière croissante de gauche à droite et la composante verte variant de manière croissante de haut en bas.

Laisser le pointeur de la souris immobile un instant sur une case colorée pour voir apparaître le code hexadécimal correspondant. Celui-ci apparait également dans le formulaire central avec sa décomposition en composantes RVB. Ce formulaire permet également de convertir une couleur dans les deux sens.

  R
V            
           
           
           
           
           
  R
V            
           
           
           
           
           
  R
V            
           
           
           
           
           
     
     
rouge vert bleu convertir de l'hexadécimal en RVB convertir du RVB en hexadécimal
 
# code hexadécimal
     
     
  R
V            
           
           
           
           
           
  R
V            
           
           
           
           
           
  R
V            
           
           
           
           
           

 Liens