Ereditarieta Delle Proprieta

Prerequisiti: Ordine delle dichiarazioni.

Alcune proprietà, come color e molte proprietà dei caratteri, vengono normalmente ereditate. Se un figlio non riceve un valore applicabile per color, può usare il colore calcolato del genitore. Non tutte le proprietà si comportano così: bordo, margine e padding normalmente non si ereditano. Un bordo attorno a una sezione circonda la sezione; non significa che ogni paragrafo abbia ricevuto lo stesso bordo.

L’ereditarietà interviene dopo che sono state risolte le dichiarazioni applicabili all’elemento. Una regola p { color: ... } applicata al figlio può quindi sostituire il colore che avrebbe ereditato, anche se il genitore è selezionato da un ID. Non confrontare la specificità della regola del genitore con quella del figlio come se riguardassero lo stesso elemento. Anche gli stili del browser possono assegnare direttamente valori, per esempio ai collegamenti.

inherit richiede il valore calcolato del genitore, anche per una proprietà normalmente non ereditata. initial richiede il valore iniziale definito dalla proprietà, che non coincide necessariamente con lo stile usuale del browser. unset si comporta come inherit per proprietà ereditate e come initial per le altre. Queste parole chiave sono strumenti espliciti: sceglile dopo avere stabilito se vuoi seguire il genitore o tornare al valore iniziale.

Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.

<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ereditarietà delle proprietà</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<section class="scheda">
  <p>Colore ereditato.</p>
  <p class="autonomo">Colore applicato direttamente.</p>
</section>
</body>
</html>

.scheda {
  color: #174a7e;
  border: 2px solid #174a7e;
  padding: 16px;
}
.autonomo {
  color: #8b1e3f;
}

Il primo paragrafo eredita il blu. Il secondo riceve una dichiarazione diretta. Il bordo appartiene alla sezione, non ai paragrafi.

.autonomo {
  color: inherit;
}

Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.

Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.