Feuilles de style en HTML 4.0
La notion de style est récente puisque c'est l'innovation la plus marquante de la version 4.0 d'HTML. Il s'agit d'agir finement sur la présentation des pages HTML afin de changer la présentation des différents
éléments d'une page HTML : polices de caractères, marges, couleurs, emplacements, images d'arrière plan, etc...
Nous rentrons de plein pied dans le monde impitoyable des différences entre navigateurs puisque vous pourrez constater sur les exemples ci-dessous que certaines modifications sont acceptés par IE et pas par
Netscape et vice-versa.
L'analogie avec un traitement de texte est évidente puisque tous les traitements
de texte modernes (Word en tête) permettent de définir le style des différents
composants du document. La page Propriétés de style
résume les principales propriétés de style définies dans la norme HTML 4.0.
Il existe trois grandes techniques d'utilisation des styles dans les pages HTML.
- style liée par une feuille de style : La page HTML est liée à une feuille de style définie dans un fichier à part (*.css). Le lien entre la page HTML et la feuille de style se fait à l'aide de la balise simple <LINK> insérée dans l'entête du fichier HTML. Par exemple :
<LINK TITLE="TEST" TYPE="text/CSS" rel="stylesheet" HREF="mon_style.css">
- style incorporé dans la page : la définition du style se fait dans l'entête même de la page HTML entre les balises <STYLE> et </STYLE>
- style intégré dans la balise HTML : la définition du style se fait alors à l'intérieur même de la balise HTML. Par exemple :
<P Style="...">
Style lié
La présente page HTML est très différente de ce que nous avons vu jusqu'à présent. Cette feuille est néanmoins banale dans sa structure (balises tout à fait standards) si ce n'est qu'elle fait appel, dans son entête, à une feuille de style par la commande :
<LINK TITLE="TEST" TYPE="text/css" rel="stylesheet" HREF="mon_style.css">
La feuille de style en question ressemble à ceci :
BODY {
font-family: New Baskerville;
font-size: 14pt;
color: NAVY;
margin-left: 2.5cm;
text-align:justify;
background-repeat:no-repeat;
background-position:center;
background-image:url(leopard.jpg);
}
H1 {
font-family: Arial;
font-size: 24pt;
color: RED;
font-weight: bold;
text-transform: uppercase;
}
H2 {
font-family: Arial;
font-size: 18pt;
color: YELLOW;
text-decoration: blink;
}
Feuille de style incorporée
Cette page HTML définie son propre style grâce à la méthode dite intégrée.
Cette définition de style effectue les choses suivantes :
- définition, à l'intérieur de la balise <head> </head> et à l'aide de la balise <style> </style>, d'un style pour notre page HTML.
Notez l'utilisation des commentaires permettant de cacher la définition
de style aux navigateurs anciens ne supportant pas les feuilles de style.
- définition de 3 classes de style : .nom1, .nom2 et .nom3
- pour chacun de ces styles, définition des attributs se style suivants :
- font-family pour la police de caractères
- font-size pour la taille (en pixels) de la police
- color pour la couleur de caractères
- position pour indiquer si la position de l'objet est relative ou absolue
- top la distance (en pixels) entre le haut de la fenêtre et le texte
- left la distance (en pixels) entre le coté gauche de la fenêtre et le texte
- visibility pour indiquer si l'objet est visible ou non
- z-index pour donner un ordre de priorité pour la visibilité d'objets qui se chevauchent
- définition d'une couleur de font de page grâce à body { ... }
- définition d'une couleur pour les liens grâce à a { ... }
- enfin, définition dans le corps de la page et à l'aide de l'une des balises doubles <div> </div>
ou <span> </span>, de 3 textes utilisant les 3 styles définis dans la feuille de style.
L'attribut ID="..." permet d'identifier l'objet pour une future
utilisation de scripts alors que l'attribut CLASS="..." permet
de donner la méthode d'affichage de l'objet.
La grande nouveauté par rapport à notre première feuilles est le positionnement
absolu des objets dans la page. Une telle technique nécessite certainement un
message du genre "ce site est optimisé pour un affiche en 800 par
600".
Ajoutons des liens à notre feuille de style
- Ajoutons la définition de 4 nouvelles classes de style : .rub1, .rub2, .rub3 et .rub4
- Ajoutons 4 liens vers des pages précédentes chacun des liens utilisant l'un des nouveaux styles définis
La technique du positionnement nous permet d'obtenir sans difficulté des
objets qui se chevauchent.
Modifions certains attributs de nos objets et animons
quelques éléments
Nous pouvons modifier les attributs de style des objets de notre page ou animer
différents éléments en utilisant un langage de script tel que Javascript (voir
mon résumé de cours JavaScript).
La page suivante décrit
plus en détails l'interaction de JavaScript avec les feuilles de style afin
de donner naissance au concept de Dynamic HTML.