La leçon cinq aborde la question des feuilles de styles et leur utilisation dans un document HTML. Vous voudrez consulter le Petit Manuel HTML sur la question. |
Comparez ces deux mises en forme en coulisses, de la même représentation sur la scène:
L'utilisation de la feuille de style permet de supprimer toutes les balises de mise en forme entourant H4 en ajoutant à H4 des propriétés dont les définitions se trouvent dans une feuille de style. Voici la déclaration de style correspondante:
Ajoutons que l'économie sera d'autant plus grande qu'avec un tel dispositif, il nous suffit de déclarer une seule fois les propriétés de H4 pour que toutes les instances de H4 soient affectées.
L'utilisation des styles redonne à HTML son pouvoir de structuration du texte en éliminant tous les aspects relatifs à la forme. En séparant ainsi contenu et forme, les balises nécessaires pour structurer un document sont réduites au minimum et leur pouvoir augmente par l'ajout des propriétés et la facilité de repérage qu'ils permettent dans l'éditeur.
Les deux façons sont complémentaires et à l'occasion les deux seront nécessaires. La première est justifiée s'il n'y a qu'une page à servir. Son principal avantage est de rendre évident le lien qu'elle entretient avec la page qu'elle sert. Elle a le désavantage d'occuper beaucoup d'espace dans la partie HEAD du document.
La seconde est économique pour la page, permet la réalisation facile de nouvelles feuilles de styles par simple copie de fichiers et peut servir un site de plusieurs pages permettant une gestion économique de l'ensemble. C'est la façon qui sera préviligiée ici.
Présentée telle quelle c'est une coquille vide, disponible pour recevoir les diverses définitions de styles utilisées sur la page. Une feuille de style valide pourra commencer comme ceci:
Pour une explication de la syntaxe, vous vous rapporterez au Petit Manuel HTML section syntaxe.
Cette formule est vraiment économique parce qu'elle ne prend qu'une ligne dans la partie HEAD du document alors qu'une feuille de style locale relativement complète peut facilement occuper plus de 100 lignes de définitions.
Le problème sera rapidement réglé en créant pour cette page, une nouvelle définition de couleur de fond. Cette déclaration étant faite après l'appel de la feuille de style commune, ce sera cette dernière définition qui l'emportera.
Voici l'illustration de l'exemple:
La zone de style local demeure minimale ne contenant que les modifications à apporter aux déclarations précédemment lancées par la première feuille. L'ordre des déclarations est ici important. La feuille générale d'abord, le particulier ensuite.
/* ceci est un commentaire */
Pour récupérer la feuille de style utilisez le bouton de droite de la souris sur le lien style1.css et appliquez la commande enregistrez-sous dans votre dossier de travail.