Ein Browser, der von einem Webserver einen HTML-Quelltext einliest (parst), erstellt zunächst einen virtuellen Dokumentenbaum, der den hierarchischen Aufbau beschreibt. Die Fachbezeichnung hierfür lautet Document Object Model, abgekürzt DOM. Die nachfolgende Abbildung zeigt, wie ein solches Modell für einen einfachen Dokumentenbaum aussehen kann: Mehr lesen … »
Jeder Browser verfügt zunächst einmal über ein eigenes Standard-Browser-Stylesheet. Darin stehen bestimmte Regeln, die sich zum größten Teil an den Initialwerten der CSS-Empfehlung anlehnen. Das W3C macht hierfür einen Vorschlag, der allerdings nicht normativ ist. Beim Firefox kann man sich diese Datei auch anschauen. Sie heißt html.css und liegt im Programmordner von Firefox im Unterordner “/res” (also z. B. “C:\Programme\Mozilla Firefox\res”). Alternativ kann man in der Adressleiste von Firefox auch “resource:///res/html.css”eintippen. Im Buch bin ich Seite 126 ausführlich auf diese Standard-Stylesheets eingegangen, da sie ein wichtiger Baustein der CSS Kaskade sind. Nur wenn man die Interpretation innerhalb der CSS Kaskade verstanden hat, kann man sich im nächsten Schritt daran wagen, das Zusammenspiel zwischen Kaskade, Vererbung und Initialwerten zu verstehen. Das Verständnis dieser Zusammenhänge ist das Fundament jedes CSS-Designers. Ansonsten wird man immer wieder vor scheinbar unlösbaren Problemen bei der Darstellung stehen.
Beim stöbern im Netz bin ich auf eine Zusammenfassung der wichtigsten CSS-Grundregeln gestoßen, die ich gerne mit Euch teilen möchte. Konkret geht es um folgende acht Punkte, die ich mal als Gebote zusammenfasse:
Änderungen, die man mit Hilfe von Firebug am Code vorgenommen hat, werden von Haus aus leider nicht protokolliert. In der Praxis passiert häufig folgendes: Man probiert zahlreiche Varianten durch und kann sich am Ende nicht mehr genau erinnern welche Eingriffe man zu welchem Zeitpunkt durchgeführt hat. Man weiß nur noch, dass eine der letzten Varianten eigentlich die beste Lösung darstellte.
Der Universal-Selektor wird mit einem Sternchen gesetzt und wird automatisch auf alle HTML-Elemente einer Website angewendet:
1 2 3 | * { color: red; } |
Der Universalselektor wird sehr selten verwendet, da es meistens ja gerade nicht gewünscht ist, eine Stilregel gnadenlos auf alle HTML-Elemente anzuwenden. Gute Dienste leistet er allerdings bei Justierung einer Website, wie ich es im Buch ab Seite 58 verdeutlicht habe.
Artfremd verwenden lässt sich der Universal-Selektor auch um die einzelnen Boxen einer Website sichtbar zu machen:
1 2 3 | * { border: 1px solid red !important; } |
Zum testen den Quellcode einfach mit Hilfe von Firebug oder Web Developer temporär einfügen. Alle Boxen werden hierdurch mit einem roten Rand von einem Pixel versehen.
Wichtig im Zusammenhang mit der CSS Kaskade: Der Universalselektor wird bei der Berechnung der Spezifität grundsätzlich nicht berücksichtigt (außer man kombiniert den Universalselektor mit anderen Selektoren).
