Creative Commons License

DEUXIEME PARTIE

Les Feuilles de Style

XIII. Généralités

1. Historique - Définition

Vous avez certainement vu dans le source de pages HTML des attributs dont nous n’avons pas parlé. A vrai dire, HTML n’était pas prévu au départ pour programmer le style d’un document, c’était un format spartiate qui n’était destiné qu’à communiquer des informations, et à préciser leur nature : titre, texte, image, tableau… Avec son succès pour le grand public, un grand nombre d’attributs on été introduits de façon anarchique pour combler cette lacune. Le W3C a donc décidé de séparer le contenu de la présentation. Beaucoup de ces attributs sont donc déconseillés [deprecated] et deviendront obsolètes dans les versions futures.

Le langage de feuille de style appelés également langage CSS (Cascading Style Sheet), est apparu en 1996 dans ce but. Il permet l’implémentation d’un très grand nombre de déclarations contrôlant tous les paramètres de style et d’affichage.

Le CSS apporte les avantages suivants :

Le CSS présente néanmoins les inconvénients suivants :

- Toutes les commandes de feuilles de style ne sont pas encore reconnues par tous les navigateurs. Ainsi, pour pouvoir réaliser certaines constructions, il faut utiliser un bon nombre de commandes de remplacement de façon à obtenir un simple ersatz beaucoup plus lourd.

- Le temps d’interprétation des commandes par le navigateur est relativement long. Il demande beaucoup de mémoire, ce qui élimine, en partie, le gain de temps potentiel au téléchargement.

Son principe : il est conçu de façon hiérarchique, ou en cascade. Chaque élément imbriqué hérite de certains styles de l’élément le contenant, et a la possibilité de les remplacer, de les modifier ou de rajouter des déclarations. Cette hiérarchie s’étend de chaque élément particulier jusqu’au corps du document, aux feuilles de styles internes ou externes, et même aux préférences de l’utilisateur configurées avec le navigateur. L’annexe C dresse la liste des styles sui sont héritables.

2. Incorporation

Il existe plusieurs façons d’associer les feuilles de style au document HTML :

2.1. La méthode intraligne consiste à définir le style à même la balise HTML dans le document comme ceci :

<p style="color: white;">

Le style s’applique ici à l’élément de paragraphe. Ainsi, tout le paragraphe s’affichera en blanc. C’est la méthode la moins préférable.

2.2. Dans le cas de la méthode interne, les styles sont tous définis dans l’en-tête du document HTML de la façon suivante :

<html>
 <head>
  <style type="text/css">
   b {color: green; }
  </style>
 </head>
...

Comme la règle de style se situe dans l’en-tête, il suffit d’utiliser normalement la balise <b> (caractère gras) dans le reste du document. Par exemple, ce texte sera affiché en gras et en vert.

2.3. La méthode externe consiste à lier au document HTML une ou plusieurs feuilles de style situées dans un fichier externe avec l’extension .css. La même feuille de style peut alors aisément s’appliquer à plusieurs documents HTML. Nous définissons la liaison de la manière suivante :

<html>
 <head>
  <link rel="stylesheet" href="http://www.adresse.com/mesStyles.css"
        title="Mes styles">
 </head>
...

2.4. Comme son nom l’indique, la méthode importée importe les styles provenant d’un fichier externe de façon à les fusionner à une feuille de styles existante. La définition se fait comme suit :

<html>
 <head>
  <style type="text/css">
  @import "http://www.adresse.com/styles1.css"
...

L’instruction @import n’est autorisée qu’au début d’une feuille de style.

3. Structure des styles

La brique élémentaire de CSS est la déclaration, qui est en deux parties, comme ceci :

Propriété: Valeur

Similairement aux couples attribut/valeur, une déclaration assigne une valeur à une propriété. Remarquons que les deux-points remplacent le signe égal.

Il est possible d’assigner en même temps plusieurs propriétés liées entre elles en utilisant une notation abrégée. Les valeurs sont alors indiquées à la suite les unes des autres et séparées par un espace. Les deux notations suivantes sont alors équivalentes :

Propriété: ValeurA ValeurB ValeurC
Propriété-A: ValeurA
Propriété-B: ValeurB
Propriété-C: ValeurC

Dans le cas d’un style intraligne, on affecte à l’attribut style d’un élément une liste de déclarations séparées par des ";", et mise entre guillemets """ ou apostrophes "'". Le point-virgule à la fin de la dernière déclaration est facultatif, mais conseillé. Exemple :

<p style="border: 1px solid red; font-family: 'Times New Roman';"></p>

Dans les autres cas, les styles sont regroupés en règles, comme ceci :

Sélecteur {
 Déclaration;
 Déclaration;
  ...
}

Les espaces et les retours à la ligne ne sont pas significatifs, sauf à l’intérieur d’un mot clé.

Le sélecteur correspond au nom d’élément sur lequel les déclarations vont agir, il peut être composés de plusieurs noms séparés par une virgule. Voici enfin un exemple de règle CSS :

h1,
th {
 text-align: center;
 color: navy;
}

Tout le texte contenu à l’intérieur de n’importe quel élément h1 ou th dans la partie de code HTML contrôlée pas la feuille de style sera aligné au centre et de couleur bleu marine.

Mais parfois on ne veut appliquer une règle qu’à un où plusieurs éléments du même type. Il faut alors utiliser l’attribut class ou id (identificateur) dans ces éléments, et incorporer leur valeur dans le sélecteur. Comme nous l’avons vu, la valeur d’un attribut id doit être unique dans le document, il permet donc de définir le style d’un seul élément.

Exemple avec class :

<html> 
 <head> 
  <style type="text/css"> 
   h2.vert  {
    font size: 16pt; 
    color: olive;
   } 
   h2.jaune {
    font size: 14pt;
    color: yellow;
   }
  </style> 
 </head> 
 <body> 
  <h2 class="vert">Titre vert olive à 16 points</h2> 
  <h2 class="jaune">Titre jaune à 14 points</h2> 
  <h2>Titre normal</h2> 
 </body> 
</html>

Exemple avec id :

<html> 
 <head> 
  <style type="text/css"> 
   #test {
    font size: 10pt; 
    color: fuchsia;
   } 
  </style> 
 </head> 
 <body> 
  <h2 id="test">Titre défini avec une ID</h2> 
  <h2>Titre normal</h2> 
 </body> 
</html>

Dans le cas de class, il est possible d’omettre le nom d’élément dans le sélecteur. La règle s’applique alors à n’importe quel type d’élément. Et dans le cas de id, il est possible de mettre un type d’élément à la place du "*". La règle n’est alors appliquée que si l’élément correspondant est bien de ce type. Pour en comprendre l’utilité, il faut se rappeler qu’une feuille de style peut être appliquées à plusieurs document différents.

Au lieu de désigner explicitement à l’aide de classes les éléments sur lesquels un certain style doit être appliqué, il est possible de sélectionner ceux qui possèdent une caractéristique donnée. C’est ce qui est appelé les pseudo-classes. Elles sont surtout utilisées pour l’élément <a>, afin de traiter les cas où un lien a été visité : visited, où le pointeur de la souris est sur lui : hover, où il est actif : active, et enfin les autres cas : link, mais hover et active fonctionne aussi pour n’importe quel élément. Par exemple :

a:link    { color: gray;   } /* gris      */
a:visited { color: purple; } /* violet    */
a:hover   { color: aqua;   } /* turquoise */
a:active  { color: maroon; } /* bordeaux  */

Pour fonctionner, ces règles doivent être entrées dans cet ordre (?).

La pseudo-classe first-letter désigne la première lettre d’un paragraphe, elle est très utile pour mettre des lettrines, ces grandes lettres au début d’un paragraphe.

4. Les balises <div> et <span>

Les balises <div> et <span> permettent d’ajouter des règles ou de supplanter celles déjà existantes, ce qui a pour effet de modifier ou d’enrichir localement le style.

<div> est utilisé pour des blocs de texte entier, c’est à dire qu’il y a un passage à la ligne au début et à la fin du bloc.

<span> est utilisé que pour des petites portions de texte à l’intérieur d’une ligne ou d’un paragraphe.

Tous deux admettent, en plus de l’attribut style, les attributs id et class, de même que lang et dir.

Exemple avec div :

<div style="margin-left: 40px; color: blue;" lang="fr"> 
 <p>Ce paragraphe sera placé à 40 pixels de la marge de gauche
 et de couleur bleu.</p> 
</div>

Exemple avec span :

<p class="normal">Dans ce paragraphe, les mots 
<span style="color: red; font-family: 'Verdana';">feuille de style</span>
seront dans la police Verdana et de couleur rouge.</p>

C’est à peu près tout ce qu’il faut savoir sur la mise en œuvre des feuilles de style. En revanche, le nombre important de propriétés et la complexité que prennent parfois ses effets peuvent les rendre délicates à utiliser. En effet, elles sont capables de gérer l’aspect et la disposition du texte et des images, l’espacement entre les éléments, et même les effets de transition. Nous ne décrirons bien sûr pas tout, et nous bornerons aux propriétés les plus utiles, les plus courantes, et les plus simples, ce qui permet de réaliser presque toutes les applications. Pour le reste, il vaut mieux consulter les spécifications détaillées sur le site de la W3C, cette présentation servant de guide en en donnant la philosophie générale.

XIV. Le Texte

Pour le texte contenu dans les paragraphes, les titres et les légendes, les propriétés suivantes définissent les paramètres des caractères.

color Définit la couleur d’avant plan, donc des caractères s’il s’agit de texte. Voir l’annexe A pour les différentes notations.

font-family Définit la famille de police. La valeur est une suite de noms de police séparés par une virgule. Si la première de la liste n’est pas disponible pour un caractère donné, c’est la seconde qui sera utilisée et ainsi de suite. Les polices les plus courantes sont Times New Roman, Arial ou Helvetica, Verdana, Courier New… Au lieu d’une police spécifique, une police générique de la liste suivante est utilisable : serif, sans-serif, cursive, fantasy et monospace. Les caractères avec serif ont des petites barres qui terminent les tiges, et les monospace ont une chasse fixe. Il est conseillé de toujours terminer la liste avec une police générique. Notons que les noms de polices doivent être entre guillemets, mais pas les noms génériques.

font-size Définit la taille de la police, ou plus exactement l’espacement entre les lignes, qui peut être exprimée de différentes façons :

font-style Définit un des trois styles : normal (défaut), italic et oblique. Cette propriété étend la fonctionnalité de la balise <i>

font-weight Définit le poids de la police, avec deux valeurs possibles : normal (défaut) et bold [gras]. Il est possible de spécifier différents degrés exprimés par les nombres 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900 et les mots-clé relatifs lighter [moins gras] et bolder [plus gras], mais il ne garantissent pas que de telles polices existent. Cette propriété étend la fonctionnalité de la balise <b>.

text-align Définit l’alignement horizontal du texte dans un bloc. Il admet les valeurs habituelles : left (à gauche), right (à droite), center (centré) et justify (justifié).

text-decoration Définit différents attributs du texte. Souligné : underline, surligné : overline, barré : line-through, ou aucun d’eux : none.

text-indent Définit l’indentation, c’est-à-dire le décalage vers la droite de la première ligne d’un paragraphe par rapport aux suivantes. Il peut être positif ou négatif, et exprimé dans n’importe quelle unité, ou en pourcentage par rapport à la largeur du paragraphe (voir annexe B.)

XV. Les Listes

Les styles offrent plus de choix pour la présentation des listes.

list-style-type Choisit le marqueur utilisé comme puce ou comme numérotation. Il y a de nombreuses possibilités :

Valeur Marqueur
none Aucun.
disc Un rond plein.
circle Un rond vide.
square Un carré.
decimal Numérotation en chiffres arabes : 1, 2, 3, ...
decimal-leading-zero Numérotation en chiffres arabes complétés par des zéros au début afin que les nombres aient tous la même longueur : 1, 2, 3 ou 01, 02, ... , 10 ...
lower-roman Numérotation en chiffres romains minuscules : i, ii, iii, ...
upper-roman Numérotation en chiffres romains majuscules : I, II, III, ...
lower-latin Lettres minuscules : a, b, c, ...
upper-latin Lettres majuscules : A, B, C, ...
lower-greek Lettres grecques minuscules : α, β, γ, ...

La distinction entre liste à puce et liste ordonnée a donc disparu. Les balises <ul> et <ol> sont utilisables indifféremment.

list-style-image Choisit l’URI d’une image qui servira de puce. Si elle n’existe pas, c’est ce qui a été définit par list-style-type qui sera utilisé. La syntaxe pour un URI est la suivante :

list-style-image: url("http://www.domaine.com/puce.gif");

list-style-position Choisit la position de la puce ou de la numérotation. Deux cas possibles, soit à l’intérieur avec la valeur inside, le paragraphe revient à la ligne à la verticale de la puce, soit à l’extérieur avec la valeur outside, tout le paragraphe est alors aligné à la droite de la puce.

XVI. L’Habillage

1. Le fond

Le fond de tout le document est défini dans la balise <body>, mais chaque élément peut aussi avoir son fond propre. On a le choix entre une couleur uniforme, ou une image disposée de diverses façons : en mosaïque, fixe, défilante...

background-color Spécifie la couleur de fond (voir annexe A.) Si la valeur affectée à cette propriété est le mot clé transparent, le défaut, la couleur sera celle de l’élément au-dessus de laquelle l’élément est affiché.

background-image Spécifie l’URI de l’image de fond. Si l’image n’est pas trouvée, si elle a des parties transparentes, ou si elle ne couvre pas tout l’élément, c’est la couleur définie par background-color qui devient visible aux endroits non définis.

background-repeat Spécifie si et comment l’image est affichée en mosaïque, selon la valeur : no-repeat, pas de mosaïque, repeat, mosaïque classique, repeat-x, seulement dans le sens horizontal, repeat-y, seulement dans le sens vertical.

background-attachment Spécifie si l’image doit rester fixe sur l’écran : valeur fixed, ou si elle doit défiler avec la page : valeur scroll. Si le fond est une image fixe qui n’est pas affichée en mosaïque, et qu’il s’agit d’un élément qui n’occupe pas toute la fenêtre du navigateur, il se peut qu’il ne soit pas visible.

2. Les bords

Avec les styles, il est possible de dessiner des bords de toute forme et couleur autour d’un élément quelconque, sans utiliser de tableau. Il y a d’abord trois propriétés principales.

border-width Indique l’épaisseur de la zone de bord, soit par une valeur numérique (voir annexe B), soit par un des trois mots-clé suivants : thin pour un bord fin, medium pour un bord moyen, et thick pour un bord épais. L’épaisseur réelle qui leur correspond n’est pas imposée, mais est constante dans le document. Il est possible de donner des valeurs différentes pour les bords horizontaux et verticaux en donnant deux valeurs séparées par un espace, ou pour le haut, la droite, le bas et la gauche dans cet ordre en donnant quatre valeurs.

border-style Indique le type de dessin du bord, avec les possibilités suivantes :

ValeurStyle
nonePas de bord, sa largeur est 0.
dottedPointillé.
dashedInterrompu.
solidContinu.
doubleDouble ligne continue.
grooveEn 3D, bord enfoncé.
ridgeEn 3D, bord en relief.
insetEn 3D, cellule enfoncée.
outsetEn 3D, cellule en relief.

border-color Indique la couleur du bord (voir annexe A.)

Ensuite ces propriétés peuvent être combinées ou détaillées.

border Indique les trois propriétés à la suite, dans l’ordre width, style puis color. Les propriétés de la fin de la liste peuvent être omises. Avec l’un des quatre préfixes -top (haut), -bottom (bas), -left (gauche), -right (droite), les propriétés du côté correspondant sont indiquées. Chaque propriété peut être indiquée séparément en ajoutant encore le préfixe -style… Par exemple border-right-color blue indique que le côté droit du bord sera de couleur bleue.

3. Le pointeur de la souris

cursor Détermine la forme que prendra le pointeur de la souris au-dessus de l’élément. Les valeurs possibles sont les suivantes :

Valeur Forme du curseur
auto Déterminée par le navigateur selon le type d’élément.
crosshair Réticule.
default Le pointeur par défaut du système.
pointer Forme pour un lien.
text Forme pour la sélection de texte.
wait Forme indiquant que le système est occupé.
help Forme indiquant une aide disponible.
move Forme indiquant que quelque chose sera déplacé.
x-resize Forme indiquant qu’un bord ou un coin sera déplacé lors d’un redimensionnement. x est alors n pour le bord nord, s pour sud, e pour est ou w pour ouest, ou encore par exemple nw pour le coin nord-ouest.

XVII. La Disposition

1. Le dimensionnement

Chaque élément définissant un contenu est délimité sur la page par un rectangle. Ce rectangle est composé de, en partant de l’extérieur :

width Fixe la largeur de l’élément.

height Fixe la hauteur de l’élément.

min-width Fixe la largeur minimale de l’élément.

max-width Fixe la largeur maximale de l’élément.

min-height Fixe la hauteur minimale de l’élément.

max-height Fixe la hauteur maximale de l’élément.

Chacune des propriétés suivantes s’utilise soit telle quelle pour fixer les quatre épaisseurs à la même valeur, soit en ajoutant à leur nom -top (haut), -bottom (bas), -left (gauche) ou -right (droit) pour le côté correspondant.

margin Fixe l’épaisseur de la marge de l’élément.

padding Fixe l’épaisseur du padding de l’élément.

Par exemple, margin-top fixe l’épaisseur de la marge du haut.

Toutes ces dimensions s’expriment en valeur absolue, en pixel, ou en pourcentage de la dimension de l’élément qui le contient (voir annexe B.)

2. L’alignement

vertical-align Choisit l’alignement dans le sens vertical d’un élément par rapport à la position normale dans l’élément qui le contient. Il s’exprime en valeur absolue ou en pourcentage, mais peut prendre aussi une valeur prédéfinie représentée par un mot clé :

Valeur Alignement
baseline C’est la position normale, la ligne de base du texte de l’élément est à la même hauteur que celle de l’élément qui le contient.
sub Position normale d’un exposant.
super Position normale d’un indice.
top Le côté supérieur du rectangle de l’élément est à la même hauteur que celui de l’élément qui le contient.
middle Le milieu du rectangle de l’élément est à la même hauteur que celui de l’élément qui le contient.
bottom La base du rectangle de l’élément est à la même hauteur que celle de l’élément qui le contient.
text-top Le côté supérieur du rectangle de l’élément est à la même hauteur que le haut de la police de l’élément qui le contient.
text-bottom La base du rectangle de l’élément est à la même hauteur que le bas de la police de l’élément qui le contient.

Les propriétés suivantes sont utiles lorsque des graphiques ou images sont mélangés avec du texte, et bien sûr que ceux-ci ne sont pas positionnés d’une autre manière.

float Choisit de quel côté l’élément considéré, souvent un graphique ou une image, doit être placé : left pour qu’il soit le long de la marge gauche, et right pour la marge droite.

clear Choisit si l’élément doit être affiché plus bas qu’un élément float précédent. Avec left, il doit l’être après les éléments avec float: left, avec right après les éléments avec float: right, avec both après les deux. Si la valeur est none, c’est le comportement par défaut, c’est-à-dire qu’un texte par exemple est affiché à côté de l’élément float s’il y a de la place. Cette propriété évite donc que des éléments soient affichés côte à côte.

3. Le positionnement

Le positionnement des éléments est le grand avantage des feuilles de style, puisqu’il est possible au pixel près. Finies les multitudes de balises (surtout les tableaux) pour essayer de faire une mise en page correcte. Il existe quatre types de positionnement :

Le positionnement relatif (le moins précis) : le navigateur affichera l’élément relativement à l’emplacement qu’il aurait s’il n’était pas positionné.

Exemple :

<div style="position: relative; left: 50px; top: 100px;"> 
 <p>Ce texte est décalé de 50  pixels vers la droite
 et de 100 pixels vers le bas par rapport à sa position.</p>
</div>

Le positionnement fixe : L’élément sera affiché à un endroit fixe de la fenêtre du navigateur, et ne bougera pas si l’on fait défiler le document.

Exemple :

<div style="position: fixed; left: 50px; top: 100px;"> 
 <p>Ce texte est placé à 50 pixels de la bordure gauche de la fenêtre
 du navigateur et à 100 pixels du haut de cette même fenêtre.</p>
</div>

Le positionnement absolu : Le placement d’un objet s’effectue par rapport au document entier, ou par rapport au premier élément qui le contient et dont la propriété position est différente de static, le défaut.

Exemple :

<div style="position: absolute; left: 50px; top: 100px;"> 
 <p>Ce texte est placé à 50 pixels de la bordure gauche de la page
 et à 100 pixels du haut de cette même page.</p>
</div>

Le positionnement statique : Enfin, la valeur static de la propriété position indique que le positionnement normal doit être appliqué, c’est la valeur par défaut.

Nous avons donc les propriétés suivantes :

position Définit le type de positionnement, et admet les valeurs absolute, relative, fixed et static.

top Définit la position du haut de l’élément.

left Définit la position du bord gauche de l’élément.

bottom Définit la position du bas de l’élément.

right Définit la position du bord droit de l’élément.

La taille de l’élément peut donc être définie en même temps.

Les autres unités que le pixel sont aussi utilisables (voir annexe B.) Si une dimension est exprimée en pourcentage, c’est par rapport à la hauteur ou la largeur de l’élément contenant, selon la direction.

Les éléments sont aussi positionnables dans le sens de la profondeur. Un élément imbriqué dans un autre a la même profondeur que lui, mais il existe la propriété suivante pour changer cela :

z-index Définit la profondeur de l’élément et de tous ceux qu’il contient par rapport à celui qui le contient. Elle prend des valeurs entières positives (plus haut) ou négatives (plus bas). Les éléments en dessous sont vus à travers les parties transparentes ou en dehors de ceux au-dessus.

XVIII. Les Tableaux

CSS permet de contrôler plus précisément les dimensions, l’alignement et les bords à l’intérieur d’un tableau. Chaque élément qui le compose admet les mêmes propriétés que les éléments ordinaires, à la différence qu’il ne possède pas de marge, contrairement à l’élément tableau lui-même.

Un tableau est composé de l’empilage d’éléments, ce qui détermine les propriétés d’affichage des fonds. Le fond d’un élément est visible à un point donné si tous les éléments supérieurs sont transparents à ce point. Ils sont empilés dans l’ordre suivant : l’élément <table> lui-même, les lignes, et enfin les cellules.

Toutes les propriétés décrites dans ce chapitre, sauf mention contraire, s’appliquent à l’élément <table>.

1. Le dimensionnement

Il y a deux modes de dimensionnement de la largeur des colonnes, le mode fixe et le mode automatique. Dans tous les cas, il n’y a pas vraiment de prescription rigide, et le résultat dépend surtout du navigateur.

table-layout Fixe le mode de dimensionnement des colonnes, avec les mots-clé fixed (fixe) ou auto (automatique). Si cette propriété est absente, le mode automatique est choisi si la propriété width de l’élément <table> est absente ou a pour valeur auto.

Le mode automatique : c’est celui qui demande le moins d’écriture, mais aussi qui donne moins de contrôle et le plus de travail au navigateur, ce qui risque de se ressentir par un délai à l’affichage. Les dimensions sont déterminées en fonction des propriétés padding, width et border-width si elles existent de tous les éléments constituants, et de leur contenu, de façon à ce que ces derniers soient affichés correctement.

Le mode fixe : la largeur des colonnes est déterminée par celle des cellules de la première ligne, sans tenir compte des contenus, en utilisant les propriétés width de ces cellules et du tableau. Si certaines sont manquantes, la largeur restante est partagée. Si au contraire elles sont redondantes, c’est la plus grande valeur qui s’applique et il y a un partage éventuel. Ce qui veut dire qu’il vaut mieux définir précisément toutes les largeurs de façon cohérente.

2. L’alignement

Dans un tableau, la propriété vertical-align des cellules est interprétée un peu différemment. Il s’agit alors de l’alignement par rapport à la ligne. Les propriétés sub, super, text-top et text-bottom ne sont pas prises en compte. Dans le cas où une cellule est répartie sur plusieurs lignes, top est relatif à la première, et bottom à la dernière.

Pour une cellule, la propriété text-align admet aussi une chaîne de caractère comme valeur. Cette chaîne sera alignée horizontalement pour toutes les cellules ayant la même valeur pour text-align. L’utilisation la plus courante est celle de l’alignement sur le point décimal :

text-align: ",";

caption-side pour l'élément <caption> détermine la place de la légende : top, le défaut, pour en haut et bottom pour en bas.

3. Les bords

Les cellules ayant chacune leur bord individuel, en plus de celui des lignes et du tableau, ils entrent en conflit. Il y a deux façons de le résoudre :

border-collapse Indique le mode de résolution des bords, avec les mots-clé collapse (fusionnés) ou separate (séparés)

Le mode séparé : tous les bords sont tracés comme si les cellules étaient simplement juxtaposées, et les bords des éléments ligne sont réduits à une épaisseur nulle. Ce n’est bien sûr pas la manière habituelle de comprendre un tableau, mais d’autres applications sont possibles comme par exemple un album photo, où chaque cellule a un bord séparé.

border-spacing Indique la distance entre les bords des cellules entre elles ou d’une cellule et du tableau. S’il y a deux valeurs, la première est pour la direction horizontale et la deuxième pour la direction verticale. Si la valeur est exprimée en pourcentage, c’est de la hauteur ou de la largeur de l’élément <table> (voir annexe B.)

empty-cell Si la valeur de cette propriété est hide [cacher], les bords des cellules vides ne seront pas tracés. Ils le seront avec show [montrer]. Si elle contient seulement &nbsp; elle est considérée comme non vide.

Le mode fusionné : C’est le cas usuel où les bords traversent le tableau de façon continue. A chaque côté, un seul bord est tracé, celui d’une ligne, d’une colonne ou du tableau selon certaines règles simples. Le principe de base étant que c’est le bord le plus voyant qui est choisi. Spécifiquement :

Afin d’avoir un meilleur contrôle sur ce procédé, la propriété border-style admet la valeur représenté par le mot-clé hidden. Si un des bords possède cette valeur, aucun bord n’est tracé à cet endroit, dans tous les cas.

XIX. Exemple

Afin de rendre plus concret l’utilisation des styles, et de montrer que ce n’est pas si complexe de les mettre en œuvre, voici un modèle de document avec une feuille de style.

Document HTML

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
  <meta charset="utf-8">
  <title>{titre}</title>
  <meta name="description" content="{description}">
  <meta name="author" content="tout le monde peut être webmaster">
  <link rel="stylesheet" href="style.css" title="exemple">
  <style type="text/css">
    i {
      font-style: oblique;
    }
    h4 {
      color: red;
    }
  </style>
</head>
<body>
<div id="header">
  <h1>{titre}</h1>
</div>
<div id="nav">
  <img src="image.gif" width="100%">
  <ul>
    <li><a href=".">accueil</a></li>
    <li><a href="plan.html">plan du site</a></li>
    <li><a href="mailto:{email}">contact</a></li>
  </ul>
</div>
<div id="main" style="background-image: 'bg.gif';">
  <table style="table-layout: fixed;">
    <tr>
      <td></td>
      <td style="border: thick double navy; color: navy;
        padding: 5px;"><p>{paragraphe}</p></td>
      <td></td>
    </tr>
    <tr>
      <td><span class="accent">{accent}</span></td>
      <td></td>
      <td><p>{texte}<span class="fine">{fine}</span></p></td>
    </tr>
  </table>
</div>
<div id="aside">
</div>
<div id="footer">
  [<a href="">accueil</a> |
   <a href="plan.html">plan du site</a> |
   <a href="mailto:{email}">contact</a>]
</div>
</body>
</html>

Feuille de style CSS

@import "http://www.mydomain.com/hoststyle.css"

a:link    { color: blue; }
a:visited { color: purple; }
a:hover   { color: green; }
a:active  { color: red; }

body {
  background-color: silver;
  color: black;
  font: 16px 'verdana', 'arial', sans-serif;
  padding: 0;
  margin: 0;
}
p:first-letter {
  font-size: 3em; 
  font-weight: bold;
}
h1 {
  font-size: 3.5em;
  font-weight: 900;
  text-align: center;
}
h2 {
  font-style: italic; 
  text-decoration: underline;
}
h3 {
  font-family: serif;
  color: #0000c0;
}
ul {
  list-style-type: none;
}
.accent {
  text-decoration: underline;
  color: red;
}
.fine {
  font-size: smaller;
}
#header {
  text-align: center;
  color: olive;
  padding: 2ex;
  width: 100%;
}
#main,
#nav,
#aside {
  vertical-align: top;
  height: 40em;
  float: left;
}
#main {
  background-repeat: repeat;
  text-align: justify;
  text-indent: 0;
  width: 71.4%
}
#nav {
  background-color: gray;
  width: 14.3%;
}
#aside {
  background-color: white;
  width: 14.3%;
}
#footer {
  font-size: smaller;
  text-align: center;
  width: 100%;
  clear: both;
}

A. Les Couleurs

Toutes les couleurs possibles sont représentables par leur proportion de rouge, de vert et de bleu. C’est ainsi que les écrans les reproduisent. Trois nombres de 0 à 255 suffisent pour désigner une couleur, sans que les nuances les plus proches ne soient distinguables à l’œil, ce qui fait tout de même plus de 16 millions de couleurs.

Il n’y a pas moins de 3 notations différentes :

En décimal : la syntaxe suivante est utilisée : rgb(r,v,b)r, v et b sont des nombres entiers de 0 à 255 représentant respectivement l’intensité de rouge, de vert et de bleu.

En pourcentage : les nombres de 0 à 255 sont remplacés par des pourcentages de 0% à 100% : rgb(5%,15%,25%).

En hexadécimal, hérité de HTML : la couleur est représentée par le caractère "#" suivit de 6 chiffres hexadécimaux : #12abff, où 12 est l’intensité du rouge, ab celle du vert et ff celle du bleu. Le système hexadécimal est de base 16 avec les chiffres suivants : 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e et f, minuscule ou majuscule.

En fait, il y a une quatrième notation avec les noms anglais pour 16 couleurs spéciales :

Nom anglais Décimal Pourcentage Hexa
black (noir) rgb(0,0,0) rgb(0%,0%,0%) #000000
red (rouge) rgb(255,0,0) rgb(100%,0%,0%) #ff0000
lime (vert brillant) rgb(0,255,0) rgb(0%,100%,0%) #00ff00
blue (bleu) rgb(0,0,255) rgb(0%,0%,100%) #0000ff
aqua (turquoise) rgb(0,255,255) rgb(0%,100%,100%) #00ffff
fuchsia (rose) rgb(255,0,255) rgb(100%,0%,100%) #ff00ff
yellow (jaune) rgb(255,255,0) rgb(100%,100%,0%) #ffff00
white (blanc) rgb(255,255,255) rgb(100%,100%,100%) #ffffff
maroon (bordeaux) rgb(128,0,0) rgb(50%,0%,0%) #800000
green (vert) rgb(0,128,0) rgb(0%,50%,0%) #008000
navy (bleu marine) rgb(0,0,128) rgb(0%,0%,50%) #000080
teal (bleu-vert) rgb(0,128,128) rgb(0%,50%,50%) #008080
purple (violet) rgb(128,0,128) rgb(50%,0%,50%) #800080
olive (vert olive) rgb(128,128,0) rgb(50%,50%,0%) #808000
gray (gris) rgb(128,128,128) rgb(50%,50%,50%) #808080
silver (argenté) rgb(192,192,192) rgb(75%,75%,75%) #c0c0c0

B. Les Dimensions

Les dimensions s’expriment dans plusieurs unités, en plus du pixel noté px, notamment les unités utilisées en typographie. La base en est le point, noté pt, qui est égal à 1/72 de pouce, soit environ 0,35 mm. Le pica noté pc vaut 12 points, mais est rarement utilisé. Quand une taille de police courante est définie, d’autres unités dérivées sont disponibles. Il s’agit de em, qui représente la taille de caractère courante, c’est-à-dire la distance entre des lignes de texte, et ex, la hauteur du corps de caractère, c’est-à-dire la hauteur du caractère "x".

Il y a aussi d’autres unités absolues : le millimètre mm, le centimètre cm et le pouce in.

Finalement, une dimension peut s’exprimer en pourcentage d’une autre dimension fonction de la propriété, la taille de l’élément contenant par exemple.

La notation d’une dimension ne doit contenir aucun espace. Exemples :

font-size: 12pt
left: -8%

Bien entendu, il est préférable d’utiliser les unités relatives quand c’est possible, ce qui permet de changer la taille du document entier en effectuant une modification en un seul endroit, et de s’adapter automatiquement au périphérique d’affichage ou à la fenêtre.

Le tableau suivant résume toutes les unités :

UnitéDéfinition
A
b
s
o
l
u
e
mmUn millimètre.
cmUn centimètre.
inUn pouce = 25,4 mm.
pt Un point = 1/72″ ∼ 0,35 mm.
pc Un pica = 12 pt = 1/6″ ∼ 4,2 mm.
R
e
l
a
t
i
v
e
%Pourcentage d’une dimension fonction de la propriété.
pxTaille d’un pixel.
emTaille courante de caractère.
exHauteur courante du caractère "x".

C. L’Héritage

Certaines propriétés sont héritées par les éléments imbriqués, d’autres non. Cela ne se fait bien sûr pas sans logique, par exemple la fonte de caractère est héritée, les marges non. Le tableau suivant permet de dissiper tout doute, sachant que pour changer une propriété, il est toujours possible de la redéfinir dans l’élément, et qu’inversement à une propriété peut être assignée la valeur de l’élément contenant en utilisant le mot clé inherit.

PropriétéHéritée
colorOui
fontOui
text-align Oui
text-decorationNon
text-indent Oui
list Oui
backgroundNon
borderNon
cursor Oui
width Non
heightNon
marginNon
paddingNon
vertical-alignNon
floatNon
clearNon
positionNon
topNon
rightNon
bottomNon
leftNon
z-index Non
table-layoutNon
border-collapseOui
border-spacingOui
empty-cellOui

Creative Commons License
Tout le Monde Peut Être Webmaster de Cl.Massé & Pierre Equey est mis à disposition selon les termes de la licence Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 3.0 Unported.