CSS
Erfenis

Syntaxis

• eigendom: erven;

Automatische erfenis

Overerving het fundamentele mechanisme van CSS waarmee de berekende waarden van sommige eigenschappen van een element worden toegepast op de onderliggende elementen. Dit is met name handig als u een algemene stijl voor uw elementen wilt instellen in plaats van de eigenschappen voor elk element in uw opmaak in te stellen.

Veelgebruikte eigenschappen die automatisch worden overgenomen, zijn: font , color , text-align , line-height .

Ga uit van de volgende stylesheet:

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

Dit zal color: red toepassen, niet alleen op het element <div> maar ook op de elementen <h3> en <p> . Vanwege de aard van de padding de waarde ervan echter niet worden geërfd aan die elementen.

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

Gedwongen erfenis

Sommige eigenschappen worden niet automatisch overgenomen van een element tot aan de onderliggende elementen. Dit komt omdat deze eigenschappen doorgaans gewenst zijn om uniek te zijn voor het element (of de selectie van elementen) waarop de eigenschap wordt toegepast. Veel voorkomende dergelijke eigenschappen zijn margin , padding , background , display , enz.

Soms is overerving echter toch gewenst. Om dit te bereiken, kunnen we de inherit toepassen op de eigenschap die moet worden geërfd. De inherit waarde kan worden appied elke CSS-eigenschap en een HTML-element.

Ga uit van de volgende stylesheet:

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

Dit zal color: red toepassen op zowel de elementen <h3> als <p> vanwege de overerving van de eigenschap color . Het element <p> neemt de padding over van de bovenliggende waarde, omdat deze is opgegeven.

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