|
Contrôler
l’apparence des ses pages HTML s’avère parfois très frustrant, car
le langage en lui-même n’est pas doté d’outils puissants et intuitifs
pour le faire. Depuis les versions 4.0 de Navigator, d’Opera et
d’Internet Explorer, il est devenu possible de remédier à cela en
tirant profit des spécifications du consortium W3C
concernant les feuilles de style (Cascading Style Sheets
ou CSS).
Ce langage, complémentaire du HTML, procure une totale maîtrise
de l’affichage des pages web. Il existe aujourd’hui deux niveaux
de spécifications du langage (CSS1 et CSS2), le second niveau n’étant
implémenté que par les navigateurs les plus récents. Des références
pour ces deux niveaux sont disponibles auprès du W3C.
Une feuille de style définit un modèle pour une ou plusieurs pages
HTML. Un style associé à une balise en particulier ne sera précisé
qu’une seule fois, simplifiant considérablement les changements
ultérieurs et réduisant sensiblement le poids des pages. Par exemple,
on pourra regrouper, au sein d’un unique fichier (.css), toutes
les règles de style qui définissent l’aspect visuel d’un site entier.
Cela s’avère particulièrement pratique pour des sites professionnels
dont la charte graphique est rigoureuse, et plus encore quand celle-ci
doit subir un renouvellement en profondeur. Cet article explique
ce qu’est une règle CSS1 et précise comment un ensemble de
règles peut être appliqué à un document HTML. La définition de classes
et les spécifications CSS2 sont étudiés dans
un autre texte, où l’on explorera plus en profondeur
les atouts du langage.
A quoi ressemble une règle CSS?
Prenons l’exemple suivant : imaginons que notre page web utilise
deux types de police (disons : Arial 12pt en italique rouge
et Verdana 10pt en bleu), et ce de très nombreuses fois et à tour
de rôle. Cela nécessitera, en HTML, d’utiliser la balise <FONT>
et sa cohorte d’attributs pour chaque changement de police. C'est
à la fois fastidueux et préjudiciable au temps de chargement
de la page. Mais en utilisant les feuilles de style, ce problème
disparaît : il nous suffit de caractériser chacune de nos polices
avec les balises <H1> et <H2> par exemple, balises auxquelles
on aura préalablement associé le style que nous souhaitons :
H1 {font-family:Arial; font-size:12pt; font-weight:italic;
color:red;}
et:
H2 {font-family:Verdana; font-size:10pt; color:blue;}
Le modèle étant le suivant:
Sélecteur {Définition de style}
Comment combiner CSS et HTML?
Il existe trois façons distinctes d’insérer ces définitions de style
dans le code HTML. La première consiste à définir une balise <STYLE>
au sein de la balise <HEAD> du document :
<STYLE
type="text/css">
<!--
H1 {font-family:Arial; font-size:12pt; font-weight:italic; color:red;}
H2 {font-family:Verdana; font-size:10pt; color:blue;} -->
-->
</STYLE>
La deuxième méthode consiste à utiliser l’attribut STYLE des balises
<H1> et <H2>:
<BODY>
<H1>H1 normal</H1>
<H1 STYLE="font-family:Arial; font-size:12pt; font-weight:italic;
color:red">H1 modifié</H1>
<H2>H2 normal</H2>
<H2 STYLE="font-family:Verdana; font-size:10pt; color:blue">H2
modifié</H2>
</BODY>
Cette solution,
bien sûr, tout en permettant de conserver le style « par défaut »
de <H1> et <H2>, est de loin la moins avantageuse. Elle
ne s’applique que pour définir le style d’élements isolés.
Enfin, la troisième méthode consiste à établir un lien vers le fichier
.css qui contient toutes les règles. Cela impose de créer un fichier
regles.css par exemple, qui contient les lignes suivantes, à l’exclusion
de toute autre :
H1
{font-family:Arial; font-size:12pt; font-weight:italic; color:red;}
H2 {font-family:Verdana; font-size:10pt; color:blue;}
Puis, dans la balise <HEAD> de note fichier HTML, on écrira :
<LINK REL="stylesheet" TYPE="text/css" HREF="regles.css"
TITLE="MonStyle">
Ainsi, plusieurs liens externes peuvent être « importés »
dans le document HTML, et dans le cas de règles conflictuelles,
la dernière définition l’emporte.
Ces exemples sont parmi les plus simples que l’on puisse donner,
et ne reflètent que vaguement la capacité de contrôle que procurent
les feuilles de style aux développeurs web. Il devient possible,
en effet, de positionner un texte au pixel près, et de maîtriser
ainsi des aléas inhérents au seul langage HTML.
|
Accueil
[