PhpBB Lab Académie

Expliquer la transmission de la typographie depuis body, distinguer héritage et transparence, puis appliquer la même typographie aux vrais champs de contact.

Pourquoi les notes utilisent-elles la police de body ?

Vous n’avez pas écrit font-family sur chacun des paragraphes des notes. Pourtant, ils utilisent la base définie sur body. Certaines propriétés, notamment color et les propriétés de police, sont héritées lorsqu’aucune valeur propre à l’élément ne les remplace.

Le parent direct d’un paragraphe de note est son article. Cet article est contenu dans une section, elle-même dans main puis body. Une valeur héritée peut se transmettre le long de cette chaîne.

1. Ne transmettre que ce qui s’hérite

La famille de caractères et la couleur se transmettent couramment. En revanche, padding, border, margin et width ne s’héritent pas par défaut. Chaque boîte garde ses propres espacements et dimensions.

C’est pourquoi le paragraphe d’une note ne reçoit pas une deuxième bordure identique à celle de l’article. Il est simplement à l’intérieur de la boîte encadrée.

2. Retirer une répétition devenue inutile

Dans .note-progression, color: #1f2937; répète la couleur déjà définie sur body. Supprimez seulement cette déclaration. Le paragraphe de chaque note garde ce texte sombre par héritage.

Le h3 de la note reste bleu : la règle h1, h2, h3 lui donne directement #163b65. Une valeur directe pour cet élément ne se compare pas à la spécificité de body comme si deux règles ciblaient le même élément ; l’héritage fournit une base, pas un concurrent qui aurait toujours priorité.

3. Essayer le mot-clé inherit

inherit demande explicitement de prendre la valeur calculée du parent pour cette propriété. Dans .introduction, remplacez temporairement color: #374151; par color: inherit;. Les introductions prennent la couleur transmise par main.

Puis rétablissez color: #374151; : nous conservons ce gris précis pour distinguer les introductions. L’expérience n’ajoute aucun nouveau paragraphe et aucune classe de test.

4. Ne pas confondre fond visible et héritage

background-color ne s’hérite pas par défaut. Un paragraphe peut paraître posé sur le fond clair de l’article parce que son propre fond est transparent, pas parce qu’il a reçu la même couleur de fond.

Cela explique pourquoi nous n’avons pas besoin de recopier background-color sur chaque h3 et chaque p des notes.

5. Transmettre la typographie aux champs de Contact

Les contrôles de formulaire peuvent recevoir des polices propres au navigateur. Pour leur transmettre notre base explicitement, ajoutez :

input, textarea, button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

Les valeurs inherit évitent de recopier Arial et 1rem à plusieurs endroits. Le nom, l’e-mail, le téléphone, la zone du message et le bouton suivent ainsi la typographie du site. Les boutons radio et la case restent des contrôles natifs ; nous n’avons changé ni leur type, ni leur nom, ni leur label.

Dans la prochaine leçon, nous examinerons plusieurs déclarations qui visent directement le même élément.

Après retrait de la couleur répétée, les notes gardent :

.note-progression {
    background-color: #f1f5f9;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 0.125rem solid #64748b;
}

Leur paragraphe hérite de la couleur sombre ; leurs h3 conservent la couleur directe des titres.

Étape 1

Supprimez seulement color de .note-progression. Vérifiez le paragraphe de chaque note et son h3.

Étape 2

Dans .introduction, essayez color: inherit;, puis rétablissez color: #374151;. Ne laissez pas les deux déclarations.

Étape 3

Ajoutez les trois propriétés de police avec inherit sur input, textarea, button.

Étape 4

Dans contact.html, vérifiez que les noms des champs restent identiques et que la saisie utilise la typographie du site.

Étape 5

Expliquez pourquoi un fond visible derrière un paragraphe n’est pas une preuve d’héritage de background-color.

L’héritage fournit certaines valeurs depuis le parent. Une déclaration directe peut les remplacer. Un fond transparent laisse voir son arrière-plan sans l’hériter. Les contrôles de Contact reçoivent explicitement la typographie commune.