CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 2 · Application directe du cours
Un bandeau sans identifiants
Sélecteurs · niveau 2
Énoncé
Un bandeau de promotion a été stylé ainsi :
#bandeau-promo {
background-color: #fbe8d5;
}
#titre-promo {
font-family: Georgia, serif;
color: #1f3a68;
}
#bouton-promo {
background-color: #e07a1f;
}
<aside id="bandeau-promo">
<h2 id="titre-promo">Rentrée : −10 % sur les manuels</h2>
<p><a id="bouton-promo" href="catalogue.html">Voir les manuels</a></p>
</aside>La librairie veut un second bandeau, pour une fermeture exceptionnelle, de même forme mais avec un fond rosé et un titre rouge foncé. Expliquer pourquoi la feuille actuelle ne le permet pas, puis la réécrire en composant (bloc, éléments, variante) et écrire le HTML des deux bandeaux.
Corrigé
Un identifiant ne peut apparaître qu'une fois par page : un second bandeau ne peut pas porter id="bandeau-promo", et il faudrait recopier les trois règles avec d'autres identifiants. Les règles sont attachées à un bandeau, pas à la notion de bandeau.
En composant :
body {
font-family: system-ui, sans-serif;
}
/* Bloc : le bandeau */
.bandeau {
background-color: #fbe8d5;
}
/* Éléments du bandeau */
.bandeau-titre {
font-family: Georgia, serif;
color: #1f3a68;
}
.bandeau-bouton {
color: #222;
background-color: #e07a1f;
}
/* Variante : le bandeau d'alerte */
.bandeau-alerte {
background-color: #f6d4d1;
}
.bandeau-alerte .bandeau-titre {
color: #8c1d18;
}
<aside class="bandeau" aria-labelledby="promo">
<h2 class="bandeau-titre" id="promo">Rentrée : −10 % sur les manuels</h2>
<p><a class="bandeau-bouton" href="catalogue.html">Voir les manuels</a></p>
</aside>
<aside class="bandeau bandeau-alerte" aria-labelledby="fermeture">
<h2 class="bandeau-titre" id="fermeture">Fermeture exceptionnelle le 1er novembre</h2>
<p><a class="bandeau-bouton" href="contact.html">Nous contacter</a></p>
</aside>
La variante ne redéfinit que ce qui change. Les identifiants restent dans le HTML pour leur rôle d'accessibilité (nommer chaque région <aside> par son titre), mais la feuille ne les utilise pas. Les deux couleurs du bandeau d'alerte ont un contraste de 6,6:1 (titre sur fond), largement suffisant (chapitre 4).
100 % gratuit
La suite du chapitre est sur Adloun
- 11 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.