Accueil Recherche | Plan Technique | Liens | Actualités | Formation | Emploi | Forums | Base
dossier cerig.efpg.inpg.fr 
Vous êtes ici : Accueil > La technique > Internet et le Web > Les feuilles de style > Les styles par l'exemple           Révision : 11 avril 2004
Page précédente Les feuilles de style Page suivante
Page précédente   Page suivante  
Jean-Claude SOHM - CERIG / EFPG
(28 janvier 2004)

III - Les styles par l'exemple

III-1- Introduction : quelques définitions

Dans une page HTML, un style peut être défini à trois endroits distincts :

Un style peut s'appliquer à tous les éléments semblables d'une page Web, ou seulement à certains d'entre eux. A titre d'exemple, considérons les trois styles (internes ou externes) suivants :

th { color: #FF0000 }
 
p.A { font-size: 11pt }
 
div#B {left-margin: 25px }

Le premier style signifie que le texte contenu dans toutes les cellules d'en-tête (balise th) est de couleur rouge. Sauf stipulation via un style local (lequel l'emporte sur un style interne ou externe), ce style s'applique à toutes les cellules d'en-tête situées dans n'importe quel tableau appartenant à la page Web concernée.

Le second style signifie que la police utilisée dans un paragraphe de classe A possède un corps de 11 points. Les paragraphes pour lesquels on ne précise pas de classe, ou ceux pour lesquels on précise une autre classe, ne sont pas visés. Dans ce style, A est appelé sélecteur, ou plus précisément sélecteur de classe, le second terme étant moins couramment utilisé que le premier. On peut donner un nom quelconque à un sélecteur, en évitant les caractères spéciaux ou ceux qui sont accentués.

Le troisième style signifie que, dans un bloc d'information défini par une balise <div> identifiée par B, la marge de gauche vaut 25 pixels. Les blocs pour lesquels on ne précise pas cette identification, ou ceux pour lesquels on précise une identification différente de B, ne sont pas visés. Dans ce style, B est appelé sélecteur, ou sélecteur d'ID. On notera que la traduction française de "ID selector" n'est pas parfaitement fixée, si bien que l'on rencontre parfois le terme "sélecteur d'identificateur". Il faut éviter d'utiliser le terme "identificateur" tout court, parce que les feuilles de style l'utilisent déjà avec un autre sens (voir III-2 ci-dessous).

Quelle est la différence entre un sélecteur de classe et un sélecteur d'ID ? Voici ce qu'en dit le W3C, dans la traduction française de la recommandation CSS2 : "Les langages de document peuvent contenir des attributs déclarés de type ID. Ceux-ci sont particuliers dans la mesure où il ne peut y avoir deux de ces attributs avec une même valeur ; quel que soit le langage du document, un attribut ID sert à identifier un élément unique". Inutile de dire que tout le monde ne comprend pas cette citation exactement de la même façon. En pratique, on peut se servir indifféremment des deux sélecteurs sans que les navigateurs en soient fâchés le moins du monde. A quoi peuvent bien servir ces subtilités ?

Nous exposons ci-dessous des exemples de ces trois types de style, en utilisant de préférence les détails de présentation que le HTML ne permet pas d'obtenir.

 

III-2- Exemples de style local

Premier exemple. Pour mettre en évidence une modification, certains auteurs barrent la version initiale plutôt que de la faire totalement disparaître. Voici comment se présente un exemple de ce type :

La promenade fut très arrosée, et tous les participants les moins courageux rentrèrent rapidement.

Le code HTML correspondant s'écrit :

<center><p>La promenade fut très arrosée, et <span style="text-decoration: line-through">tous les participants</span> les moins courageux rentrèrent rapidement.</p></center>

Nous notons d'abord que la balise <span> permet d'opérer sur une portion de texte, sans provoquer de retour à la ligne comme la balise <div>, et sans provoquer le saut d'une ligne comme la balise <p>.

Nous notons ensuite que le style est introduit sous la forme d'une propriété (text-decoration) suivi d'une valeur (line-through), l'ensemble des deux constituant une déclaration (text-decoration: line-through). Cette déclaration permet de réaliser une décoration, terme réservé aux modifications qui n'entraînent pas un nouveau calcul de la disposition de la page par le navigateur. Il existe quatre décorations de texte : souligné, surligné, barré et clignotant -- cette dernière ne fonctionnant pas dans IE (heureusement !). On notera que le terme identificateur est parfois utilisé comme synonyme de propriété, et le terme attribut comme synonyme de valeur.

Remarque : nous aurions obtenu le même affichage en utilisant tout simplement la balise <strike> du HTML :

<center><p>La promenade fut très arrosée, et <strike>tous les participants</strike> les moins courageux rentrèrent rapidement.</p></center>

La promenade fut très arrosée, et tous les participants les moins courageux rentrèrent rapidement.

Second exemple. Pour souligner l'importance d'un paragraphe, on peut l'écrire en petites majuscules et colorer son fond en jaune. Dans un premier temps, nous utilisons la balise p pour créer le code suivant :

<center><p style="background-color: #FFFFCC; font-variant: small-caps">Cette affaire est de la plus haute importance</p></center>

Nous voyons ci-dessous que le texte est effectivement écrit en petites majuscules (font-variant: small caps), mais que le fond jaune (background-color: #FFFFCC) s'étend d'un bord à l'autre de la page. Nous reviendrons sur les causes de cette situation quand nous étudierons les boites.

Cette affaire est de la plus haute importance

Pour que le fond jaune soit limité à la zone occupée par le texte, nous avons le choix des solutions :

Les trois variantes s'écrivent :

<center><p style="background-color: #FFFFCC; font-variant: small-caps; display: inline">Cette affaire est de la plus haute importance</p></center>
<center><span style="background-color: #FFFFCC; font-variant: small-caps">Cette affaire est de la plus haute importance</span></center>
<center>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style=" background-color: #FFFFCC"; font-variant: small-caps">Cette affaire est de la plus haute importance</td>
</tr>
</table>
</center>

Dans les trois cas, nous obtenons le même affichage, lequel se présente ainsi :

Cette affaire est de la plus haute importance

Troisième exemple. Les polices avec empattements (serif), qui paraissent si élégantes lorsqu'on imprime sur du papier, sont plutôt laides lorsqu'on affiche à l'écran. La raison en est que la résolution de ce dernier -- toujours voisine de 72 dpi -- n'est pas suffisante pour représenter correctement les petits détails. Une feuille de style locale appliquée à la balise <body> permet de doter toute une page, en une seule fois, d'une police sans empattements (sans-serif). Par la même occasion, nous pouvons aussi fixer le corps (nous avons choisi une valeur que le HTML ne permet pas d'obtenir, soit 9 points). Le code s'écrit :

<body style="font-family: sans-serif; font-size: 9pt">

Le résultat peut être observé dans une page annexe. On constate que la police Arial est utilisée dans toute la page, sauf pour le titre (où c'est normal) et pour une cellule de tableau (où ce n'est pas normal). En principe, tous les éléments contenus dans la page héritent des propriétés attribuées à cette dernière, sauf spécification locale contraire. Dans le cas du titre, l'usage de la balise <h1> implique un corps de 24 points, et cette spécification locale l'emporte sur la feuille de style interne. La balise <h1> n'impliquant rien quant au type de la police, c'est la feuille de style qui impose l'absence d'empattements. C'est le navigateur, ensuite, qui choisit Arial comme police sans empattements par défaut, mais l'internaute peut modifier ce choix dans les préférences. Dans la recommandation CSS2, c'est l'internaute qui doit avoir le dernier mot -- une heureuse conclusion pour une discussion qui a fait couler beaucoup d'encre. Le nom anglais des feuilles de style (Cascading Style Sheets) évoque ces règles de préséance "en cascade".

Les feuilles de style sont ainsi conçues, que tout élément fils hérite des propriétés de l'élément père. Cette notion d'héritage doit être bien présente à l'esprit quand on utilise les feuilles de style. Il existe des exceptions à la règle, et les navigateurs n'appliquent pas très scrupuleusement l'héritage aux tableaux.

 

III-3- Exemples de style interne

Premier exemple. Tous les concepteurs de sites savent que les deux navigateurs n'affichent pas les tableaux de la même façon, et les différences sont parfois importantes. Ainsi, le tableau défini par le code HTML suivant :

<center>
<table border="2" cellspacing="1" cellpadding="4" bgcolor="#FFFFEB" bordercolor="#009999">
<tr>
<th bgcolor="#FFE7CC">En-tête 1</th>
<th bgcolor="#FFE7CC">En-tête 2</th>
</tr>
</tr>
<td>Première cellule</td>
<td>Seconde cellule</td>
</tr>
</table>
</center>

s'affiche comme montré ci-dessous dans les deux principaux navigateurs du marché :

Affichage tableau dans IE (HTML)     Affichage tableau dans NS (HTML)
Internet Explorer 6 (Windows) Netscape 7 (Windows)
Premier cas : le tableau est décrit en HTML seul

Pour tenter d'obtenir le même affichage avec les deux navigateurs, nous avons redéfini la présentation du tableau à l'aide de la feuille de style décrite ci-dessous :

<head>
<style>
table { border 2px solid #009999; border-collapse: separate; border-spacing: 1px }
th { border:1px solid #009999; background-color: #FFE7CC; padding:4px }
td { border:1px solid #009999; background-color: #FFFFEB; padding:4px }
<style>
</head>

Cette feuille de style interne est installée dans l'en-tête de la page Web, entre les deux balises <style> et </style>. Cette feuille est constituée de trois lignes :

La table est désormais définie à l'aide d'un code HTML complètement (et idéalement) dépouillé :

<center>
<table>
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
</tr>
</tr>
<td>Première cellule</td>
<td>Seconde cellule</td>
</tr>
</table>
</center>

que les deux navigateurs, aidés de la feuille de style, affichent comme représenté ci-dessous :

Affichage tableau dans IE (CSS)     Affichage tableau dans NS (CSS)
Internet Explorer 6 Netscape 7
Deuxième cas : la présentation du tableau est décrite en CSS

Comme vous pouvez le constater, IE insert un espace de 2 pixels entre les cadres, alors qu'un seul pixel est spécifié dans la feuille de style. En fait, aucune version d'Internet Explorer (que ce soit sur Mac ou sur PC) ne reconnaît l'identificateur "border-spacing" (Dieu seul sait pourquoi), et les deux pixels précités correspondent à une valeur par défaut (qui est celle de l'attribut "cellspacing" en HTML). Le navigateur de Netscape, par contre, implémente l'identificateur en question. Vous pouvez vous assurer vous-même du fonctionnement du style précité en consultant la page auxiliaire correspondante, à l'aide des navigateurs dont vous disposez.

Pour régler la distance entre cadres, il faut renoncer à l'identificateur "border-spacing" et le supprimer effectivement de la feuille de style, puis utiliser l'attribut "cellspacing" dans le code HTML. La figure ci-dessous illustre le procédé dans le cas où l'espace entre les cellules elles-mêmes, et entre les cellules et le cadre, vaut cinq pixels.

Affichage tableau dans IE (HTML+CSS)     Affichage tableau dans NS (HTML+CSS)
Internet Explorer 6 Netscape 7
Troisième cas : le tableau est décrit en HTML et en CSS

Une page auxiliaire vous permet de vérifier par vous-même le comportement des navigateurs que vous utilisez.

Cet exemple montre que les concepteurs de sites sont obligés d'utiliser les feuilles de style et le HTML simultanément pour définir la présentation des pages Web. Les puristes, qui veulent tout faire avec les styles, et recherchent des astuces (en anglais : hacks) pour obliger les navigateurs à obéir, se compliquent sérieusement la vie. Dans le cas de l'identificateur border-spacing, d'ailleurs, il n'y a pas de hack connu.

Second exemple. Les feuilles de style ont de quoi combler ceux qui aiment les raffinements dans la présentation des tableaux, et qui se sentent frustrés par la rigoureuse austérité du HTML en la matière. On peut en effet faire varier séparément :

La figure ci-dessous montre ce qu'il est possible de faire en matière de style de cadre. On constate que les deux navigateurs n'affichent pas le tableau exactement de la même façon ; celui de Netscape, en particulier, fournit des couleurs de cadre nettement plus claires que son concurrent, et son pointillé est différent.

Affichage nouveau tableau dans IE (CSS)     Affichage nouveau tableau dans NS (CSS)
Internet Explorer 6 Netscape 7

Une page auxiliaire vous permet de vérifier le comportement des navigateurs que vous utilisez.

Notons pour terminer qu'il ne faut pas abuser des multiples possibilités précitées, sous peine de créer un tableau digne du musée des horreurs... virtuelles.

 

III-4- Exemples de style externe

Premier exemple. L'une des innovations des feuilles de style réside dans la notion de boite. Comme nous consacrerons un chapitre aux boites, nous nous contentons ici de les introduire. Une boite est une zone rectangulaire contenant de l'information, entourée d'un cadre facultatif, et pourvue de marges à l'intérieur et à l'extérieur du cadre. On peut régler séparément :

Si plusieurs pages d'un même site Web possèdent des boîtes de même présentation, il est intéressant de créer un style externe. Ce dernier prend la forme d'un simple fichier texte, enregistré avec l'extension ".css". Voici un exemple de style de boîte construit à l'aide de la balise <p>, et enregistré dans le fichier "boite.css" :

p#boite { margin: 1cm 10%; border: solid 2px #0000FF; padding: 20px 5px; background-color: #FFE7CC; text-align: justify }

La page HTML suivante affiche la boîte entre deux lignes noires :

<html>
 
<head>
<link rel="stylesheet" type="text/css" href="boite.css">
</head>
 
<body style="margin-left: 0px; margin-right: 0px; background-color: #FFFFDD">
<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>
<p id="boite"><span style="background-color: #FFCCFF">La zone de texte est colorée en violet</span></p>
<div><img border="0" src="images/noir.gif" width="100%" height="1"></div>
</body>
 
</html>

On remarque que, pour relier le feuille de style externe à la page Web à laquelle elle s'applique, on utilise la balise <link> et on la place dans l'en-tête. L'affichage résultant est représenté ci-dessous :

 
Boîte CSS avec son cadre et ses marges  
 

Il est aisé de faire le lien entre le code du style et l'affichage dans la fenêtre du navigateur :

Deuxième exemple. Sauf indication contraire (flottement), les navigateurs affichent les boîtes les unes au-dessous des autres. Mais leurs marges verticales ne s'additionnent pas, comme on pourrait logiquement s'y attendre. La figure ci-dessous, qui contient deux boîtes identiques à celle utilisée précédemment, illustre ce phénomène. La distance entre les cadres n'est pas égale à la somme de la marge verticale basse de la première boîte (30 pixels) et de la marge verticale haute de la seconde boîte (30 pixels), mais à la plus grande de ces deux valeurs (30 pixels).

 
La fusion des marges verticales  
 

Il ne s'agit pas d'un bug, mais d'un effet voulu par le W3C, et connu sous le nom de fusion des marges (margin-collapse). Voici la justification donnée par cet organisme : "Dans la plupart des cas, cette fusion des marges verticales donne un meilleur aspect visuel, plus proche des attentes de l'auteur". Qu'on se le dise !

Nous retrouverons ce phénomène de fusion des marges verticales lorsque nous étudierons les listes (chapitre X).

 

III-5- Conclusion

Les quelques exemples que nous avons exposés dans cette page montrent que les feuilles de style constituent un bon outil, avec quelques subtilités dont l'intérêt n'est pas évident. Mais cet outil doit être utilisé avec prudence, parce que les navigateurs n'implémentent les feuilles de style que de manière partielle, et les interprètent chacun à leur façon. Le concepteur de sites sensé fait avec les feuilles de style ce qu'il ne peut pas faire avec le HTML, et avec le HTML ce qu'il ne peut pas faire avec les styles. Que ceux qui veulent tout faire avec les styles s'empêtrent dans leur dogmatisme, c'est leur affaire.

Il faut utiliser les différents styles (local, interne, externe) à bon escient. En particulier, une feuille de style externe s'applique à des pages Web dont la présentation est similaire. Si on l'étend à des pages dont la présentation est très différente, son fichier risque d'atteindre un poids excessif, ce qui va à l'encontre de l'un des buts poursuivis -- alléger les pages Web pour en accélérer le téléchargement.

Page précédente Retour au sommaire Page suivante
Page précédente Retour au sommaire Page suivante
Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base  
Copyright © CERIG/EFPG 1996-2004
Mise en page : J.C. Sohm