|
Les styles peuvent être incorporés au sein du document html de trois manières différentes :
Style du document : déclaré dans l'en-tête, c'est-à-dire au sein des balises <head> et </head>
Style en ligne : c'est-à-dire en tant qu'attribut des balises
Style externe : déclaré dans un fichier à part dont l'extension est .css
Style importé : déclaré dans un fichier à part dont l'extension est .css
Style du document
Les feuilles de style d'une page web sont déclarées grâce à la balise STYLE , au sein des balise <head> et </head> .
<!doctype html public "-//W3C//Dtd html 4.0//EN">
<html>
<head>
<style type="text/css">
<!--
Définition des styles;
-->
</style>
</head>
<body>Contenu de la page</body>
</html>
L'attribut type="text/css" de la balise <STYLE> permet de spécifier le type de feuille de style utilisée. La balise de commentaire <!-- ... --> sert à éviter que des navigateurs peu récents, donc ne supportant pas les feuilles de style, affichent ces informations.
Style en ligne
Il est également possible de définir le style au sein même d'une balise d'un document. On appelle ce type de déclaration une déclaration en ligne .
Cette façon de définir les feuilles de style est peu recommandée car elle va à l'encontre de l'intérêt des feuilles de style, dans la mesure où le style est embarqué au sein même de chaque élément. Cela peut néanmoins servir pour définir de façon exceptionnelle un style pour un élément html particulier, ne nécessitant pas une définition globale.
Pour définir un style en ligne , il suffit de renseigner l'attribut "style" de la balise <html> à laquelle on souhaite appliquer un style particulier :
<!doctype html public "-//W3C//Dtd html 4.0//EN">
<html>
<head> ... </head>
<body>
... <balise style="style:valeur;"> ... </balise> ...
</body>
</html>
Il est possible d'appliquer un style "en ligne" à toutes les balises html, hormis les balises suivantes : BASE, BASEFONT, head, html, META, PARAM, SCRIPT, STYLE, title
Voici un exemple de style appliqué à une balise <h1> :
Code |
<!doctype html public "-//W3C//Dtd html 4.0//EN">
<html>
<head> ... </head>
<body>
... <h1 style="font: 18px Verdana; font-weight:bold;"> Titre </h1> ...
</body>
</html> |
| Résultat |
Titre |
Style externe
Le fait de pouvoir stocker la définition des feuilles de style à l'extérieur du document est un "plus" car il est ainsi possible, en modifiant le fichier contenant les feuilles de style, de changer l'allure de toutes les pages web s'y référant !
Il s'agit dans un premier temps de créer un fichier texte contenant les feuilles de style et dont l'extension est .css , par exemple style.css :
<!--
<!doctype html public "-//W3C//Dtd html 4.0//EN">
body {background-image: home.gif;}
li {font: 13px Verdana;}
b {font: 14px Verdana; font-weight: bold;}
a {
font:12px Verdana;
font-weight: bold;
color=black;
text-decoration: none;
}
h1 {font: 16px Arial;font-weight: bold;color=black;}
h2 {font: 14px Arial;font-weight: bold;color=black;}
-->
Dans un second temps il suffit de créer dans chaque page html le raccourci vers cette page de définition de style :
<!doctype html public "-//W3C//Dtd html 4.0//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>Contenu de la page</body>
</html>
La balise <LINK> avertit le navigateur qu'il doit chercher un document situé à l'extérieur de la page html.
L'attribut rel="stylesheet" précise que le document en question est une feuille de style externe.
L'attribut type="text/css" précise le type de feuille de style.
L'attribut href=" url " donne l' url de la feuille de style, c'est-à-dire son emplacement sur Internet.
Style importé
Les recommandations du W3C offrent une dernière façon d'inclure des feuilles de style dans un document: en important des feuilles de style. Il est en effet possible d'importer des feuilles de style externes au niveau de la déclaration du style de document, en insérant la commande @IMPORT immédiatement après la balise style :
<!doctype html public "-//W3C//Dtd html 4.0//EN">
<html>
<head>
<style type="text/css">
<!--
@IMPORT url(url de la feuille à importer); Définition des styles du document;
-->
</style>
</head>
<body>Contenu de la page</body>
</html>
Si plusieurs définitions importées concernent la même balise, seule la dernière sera prise en compte par le navigateur.
|
