|
Le W3C n'ayant pas intégré directement le CSS dans la définition d'un document (X)HTML, il est nécessaire de le déclarer pour l'incorporer.
Il est existe quatre façon d'incorporer du CSS dans un document (X)HTML :
- le style "en ligne",
- le style du document,
- le style importé,
- le style externe
Le style "en ligne" :
Le style "en ligne" est le style déclaré directement dans une balise, en tant qu'attribut, grâce à l'attribut "style"
Cette manière de procéder n'est pas très recommandée car elle est contraire à l'intérêt des feuilles de style étant donné que le style est incorporé au sein de chaque balise. Elle peut toutefois servir de façon exceptionnelle afin définir un style à élément ne nécessitant pas une définition globale.
Exemple :
<h1 style="color:red;";>Style en ligne</h1>
Style en ligne
Le style du document :
Le style du document est déclaré dans l'en-tête (voir structure d'un document (X)HTML) grâce à la balise <style>.
Exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/dTD/html1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>...</title>
...
<style type="text/css">
<!--
h2{color:blue;}
-->
</style>
</head>
<body>
<h2>Style du document</h2>
</body>
</html>
Style du document
Le Style importé :
Comme son nom l'indique, le style importé correspond à l'importation d'une feuille de style extérieure au document. C'est à partir de là que commence réellement l'utilité des feuilles de style car la définition de la chartre graphique d'un site entier peut être changée en ne modifiant qu'un seul fichier portant l'extension « .css ».
Ce fichier CSS est un document texte tout simple dans lequel sont introduites les définitions de style. Il est ensuite importé dans la déclaration de style du document grâce à la commande "@IMPORT URL(url)" directement après l'ouverture de la balise<style>
Si plusieurs définitions importées concernent la même balise, seule la dernière sera prise en compte par le navigateur.
Exemple
Fichier style.css
h3{color:lime;}
Dans le document HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/dTD/html1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>...</title>
...
<style type="text/css">
<!--
@IMPORT URL(style.css);
-->
</style>
</head>
<body>
<h3>Style importé</h3>
</body>
</html>
Style importé
Le style externe :
Le style externe fonctionne comme le style importé, c'est-à-dire avec un fichier portant l'extension « .css » extérieur au document, à la différence que celui-ci n'est pas importé mais qu'il est lié au document web grâce à la balise <link>
- 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.
L'utilisation du style externe est plus répandue même si le résultat est rigoureusement identique. La seule différence réside dans le niveau "d'importance" accordé à ces différentes méthodes.
Exemple
Fichier style.css
h4{color:#FF00FF;}
Dans le document HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/dTD/html1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>...</title>
...
<link rel="stylesheet" type="text/css" href="style.css" />
-->
</style>
</head>
<body>
<h4>Style externe</h4>
</body>
</html>
Style externe
Il est possible de définir plusieurs styles en utilisant les différents moyens qu'offrent les CSS. Ainsi, lorsque plusieurs feuilles de style externes sont appelées, on obtient ce que l'on appelle une cascade de styles, c'est-à-dire une combinaison de styles pour divers éléments HTML. Si plusieurs styles concernent le même élément, seul le dernier style sera conservé.
Exemple :
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" type="text/css" href="style2.css"/>
<link rel="stylesheet" type="text/css" href="style3.css"/>
D'autre part, lorsque plusieurs styles sont appelés dans une page en utilisant les différents moyens d'inclusion possibles, la prise en compte des styles, lorsque plusieurs styles sont redondants, est telle que le style le plus proche du contenu est maintenu. Ainsi, l'ordre de priorité est le suivant. C'est le fameux "niveau d'importance" :
Style en ligne > Style du document > Style importé > Style externe
|
![[Valid RSS]](images/valid-rss.png "Validate my RSS feed")
