Vererbung und Kaskade

Wir kommen um ein wenig Theorie beim Arbeiten mit HTML und CSS leider nicht herum. Um zu verstehen, wie CSS-Stile auf einzelne Elemente unserer Seite wirken und warum eine Seite vielleicht nicht immer so aussieht, wie wir es erwarten, ist ein näherer Blick auf das Thema Vererbung und Kaskadierung hilfreich.

Vererbung

Zunächst werfen wir einen Blick auf das DOM (Document Object Model) einer Webseite. Die Struktur einer HTML-Seite ist wie ein Baum aufgebaut.

Das oberste Element ist immer html, darin eingebettet folgt der body-Tag. Body ist im oben stehenden Beispiel das Elternelement von div und dieses wiederum ist Elternelement von h1. Kindelemente können Eigenschaften von ihren Elternelementen erben. Hat z.B. body die Schriftfamilie Helvetica zugewiesen bekommen, so erben alle Absätze, Überschriften oder andere Kindelemente diese Eigenschaft und werden in der Helvetica angezeigt. Wie in einer Kaskade werden Eigenschaften vom übergeordneten Element zum Nachfolgeelement weitergegeben, daher auch der Name Cascading Stylesheet. Aber nicht alle Eigenschaften werden vererbt. Eigenschaften wie position, float, background, border, width, padding oder margin beispielsweise werden nicht auf die Kindelemente übertragen. Würde auch merkwürdig aussehen, wenn wir zum Beispiel dem Container #Seite aus unseren Übungsdateien einen roten Rahmen zuweisen und alle Kindelemente (Absätze, Listen, Tabellen etc.) von #Seite ebenfalls einen solchen Rahmen besäßen. Eigenschaften, die die Platzierung und das Layout von Elementen betreffen, werden in der Regel nicht weitergegeben.

Konkurrierende Anweisungen

Nun haben wir aber gerade bei umfangreichen Projekten häufig die Situation, dass mehrere CSS-Dateien eingebunden werden und für ein und denselben Selektor dann unterschiedliche Regeln deklariert sind. Oder selbst innerhalb eines Stylesheets sind evtl. unterschiedliche Formatierungen für ein Element definiert. Was passiert in solch einem Fall konkurrierender Anweisungen? Oder was passiert, wenn wir zum Beispiel für body die Schriftfarbe #ccc und für p die Schriftfarbe #03b definiert haben, wie werden Absätze in diesem Fall eingefärbt? Bei diesem Konflikt gewinnt die spezifischere Regel, in diesem Fall die Regel für p. p ist halt speziell für Absätze zuständig, während body allgemeiner, nämlich für alle Inhalte zuständig ist.

Welche Regeln werden bei konkurrierenden Anweisungen angewendet?

• Die spezifischere Regel hat Vorrang vor der allgemeineren Regel, das heißt, dass der Stil angewendet wird, der dem Selektor am nächsten liegt. body ist beispielsweise allgemeiner, als p. #Navigation ul ist spezifischer, als ul. Ist einem Tag kein spezifischer Stil zugeordnet, wird bei vererbbaren CSS-Eigenschaften der Stil des nächsten übergeordneten Tags angewendet.
• Der lokal im HTML-Code als Attribut eines Tags angelegte inline-Stil hat damit auch Vorrang vor dem im Head definierten Stylesheet. Dieser hat wiederum Vorrang vor einem externen Stylesheet.
• Haben zwei konkurrierende Anweisungen die gleiche Spezifität (z.B. zwei unterschiedliche Stile für ul), hat die später notierte Regel Vorrang vor dem früher angelegtem Stil. Es macht also einen Unterschied, in welcher Reihenfolge externe Stylesheets in eine HTML-Seite eingebunden werden.
• IDs haben Vorrang vor Klassen. Klassen wiederum überschreiben Typselektoren wie p, ul, table etc.
• Konkurrieren Stile für identische Selektoren in Benutzer bzw. Autorenstylesheets, hat in der Regel das Autorenstylesheet Vorrang vor dem Benutzerstylesheet, zumindest solange im Benutzerstylesheet nicht die !important-Regel verwendet wird.
• Die im Webbrowser fest verdrahteten Standardwerte für Absatz, Überschriften etc. haben die geringste Chance, sich durchzusetzen.

Wie die Kaskade vom Webbrowser durchlaufen wird und welche Regeln wie angewendet werden, ist auf der Seite http://thestyleworks.de/basics/cascade.shtml gut erläutert.

CSS-Fehlersuche

Bei aufwändigen Projekten kann die Fehlersuche und das Überprüfen auf Browserkompatibilität viel Zeit kosten. Um zu ermitteln, welche CSS-Anweisungen auf ein Element wirken, ist folgende Checkliste hilfreich:

• Validiere HTML und CSS.
• Ermittele mit den browsereigenen Werkzeugen (Element untersuchen), welche Stile auf ein Element/einen Selektor wirken.
• Setze Werkzeuge wie die browsereigenen Funktionen in Chrome oder Firefox, Firebug oder die Webdeveloper Extension ein, um die CSS-Angaben testweise zu deaktivieren oder zu ändern.
• Strukturiere Deine Stylesheets und kommentiere einzelne Funktionen.
• Entferne Teile der CSS-Anweisungen vorübergehend, indem Du sie in Kommentare setzst.
• Umgebe Container testweise mit auffälligen Hintergrundfarben oder Rahmen, um zu sehen, wo die Elemente stehen und welchen Raum sie einnehmen.

Weitere Links und Literaturhinweise

Welche Selektoren haben wir in HTML zur Verfügung? http://www.w3schools.com/cssref/css_selectors.asp.
Überblick zu Kaskade und Vererbung: http://little-boxes.de/lb1/11-kaskade-vererbung-oder-standardwert.html und https://wiki.selfhtml.org/wiki/CSS/Kaskade.
Spezifität von Selektoren: https://little-boxes.de/lb1/6.5-spezifitaet-punktesystem-fuer-selektoren.html
Beispiele für konkurrierende CSS-Anweisungen: http://www.css4you.de/wscss/css06.html
Referenzen zu CSS mit Angaben zur Vererbung: http://www.css4you.de/shortref.html