Abfolge von Ereignissen

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Es gibt drei Arten, Stilregeln zuzuweisen: über ein externes Stylesheet, über ein eingebettetes Stylesheet oder mit dem Attribut style im HTML-Tag. Für die Abfolge von Ereignissen macht es keinen Unterschied, wo eine Stilregel definiert ist, sondern nur, an welcher Stelle sie zum Einsatz kommt.

Nehmen wir ein Beispiel. Das externe Stylesheet mylayout.css enthält die folgende Stilregel:

Auf einer speziellen Seite soll h2 jedoch von der »normalen« Darstellung abweichen und in einer anderen Farbe angezeigt werden. So können Sie zum Beispiel in einem eingebetteten Stylesheet für h2 eine andere Farbe definieren.

Dieses eingebettete Stylesheet kommt nur dann zum Einsatz, wenn Sie es mit einem <style>-Tag hinter dem <link>-Tag des externen Stylesheets in den Header der Seite einbauen. Nach dem Prinzip der Ereignisabfolge erhält es dann den Vorrang vor dem anderen.

Mit nur einer Eigenschaftsdefinition wie in unserem Beispiel ist es noch einfach nachzuvollziehen, wie das Prinzip der Ereignisabfolge funktioniert. Die eingebettete Regel setzt das externe Stylesheet außer Kraft – alle h2-Elemente werden auf der Seite blau dargestellt. Es ist wichtig zu beachten, dass die zweite Regel die erste nicht wirklich überschreibt, sondern nur vor der anderen dominiert, weil sie nach ihr deklariert wurde. Platzieren Sie einfach das <style>-Tag vor das <link>-Tag, und schon erscheinen alle h2-Elemente wieder in Grün.

Leider sind die Dinge nicht immer ganz so klar und eindeutig. Wir bauen das Beispiel der grünen Überschriften nun etwas aus und fügen dem externen Stylesheet einige weitere Eigenschaften hinzu.

Auf einer anderen Seite setzen wir in einem eingebetteten Stylesheet folgende Stilregel ein:

Wieder bauen wir die eingebetteten Stilregeln erst nach dem Link auf die externe CSS-Datei in unsere Seite ein. In diesem Fall kommen auch die Eigenschaften aus dem externen Stylesheet zum Einsatz, die nicht in dem auch hier priorisierten eingebetteten Stylesheet anders formuliert werden. Die h2-Überschrift wird also in grün mit transparentem Hintergrund und den Schriften des externen Stylesheets und mit dem linken Innenrand von 20 Pixel und der ausgeschalteten Textdekoration des eingebetteten Stylesheets angezeigt.

Man kann sich diesen Vorgang wie einen Wasserfall vorstellen: Es beginnt mit bestimmten Deklarationen (in unserem Beispiel für color, background-color, margin-left, font-family und text-decoration). Dann fallen diese Formatierungsregeln wie ein Wasserfall über Steine. Kommt ein Stein mit einer bereits definierten Regel, aber unterschiedlichen Werten, tritt der Kaskadierungseffekt ein und die neuen Werte werden übernommen.

Bei zwei oder mehreren Stilregeln, die bei einem Element in Konkurrenz zueinander stehen, erhält immer die Stilregel den Vorrang, die an letzter Stelle deklariert wurde. Voraussetzung ist natürlich, dass hinsichtlich der wichtigeren Kriterien (Besonderheit, Herkunft und Gewichtung) keine Unterschiede bestehen.