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

Des unités en pixels

Couleurs, unités et typographie · niveau 1 (application)

Énoncé


.parent {
  width: 300px;
  font-size: 20px;
}

.a {
  font-size: 2rem;
}

.b {
  font-size: 1.5em;
}

.c {
  width: 50%;
  font-size: 150%;
}

.d {
  font-size: 10vw;
}

.e {
  width: 50vw;
  padding-left: 2em;
  font-size: 0.75rem;
}

Les paragraphes a, b, c sont dans .parent ; d et e sont directement dans le <body>. La fenêtre mesure 375 pixels de large, la racine 16 pixels. Calculer, en pixels, la taille de police de chaque paragraphe, la largeur de c et de e, et la marge intérieure gauche de e.

Corrigé

a : $2 \times 16 = 32$ pixels (la racine, pas le parent).
b : $1, 5 \times 20 = 30$ pixels.
c : police $150 % \times 20 = 30$ pixels ; largeur $50 % \times 300 = 150$ pixels.
d : $10 % \times 375 = 37, 5$ pixels.
e : police $0, 75 \times 16 = 12$ pixels ; largeur $50 % \times 375 = 187, 5$ pixels ; marge intérieure $2 \times 12 = 24$ pixels — em hors de font-size se rapporte à la police de l'élément lui-même.

Chromium, à 375 pixels de large, donne ces valeurs ; il mesure e à $211, 5$ pixels de large : $187, 5 + 24$ , car la boîte mesurée comprend la marge intérieure (chapitre 5).

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 →