Kaskadierung CSS
    


HOME

ZURÜCK SITEMAP  

 6) Caskadierung

Seite: 01 02 03 04 05 06 07 08 09 10 11

  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:
  1. interne CSS-Anweisungen (CSS im Head der HTML-Datei)
  2. externe CSS-Anweisungen (CSS in einer externen Datei)
  3. 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 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:
  • 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 welches 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 Style Sheet nch 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 Styls 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 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 / ausblenden


b) 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 / ausblenden


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, das 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 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:
  • 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.

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
  • 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


Erstellt: 18.08.2005



NACH OBEN