Eine Einführung in CSS

I Inhalt

1 Einführung
1.1 Ziel der Arbeit
1.2 Aufbau dieser Arbeit

2 Browser und CSS

3 Cascading Style Sheets - Grundlagen
3.1 Tabellen oder Cascading Style Sheets
3.2 Syntax von CSS
3.3 Selektoren verwenden
3.3.1 Einfache Selektoren
3.3.2 Der Universelle Selektor
3.3.3 Klassenselektoren
3.3.4 ID Selektoren
3.3.5 Weitere Selektoren
3.4 Funktionsweise von CSS
3.5 Einbinden von CSS in HTML Dokumente
3.5.1 Externe Style Sheets in HTML einbinden
3.5.2 Verwenden des STYLE-TAGS
3.5.3 Inline Stildefinitionen
3.6 Vererbung in HTML
3.7 Zusammenfassung

4 Maßeinheiten und Wertangaben
4.1 Farbangaben in CSS
4.1.1 Angabe eines RGB Farbwertes
4.1.2 Angabe eines Hexadezimalen Farbwertes
4.2 Längeneinheiten
4.2.1 Absolute Längeneinheiten
4.2.2 Relative Längeneinheiten
4.3 Zusammenfassung

5 Cascading Style Sheets – Praktische Anwendung
5.1 Texte formatieren
5.2 Layout mit CSS

6 Zusammenfassung.

II Abbildungsverzeichnis

III Tabellenverzeichnis

IV Literaturverzeichnis

A Anhang A - Referenz wichtiger CSS Eigenschaften

B Anhang B - At- Regeln

1 Einführung

1.1 Ziel der Arbeit

Ziel dieser Arbeit ist es, dem Leser einen Überblick über das Thema Cascading Style Sheets zu verschaffen. Diese Arbeit erhebt keinesfalls den Anspruch, vollständig oder erschöpfend zu sein, da der Umfang in keinem Fall ausreicht um das Thema Cascading Style Sheets umfassend zu behandeln. Sie soll dem interessierten Leser vertiefendes Material in Form von Internet - Links und Literaturhinweisen geben um das Thema selbst vertiefen zu können.

1.2 Aufbau dieser Arbeit

In Kapitel 1 erhält der Leser einen Überblick über die Ziele dieser Arbeit und über die geschichtliche Entwicklung von Cascading Style Sheets. Das 2. Kapitel stellt in einem kurzen Abriss dar, wie weit Cascading Style Sheets mit aktuellen und älteren Browsertypen und deren Versionen einsetzbar sind. Kapitel 3 befasst sich mit den Grundlagen von Cascading Style Sheets auf HTML Dokumente und zieht den Vergleich zu den Vorgehensweisen, die vor Cascading Style Sheets angewandt wurden. Im 4. Kapitel werden die Maßangaben innerhalb Cascading Style Sheets angesprochen und kurz erläutert. Im Kapitel 5 wird dann der praktische Einsatz von CSS erläutert. Im Anhang A befinden sich eine Kurzreferenz von Cascading Style Sheets.

2 Browser und CSS

Wenn CSS zum Layout von Webseiten verwendet werden soll, dann ist es sehr wichtig darauf zu achten, welcher Browser welche CSS Eigenschaften unterstützt. Da es hier große herstellerabhängige Unterschiede gibt ist es zwingend erforderlich, bei jedem Projekt die verwendeten Browser zu spezifizieren und sich dann zu vergewissern, welche CSS Eigenschaften verwendet werden dürfen. Die Extremwerte der CSS Unterstützung bilden an der unteren Grenze der Browser „Netscape Navigator 4.0“, welcher nur einen geringen Teil der CSS Eigenschaften unterstützt und diese meist falsch anzeigt. An der oberen Grenze ist der Browser „Opera 7.5+“ zu nennen, welcher nahezu alle Eigenschaften des CSS Standards 2.1 unterstützt. Ein Link zu einer aktuellen Website, die die Unterstützung der einzelnen Browser für CSS aufzeigt befindet sich im Literaturverzeichnis^[1].

3 Cascading Style Sheets - Grundlagen

Ziel dieses Kapitels ist es, dass dem Leser aufzuzeigen, wie der Einsatz von CSS die Verwaltung und Pflege von Webseiten erleichtert, wie Stildefinitionen in CSS Syntax verfasst werden, in welcher Art und Weise in CSS die korrekte Stildefinition ausgewählt wird und wie CSS Stildefinitionen in einem HTML Dokument eingebunden werden.

3.1 Tabellen oder Cascading Style Sheets

In den ersten Versionen von HTML war es nicht vorgesehen, Inhalte von Webseiten zu gestalten und zu strukturieren^[2]. Dies änderte sich mit einem Mal, als der Webbrowser Mosaic auf den Markt kam. Mit dieser Software war es zum ersten Mal möglich,n im World Wide Web grafisch anzuzeigen. Es kam sehr schnell zu der Situation, dass Autoren von Websites ein Layout für eine erstellten und versuchten, dem Benutzer die Änderung des Layouts nicht zu ermöglichen. Vor dem Erscheinen von CSS 1.0 und auch noch lange danach, wurde ein Layout einer mit stark verschachtelten Tabellen, transparenten GIF Bildern oder Frames realisiert. Wer schon einmal eine Website mit mehrfach verschachtelten Tabellen versucht hat zu ändern der wird schnell bemerken, dass es nicht sehr komfortabel, geschweige denn zweckmäßig ist. Das gleiche gilt für den Einsatz von Frames. Auch die Methode, transparente GIF Bilder im Text einzusetzen, um eine Art „Pseudo-Formatierung“ zu erhalten ist erstens mit sehr viel Aufwand verbunden und kann bei Änderungen noch mehr Anpassungsaufwand bedeuten. Um die Problematik zu verdeutlichen, ist in Tabelle 1 dargestellt, wie Websites mit Tabellen formatiert werden können:

Abbildung in dieser Leseprobe nicht enthalten

Tabelle 1 - Formatierung von Webseiten mit Tabellen

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 1 - Ergebnis der Formatierung mit Tabllen

Wie man sehen kann ist der Quelltext der sehr Aufwändig, nur um das Bild an der gewünschten Stelle zu positionieren. Wenn Sich nun die Position des Bildes oder des Textes aufgrund von Kundenforderungen ändert, dann muss im Quellcode die richtige Stelle gefunden werden, an der geändert werden muss.

Wie aus Tabelle 1 ersichtlich ist, war diese Art der Formatierung von Webseiten nicht trivial und erst recht nicht leicht zu handhaben. Mit dem Einsatz von CSS vereinfachte sich der Quelltext von Webseiten drastisch, wie in Tabelle 2 ersichtlich ist.

Abbildung in dieser Leseprobe nicht enthalten

Tabelle 2 - Formatierung von Webseiten mit CSS

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 2 - Ergebnis der Formatierung mit CSS

Durch die Verwendung des STYLE-Tags können Eigenschaften und Formatierungen von HTML Tags verändert werden. Wie man in Tabelle 1 sehen kann, ist der Quellcode der Webseite mit demselben Inhalt von 26 auf 9 Zeilen geschrumpft, das Ergebnis ist allerdings dasselbe. Wenn man Tabelle 1 mit Tabelle 2 vergleicht wird jedem, der schon einmal eine Webseite entworfen hat, klar, dass der Einsatz von CSS das Ändern und Anpassen der in Hohem Maß vereinfacht

3.2 Syntax von CSS

Um CSS Stildefinitionen einsetzen zu können, wird in diesem Kapitel umfassend beschrieben, wie sich die Syntax einer Stildefinition aufbaut^[3]. Ein Style Sheet besteht aus mehreren Stildefinitionen. Eine Stildefinition besteht aus zwei wesentlichen Teilen, dem Selektor und dem Deklarationsblock. Ein Deklarationsblock wiederum besteht aus mehreren Deklarationen. Eine Deklaration besteht aus einer Eigenschaft und einem dazugehörigen Wert.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 3 - Syntax von Stildefinitionen
Quelle: Vgl. Meyer, 2005, S. 26

Der Selektor gibt an, auf welches Element des HTML-Dokumentes sich diese Stildefinition bezieht. In diesem Fall wären alle Elemente des Typs <div> im Dokument betroffen. Im Deklarationsblock werden dann Eigenschaften des Elements festgelegt. Eine Übersicht über einen Teil der Eigenschaften, die der Internet Explorer 6 unterstützt befindet sich in Anhang A. Die Wertzuweisung zu einer Eigenschaft erfolgt über einen Doppelpunkt. Wie oben schon erwähnt kann ein Deklarationsblock aus mehreren Deklarationen bestehen. Um die Deklarationen voneinander abzugrenzen werden diese mit einem Semikolon abgeschlossen. Auf die Doppelpunkte und Semikola in Deklarationen können beliebig viele Leerzeichen folgen. Dies gilt nicht bei Eigenschaften, die mit mehreren Werten belegt werden können wie folgende Stildefinition zeigt:

p {font: medium Verdana;}

Hierbei gilt die mit Leerzeichen getrennte Liste der so genannten Schlüsselwörter als ein Wert. Das Leerzeichen und nur genau ein Leerzeichen ist für den Browser wichtig, dass er die beiden Schlüsselwörter „medium“ und „Verdana“ als Wert zusammensetzen kann. Wenn man für mehrere HTML-Elemente dieselbe Eigenschaft mit demselben Wert belegen will, dann sieht die Stildefinition wie folgt aus:

h1, h2, h3, h4, p {color: red;}

Diese Stildefinition bewirkt, dass alle HTML-Elemente, die durch Komma getrennt vor der Deklaration stehen, die Farbe Rot zugewiesen bekommen. Wichtig in diesem Zusammenhang ist, dass ein Browser nur gültige, also syntaktisch korrekte Stildefinitionen verarbeitet. Wird beim schreiben einer Stildefinition ein Semikolon zwischen zwei Deklarationen vergessen, dann ist es wahrscheinlich, dass keine der beiden Deklarationen auf das HTML-Element im Selektor angewendet wird.

3.3 Selektoren verwenden

In CSS gibt es verschiedene Arten von Selektoren. Im Folgenden werden die Selektoren kurz vorgestellt und deren Auswirkungen kurz umrissen.

3.3.1 Einfache Selektoren

Einfache Selektoren sind Selektoren^[4], die aus einem normalen HTML Element oder einer Gruppierung von HTML Elementen bestehen. Einfache Selektoren bewirken, dass die Deklarationen, die hinter diesem Selektor stehen, für alle HTML Elemente im Dokument gültig sind, sofern die Syntax der Stildefinition korrekt ist. Die Stildefinition

p, h1, em, h2 {background: blue;}

würde bewirken, dass alle HTML Elemente vom Typ p, h1, em, und h2 mit einem blauen Hintergrund hinterlegt werden. Diese Art der Stildefinition ist relativ leicht zu handhaben, kann allerdings bei großen Websites durchaus zu unerwünschten Ergebnissen führen.

3.3.2 Der Universelle Selektor

Dieser Selektor wurde mit CSS 2 eingeführt und bewirkt, dass sich die Stildefinition auf alle HTML Elemente des Dokuments auswirkt^[5]. Die Stildefinition

* {color: yellow;}

würde bewirken, dass alle HTML Elemente im Dokument als Vordergrundfarbe die Farbe Gelb zugewiesen bekommen würden. Dieser Selektor ist mit Bedacht einzusetzen, da er gänzlich Unerwartete Folgen für das Dokument und die Website haben kann.

3.3.3 Klassenselektoren

In HTML besteht die Möglichkeit, jedem Element eine Klasse zuzuweisen. Dies geschieht über das Attribut „class“. CSS kann sich diese Einteilung mithilfe der Klassenselektoren^[6] zunutze machen. Eine Stildefinition mit einem Klassenselektor bewirkt, dass diese auf alle HTML Elemente der selektierten Klasse angewandt werden. Die Stildefinition

p.headline {font-weight: bold;}

würde bewirken, dass alle <p> Elemente der Klasse „headline“ in Fettdruck dargestellt werden. Dieser Selektor ist einer der am meisten eingesetzten, da sich verschiedene Teile des HTML Dokuments unterschiedlich Formatieren lassen.

3.3.4 ID Selektoren

Eine weitere Möglichkeit um in HTML Elemente voneinander unterscheidbar zu machen ist die Vergabe von IDs. Auch diese IDs können über einen Selektor angesprochen werden, dem ID Selektor. Die Stildefinition

p#firstheadline {font-weight: bolder;}

würde bewirken, dass das <p> Element mit der ID „firstheadline“ in starkem Fettdruck dargestellt wird. Auch dieser Selektor ist sehr weit verbreitet um spezielle Elemente in HTML Dokumenten zu formatieren.

3.3.5 Weitere Selektoren

In CSS sind noch einige andere Selektoren definiert. Die Beschreibung dieser würde allerdings den Rahmen dieser Arbeit sprengen.

3.4 Funktionsweise von CSS

Wie in Kapitel 1.1 erwähnt bedeuten die Buchstaben CSS die Worte Cascading Style Sheets. Im folgenden Kapitel soll verdeutlicht werden, wie Stildefinitionen verarbeitet werden. Der zentrale Begriff in diesem Kapitel ist die Spezifität einer Stildefinition. Die Spezifität wird vom Browser des Benutzers benötigt, um zu entscheiden, welche Stildefinition anzuwenden ist. Die folgenden Kaskadierungsregeln nach Meyer (2005 S.75)^[7] werden dazu benötigt:

1. „Finde alle Deklarationen, die einen Selektor enthalten, der auf ein gegebenes Element passt
2. Sortiere alle auf das Element bezogenen Deklarationen nach Spezifität. Mit !important markierte Regeln enthalten eine höhere Gewichtung gegenüber unmarkierten. Sortiere außerdem alle Deklarationen, die sich auf ein bestimmtes Element beziehen, nach ihrer Herkunft. Es gibt drei mögliche Arten der Herkunft: Autor, Leser und User Agent. Unter normalen Umständen haben Stildefinitionen des Autors gegenüber denen des Lesers Vorrang. Mit !important markierte Stile des Lesers haben ein höheres Gewicht als alle anderen Stildefinitionen, inklusive der mit !important markierten Definitionen des Autors. Sowohl die Stilvorgaben des Autors, als auch des Lesers überschreiben die Standardstile des User Agents.
3. Sortiere alle Deklarationen für ein Bestimmtes Element nach Ihrer Spezifität. Elemente mit einer höheren Spezifität erhalten gegenüber Elementen geringerer Spezifität mehr Gewicht
4. Sortiere alle Deklarationen für ein bestimmtes Element nach Ihrer Reihenfolge. Je später eine Deklaration in einem Style Sheet oder Dokument erscheint, desto mehr Gewicht wird ihr verliehen.“

Um die Funktionsweise dieser doch sehr theoretischen Regeln zu verdeutlichen folgen nun für die Regeln 2-4 jeweils Beispiele.

2. Regel:

Folgende Stildefinitionen sind gegeben:

p {color: gray !important}

<p style=“color: black;“>Hallo <em>werter</em> Leser</p>

In diesem Fall wird die der Text innerhalb eines <p>-Elements grau eingefärbt, da diese Stildefinition als !important markiert wurde. Des weiteren wird diese Stildefinition an das <em>-Element vererbt und somit der gesamte Absatz grau eingefärbt.

Anders sieht es aus, wenn folgende Stildefinitionen vorliegen:

p em {color: red !important} aus dem Autoren-Style Sheet

p em {color: blue !important} aus dem Leser-Style Sheet

In diesem Fall Besagt die 2. Regel, dass zwingend das Style Sheet des Lesers den Vorrang vor allen anderen Stildefinitionen erhält. Somit wäre der Text im Element <em> in diesem Absatz blau. Warum nur der Text des Elements <em> blau eingefärbt wird, wird im Kapitel „Selektoren verwenden“ genau erörtert. Diese zwei Beispiele sollen verdeutlichen, dass mit der 2. Regel zur Kaskadierung zum einen die Herkunft und zum anderen das Gewicht einer Regel entscheidend ist.

3. Regel

Um die dritte Regel am Beispiel erklären zu können, muss zuerst der Begriff der Spezifität^[8] unter die Lupe genommen werden. Die Spezifität von Stildefinitionen wird benötigt, um die Gewichtung der einzelnen Stildefinitionen festzulegen. Diese wird ermittelt, indem jeder Stildefinition ein Zahlenwert zugeordnet wird. Je nach dem, auf was für ein Element sich die Stildefinition bezieht, wird die Spezifität festgelegt. Man kann sich die Spezifität als ein Array mit 4 Stellen und einer Dimension vorstellen. In diesem Array wird dann, je nach Stildefinition ein Wert um 1 erhöht. Folgende Beispiele sollen die Festlegung der Spezifität verdeutlichen:

Abbildung in dieser Leseprobe nicht enthalten

Tabelle 3 - Spezifität verschiedener Stildefinitionen

Befindet sich nun in einem HTML-Dokument nun ein <div> Tag, muss der User Agent anhand der vorliegenden Stildefinitionen entscheiden, welche zur Anwendung kommt. Nach der dritten Regel der Kaskadierung werden die vorhandenen Stildefinitionen zu einem Tag nach deren Spezifität sortiert. Folglich würde in diesem Beispiel die Stildefinition Nummer 8 ausgewählt werden, da diese die höchste Spezifität hat.

4. Regel

Die vierte Regel der Kaskadierung veranlasst den Browser, die Stildefinition zu wählen, welche am weitesten hinten im Style Sheet steht. Da in Tabelle 3 die Stildefinition mit der Nummer 8 eine so genannte Inline-Stildefinition ist, würde der Browser folglich diese Auswählen, da Inline-Stildefinitionen im Style Sheet immer ganz hinten stehen. Nehmen wir an, es gäbe zwei Stildefinitionen, die dasselbe Element betreffen und dieselbe Spezifität besitzen:

p {color: black;} aus einem Externen Style Sheet

p {color: red;} aus einer Stildefinition auf Dokumentenebene

In diesem Fall würde der Browser diejenige Stildefinition auswählen, die weiter hinten im Style Sheet steht. Da die Stildefinitionen aus Externen Style Sheets Ganz am Anfang stehen und die eines Dokumenten - Style Sheets danach kommen, würde der Browser in dem Fall die Stildefinition auswählen, welche die Farbe Rot als Textfarbe definiert.

3.5 Einbinden von CSS in HTML Dokumente

Nachdem nun viel über die Theorie von CSS bekannt ist, fehlt noch ein Schritt um CSS in HTML Dokumenten zu verwenden^[9]. Es gibt drei Vorgehensweisen um Stildefinitionen in ein HTML Dokument einzubinden.

3.5.1 Externe Style Sheets in HTML einbinden

Die Stildefinitionen für den gesamten Webauftritt werden bei dieser Variante, Stildefinitionen einzubinden, in eine separate Datei mit der Dateinamenserweiterung .css gespeichert^[10]. Innerhalb der HTML Dokumente wird dann mit dem „link“-Tag auf das externe Style Sheet verwiesen. Damit das externe Style Sheet korrekt vom Browser eingebunden wird, ist es wichtig, dass das „link“-Tag im Kopfbereich (HEAD) des HTML Dokuments steht. Zur Verdeutlichung soll das folgende Beispiel dienen.

Abbildung in dieser Leseprobe nicht enthalten

Tabelle 4 - Benutzung des "link" Tags

Die zweite Zeile im Beispiel zeigt die Anwendung des „link“-Tags. Wichtig bei der Verwendung dieser Art der Einbindung sind außerdem die Attribute des „link“-Tags. Bei dieser Methode, hat der Autor die Möglichkeit, auch mehrere Style Sheets in das Dokument einzubinden. So ist es möglich, für verschiedene Ausgabemedien auch verschiedene Style Sheets zu erstellen und diese dann unter Angabe verschiedener Werte beim Attribut „media“ in das Dokument einzubinden

[...]

---

^[1] Siehe http://www.css4you.de/browsercomp.html

^[2] Vgl. im folgenden Meyer, 2004, S. 1ff.

^[3] Vgl. im folgenden Meyer, 2005, S. 25 ff.

^[4] Vgl. im folgenden Meyer, S. 27, ff.

^[5] Vgl. im folgenden Shafer, Yank, S. 48

^[6] Vgl. im folgenden Meyer, 2005, S. 34 ff.

^[7] Meyer, 2005, S. 75

^[8] Vgl. im folgenden Meyer, 2005, S. 65 ff.

^[9] Vgl. im folgenden Meyer, 2005, S. 13 ff.

^[10] Vgl. Meyer, 2005, S. 14