Erstellt am 11.07.2011, letzte Aktualisierung am 08.08.2014, bereits 258 Lesungen

CSS inherit - Vererbung bestimmen

CSS inherit ist keine CSS Eigenschaft, sondern ein Wert der so ziemlich jeder Eigenschaft zugewiesen werden kann.

Dabei wird dann der Wert, welches das Elternelement einer Eigenschaft erhalten hat, auch dem Kindelement, welches bei einer Eigenschaft inherit angegeben hat, übernommen.

Beispiel einer sinnvollen Vererbung (inherit)

Aufbau:
<div id="inhalt1">
Mein Inhalt
<div id="inhalt2">
Weiterer Inhalt
</div>
<div id="inhalt3">
Noch mehr Inhalt
</div>
</div>


Nun legen wir folgende CSS Regel fest:
div{
margin:5px;
padding:5px;
}
#inhalt1{
border:1px solid red;
}
#inhalt2{
border:inherit;
}


Dies ergibt dann folgendes:

inhalt1: Mein Inhalt
inhalt2: Weiterer Inhalt
inhalt3: Noch mehr Inhalt

Erläuterung:

Mit margin und padding geben wir den einzelnen DIV-Elementen nur den nötigen Abstand, um alles besser zu veranschaulichen.
Die eigentliche Vererbung findet beim Kindelement inhalt2 statt. Für inhalt1 haben wir border:1px solid red; festgelegt. Unser inhalt2 und inhalt3 bekommen nicht diesen Rahmen (border), erst nachdem wir für inhalt2 festlegten border:inherit; bekam dieses Kindelement die gleichen Rahmenwerte wie das Elternelement inhalt1.

Wissenswert:

Wenn du in unsere CSS Referenz die verschiedenen CSS Eigenschaften anschaust, gibt es zu jeder den Hinweis ob vererbbar oder nicht. Ein vererbbar: nein bedeutet, du musst zur Vererbung den inherit-Wert, wie oben gezeigt, nutzen. Es gibt jedoch auch Eigenschaften, deren Wert nicht inherit beinhalten darf. Es gibt auch Eigenschaften, die direkt vererben, Beispielsweise font-weight (vererbbar: ja).

Kommentare « CSS inherit - Vererbung bestimmen »

Webmaster-Glossar.de
Schreib den ersten Kommentar!
grau Gäste gelb Mitglieder

Kommentar verfassen

Name
eMail-Adresse (wird nicht angezeigt)
Webseite (optional)
Info: URL / Namen Keyword-Spam wird gelöscht!
Du kannst als Gast Kommentare verfassen. Für registrierte Mitglieder besteht die Möglichkeit den Kommentarverlauf weiter zu verfolgen.
HTML verwenden:
<code>Code darstellen
<code>Mein Code</code>
Mein Code
<strike>Durchgestrichen
<strike>Mein Text</strike>
Mein Text
<strong>Fettschrift
<strong>Mein Text</strong>
Mein Text
<em>Schrägschrift
<em>Mein Text</em>
Mein Text
<blockquote>Zitat
<blockquote>Mein Text</blockquote>
Mein Text