07/11/14

Le sélecteur de classe

Dans les exemples du cours précédent, nous modifiions une balise, par exemple la balise p, et automatiquement tous les paragraphes prenaient la mise en forme définie par la règle. Mais que faire si nous ne voulons pas que tous les paragraphes aient le même style ?

Nous prendrons l'exemple d'un compte rendu d'interview. Ouvrez le document classe.html; remarquez le balisage. La suite des questions-réponses ne contient ques des balises p; or d'un point de vue sémantique, on pourrait dire que tous ces paragraphes n'ont pas le même statut : certains correspondent à des questions d'autres aux réponses.

Il n'existe pas en HTML d'élément spécifique pour ce cas (une balise pour baliser les questions et une autre pour baliser les réponses), mais le html et les CSS offrent une possibilité : définir des classes.

Attention : l'idée je vais mettre une balise différente pour les questions et les réponses est une mauvaise idée; il n'y a pas en HTML de balise spécifique pour une question ou sa réponse.

Inventer une classe c'est d'abord lui choisir un nom, puis indiquer quels éléments en font partie. Ainsi dans notre exemple nous pourrons marquer que certains éléments sont de la classe question et d'autres de la classe réponse:

En HTML : <p class="question">....</p><p class="reponse">...</p>

Pour cela, le plus simple est de se placer dans la balise ouvrante et de passer par le menu Dialogue/Editer la balise sous curseur.... Il suffit alors d'ajouter un nom de classe (ou de le sélectionner s'il est déjà défini). Effectuez la manipulation pour tous les paragraphes question/réponse du fichier classe.html.

En deuxième lieu nous pouvons associer une mise en forme à ces deux classes.

Ajoutez une règle CSS pour la classe question : tapez ".question" comme sélecteur. Basez vous ensuite sur le fichier futura.tiff pour choisir la propriété à modifier.

Remarquez que la balise des styles CSS contient maintenant la Règle .question (le point indique que le nom qui suit est un nom de classe ce qui permet de le distinguer d'un nom de balise html).

Ajoutez un style pour les paragraphes de la classe reponse et basez vous ensuite sur le fichier futura.tiff pour choisir la propriété à modifier.
"Collez" la boite d'une question avec celle de la réponse qui suit (vous pouvez aussi coller toutes les boites et espacer seulement celles qui doivent l'être).
Décalez la limite gauche du texte d'une réponse par rapport au texte de la question.
Ajoutez une bordure à gauche pour les questions et les réponses

Remarque : au début du document se trouve le nom de l'auteur de l'article ; un élément html spécifique peut être appliqué à cette partie : address ; il permet en général de baliser l'auteur d'une information (il existe aussi la balise cite qui permet de référencer une citation).

On voit aussi sur l'image de la page qu'une partie du premier paragraphe est renforcée; pour pouvoir baliser cette zone le HTML offre la balise strong; une autre balise em indique une mise en valeur (pas nécessairement un renforcement mais les avis sont partagés...).

On pourrait aussi dire que ce premier paragraphe a un statut particulier, une sorte d'introduction ou d'accroche (terme utilisé en PAO signifiant une partie qui doit attirer l'attention du lecteur). Vous trouverez sur Internet beaucoup de sites de discussion sur le balisage sémantique.