| Kaskadierung CSS |  |      |
|
|
 HOME |
 ZURÜCK SITEMAP |
Interessant: Das Prinzip der Vererbung Die 'Vererbungslehre' ist ein sehr komplexes Thema, in der Grundstruktur aufgebaut wie eine Abstufung (Treppe). In der Bildchensprache der Entwickler auch als 'Caskade' bezeichnet (dazu müsste natürlich Wasser über diese Stufen plätschern). Nun wissen sie zumindest, wo der Begriff CSS (Caskading Style Sheet) herkommt. Der erste Schritt zum Verstehen Möchten sie den Hintergrund der Vererbung verstehen muss man wissen, das 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, 'pofitieren' auch alle untergeordneten HTML-Elemente von den Anweisungen.  Beispiel - Info einblenden / ausblenden
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:
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?
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 fest zu legen: !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:
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 Style Sheet nch folgender aufsteigender Priorität:
Damit wäre die Rangfolge nun geklärt, gäbe es nicht den !important-Zusatz. Der beschert uns 2 weitere Stufen der Caskade. 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 weing zurück zu lehnen, gönnen sie sich eine erste Pause. Sie wollten doch sowiso eine Packung Kekse öffnen. Vererbungstabelle des Browsers 
Hier wird es sehr theoretisch. Teffen wir die Abmachung das ich es kurz und simpel halte und sie den Absatz überspringen, falls das zum jetzigen Zeitpunkt zu viel wird.
Zur Vererbung muss man wissen, das HTML-Seite und deren Elemente vom Browser nach einem Eltern-Nachkommen-Prinzip, ähnlich dem eines Stammbaums, verwaltet werden. Die Formatierung wird ebenfalls nach dem Eltern-Nachkommen-Prinzip vererbt. Den vererbten Formatierungen müssen Prioritäten zugeordnet werden. 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 / ausblendenb) Etwas komplizierter als in dieser Darstellung ist das schon. Schließlich gibt es neben den einfachen 'Verwandschaftsverhä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 Geswisterelemente. 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 Caskadierung 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 spezielle Anweisungen für Kind-Elemente überschreiben vererbte CSS-Anweisungen
Beispiel - Info einblenden / ausblenden später notierte Anweisungen überschreiben vorhergehende CSS-Anweisungen
Beispiel - Info einblenden / ausblenden inline-Anweisungen überschreiben globale CSS-Anweisungen (höhere Priorität)
Beispiel - Info einblenden / ausblenden Der Zusatz !important setzt u.U. normale Rangfolgen außer Kraft! Beispiel - Info einblenden / ausblendenUnd das wussten sie eh schon:
Die Eintragung für die Seiten-Hintergrundfarbe im <body>-Tag 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, das sie im Augenblick für das Verstehen eher irritierend wären.
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 wiedersprü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:
... und die können auch noch (um sie total zu verwirren) in Kind- oder Geschwister-Elementen auftauchen und aus unterschiedlichen Styles stammen. Belasse ich 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 abschließen. Außerdem gibts ausreichend Seiten, die diese Problematik sehr gut und erschöpfend erklären. Nur noch kurz: Damit der Browser die Übersicht behält, werden
Link zum Thema: www.edition-w3c.de Erstellt: 18.08.2005 | ||||||
|
6) Caskadierung