Une feuille de style est un ensemble de règles s'appliquant à des éléments HTML spécifiques ou à une classe prédéfinie. On pourra, par exemple spécifier que tous les titres de niveau 4 seront affichés avec une police de caractère de type "courrier new" et en vert.
<style> H4 { font-family: "courier new"; color: green } </style> |
<H4>Titre de niveau 4</H4> |
Titre de niveau 4 |
ou bien définir une classe avec ses attributs:
<style> .evidence { font-family: verdana; color: red; text-decoration: underline } </style> |
<SPAN class=evicence>Texte important</SPAN> | Texte important |
Le modèle de feuilles de style retenu par le W3C est CSS1 (Cascading Style Sheet, level 1). Dans ce modèle, les feuilles de style peuvent être réunies en cascade et l'ensemble définira la mise en page du document final.
Les feuilles de style peuvent être adjointes au document de plusieurs façons différentes:
Il est prévu de les incorporer au navigateur lui-même. Ce n'est pas encore fait!
On peut les enregistrer dans des fichiers séparés (.CSS) et les inclure dans le document au moyen d'une balise LINK dans l'en-tête du document: <LINK HREF="fichier.CSS" REL="stylesheet" TYPE="text/css">
On peut les inclure directement dans l'en-tête du document à l'aide du conteneur <STYLE type="text/css">...</STYLE>.
On peut modifier localement le style d'un élément HTML à l'aide de l'attribut: STYLE.
Il est aussi prévu que l'internaute puisse appliquer ses propres feuilles de style selon ses goûts ou ses besoins.
Comme nous l'avons mentionné au début, une feuille de style est un ensemble de directives (ou règles). Une règle se compose de deux parties:
On pourra, par exemple avoir:
<STYLE> EM {font-family: courier; color: green} H1, H2 {color: blue} </STYLE> |
Une classe permet de regrouper des éléments HTML différents selon des thèmes.
<STYLE type="text/css">
.conseil {color: green}
.utilisation {color: blue}
.avertissement {color: red}
H2.utilisation {font-weight: bolder}
</STYLE>
...
<H2>Mise en marche</H2>
<H2 class=utilisation>Utilisation de l'appareil</H2>
...
<P class=avertissement>Les circuits de haute tension présentent un danger!</P>
Les identificateurs permettent d'effectuer des modifications ponctuelles à une règle générales.
<STYLE type="text/css">
#special {color: yellow}
#warning, H4, .rouge {color: red}
</STYLE>
...
<P ID="special">Les dangers psychologiques du WEB.</P>
<STYLE type="text/css"> P.premier:FIRST-LETTER {text-transform: uppercase} P.ligne1:FIRST-LINE {font-size: 300%; float: left} </STYLE> |
Pour contrôler la couleur d'affichage des hyperliens.
<STYLE type="text/css">
A:LINK {color: green}
A:ACTIVE {color: yellow}
A:VISITED {color: maroon}
</STYLE>
Pour tenir compte du contexte dans lequel est utilisé un élément.
<STYLE type="text/css">
DD I {color: green}
P TT {color: red}
UL UL UL I {color: silver}
</STYLE>
Les règles ou directives sont des ensembles de paires "propriété:valeur". Il existe environ une cinquantaine de propriétés prédéfinies.
Le conteneur DIV permet de regrouper plusieurs éléments HTML pour lui appliquer un même style tandis que le conteneur SPAN permet, au contraire, d'isoler une partie d'un élément.
<DIV STYLE="margin-left:40">
... </DIV> ... <SPAN STYLE="letter-spacing: 0.3em">...</SPAN> |
Un document HTML peut être considéré comme l'emboîtement de plusieurs éléments. Les éléments les plus intérieurs hériteront des propriétés des éléments les plus extérieurs.
<style> .gros {font-size: 120%} </style> |
g<SPAN class=gros>r<SPAN class=gros>o<SPAN class=gros>s </SPAN> </SPAN> </SPAN> | gros |
Lorsqu'il y a conflit entre deux règles, c'est généralement la plus proche de l'élément qui gagne. Nous aurons, dans l'ordre:
Pour ceux qui sont intéressés voici deux autres documents:
Le chapitre 11 de votre manuel