CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 3 · Exercice de TD
Des champs à la bonne taille
Cascade, spécificité et héritage · niveau 2
Énoncé
Une page de recherche a pour feuille body { font-family: Georgia, serif; font-size: 20px; color: #1f3a68; }. Elle contient une étiquette, un champ <input type="search"> et un bouton.
- Quelle police et quelle taille ont l'étiquette, le champ et le bouton ? Vérifier dans l'onglet Computed.
- Corriger avec une seule règle, et expliquer pourquoi la couleur du texte saisi, elle, ne change pas.
Corrigé
- L'étiquette hérite : Georgia, 20 pixels. Le champ et le bouton, non : la feuille du navigateur leur donne sa propre police ; dans Chromium,
13.3333px(et une police sans empattements du système). - Une seule règle suffit :
button,
input,
select,
textarea {
font: inherit;
}font est une propriété raccourcie qui regroupe la famille, la taille, la graisse, le style et la hauteur de ligne (chapitre 4) ; inherit les prend toutes au parent. Elle ne contient pas color : le texte saisi garde la couleur que lui donne le navigateur (noir). Il faudrait ajouter color: inherit pour la changer.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 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.