Kemmerzell.org


CSS: Die Vererbung

Von Maximilian · 26.05.2013 · Kategorie: CSS

Nachdem man bereits die Grundlagen von CSS beherrscht, kann man nun weiter auf diese Grundlagen aufbauen, um sein Wissen noch weiter zu verbessern. Schließlich möchte man später einmal selbst Projekte mit CSS umsetzen können. Daher soll es dieses Mal um die Vererbung bei CSS gehen. Diese spielt nämlich ebenfalls eine große Rolle, wenn man seinen Code möglichst kurz und knapp halten möchte.

Da wir ja schon wissen, wie man bestimmten Klassen eine spezielle Schriftart zuweist, nehmen wir nun einmal an, dass wir in einem HTML-Dokument verschiedene div-Container und Links haben, die alle die gleiche Schriftart haben sollen. Dies sähe nach dem bisherigen Stand unserer Kenntnisse dann folgendermaßen aus:

Doch viele dieser Definitionen sind nicht notwendig und könnten einfach zusammengefast werden. Denn durch das Prinzip der Vererbung reicht es aus, wenn man die Schriftart komplett für den Body definiert. So hat mann dann quasi direkt die Schriftart für das komplette Projekt festlegen. Diese wird dann nämlich automatisch auch auf alle anderen Elemente vererbt. Dies sähe dann so aus:

Will man dann aber doch noch in einem bestimmten div-Container eine andere Schriftart nutzen, kann man die Schriftart für diese Klasse ganz einfach neu definieren. Dann wird einfach die vererbte Schriftart mit dieser neuen Definition für diese Klasse überschrieben. So hätte man im folgenden Beispiel also für das gesamte Projekt die Schriftarten Roboto, arial, sans-serif und nur für die Klasse Text die Schriftarten Arial, Helvetica, sans-serif.

Das Ganze gilt aber natürlich nicht nur für komplette Projekte, sondern auch für einzelne HTML-Elemente wie beispielsweise a also Links. Dort gibt es bekanntlich Anweisungen für normale Links, für Links, die bereits geöffnet wurden, usw., die man nach bisherigem Stand alle einzeln definieren würde. Doch auch das muss nicht sein. So kann man beispielsweise a:link, a:active und a:visited zusammenfassen und dann bei a:hover nur die Änderungen im Vergleich zu den „normalen“ Links festlegen. Dies sähe dann so aus:

Durch die Vererbung kann man sich also eine Menge Arbeit sparen und insgesamt auch seinen kompletten Code verkürzen. Bisher haben wir uns aber nur die einfache Vererbung angesehen. Es gibt aber auch noch eine erweiterte Vererbung, auf die wir nun etwas näher eingehen werden.

Erweiterte Vererbung

Weiter oben haben wir ja bereits geklärt, dass man mit Hilfe der Vererbung gewisse Definitionen für das gesamte Projekt erstellt und diese dann automatisch an alle anderen Klassen vererbt werden. Möchte man dann an einer bestimmten Stelle aber eine andere Definition verwenden, kann man die vererbte Definition einfach überschreiben. Soweit waren wir ja weiter oben bereits. Dies ist gleichzeitig auch schon das Prinzip der erweiterten Vererbung. Dabei gibt es jedoch auch einige Grenzen. So können Schriftgrößen nicht auf Überschriften oder Tabellenspalten vererbt, Schriftfarben nicht auf Links und Schriftarten nicht auf body– oder <textarea>-Elemente vererbt werden.

Mehrfach-Vererbung mit Klassen

Ein weiterer spezieller Fall der Vererbung in CSS ist die Mehrfachvererbung. Diese werden wir nun einmal behandeln. Dafür nehmen wir zunächst an, dass wir in unserem Projekt ein div-Element haben, das mit Hilfe von CSS diverse Eigenschaften zugewiesen bekommt und mit der Klasse kasten in CSS bezeichnet wird. Die Definitionen der Eigenschaften dieser Klasse könnten dann beispielsweise folgendermaßen aussehen:

Dieses Element würde dann natürlich auch in unserem HTML-Dokument genutzt. Eingebunden sähe dieses Element dann so aus:

Beim weiteren Arbeiten an unserem Projekt fällt uns nun aber auf, dass wir erneut ein solches Element benötigen, das aber mit größerer Schrift gefüllt werden soll. Die anderen Definitionen würden sich jedoch nicht von denen des bisherigen Kastens unterscheiden. Nun könnte man für diesen neuen Kasten mit größerer Schrift natürlich eine neue Klasse in CSS anlegen und dieser die entsprechenden Werte geben. Doch das ist gar nicht notwendig. So erstellen wir stattdessen einfach eine weitere Klasse, die dann die Definition für die größere Schrift besitzt. Diese Klasse könnte dann so aussehen:

Nun haben wir aber zwei Klassen, die zusammen den gewünschten Effekt erzielen. Doch wie bekommt man diese beiden Klassen zusammen? Dabei kommt einem wieder das Prinzip der Vererbung zur Hilfe. So kann man im HTML-Dokument mehrere Klassen für unser div-Element hinterlegen. Das würde dann so aussehen:

Die Reihenfolge der Klassen ist dabei egal. So könnte man die beiden Klassen auch umdrehen und würde trotzdem den gewünschten Effekt erzielen.

In unserem Beispiel vererbt dann also die Klasse kasten alle ihre Eigenschaften auf das div-Element. Hinzu kommen dann noch die Eigenschaften der weiteren Klasse für die größere Schrift. Auch diese werden dann an das div-Element vererbt. Dieses Prinzip könnte man noch deutlich weiterführen und für ein bestimmtes Element auch 30 verschiedene Klassen angeben. Allerdings sollte man dies nicht tun, da man schon bei drei oder mehr Klassen den Überblick verliert und so schnell Fehler entstehen können. Daher sollte diese Technik nur relativ selten und nur an sinnvollen Stellen eingesetzt werden. So erspart man sich auch eine Menge Arbeit, wenn man nachher lange nach dem Fehler suchen muss. Denn zu beachten gibt es hier auch, dass die einzelnen Klassen sich nur gegenseitig ergänzen können. Man kann also nicht mit der Klasse kasten die Klasse gross überschreiben.

Damit hätten wir nun auch die Vererbung innerhalb von CSS gelernt und sind damit einen großen Schritt weiter vorangekommen. In den nächsten Teilen werden wir dann weiter auf unser bisheriges Wissen aufbauen und weitere wichtige Teile von CSS behandeln. Sollten bis dahin noch Fragen – zur Vererbung oder auch zu den grundsätzlichen Grundlagen – vorhanden sein, können diese auch gerne über die Kommentare geklärt werden.

Kommentieren Teilen +1 Twittern
Dieser Artikel wurde von +Maximilian verfasst.
Kommentare
Am 12. April 2014 um 17:14 Uhr

[…] zuweist. Dann ist auch die Reihenfolge der Angabe egal. Ausführlicher habe ich dies auch schon bei der Erklärung der Vererbung von CSS erklärt. Ein Blick in diese Erklärung kann sich also […]

Einen eigenen Kommentar hinterlassen




Newsletter

Um unseren Newsletter zu abonnieren, tragen Sie bitte einfach Ihre Email-Adresse unten ein. Sie werden daraufhin eine Bestätigungsmail erhalten!

Jetzt den RSS-Feed abonnieren!

Klicke hier und abonniere den RSS-Feed, um immer auf dem neusten Stand zu bleiben.

Tipp senden

Du hast etwas entdeckt, über das wir noch nicht berichtet haben? Dann schicke uns doch einen Hinweis zu!

Klicke einfach auf den unteren Button, fülle das Formular aus und wenn das Thema passt, erscheint bei uns schon bald ein Artikel zu deiner Entdeckung.

Jetzt Tipp senden!