CSS
Eredità

Sintassi

• proprietà: eredita;

Ereditarietà automatica

Ereditarietà: un meccanismo fondamentale del CSS con cui i valori calcolati di alcune proprietà di un elemento vengono applicati ai suoi "figli". Ciò è particolarmente utile quando si desidera impostare uno stile globale per i propri elementi piuttosto che dover impostare dette proprietà su ogni singolo elemento del markup.

Le proprietà comuni che vengono automaticamente ereditate sono: font , color , text-align , line-height .

Assumi il seguente foglio di stile:

#myContainer {
  color: red;
  padding: 5px;
}

Questo applicherà il color: red non solo all'elemento <div> ma anche agli elementi <h3> e <p> . Tuttavia, a causa della natura del padding suo valore non sarà ereditato da tali elementi.

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>

Ereditarietà forzata

Alcune proprietà non vengono automaticamente ereditate da un elemento fino ai suoi "figli". Questo perché in genere tali proprietà sono desiderate essere univoche per l'elemento (o la selezione di elementi) a cui viene applicata la proprietà. Proprietà comuni come margin , padding , background , display , ecc.

Tuttavia, a volte l'eredità è desiderata comunque. Per ottenere ciò, possiamo applicare il valore inherit alla proprietà che dovrebbe essere ereditata. Il valore inherit può essere appiato a qualsiasi proprietà CSS e qualsiasi elemento HTML.

Assumi il seguente foglio di stile:

#myContainer {
  color: red;
  padding: 5px;
}
#myContainer p {
  padding: inherit;
}

Questo applicherà il color: red ad entrambi gli elementi <h3> e <p> causa della natura ereditaria della proprietà color . Tuttavia, l'elemento <p> erediterà anche il valore padding dal suo 'parent perché questo è stato specificato.

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>