Konzentriere dich… Gehe in dich hinein und sei das Wasser in der Kaskade… Gehe den Weg des geringsten Widerstandes und du wirst die Technik der Stylesheets lernen und verstehen!
Hier eine wirklich kurze Einführung in die Lehre des “Kaskadierenden Styles”…
Um mit CSS (Cascading Style Sheets) erfolgreich zu arbeiten bedarf es nicht unbedingt jahrelangem Training in entlegenen Bergklöstern, einer Askese oder täglicher Meditation. Vielmehr sollte man sich über die Funktionsweise und über den richtigen Umgang mit dieser Technik im Klaren werden.
Lektion 1: Die Theorie
Eine zeitgemäße Internetseite sollte zum einen aus dem Inhalt (HTML) und zum anderen aus dem Layout bzw. der Formatierung oder dem Design des Inhalts (CSS) bestehen. Damit man zum Zweck der Übersichtlichkeit und der Usability beide Teile voneinander trennen kann werden diese in separate Dateien gepackt und abgelegt.
Werfen wir zunächst einen Blick auf die HTML-Datei. Diese besteht aus verschiedenen – zumeist in sich verschachtelten – Tags, die sich wie eine Zwiebel aufschälen lassen.
Hierarchisch gesehen ergibt sich somit von aussen nach innen folgende Rangliste:
body/wrapper/header/content oder body/wrapper/main/content oder eben body/wrapper/footer/content. Innerhalb der Klasse “content” der ID “main” könnte natürlich auch noch ein HTML-Tag stehen, das wir ansprechen wollen, z. B. ein <a>, dann hiesse es body/wrapper/main/content/a Übrigens: Der Unterschied zwischen einer Klasse und einer ID besteht darin, dass eine Klasse mehrmals angewendet werden kann während eine ID unique bleiben muss. Die Schreibweise einer Klasse in der CSS-Datei ist folgendermaßen: .name {…}. Die Schreibweise einer ID so: #name {…}.
Soviel zum Inhalt. Jetzt kommt Darstellung, festgelegt in der CSS-Datei.
Auch hier würde ich die Reihenfolge von aussen nach innen beibehalten, um die einzelnen Klassen und IDs besser zuordnen zu können. Desweiteren bietet es sich an die Formatierungen des Layouts von den Formatierungen der Tags etc. zu trennen. Aber soviel nur nebenbei zur Form.
Hier sieht man den möglichen Aufbau einer externen Stylesheet-Datei. Es gibt drei Möglichkeiten um ein Stylesheet in eine HTML-Seite einzubringen.
- Extern. D. h. ausgelagert und mittels
<link href=”../images/3spalter.css” rel=”stylesheet” type=”text/css” />
in den “Head” der Datei geladen. Empfohlen! - Intern. D. h. mit
<style type=”text/css”> <!– … Hier werden die Formate definiert … –> </style>
in den “Head” eingebunden. Nur im Notfall! - Inline. D. h. mit style=”…” direkt in den Tag geschrieben. Nur im absoluten Notfall!
Aber Achtung! Hier verhält sich die Rangfolge der Stylesheets genau umgekehrt. Das Externe wird vom Internen überschrieben und das Interne vom Inline-Stylesheet (Ausnahme: Der Gebrauch des “!important”-Tags…).
Lektion 2: Die Praxis
Wie so eine Kaskadierung aussieht ist uns nun allen klar. Aber wie arbeite ich damit?
Genau genommen wird jedes zu formatierende Element durch einen Pfad angesprochen, der der Hierarchie der zwiebelförmig angelegten Tags von aussen nach innen entspricht. In der oben gezeigten Grafik wäre die ausführlich Schreibweise also: #wrapper #header {…}. Aber bei umfassenden eindeutigen Elementen kann man den Pfad getrost kürzen. Das spart Kilobytes und man erwähnt ja auch nicht jedesmal den allumschließenden “Body”-Tag.
Das ultimative Beispiel für einen CSS-Pfad würde z. B. so aussehen:
“Meister Lee möchte mit seiner neu erworbenen Technik den Listenpunkt einer untergeordneten ungeordneten Liste aber nur innerhalb der Klasse “content” im Div-Container mit der ID “header” innerhalb des übergeordneten Containers “wrapper” als “square” definieren. Meister Lee kehrt in sich, verwandelt seinen Geist in Wasser, folgt dem Fluss der Kaskade und schreibt schliesslich unter dem staunenden Blick seines Lehrlings folgendes nieder:
#wrapper #header .content ul ul { list-style-type:square;}”
<
