 6) Cascadierung
Situation: Es existiert eine externe CSS-Datei, zusätzlich finden sich Anweisungen im Head-Bereich und außerdem Inline-Anweisungen. Was nun?
|
|
Interessant: Das Prinzip der Vererbung und abgestuften Rangordnung
Die möglichen unterschiedlichen Quellen der CSS-Anweisungen, die sich unter Umständen sogar auf ein und dasselbe Element beziehen, müssen nach einer festgelegten Rangfolge eingestuft werden! Eine Regel muss her.
Die 'Vererbungslehre' ist ein sehr komplexes Thema, in der Grundstruktur aufgebaut wie eine Abstufung (Treppe). In der Bildchensprache der Entwickler auch als 'Cascade' bezeichnet (dazu müsste natürlich Wasser über diese Stufen plätschern). Nun wissen Sie zumindest, wo der Begriff CSS (Cascading Style Sheet) herkommt.
Der erste Schritt zum Verstehen
Möchten Sie den Hintergrund der Vererbung verstehen, muss man wissen, dass Elemente wie <h1> bis <h5>, <p>, <b>, <i>, usw. Kindelemente des 'Vaters' <body> sind. Und der vererbt seine Eigenschaften.
Daraus folgt: Würden Sie eine CSS-Formatierung lediglich für den <body> festlegen, 'profitieren' auch alle untergeordneten HTML-Elemente von den Anweisungen.
 Beispiel - Info einblenden / ausblenden
So vererbt das <body>-Element Eigenschaften auf die Nachkommen <td> und <p>.
CSS-Anweisungen:
body {
font-family: Verdana,Arial,Helvetica; (Schrifttype)
font-size:12px; (Schriftgröße)
color: #000000; (Schriftfarbe)
}
td {
color: #3F3F3F; (Schriftfarbe)
}
p {
font-size:11px; (Schriftgröße)
}
Text in Tabellenzellen (<td>) und Absätzen (<p>) erscheinen also genauso wie für den <body> festgelegt, soweit Sie nicht im Anweisungsblock für td und p durch anders lautende, eigene Angaben überschrieben werden.
Das bedeutet hier:
Für Tabellenzellen <td>: Die notierte Schrifttype und Schriftgröße wird von den Notierungen für den <body> übernommen.
Für Absätze <p>: Die notierte Schrifttype und Schriftfarbe wird von den Notierungen für den <body> übernommen.
Das war nun der einfache Teil, die Grundlage der 'Vererbungslehre' abhängig von Vater-Kind-Beziehungen der Elemente innerhalb einer HTML-Seite. Wenn es dann so simpel bleiben würde, wärs schön. Aber es kommt schlimmer (später).
CSS steht also für Cascading Style Sheets. Die Regeln der Kaskadierung legen die abgestufte Priorität fest. Diese Regeln sind dann von Bedeutung, wenn z.B. durch mehrere Styles, beabsichtigt oder unbeabsichtigt, unterschiedliche Angaben für den selben Selektor gemacht wurden.
Zur Erinnerung: Style Sheets können in HTML-Dokumente eingebunden werden durch:
- interne CSS-Anweisungen (CSS im Head der HTML-Datei)
- externe CSS-Anweisungen (CSS in einer externen Datei)
- inline CSS-Anweisungen (Direktformatierung)
Der arme Browser
Und da wird es dann komplizierter! Nicht nur für uns, auch für den geplagten Browser.
Beispiel: Nehmen wir an, eine HTML-Seite hätte alle 3 CSS-Anweisungen in den oben aufgezeigten Formen. Das ist ja möglich und erlaubt. Nur was ist, wenn z.B. für das <h1>-Tag überall unterschiedliche Farbangaben eingetragen wurden?
in der internen CSS-Anweisung(CSS im Head der HTML-Datei)
in der externen CSS-Anweisung (CSS in einer externen Datei)
in der inline CSS-Anweisung (Direktformatierung)
|
color: #FF0000;
color: #0000FF;
color: #FF7F00;
|
Welche Textfarbe hat die Überschrift?
Vorab bin ich noch 2 Erklärungen schuldig
Damit es richtig kompliziert wird verrate ich nun, dass es nicht dabei bleibt die 3 oben aufgeführten Möglichkeiten der CSS-Anweisung zu unterscheiden. Es kommt noch schlimmer: Sie lernen 2 weitere kennen.
1) !important = wichtig
Die Wichtigkeit einer Deklaration kann in der Notierung durch den Zusatz
' !important ' angehoben werden. Eine zusätzlich mit !important gekennzeichnete Deklaration hat Vorrang gegenüber einer normal angegebenen Deklaration! Um die Wichtigkeit einzutragen wird in der normal angegebenen Deklaration hinter Eigenschaft und Wert
p { font-size:12px; }
der Zusatz '!important' nach einem Leerzeichen notiert:
p { font-size:12px !important; }
2) User-Style-Sheets
Neue Browser erlauben es den Seitenbesuchern, eigene Style Sheets einzubinden. Damit öffnet sich nicht nur eine 4. Quelle für Style-Angaben. Denn da sowohl das Autoren- als auch das User-Stylesheet !important-Regeln enthalten können, galt es auch für diese Situation Regeln festzulegen: !important-Regeln des Users überschreiben dabei !important-Regeln des Autoren ().
CSS-Einfluss auf HTML-Dokumente
Wie Sie nun wissen, können Style-Angaben aus verschiedenen Quellen Einfluss auf HTML-Dokumente nehmen:
- a) externe CSS-Anweisungen (CSS in einer externen Datei)
- b) interne CSS-Anweisungen (CSS im Head der HTML-Datei)
- c) inline CSS-Anweisungen (Direktformatierung)
- d) CSS-Anweisungen durch Deklarationen des Benutzers
Aber welcher Style wird angewendet, wenn es mehr als eine Angabe gibt?
Endlich die Antworten zu den bisher offenen Fragen. Bevor Sie zum nächsten Kapitel gehen, machen Sie noch einmal eine Entspannungsübung, holen sich einen Kaffee und lesen dann ohne Angst weiter.
Prioritäten
Mehrere Style-Angaben unterschiedlicher Quellen in dieser Reihenfoge eingebunden, kaskadieren zu einem neuen virtuellen StyleSheet nach folgender, aufsteigender Priorität:
- Browser Default-Einstellungen
- externe CSS-Anweisungen
- interne CSS-Anweisungen
- inline CSS-Anweisungen
Also hat ein Inline-Style die höchste Priorität! Das bedeutet, es überschreibt seiteninterne und externe Styles und natürlich die Defaultwerte des Bowsers.
Damit wäre die Rangfolge nun geklärt, gäbe es nicht den !important-Zusatz. Der beschert uns 2 weitere Stufen der Cascade.
Priorität nach Ursprung
Der Vorrang der !important-Benutzer- gegenüber den !important-Autoren-Styles wurde mit dem CSS2-Standard neu festgelegt.
Bis hierhin erscheint hoffentlich alles einigermaßen logisch? Tja, ... und dann hat CSS ja noch die Fähigkeit Eigenschaften zu vererben, das wissen Sie bereits.
Pause @______@______@______@______@______@______@______@
Es ist nun an der Zeit sich ein wenig zurückzulehnen, gönnen Sie sich eine erste Pause. Sie wollten doch sowieso eine Packung Kekse öffnen.
Vererbungstabelle des Browsers
Hier wird es sehr theoretisch. Treffen wir die Abmachung, dass ich es kurz und simpel halte und Sie den Absatz überspringen, falls das zum jetzigen Zeitpunkt zu viel wird.
Zur Vererbung muss man wissen, dass die HTML-Seite und deren Elemente vom Browser nach einem Eltern-Nachkommen-Prinzip, ähnlich dem eines Stammbaums, verwaltet werden.
Mit den nächsten beiden Grafiken wiederhole ich mich:
Der Browser liest beim Öffnen einer HTML-Seite den Quellcode.
Daraus gerneriert er für die interne Organisation zur Anzeige der Seite einen Elementebaum. Er legt eine (ebenso interne) Tabelle aller Seitenelemente an. Die Tabelle enthält Informationen über Rangfolge und Abhängigkeiten der Seitenelemente.
Ich hoffe das simple Beispiel macht klar, das die Überschrift 'h1', der Absatz 'p' und die Aufzählingsliste 'ul' mit den Listenpunkten 'li' Elemente der HTML-Seite sind.
- Die Aufzählingsliste 'ul' hat 3 Kind-Elemente (Listenpunkte 'li')
- Das Elternelement von 'h1', 'p' und 'ul' = 'body'
Vererbung von Formatierungseigenschaften
Die Formatierung wird ebenfalls nach dem Eltern-Nachkommen-Prinzip vererbt. Den vererbten Formatierungen werden Prioritäten zugeordnet.
Eltern-Kind-Abhängigkeiten ergeben sich zum Beispiel durch die Reihenfolge der Notierung.
Im Body-Bereich
'Text1' und 'Text2' sind übrigens Geschwister.
 Siehe Beispielseite Text mit Schatten
a) Etwas komplexer als in dieser Darstellung ist das schon. Bei den Kind-Elementen taucht dann z.B. noch der Ausdruck 'first-child' (erstes Kindelement) auf.
Beispiel - Info einblenden / ausblenden
Anweisungen für die Formatierung des ersten Kind-Elements (first-child)
In einer Liste (<ul>) ist der erste Eintrag (<li>) das erste Kind. Für dieses 'first-child' kann man eigene Formatierungen festlegen.
CSS-Anweisungen:
<style type="text/css">
<!--
ul {
font-size:11px;
color:#000000;
}
li:first-child{color:#ff0000;}
-->
</style>
b) Etwas komplizierter als in dieser Darstellung ist das schon. Schließlich gibt es neben den einfachen 'Verwandtschaftsverhältnissen' (Kind-Elemente) die Sie bereits kennen gelernt haben, noch Geschwister-Elemente.
Die Regeln dazu lasse ich hier weg. Nur kurz: Es handelt sich um Geschwisterelemente, wenn beide vom selben Elternelement abstammen. Allerdings wird noch zwischen vorhergehenden und nachfolgenden Geschwisterelementen unterschieden. Am besten, Sie vergessen die Geschwisterelemente. Das geht für eine Einführung auch zu weit.
Weil das alles sehr unübersichtlich ist, legt der Browser (intern) ein neues virtuelles Style Sheet an, um all diese Abhängigkeiten zu unterscheiden. Wie sollen Sie da die Übersicht behalten? Alle Abhängigkeiten und das komplexe Regelwerk zu kennen muss auch nicht wirklich sein, wenn Sie die wichtigen Grundlagen behalten.
5 Grundsätze, die man behalten sollte
Diese Grundlagen der Kaskadierung sollten Sie kennen:
Wenn diese Regeln in Erinnerung bleiben, ist das ein guter Start:
 Übergeordnete Elemente vererben Eigenschaften auf Kind-Elemente.
Beispiel - Info einblenden / ausblenden
So vererbt das <body>-Element Eigenschaften auf die Nachkommen <td> und <p>.
CSS-Anweisungen:
body {
font-family: Verdana,Arial,Helvetica; (Schrifttype)
font-size:12px; (Schriftgröße)
color:#000000; (Schriftfarbe)
}
td {
color:#3F3F3F; (Schriftfarbe)
}
p {
font-size:11px; (Schriftgröße)
}
Text in Tabellenzellen (<td>) und Absätzen (<p>) erscheinen also genauso wie für den <body> festgelegt, soweit Sie nicht im Anweisungsblock für td und p durch anders lautende, eigene Angaben überschrieben werden.
Das bedeutet hier:
Für Tabellenzellen <td>: Die notierte Schrifttype und Schriftgröße wird von den Notierungen für den <body> übernommen.
Für Absätze <p>: Die notierte Schrifttype und Schriftfarbe wird von den Notierungen für den <body> übernommen.
spezielle Anweisungen für Kind-Elemente überschreiben vererbte CSS-Anweisungen
Beispiel - Info einblenden / ausblenden
CSS-Anweisungen:
body {
font-family:Verdana,Arial,Helvetica,sans-serif;;
font-size:12px;
color:#000000;
}
p {
color:#FF0000;
}
Die Anweisungen für den Body werden auf Kind-Elemente vererbt. Durch die spezielle Notierung für Absätze (<p>) wird die Angabe für die Textfarbe neu festgelegt, während die Angaben für Schrifttype und -größe weiterhin gültig bleiben.
später notierte Anweisungen überschreiben vorhergehende CSS-Anweisungen
Beispiel - Info einblenden / ausblenden
CSS-Anweisungen:
td {
font-family:Verdana,Arial,Helvetica,sans-serif;;
font-size:12px;
color:#000000;
}
td {
color:#FF0000;
}
Die (in der Reihenfolge) später notierte Anweisung für die Textfarbe (rot) in Tabellenzellen überschreibt die vorhergehende Notierung für die Farbe (schwarz).
inline-Anweisungen überschreiben globale CSS-Anweisungen (höhere Priorität)
Beispiel - Info einblenden / ausblenden
CSS-Anweisungen:
body {
font-family:Verdana,Arial,Helvetica,sans-serif;;
font-size:12px;
color:#000000;
}
Die Anweisungen zur Textformatierung wurden mit globalen CSS-Anweisungen festgelegt. Demnach ist die Textfarbe schwarz.
Jupp Zupp trinkt gerne <span style="color:#FF0000;">Limo</span>
Durch die Inline-Anweisung wird die globale CSS-Anweisung für die Textfarbe (schwarz) überschrieben und für das Wort 'Limo' neu festgelegt (rot)
Der Zusatz !important setzt u.U. normale Rangfolgen außer Kraft!
Beispiel - Info einblenden / ausblenden
CSS-Anweisung:
p { font-size:12px !important; }
Die CSS-Anweisungen mit dem Zusatz '!important' setzt möglicherweise andere Rangfolgen außer Kraft.
Und das wussten Sie eh schon:
Die Eintragung für die Seiten-Hintergrundfarbe im <body>-Tag
<body bgcolor="#FFF1BE" ... >
wird durch die CSS-Anweisung
body { backgrund-color:#FFFFFF;}
überschrieben.
Wenn Sie diese 5 Regeln auswendig hersagen können, darf ihr Monitor von nun an die Web-Toolbox-Wallpaper anzeigen:  zum Download Banner + Wallpaper
Das Thema 'Kaskadierung' habe ich auf dieser Seite mal wieder nach meiner eigenwilligen Methode "ins kalte Wasser werfen und dann in der Kindersprache erklären" zu Ende gebracht. Wie immer habe ich einige Bereiche ausgelassen, von denen ich glaube, dass sie im Augenblick für das Verstehen eher irritierend wären.
Wenn Sie die Seiten 1 bis 5 bereits gelesen hatten, konnten Sie meinen Erklärungsversuchen hier hoffentlich folgen. Das reicht auch für den Anfang denke ich.
Pause @______@______@______@______@______@______@______@
Wenn Sie bis hierher durchgehalten haben,
gönnen Sie sich eine weitere Pause.
Ihr Browser arbeitet natürlich emsig weiter und das, obwohl die Bestimmung der Prioritäten eigentlich weit komplizierter ist, als hier dargestellt.
Im 'Stammbaum' der Elemente einer Webseite, den der Browser vor der eigentlichen Anzeige der Seite erstellt (und den zu ermittelnden Prioritäten bei doppelten und widersprüchlichen CSS-Angaben für diese Elemente), gibt es nämlich noch weitere CSS-Spezifikationen, die ich bisher gänzlich unterschlagen habe.
Bisher auf den Seiten 2 bis 5 noch nicht besprochen:
- Pseudo-Elemente
- ID-Elemente
- Klassen
... und die können auch noch (um Sie total zu verwirren) in Kind- oder Geschwister-Elementen auftauchen und aus unterschiedlichen Styles stammen.
Ich belasse es also bei diesem Stand der Informationen, der meiner Meinung nach für den Anfang völlig ausreicht, und ihre grundsätzlichen Fragen hoffentlich beantwortet.
Abschließend
Mein Beitrag zur Vererbung und Kaskadierung soll hier enden. Außerdem gibt's ausreichend Seiten, die diese Problematik sehr gut und erschöpfend erklären.
Nur noch kurz:
Damit der Browser die Übersicht behält, werden
- die Formatierungsanweisungen aus den verschiedenen Styles für die Elemente der Seite verglichen und eingestuft.
- die Prioritäten in eine 4-spaltige interne Tabelle geschrieben.
- an Hand der dort eingetragenen Werte die gültigen Formatierungen ermittelt.
 Link zum Thema: www.edition-w3c.de 
|
Home • CSS • Kaskadierung
