Accueil du site > WEBMASTERING > STYLES CSS

CSS : Généralités

Les feuilles de styles permettent d’harmoniser la présentation des documents. Apparues en 1997, les feuilles de styles en cascade constituaient une nouveauté puisqu’elles réorientaient indirectement HTML et PAO.

LES REGLES DE STYLE

Une règle de style comprend deux parties :

- Le sélecteur, qui définit la portée de la règle. Il peut être formé de noms d’éléments, de classes ou d’identificateurs. Les premiers figurent tels quels, les seconds sont précédés d’un point et les derniers, d’un caractère dièse (#).

- Une liste entre accolades de définitions de propriétés séparées par des pointsvirgules. Les propriétés sont des couples "nom:valeur".

LES ELEMENTS

Un style peut s’appliquer à un élément ou à plusieurs éléments :

<STYLE type="text/css">
H1 font-family:courier new
P, DIV color:red
</STYLE>

signifie que tous les éléments H1 seront affichés avec une police Courier New et que le contenu de tous les éléments P et DIV seront affichés en rouge. On peut faire des distinctions plus fines en écrivant :

<STYLE type= text/css">
P I color:red
</STYLE>

Remarquez l’absence de virgule entre les deux noms d’éléments. Cette règle signifie qu’à l’intérieur d’un élément P, et là seulement, tout ce qui est en italique (contenu dans un élément i) sera affiché en rouge. Ainsi, avec cette règle, dans :

<P>Le mot <I>amour</I> est du féminin au pluriel.</P>
"amour" sera affiché en italique et en rouge alors que dans
<H4>Les couleurs <I>jaune</I> et bleu</H4>
"jaune" sera affiché avec la couleur par défaut (le noir, en général).

LES CLASSES

Une classe sert, par exemple, à afficher de la même façon tout ce qui concerne un sujet particulier. Si, par exemple, on prépare une présentation Web ayant pour sujet une imprimante, la section consacrée à l’installation pourrait ainsi être affichée en vert, la section consacrée à l’utilisation en noir (couleur par défaut) et la section qui traite du dépannage, en rouge. Le code de la page se présenterait ainsi :

<STYLE type="text/css">
.installation color:green
.depannage color:red
</STYLE>
......
<DIV class="installation">
.....tout ce qui concerne l’installation ...
</DIV>
<DIV>
.....tout ce qui concerne l’utilisation ...
</DIV>
<DIV class="depannage">
...tout ce qui concerne le dépannage...
</DIV>

LES IDENTIFICATEURS

Ils permettent de modifier localement un élément. Dans l’exemple ci-dessus, si on veut que, dans la section "Installation", la phrase suivante :

N’oubliez pas de vérifier que vous avez bien inséré correctement le récipient contenant le tonner.

soit affiché en jaune sur fond noir, on ajoutera la règle suivante à l’élément STYLE :

#tonner color:yellow ; background-color:black

et on encadrera ainsi la phrase

<SPAN id="tonner">N’oubliez pas de vérifier que vous avez bien inséré correctement le récipient contenant le tonner.</SPAN>

L’ATTRIBUT STYLE

Enfin, il existe un dernier moyen de particulariser un élément sans avoir recours à un identificateur : c’est d’y appliquer directement le style souhaité. Au lieu d’ajouter une règle dans l’élément STYLE, on aurait pu utiliser l’attribut style et écrire plus simplement :

<SPAN style="color:yellow ; background-color:black"> N’oubliez pas de vérifier que vous avez bien inséré correctement le récipient contenant le tonner.</SPAN>

LES CONFLITS

Avec une telle diversité de moyens, on comprend qu’il puisse y avoir contradiction entre plusieurs règles, par exemple, lorsqu’on déroge localement à une règle qui a été définie dans l’élément STYLE. Sans entrer dans l’étude des problèmes d’héritage que peut poser ce type de conflit, disons qu’en général, c’est le dernier qui a parlé (c’est-à-dire la règle la plus intérieure) qui l’emporte.

LES PROPRIETES

Les propriétés sont classées par famille, selon les types d’éléments auxquels elles s’appliquent. On peut les répartir ainsi : les blocs, le texte, les polices de caractères, les images, les arrière-plans et les listes.

LES VALEURS

Si le couple propriété:valeur s’apparente au couple attribut=valeur que nous avons rencontré dans l’étude de HTML, il en diffère sur deux points importants :

- Alors que, dans un élément, les attributs sont séparés les uns des autres par un simple espace, dans une règle de style, c’est un point-virgule qui est utilisé.

- L’affectation d’une valeur à un attribut s’effectue au moyen du signe égale (=), alors que pour une propriété, c’est le caractère deux-points ( :) qui est utilisé.
Selon la nature de la propriété, plusieurs types d’unité peuvent être utilisés.

• Valeurs numériques

Elles s’expriment en système décimal, par des valeurs positives, négatives (lorsque, pour ces dernières, cela a un sens) ou nulles, entières ou fractionnaires. Les unités peuvent être absolues ou relatives.

- Unités absolues. Millimètres (mm), centimètres (cm), pouces (inch) ou pixels (pixel). Avec les polices de caractères, on utilise encore le point (pt) et le pica (pica).

- Unités relatives. Pourcentage (%), cm (em) qui représente la taille de la police courante, et ex (ex) qui est la hauteur comprise entre la ligne de base et la partie la plus haute des caractères bas de casse dépourvus d’extension verticale (le "m", par exemple).

• Couleurs

On retrouve les deux notations (nom de couleur et triplet RGB) que nous avons vues pour les éléments HTML, mais le triplet peut revêtir deux autres formes rgb (a, b, c) où a, b et c représentent des nombres décimaux compris entre 0 et 255, et rgb(a%, b%, c%) où les trois valeurs représentent les pourcentages relatifs de chaque composante de couleur. Ainsi rgb (128, 64, 0) équivaut à rgb
(50%, 25%, 0%).

• Mots clés

Certaines propriétés peuvent s’exprimer par des mots tels que small, smaller, large, x-large, dotted, dashed, etc. (petit, plus petit, grand, très grand, pointillé, en tirets).

• Autres unités

La graisse d’une police de caractères, c’est-à-dire l’épaisseur du trait, s’exprime soit par des mots clés, soit par une série de nombres allant de 100 (le plus léger) à 900 (le plus gras). Les URL se notent d’une façon spéciale dont voici deux exemples, selon qu’il s’agit d’une URL externe ou d’une URL locale :

url(http://www.google.fr)
url(mon_image.jpg)

Format PDF l l afficher une version imprimable de cet article Imprimer cet article