Inhaltsverzeichnis

I  Inhalt  

I  INHALT  I

1  EINFÜHRUNG  1

1.1  ZIEL DER ARBEIT  1

1.2  AUFBAU DIESER ARBEIT  1

2  BROWSER UND CSS  1

3  CASCADING STYLE SHEETS - GRUNDLAGEN  2

3.1  TABELLEN ODER CASCADING STYLE SHEETS  2

3.2  SYNTAX VON CSS  5

3.3  SELEKTOREN VERWENDEN  6

3.3.1  Einfache Selektoren  6

3.3.2  Der Universelle Selektor  6

3.3.3  Klassenselektoren  7

3.3.4  ID Selektoren  7

3.3.5  Weitere Selektoren  7

3.4  FUNKTIONSWEISE VON CSS  7

3.5  EINBINDEN VON CSS IN HTML DOKUMENTE  10

3.5.1  Externe Style Sheets in HTML einbinden  10

3.5.2  Verwenden des STYLE-TAGS  11

3.5.3  Inline Stildefinitionen  13

3.6  VERERBUNG IN HTML  13

3.7  ZUSAMMENFASSUNG  14

4  MAßEINHEITEN UND WERTANGABEN  15

4.1  FARBANGABEN IN CSS  15

4.1.1  Angabe eines RGB Farbwertes  15

4.1.2  Angabe eines Hexadezimalen Farbwertes  16

4.2  LÄNGENEINHEITEN  16

4.2.1  Absolute Längeneinheiten  16

4.2.2  Relative Längeneinheiten  17

4.3  ZUSAMMENFASSUNG  17

5  CASCADING STYLE SHEETS - PRAKTISCHE ANWENDUNG  18

5.1  TEXTE FORMATIEREN  18

5.2  LAYOUT MIT CSS  20

6  ZUSAMMENFASSUNG  23

II  ABBILDUNGSVERZEICHNIS  24

III  TABELLENVERZEICHNIS  24

IV  LITERATURVERZEICHNIS  25

  A ANHANG - A REFERENZ WICHTIGER CSS EIGENSCHAFTEN  26

  B ANHANG B - AT- REGELN  43

I

CSS Grundlagen

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 ¹ .

¹ Siehe http://www.css4you.de/browsercomp.html

- 1 -

CSS Grundlagen

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 ² . Dies änderte sich mit einem Mal, als der Webbrowser Mosaic auf den Markt kam. Mit dieser Software war es zum ersten Mal möglich, Seiten im World Wide Web grafisch anzuzeigen. Es kam sehr schnell zu der Situation, dass Autoren von Websites ein Layout für eine Seite 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 Seite 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:

² Vgl. im folgenden Meyer, 2004, S. 1ff.

- 2 -

CSS Grundlagen

Abbildung 1 - Ergebnis der Formatierung mit Tabllen

Wie man sehen kann ist der Quelltext der Seite 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.

- 3 -

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 Seite in Hohem Maß vereinfacht

- 4 -

CSS Grundlagen

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 ³ . 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 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