CSS
Erbe

Syntax

• Eigenschaft: erben;

Automatische Vererbung

Vererbung der grundlegende Mechanismus von CSS, durch den die berechneten Werte einiger Eigenschaften eines Elements auf seine untergeordneten Elemente angewendet werden. Dies ist besonders nützlich, wenn Sie Ihren Elementen einen globalen Stil zuweisen möchten, anstatt die besagten Eigenschaften für jedes einzelne Element in Ihrem Markup festlegen zu müssen.

Übliche Eigenschaften, die automatisch vererbt werden, sind: font , color , text-align , line-height .

Nehmen Sie das folgende Stylesheet an:

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

Dies gilt für color: red nicht nur für das Element <div> , sondern auch für die Elemente <h3> und <p> . Aufgrund der Art der padding dieser Wert jedoch nicht an diese Elemente vererbt.

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

Erzwungene Vererbung

Einige Eigenschaften werden nicht automatisch von einem Element an die untergeordneten Elemente vererbt. Dies liegt daran, dass diese Eigenschaften normalerweise für das Element (oder die Auswahl der Elemente), auf das die Eigenschaft angewendet wird, eindeutig sein sollen. Häufig sind solche Eigenschaften margin , padding , background , display usw.

Manchmal ist jedoch trotzdem Vererbung erwünscht. Um dies zu erreichen, können wir die Anwendung inherit Wert auf die Eigenschaft , die vererbt werden soll. Der inherit Wert kann auf jede CSS - Eigenschaft und jedes beliebigen HTML - Element appied werden.

Nehmen Sie das folgende Stylesheet an:

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

Dadurch wird color: red auf die Elemente <h3> und <p> angewendet, da die color Eigenschaft vererbt ist. Das <p> -Element erbt jedoch auch den padding von seinem übergeordneten Element, da dies angegeben wurde.

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