CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 4 · Application directe du cours

Des em en cascade

Couleurs, unités et typographie · niveau 2

Énoncé


  <article class="carte">
    <h3>Analyse MPSI</h3>
    <p class="prix">45,00 € <small>TTC</small></p>
    <p class="auteur">Jean-Marie Monier</p>
  </article>


.carte {
  font-size: 1.25rem;
}

.carte h3 {
  font-size: 1.5em;
}

.prix {
  font-size: 0.8em;
}

.prix small {
  font-size: 0.75em;
}

.auteur {
  font-size: 0.8rem;
}

La taille de la racine est de 16 pixels. Calculer la taille en pixels de la carte, du titre, du prix, de la mention « TTC » et de l'auteur. Que deviendrait la taille du titre si l'on déplaçait la carte dans un <aside> dont la police est de 0.875rem ?

Corrigé

Carte : $1, 25 \times 16 = 20$ pixels.
Titre : $1, 5 \times 20 = 30$ pixels (em se rapporte au parent, la carte).
Prix : $0, 8 \times 20 = 16$ pixels.
« TTC » : $0, 75 \times 16 = 12$ pixels (son parent est le prix).
Auteur : $0, 8 \times 16 = 12, 8$ pixels (rem : la racine, pas la carte).

Chromium donne 20px, 30px, 16px, 12px, 12.8px. Dans l'<aside>, la carte garde 1.25rem, soit 20 pixels : le titre ne change pas. Les em ne se composent qu'à partir de la carte, dont la taille est en rem : c'est ce qui rend le composant indépendant de son contexte, tout en gardant ses proportions internes.

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 →