CSS
Dziedzictwo

Składnia

• właściwość: dziedziczenie;

Automatyczne dziedziczenie

Dziedziczenie podstawowy mechanizm CSS, za pomocą którego obliczone wartości niektórych właściwości elementu są stosowane do jego „potomków”. Jest to szczególnie przydatne, gdy chcesz ustawić globalny styl dla swoich elementów zamiast ustawiać wspomniane właściwości dla każdego elementu w znacznikach.

Wspólne właściwości, które są automatycznie dziedziczone, to: font , color , text-align , line-height .

Załóżmy następujący arkusz stylów:

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

Spowoduje to zastosowanie color: red nie tylko do elementu <div> , ale także do elementów <h3> i <p> . Jednak ze względu na charakter padding jego wartość nie zostanie odziedziczona do tych elementów.

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

Wymuszone dziedziczenie

Niektóre właściwości nie są automatycznie dziedziczone od elementu aż do jego elementów potomnych. Wynika to z faktu, że te właściwości są zwykle pożądane, aby były unikalne dla elementu (lub wyboru elementów), do którego właściwość jest stosowana. Wspólne takie właściwości to margin , padding , background , display itp.

Czasem jednak pożądane jest dziedziczenie. Aby to osiągnąć, możemy zastosować wartość inherit do właściwości, która powinna zostać odziedziczona. Wartość inherit można zastosować do dowolnej właściwości CSS i dowolnego elementu HTML.

Załóżmy następujący arkusz stylów:

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

Spowoduje to zastosowanie color: red zarówno do elementów <h3> i <p> ze względu na dziedziczenie właściwości właściwości color . Jednak element <p> odziedziczy również wartość padding od swojego elementu nadrzędnego, ponieważ została ona określona.

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