CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 3 · Exercice de TD

Ranger une feuille de base

Cascade, spécificité et héritage · niveau 2

Énoncé

Une feuille commence par ces règles de base :


main p a {
  color: #1f3a68;
}

article h2 {
  font-family: Georgia, serif;
}

#contenu ul {
  padding-left: 1.5em;
}

Calculer leurs spécificités. Un composant .carte-titre (un <h2> dans un article) veut une autre police ; une liste .etiquettes dans <main id="contenu"> veut un retrait nul. Y parviennent-ils ? Réécrire les règles de base pour que toute classe l'emporte sur elles.

Corrigé

main p a : $(0, 0, 3)$ ; article h2 : $(0, 0, 2)$ ; #contenu ul : $(1, 0, 1)$ . .carte-titre $(0, 1, 0)$ bat article h2 : le titre change de police. Mais .etiquettes $(0, 1, 0)$ perd contre #contenu ul : le retrait reste. Réécriture :


:where(main p) a {
  color: #1f3a68;
}

:where(article) h2 {
  font-family: Georgia, serif;
}

:where(#contenu) ul {
  padding-left: 1.5em;
}

Spécificités : $(0, 0, 1)$ , $(0, 0, 1)$ , $(0, 0, 1)$ — n'importe quelle classe l'emporte. On peut aussi placer ces règles dans une couche @layer base : elles perdraient alors contre toute règle hors couche, même h2.

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →