Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

11.2 Sammle alle relevanten Deklarationen

Bei der Gestaltung eines Elements sammelt der Browser zunächst für jede CSS-Eigenschaft alle relevanten Deklarationen und schreibt sie auf einen metaphorischen Zettel. Relevant ist eine CSS-Deklaration dann, wenn der Selektor des Styles das zu gestaltende HTML-Element
auswählt.

Relevante Deklarationen: keine, eine oder mehrere

Nach der Sammlung aller relevanten Deklarationen gibt es für jede Kombination von HTML-Element und CSS-Eigenschaft drei Möglichkeiten: 

  • Keine Deklaration
    Findet der Browser gar keine Deklaration, prüft er, ob die Eigenschaft vererbt wird. Wird nichts vererbt, nimmt er den Standardwert.
  • Eine Deklaration
    Findet der Browser genau eine Deklaration, nimmt er diese zur Gestaltung des Elements.
  • Mehrere Deklarationen
    Findet der Browser mehrere Deklarationen, werden diese nach Wichtigkeit, Spezifität und Reihenfolge sortiert, bis ein eindeutiger Gewinner feststeht. 

Schematisch dargestellt sieht dieser Sachverhalt etwa so aus:

Der Browser muss wie gesagt für jedes Element im Baum, für jede einzelne mögliche CSS-Eigenschaft einen Wert finden. Viel zu tun. Los geht’s.

Mögliche Quellen sind Browser, Autor und Benutzer

Bei der Sammlung relevanter Deklarationen muss ein Browser folgende Quellen berücksichtigen:

  • Browser-Stylesheet: sein eigenes, fest eingebautes Stylesheet.
  • Autoren-Stylesheet: Der Autor der Webseite kann CSS in externen Stylesheets oder im HTML-Quelltext einer Webseite definieren. 
  • Benutzer-Stylesheet: Der Benutzer, also der Besucher der Webseite, kann seinem Browser ein eigenes Stylesheet mit auf den Weg geben. 

Zuerst schaut der Browser in sein eigenes Stylesheet. Beim Mozilla Firefox heißt es html.css und liegt im Programmordner des Firefox im Unterorder /res (wie resources). In diesem Browser-Stylesheet steht für ul folgende CSS-Regel:

  • ul { display: block; margin: 1em 0; }

Der Selektor  ul passt, und  margin-bottom ist  1em. Treffer. Diese Regel notiert der Browser auf seinen Zettel. Der Internet Explorer ist übrigens nicht ganz so offenherzig und behält seine eingebauten Styles für sich.

Weiter geht’s. Im head der Webseite findet der Browser eine Verknüpfung zum Stylesheet  bildschirm.css. Er untersucht dieses Stylesheet und findet für die ul drei Styles, die alle eine Deklaration zu margin-bottom enthalten:

  • * {padding: 0; margin: 0; }
  • h2, p, ul, ol { margin-bottom: 1em; }
  • #navibereich ul { margin-bottom: 0; }

Da es im HTML-Quelltext der Startseite keine weiteren Styles gibt und der Benutzer ebenfalls keine speziellen CSS-Anweisungen gegeben hat, beendet der Browser seine Suche. Insgesamt wurden vier Anweisungen gefunden, von denen zwei einen margin-bottom von 1em definieren und die anderen beiden jeweils eine 0.