CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 1 · Application directe du cours
Trois fautes de frappe
Premiers pas en CSS · niveau 2
Énoncé
La feuille suivante est liée à une page qui contient un titre <h1> et un paragraphe.
body {
font-family: system-ui, sans-serif
color: #222;
}
h1 {
color: #1f3a68;
font-size: 40;
}
p {
colour: #555;
background-color: #faf8f5;
}
- Pour
<body>,<h1>et<p>, dire quelles déclarations sont appliquées et quelle est, finalement, la couleur du texte du paragraphe. - stylelint ne signale qu'un problème ; lequel ? Pourquoi ne voit-il pas les deux autres ?
- Corriger la feuille.
Corrigé
<body>: le point-virgule manque aprèssans-serif. Le navigateur lit une seule déclarationfont-familydont la valeur estsystem-ui, sans-serif color: #222, invalide : il perd la police et la couleur. Le corps garde la police par défaut et le texte noir.
<h1> : color: #1f3a68 s'applique ; font-size: 40 est ignoré, car une longueur non nulle exige une unité. Le titre est bleu nuit, en 32 pixels (valeur par défaut).
<p> : colour (orthographe anglaise) n'est pas une propriété CSS, ignorée ; background-color s'applique. Le paragraphe est donc en noir sur fond crème.
Vérification dans Chromium (Computed) : corps rgb(0, 0, 0) en Times, titre rgb(31, 58, 104) en 32px, paragraphe rgb(0, 0, 0) sur rgb(250, 248, 245).
- stylelint s'arrête sur l'erreur de syntaxe :
ex2-fautes.css
2:37 ✖ Missed semicolon CssSyntaxError
Une erreur de syntaxe empêche d'analyser le reste du fichier : on corrige, on relance, et il signale alors colour (property-no-unknown). Le nombre sans unité relève de la valeur, que la configuration standard ne contrôle pas.
- Feuille corrigée :
body {
font-family: system-ui, sans-serif;
color: #222;
}
h1 {
color: #1f3a68;
font-size: 40px;
}
p {
color: #555;
background-color: #faf8f5;
}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.