Retour sommaire

Classes et identités

Le problème posé par ces deux dernières questions est que l'on ne sait pas comment proposer plusieurs styles pour une même balise, img ici en l'occurrence.

Il existe heureusement une solution pour ce genre de situation. Il est possible de définir des classes différentes pour un même élément et d'attribuer des styles différents pour chacune de ces classes. Cela se fait très simplement, que ce soit au niveau du fichier html ou au niveau du fichier CSS.

Reprenons la situation de la Manip' précédente. Nous pouvons définir une classe pour les tableaux de Brueghel, appelons-la brueghel. Dans le fichier html, il suffit de marquer les éléments qui doivent apppartenir à cette classe en ajoutant l'attribut class="brueghel" à l'élément concerné. Dans le fichier CSS, on peut attribuer un style pour cette classe en indiquant soit un style pour un élément img.brueghel si l'on veut que le style ne s'applique qu'aux images de cette classe soit un style pour un élément .brueghel et dans ce cas le style s'appliquerait à des éléments de la classe brueghel auutres que des images.

On aurait ainsi dans le fichier html :

...
<p>
Tableaux de Brueghel l'Ancien
<img alt="Brueghel Babel" src="brueghel-babel.jpg" class="brueghel"></img>
<img alt="Brueghel Carnaval et Carême" src="brueghel-carnaval.jpg" class="brueghel"></img>
<img alt="Brueghel noces paysannes" src="brueghel-noces.jpg" class="brueghel"></img>
</p>
...

et dans le fichier CSS, en plus des propriétés de style déjà définies pour la balise img :

img.brueghel {          /*  seules les balises img de classe brueghel sont impactées */
   border-width:2px;
}
.brueghel {             /*  toutes les balises de classe brueghel sont impactées */
   border-width:2px;
}

Reste le cas du tableau préféré. Il est possible d'attribuer plusieurs classes à un même élément, il suffit d'énumérer dans son attribut class les différentes classes voulues séparées par des espaces. Une première solution serait donc de définir une classe prefere, de donner à cette classe le style qui fixe la largeur à 300px et une bordure rouge de 2px puis d'attribuer à l'image retenue la classe prefere en plus de celle déjà fixée.

Cette solution pose cependant un problème par rapport à ce qui était demandé initialement. En effet il était précisé qu'une fois le tableau préféré choisi, "seul celui-là ait (...) une largeur de 300px et...". Or il est possible d'attribuer la classe prefere à n'importe quel élément. Rien n'empêche donc a priori de choisir "plusieurs préférés".

Il existe cependant une possibilité pour garantir qu'un style défini ne s'appliquera que sur au plus un seul élément d'une page. Pour cela il faut attribuer une identité à un élément. Pour cela il suffit de définir un attribut id pour l'élément sélection, dans notre cas id="prefere". On peut définir un style pour cette identité en utilisant dans le fichier CSS la notation #prefere.

Un intérêt important des id est qu'il permet de caractériser de manière unique une élément dans une page. Cette possibilité sera particulièrement utilisée lorsque nous manipulerons dynamiquement le contenu de nos pages avec la programmation.

Deux nouvelles balises

En plus des balises déjà étudiées, le langage html offre deux balises génériques :

• la balise div qui correspond à un élément de bloc, on les utilise donc plutôt pour structurer la page
• la balise span qui correspond à un élément en ligne, on les utilise donc de préférence sur une partie d'un élément, typiquement une portion de texte

A la différence des autres balises déjà rencontrées ces balises n'ont pas d'interprétation (de sémantique) particulière. Elle n'ont pas d'effet visuel spécifique : span n'a aucun effet du tout et div ne fait que créer un bloc (comme p). Elles prennent tout leur intérêt lorsqu'on les combinent avec les classes et les identités vues précédemment en leur associant des styles propres. Ils permettent alors de structurer la page en en caractérisant certains éléments ou en marquant certaines portions de texte. On peut ainsi donner plus de sens aux différents paragraphes au sein de la page sans être limité par les balises disponibles par défaut : les "titres" (h?) ou paragraphe(p).

Dans le document précédent, on peut par exemple créer un élément pour regrouper les différents tableaux d'un même peintre et appliquer un type présentation à ces groupes. Cela pourrait par exemple donner dans les fichiers html et css avec une classe tableaux :

...
<div class="tableaux">
  <img alt="Brueghel Babel" src="brueghel-babel.jpg" class="brueghel"></img>
  <img alt="Brueghel Carnaval et Carême" src="brueghel-carnaval.jpg" class="brueghel"></img>
  <img alt="Brueghel noces paysannes" src="brueghel-noces.jpg" class="brueghel"></img>
</div>
...

.tableaux {
    background-color : #FFFFBB;
    text-align:center;
    margin:1% 10%;
}

On peut également souhaiter que les noms des peintres soient mis en évidence. Il faut alors définir une classe peintre que l'on appliquera à un élément en ligne span et on modifie les fichiers html et css ainsi :

...
Tableaux de <span class="peintre">Brueghel l'Ancien</span>
...

.peintre {
    font-weight : bold;
    color : green;
}