Les feuille de styles
Définition Une feuille de style est un document numérique qui va pouvoir spécifier toutes les caractéristiques de mises en formes du document lié à la balise à laquelle elle s'applique.
Exemple Je veux mettre une partie de mon texte dans une balise <H1> d'une autre couleur que celle définie par <H1>. J'utilise alors un autre marqueur de style , et le tour est joué. De même je peux vouloir étendre les propriétés d'H1, par exemple sur le style du caractère, il me suffira là encore de rajouter une mention de style par une balise ou un autre marqueur. Précisons pour terminer que les feuilles de style ne sont pas une composante directe du langage Html mais un développement à part dans la publication
Les feuilles de styles L'utilisation de feuilles de styles permet de séparer la forme du fond présente de nombreux avantages. En particulier la conception et la maintenance des sites sont simplifiés. De plus leur utilisation permet d'améliorer l'accessibilité des sites de façon sensible, sans altérer du tout la qualité visuelle des documents, bien au contraire.
Les règles Voici un exemple de règle CSS permettant d'afficher les entêtes principaux (H1) en bleu : H1 { color : blue }
Les règles Une règle CSS est composée de 2 parties : un sélecteur (ici H1) et une déclaration (color:blue). Une déclaration à elle-même deux parties : une propriété (color) et une valeur (blue).
Les sélecteurs sont les éléments HTML, on peut donc indiquer pour chaque élément un ensemble de déclarations (lorsqu'il y en a plusieurs, on les sépare avec des points virgules).
De même si des déclarations s'appliquent à plusieurs sélecteurs, on peut les regrouper. Dans l'exemple suivant, on affiche les entêtes et paragraphes en rouge et on place une marge gauche de 1cm dans tous les paragraphes, que l'on affiche en italique.
Placer une feuille de style Il y a deux méthodes principales pour placer une feuille de style. La première consiste à placer la feuille de style dans l'entête de document. La seconde consiste à placer la feuille de style dans un fichier séparé, et à y faire référence dans l'entête du document. Cette dernière technique permet de réutiliser la même feuille de style dans plusieurs documents.
1. Dans l'entête du document <HEAD><TITLE>...</TITLE><STYLE type="text/css"><!--H1 { color : blue }--></STYLE></HEAD>
2. Dans un autre fichier <HEAD><TITLE>...</TITLE><LINK rel=STYLESHEET Href="styles.css" type="text/css"></HEAD>
Quelques propriétés pour commencer Voici tout d'abord un ensemble de propriétés parmi les plus utilisées. font-family Nom de la police de caractères à utiliser font-family : Arial; font-style Style de la police de caractères. Valeurs possibles : normal, italic, oblique font-style : italic; font-weight Epaisseur de la police de caractères. Valeurs possibles normal, bold, bolder, lighter, 100, 200, 300,... 900.
font-weight : bold; font-size taille de la police de caractères. Valeurs possibles xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller. On peut aussi utiliser une taille absolue : 12pt (pour 12 points) ou un pourcentage (par rapport à la taille par défaut). font-size : x-small; font-size : 18pt; font-size : 150%; text-align Alignement du texte. Valeurs possibles : left, right, center, justify text-align : center;
Cascade et Héritage La notion de "Cascade« : Les propriétés des CSS peuvent être définies plusieurs fois. C'est toujours la dernière définition qui compte. Cela permet d'importer plusieurs feuilles de styles, et de redéfinir certains styles dans le document.
Supposons qu'on dispose d'une permière feuille de style, que nous appelerons style1.css qui contienne les propriétés suivantes : H1 { color : red; font-size : 48pt } H2 { color : blue; font-size : 12pt }
Dans une page donnée, nous incluons dans l'entête l'appel de ces deux feuilles, ainsi que la définition d'autres propriétés. <HEAD><TITLE>...</TITLE><LINK rel=STYLESHEET Href="style1.css" type="text/css"><LINK rel=STYLESHEET Href="style2.css" type="text/css"><STYLE type="text/css"><!--H1 { color : fushia; }H2 { font-size : 16pt; }H3 { font-size : 14pt; }--></STYLE></HEAD>
Héritage Pour déterminer la valeur d'une propriété, on dispose donc de la notion de cascade. Dans les cas où la propriété n'a pas été définie, deux possibilités se présentent : Ou bien la propriété est dite "héritée". Dans ce cas, c'est la valeur de l'élément "parent", c'est à dire de l'élément dans lequel est utilisé l'élément courant. Dans l'autre cas, on prend la valeur initiale.
L'identification et le regroupement d'éléments (class et id) Parfois, on veut appliquer un style spécial à un élément ou à un groupe d'éléments particuliers. Dans cette leçon, nous étudierons comment utiliser les attributs class et id pour définir les propriétés d'éléments sélectionnés. Comment donner à un titre particulier une autre couleur que celle des autres titres du site Web ? Comment regrouper les liens en différentes catégories et donner à chacune un style spécial ? Ce sont les types de questions auxquelles nous répondrons ici.
Le regroupement d'éléments dans une classe Supposons que nous ayons deux listes de liens vers les différents cépages utilisés pour des vins blancs et des vins rouges. Voici à quoi ressemble le code HTML :
<p>Cépages de vins blancs :</p> <ul> <li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul> <p>Cépages de vins rouges :</p> <ul> <li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li> <li><a href="pn.htm">Pinot Noir</a></li> </ul>
Nous voulons ensuite que les liens des vins blancs soient jaunes, que ceux des vins rouges soient rouges, et que les autres liens de la page Web restent bleus. Pour y parvenir, nous répartissons les liens en deux catégories. On assigne une classe à chaque lien avec l'attribut class. Essayons de définir quelques classes pour l'exemple précédent :
<p>Cépages de vins blancs :</p> <ul> <li><a href="ri.htm" class="whitewine">Riesling</a></li> <li><a href="ch.htm" class="whitewine">Chardonnay</a></li> <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li> </ul> <p>Cépages de vins rouges :</p> <ul> <li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li> <li><a href="me.htm" class="redwine">Merlot</a></li> <li><a href="pn.htm" class="redwine">Pinot Noir</a></li> </ul>
Par la suite, on peut définir des propriétés spéciales pour les liens appartenant respectivement aux catégories « whitewine » et « redwine ». a { color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; }
Comme affiché dans l'exemple, on peut définir les propriétés des éléments appartenant à une certaine classe en utilisant .le_nom_de_ladite_classe dans la feuille de style du document.
L'identification d'un élément avec id Outre le regroupement d'éléments, on peut avoir besoin d'identifier un élément unique. Pour cela, on utilise l'attribut id. L'attribut id a ceci de spécial qu'il ne peut pas y avoir deux éléments avec le même id dans le document. Chaque id doit être unique. Dans le cas contraire, il faudrait utiliser l'attribut class à la place. Voyons maintenant un exemple d'utilisation possible de id :
<h1>Chapitre 1</h1>. <h2>Chapitre 1. 1</h2> <h1>Chapitre 1</h1> .... <h2>Chapitre 1.1</h2> .... <h2>Chapitre 1.2</h2> .... <h1>Chapitre 2</h1> .... <h2>Chapitre 2.1</h2> .... <h3>Chapitre 2.1.2</h3> ....
Il pourrait s'agir des titres d'un document partagé en chapitres ou en paragraphes. Il semble naturel d'assigner un id à chaque chapitre comme ceci : <h1 id="c1">Chapitre 1</h1> .... <h2 id="c1-1">Chapitre 1.1</h2> .... <h2 id="c1-2">Chapitre 1.2</h2> .... <h1 id="c2">Chapitre 2</h1> .... <h2 id="c2-1">Chapitre 2.1</h2> .... <h3 id="c2-1-2">Chapitre 2.1.2</h3> ....
Disons que le titre du chapitre 1. 2 doive apparaître en rouge Disons que le titre du chapitre 1.2 doive apparaître en rouge. Avec CSS, cela donne : #c1-2 { color: red; }
Comme affiché dans l'exemple précédent, on peut définir les propriétés d'un élément spécifique en utilisant #le_nom_dudit_id dans la feuille de style du document. Résumé Dans cette leçon, nous avons vu que l'on pouvait définir les propriétés d'éléments spécifiques à l'aide des sélecteurs class