Ereditarietà e proprietà all
Comprenda le regole di ereditarietà CSS e utilizzi la proprietà all per reimpostare gli stili ereditati.
Ereditarietà e proprietà all è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Che cos'è l'ereditarietà?
Alcune proprietà CSS passano automaticamente il proprio valore calcolato agli elementi figli. Questa è l'ereditarietà. Evita di dover scrivere la stessa regola per ogni elemento di un componente.
Proprietà ereditate
In genere vengono ereditate le proprietà tipografiche e del testo:
font-family,font-size,font-weight,font-stylecolorline-heightletter-spacingtext-alignvisibility- Proprietà personalizzate CSS
Proprietà non ereditate
In genere NON vengono ereditate le proprietà del box model e del layout:
margin,padding,borderwidth,heightbackgrounddisplay,positionbox-shadow,transform
La parola chiave inherit
Forzi esplicitamente l'ereditarietà con la parola chiave inherit, utile per gli elementi dei moduli che non ereditano il carattere per impostazione predefinita:
<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>La parola chiave initial
La parola chiave initial reimposta una proprietà al suo valore iniziale predefinito del browser, come definito dalla specifica CSS, ignorando l'ereditarietà e gli stili dello user agent.
<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>La parola chiave unset
unset dipende dal contesto:
- Per le proprietà ereditate: si comporta come
inherit - Per le proprietà non ereditate: si comporta come
initial
In pratica «cancella» una proprietà riportandola al suo stato naturale.
<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>La parola chiave revert
revert ripristina il valore del foglio di stile dello user agent del browser, riportando ciò che il browser mostrerebbe per impostazione predefinita, senza gli stili dell'autore. È utile per i widget di terze parti incorporati.
<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 proprietà all
La proprietà all è una scorciatoia che applica una parola chiave contemporaneamente a tutte le proprietà CSS, ad eccezione di direction e 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 nella pratica
Utilizzi all: initial quando deve creare un componente completamente isolato, non influenzato dagli stili globali o da quelli del genitore:
<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>Schema all: unset
Rimuova gli stili predefiniti del browser dai pulsanti personalizzati senza dover conoscere tutte le proprietà coinvolte:
<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>Ereditarietà e proprietà personalizzate
Le proprietà personalizzate CSS vengono ereditate per impostazione predefinita. È proprio questo che le rende potenti: una variabile impostata su :root è disponibile ovunque. Utilizzi @property { inherits: false } per rendere una proprietà personalizzata non ereditabile.
Verifica rapida
Quale parola chiave reimposta una proprietà sul valore predefinito dell'user agent del browser anziché sul valore iniziale della specifica CSS?
Riepilogo
Le proprietà ereditate trasmettono i valori agli elementi discendenti; quelle non ereditate non lo fanno. Le parole chiave inherit, initial, unset e revert offrono un controllo esplicito. La proprietà all reimposta tutte le proprietà in una volta sola: è potente per i componenti isolati e gli elementi dei moduli personalizzati.
Domande Frequenti
La lezione «Ereditarietà e proprietà all» è gratuita?
Sì — il testo completo di «Ereditarietà e proprietà all» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Ereditarietà e proprietà all»?
Comprenda le regole di ereditarietà CSS e utilizzi la proprietà all per reimpostare gli stili ereditati. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Ereditarietà e proprietà all»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Calcolo della specificità: inline, ID, classe, elemento
- La cascade: origine e ordine
- !important: quando usarlo e perché evitarlo
- Ereditarietà e proprietà all