Héritage et propriété all
Comprenez les règles d’héritage CSS et utilisez la propriété all pour réinitialiser les styles hérités.
Héritage et propriété all est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Qu’est-ce que l’héritage ?
Certaines propriétés CSS transmettent automatiquement leur valeur calculée aux éléments enfants. C’est l’héritage. Cela évite d’écrire la même règle pour chaque élément d’un composant.
Propriétés héritées
Propriétés généralement héritées : propriétés typographiques et textuelles :
font-family,font-size,font-weight,font-stylecolorline-heightletter-spacingtext-alignvisibility- Propriétés personnalisées CSS
Propriétés non héritées
Propriétés généralement NOT héritées : propriétés du modèle de boîte et de mise en page :
margin,padding,borderwidth,heightbackgrounddisplay,positionbox-shadow,transform
Mot-clé inherit
Forcez explicitement l’héritage avec le mot-clé inherit — cela est utile pour les éléments de formulaire qui n’héritent pas de la police par défaut :
<div style="font-family: Georgia, serif; font-size: 20px; color: darkred;">
<input type="text" placeholder="Inherits font/color" />
<button>Button inherits too</button>
<textarea>Inherits</textarea>
<select><option>Option A</option></select>
</div>Mot-clé initial
Le mot-clé initial réinitialise une propriété à sa valeur initiale par défaut du navigateur, telle qu’elle est définie par la spécification CSS, en ignorant l’héritage et les styles de l’agent utilisateur.
<div style="font-size: 30px; color: tomato;">
<p>Normal text inherits large tomato-colored style from its parent.</p>
<p class="reset-text">This text resets to browser defaults (initial) — medium size, black color.</p>
</div>Mot-clé unset
unset dépend du contexte :
- Pour les propriétés héritées : se comporte comme
inherit - Pour les propriétés non héritées : se comporte comme
initial
Cela « efface » effectivement une propriété pour la ramener à son état naturel.
<div style="color: tomato;">
<p style="margin: 40px;">Normal paragraph — keeps its large margin, inherits tomato color.</p>
<p class="clear-styles" style="margin: 40px;">Unset paragraph — color unset (still inherits tomato), margin unset (resets to 0).</p>
</div>Mot-clé revert
revert rétablit la valeur de la feuille de style de l’agent utilisateur du navigateur, restaurant ce que le navigateur afficherait par défaut, sans aucun style de l’auteur. Utile pour les widgets tiers intégrés.
<div style="color: tomato; font-family: Georgia, serif;">
Ancestor style is tomato serif text.
<div class="widget">This widget uses "all: revert" to fall back to the browser's user-agent defaults, undoing author styles.</div>
</div>La propriété all
La propriété all est une notation abrégée qui applique un mot-clé à toutes les propriétés CSS simultanément, à l’exception de direction et de unicode-bidi.
<div style="color: tomato; font-family: Georgia, serif; padding: 12px; background: #eee;">
<div class="isolated-widget">all: initial — resets everything to spec defaults</div>
<div class="scoped-component">all: revert — resets to browser UA defaults</div>
</div>all: initial en pratique
Utilisez all: initial lorsque vous devez créer un composant complètement isolé, qui n’est affecté ni par les styles globaux ni par ceux de son parent :
<div style="color: tomato; font-family: Georgia, serif; font-size: 28px;">
Page context — large serif tomato text
<div class="email-template-preview">Email preview — isolated with all: initial, then restyled with Arial 14px.</div>
</div>Modèle all: unset
Supprimez les styles de bouton du navigateur pour créer des boutons personnalisés sans connaître toutes les propriétés concernées :
<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>Héritage et propriétés personnalisées
Les propriétés personnalisées CSS sont héritées par défaut. C’est ce qui les rend si puissantes : une variable définie sur :root est disponible partout. Utilisez @property { inherits: false } pour empêcher l’héritage d’une propriété personnalisée.
Vérification rapide
Quel mot-clé réinitialise une propriété à la valeur par défaut de l’agent utilisateur du navigateur plutôt qu’à la valeur initiale de la spécification CSS ?
Récapitulatif
Les propriétés héritées transmettent leurs valeurs aux descendants, contrairement aux propriétés non héritées. Les mots-clés inherit, initial, unset et revert permettent un contrôle explicite. La propriété all réinitialise toutes les propriétés en une seule fois : elle est très utile pour les composants isolés et les éléments de formulaire personnalisés.
Apprends CSS avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « Héritage et propriété all » est-elle gratuite ?
Oui — le texte complet de « Héritage et propriété all » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Héritage et propriété all » ?
Comprenez les règles d’héritage CSS et utilisez la propriété all pour réinitialiser les styles hérités. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Héritage et propriété all » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Calcul de la spécificité : style intégré, ID, classe, élément
- La cascade : origine et ordre
- !important : quand l’utiliser et pourquoi l’éviter
- Héritage et propriété all