Zeitgemäss Layouten mit CSS
CSS (Cascading Style Sheet) ist eine Formatierungssprache, die verwendet wird, um (X)HTML-Dokumente visuell zu gestalten. Ein CSS-Stylesheet ist mit einer Formatvorlage vergleichbar. Struktur und Inhalt (HTML) und Design und Darstellung (CSS) sind voneinander getrennt.
Mit CSS lassen sich unterschiedliche Darstellungen für verschiedene Ausgabemedien (Bildschirm, Papier, Drucker, Projektion) definieren. Damit das CSS funktioniert, muss der definierte Doctype eingehalten werden. CSS überschreibt die Grundeinstellungen des Browsers (default-Werte), das heisst, wenn nichts definiert ist, werden diese übernommen.
Wasserfallprinzip und CSS-Einbindung
CSS funktioniert nach dem Wasserfallprinzip: Cascading = stufenförmig. Die oberste Stufe überschreibt die nächst untere: inline CSS überschreibt > embedded CSS üerschreibt > externes CSS. «Was näher beim definierten Element ist, gilt!» (monorom).
Es gibt verschiedene Varianten, um CSS mit einem HTML-Dokument zu verbinden:
- inline (direkt in der Zeile) «Das machen wir nicht!» (monorom)
- embedded (im Head des HTML-Dokuments)
- extern (Verweis auf externes Stylesheet)
Die externe Verlinkung wird am häufigsten angewendet. Der Hauptvorteil liegt darin, dass Änderungen sich sofort auf alle verlinkten Seiten auswirken.
Vererbung
Vererbung im CSS bedeutet, dass Kindelemente die Eigenschaften von ihren Elternelementen übernehmen. Der body-tag ist ein solches Elternelement und überträgt alle Eigenschaften auf seine Kinder (font-family, background-color, font-size). Deshalb wird immer zuerst der body-tag definiert. Abstände und Hintergrundbilder werden im Gegensatz zur Hintergrundfarbe nicht vererbt und müssen allen Elementen einzeln mitgegeben werden
> mehr zur Vererbung
Selektoren
Die Selektoren legen fest, auf welche Elemente ein Style angewendet werden soll. Wir unterscheiden folgende Selektoren: Elementselektoren, Gruppenselektoren, Kontextsensitive Selektoren, Klassenselektoren, ID-Selektoren und Pseudoelementselektoren
> mehr zu Selektoren