Parfois, on veut appliquer un style special a un element ou a un groupe d'elements particuliers. Dans cette lecon, nous etudierons
comment utiliser les attributs class et id pour definir les proprietes d'elements selectionnes.
Comment donner a un titre particulier une autre couleur que celle des autres titres du site Web ? Comment regrouper les liens en differentes categories et donner a chacune un style special ? Ce sont les types de questions auxquelles nous repondrons ici.
Supposons que nous ayons deux listes de liens vers les differents cepages utilises pour des vins blances et des vins rouges. Voici a quoi ressemble le code HTML :
<p>Cepages 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>Cepages 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 jaune, que ceux des vins rouges soient rouge, et que les autres liens de la page Web restent bleu.
Pour y parvenir, nous repartissons les liens en deux categories. On assigne une classe a chaque lien avec l'attribut class.
Essayons de definir quelques classes pour l'exemple precedent :
<p>Cepages 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>Cepages 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 definir des proprietes speciales pour les liens appartenant respectivement aux categories whitewine et redwine .
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
Comme affiche dans l'exemple, on peut definir les proprietes des elements appartenant a une certaine classe en utilisant .le_nom_de_ladite_classe dans la feuille de style du document.
Outre le regroupement d'elements, on peut avoir besoin d'identifier un element unique. Pour cela, on utilise l'attribut id.
L'attribut id a ceci de special qu'il ne peut pas y avoir deux elements avec le meme id dans le document.
Chaque id doit etre unique. Dans le cas contraire, il faudrait utiliser l'attribut class a la place.
Voyons maintenant un exemple d'utilisation possible de id :
<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 partage en chapitres ou en paragraphes. Il semble naturel d'assigner
un id a 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 apparaitre en rouge. Avec CSS, cela donne :
#c1-2 {
color: red;
}
Comme affiche dans l'exemple precedent, on peut definir les proprietes d'un element specifique en utilisant #le_nom_dudit_id dans la feuille de style du document.
Dans cette lecon, nous avons vu que l'on pouvait definir les proprietes d'elements specifiques a l'aide des selecteurs
class et id.
Dans la lecon suivante, nous etudierons de plus pres deux elements HTML largement employes avec CSS :
<span> et <div>.