Webdesign-Workshop
von Wolfgang Bergt

Wolfdesign

Cascading Stylesheets

zur Startseite
zurück Inhaltsübersicht weiter

 

Inhalt

Einführung
Struktur
Styles-Datei
Syntax
Unterklassen
Zusammenfassung
Quellen
 

Einführung

Hinter Style Sheets steht der Grundgedanke, dass man Inhalt und Gestaltung trennen sollte. Dann wird der Code kompakter, die Seiten werden beim Leser schneller geladen, beim Provider entsteht weniger Traffic. Auch das nächste Redesign macht weniger Arbeit.

Cascading Stylesheets sind Formatierungsvorlagen, mit denen das Layout von Webseiten vereinfacht wird. Man kann eigene Formate kreieren, aber auch vorhandene HTML-Tags nach Wunsch exakt formatieren. Das kann man für jeden einzelnen Tag separat machen, aber auch für alle gleichartigen Tags einer Webseite.

Wer schon einmal in einer großen Tabelle die Schriftart verändert hat, und dabei in jeder einzelnen Zelle immer wieder auf's Neue die gleiche Formatierung definieren musste, wird den Vorteil sofort erkennen.

Mit Cascading Stylesheets können nämlich durch einen einzigen Befehl im Dateikopf alle Zellen gleichartig gestaltet werden.

Einen noch größeren Vorteil hat man, wenn alle Stilvorlagen in einer separaten Datei für alle Seiten der WebSite festgelegt werden.

Dann kann man das gesamte Layout aller Seiten mit einer einzigen Änderung anpassen.

zum Anfang

Bedeutung

Schon seit 1997 gehört den Cascading Stylesheets die Zukunft. Trotzdem tun sich Web-Designer immer noch schwer mit der Umsetzung.

Es war schon immer schwer, die wild wuchernden Gestaltungsideen der unterschiedlichen Browserhersteller zu standardisieren, mit denen sie konkurrierten. Die HTML-Spezifikation 3.2 z. B. braut ein unlogisches Gemisch aus Tags, die einerseits den Inhalt deklarieren und andererseits die optische Formatierung organisierten.

Für HTML 4.0 nahm sich das das für die Standadisierung zuständige World Wide Web Consortium (W3C) vor, die Tag-Suppe wieder zu klären. Von nun an sollten Formatierungen und Inhalte getrennt verwaltet werden. Für die Form sollte CSS verwendet werden und für den Inhalt logisch strukturierte HTML-Seiten.

In diesem Sinne wurde z. B. auf den <font>-Tag konsequent verzichtet. Die Fähigkeiten der Styles gehen auch weit über die Möglichkeiten dieses Tags hinaus.

Mit Cascading Stylesheets wird die Anpassung von Layouts durch die Bündelung aller Layout-Definitionen an einer Stelle stark vereinfacht. Außerdem wird der Quelltext wesentlich kürzer und überschaubarer.

Warum krankt es an der Umsetzung?

Die auf Modzilla basierenden Browser von Netscape und der flinke Firefox sowie Opera, Apples Safari und der KDE-Browser Konqueror für Linux stellen die meisten CSS-Layouts richtig dar. Ausgerechnet die Versionen des meistverwendeten Browsers, des Internet-Explorers von Microsoft (MSIE), macht die meisten Probleme. Am wenigsten problematisch ist dabei noch die Version 5.01 für Mac OS.

Der Monopolist Microsoft erweist sich also auch hier als stärkste Bremse der Entwicklung. Erst die Version 7.0 von 2007 hält sich weitgehend an die Standards.

zum Anfang

Struktur

  1. Inline Style


  2. Cascading Stylesheets können direkt im HTML-Tag definiert werden. Soll z. B. eine Überschrift erster Ordnung unbedingt rot werden, unabhängig davon, was an anderer Stelle festgelegt wurde, so kann man befehlen:
    <h1 style="color:red;"> Überschrift </h1>.
    Das sieht dann so aus:

    Überschrift

    Man kann in einem Tag dem Style-Attribut auch mehrere Werte zuweisen. Diese müssem dann innerhalb der Anführungszeichen mit einem Semikolon getrennt werden. Soll z. B. eine Überschrift erster Ordnung unbedingt ocker, 64 Punkte groß und courier werden, so kann man befehlen:
    <h1 style="color:#FF8800; font-size:64; font-family:courier;"> Überschrift </h1>.
    Das sieht dann so aus:

    Überschrift

    Allerdings muss man bemerken, dass solche Inline Styles alle Vorteile von Stylesheets ad absurdum führen, da sie den Code unnötig aufblähen und das CSS-Prinzip der vielseitig einsetzbaren zentralen Vorlage ignorieren.

    Will man jedoch einen Bereich formatieren, dem man keinen Tag direkt zuordnen kann, dann umschließt man diesen Bereich mit dem Tag <span style="..."> ... </span>, der nichts weiter macht, als die Styles zu definieren.

  3. Header Style


  4. Für eine einzelne HTML-Datei lassen sich die verwendeten Stilvorlagen gemeinsam im Kopf festlegen:
    <html>
    <head>
    <style type="text/css">
    <!--
    th, td, p, body {font-family:"Arial","Helvetica";
      font-size:10pt;
      color:black;
      }
    -->
    </style>
    <title>Titel</title>
    </head>
    <body>
    ...
    </body>
    </html>


  5. External Style


  6. Werden Cascading Stylesheets in einer HTML-Datei definiert, so stehen sie zwischen den Tags <style type="text/css"> und </style> und als Kommentar, damit ältere Browser sie nicht fälschlicherweise als Klartext anzeigen.

    Wenn die Formatvorlagen für mehrere HTML-Dateien in der separaten Datei "*.css" abgelegt sind, muss man im Kopf jeder einzelnen Datei einen Link zu dieser Datei einrichten:
    <head>
    ...
    <link rel="stylesheet" type="text/css" href="*.css" />
    ...
    </head>


Wenn an mehreren Stellen Cscading Stylesheets definiert worden sind, so addieren sie sich. Sollte es zu einem Konflikt kommen, weil sich die Stilvorlagen widersprechen, so gilt folgende Reihenfolge der Wertigkeit:
  1. direkt im Tag festgelegte Stilvorlage
  2. im Style-Tag des Head befohlenes Format, wenn die Definition in Kopf nach dem Link zur *.css-Datei steht
  3. in der Datei "*.css" definierte Stylesheets, wenn der Link zu ihr ganz oben im Kopf steht
  4. das normale HTML-Format des Browsers
Man kann also sagen, dass immer der zuletzt gelesene Befehl wirkt.
zum Anfang

Styles-Datei

Wenn die WebSite aus mehreren Seiten besteht, empfiehlt es sich, alle Formatvorlagen gemeinsam in einer separaten Datei zu definieren. Diese Datei hat die Erweiterung ".css". In diesem Workshop heißt sie "haupt.css"

Im Kopf jeder einzelnen Datei muss dann nur mit dem Tag
<link rel="stylesheet" type="text/css" href="haupt.css" />
auf diese Datei hingewiesen werden.

Weiterhin empfiehlt es sich, eine Testseite anzulegen, in der alle definierten Stilvorlagen nacheinander getestet werden können. In unserem Fall ist es die Datei haupt123.htm"

Veränderungen müssen dann konsequent in beiden Dateien gleichartig durchgeführt werden.
zum Anfang

Syntax

Definition im Dateikopf:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
/* ... Style-Sheet-Angaben ... */
//-->
</style>
</head>
<body>
</body>
</html>



separate Datei:

<html>
<head>
<title>Titel der Datei</title>
<link rel=stylesheet type="text/css" href="formate.css" />
<style type="text/css">
<!--
... Extra-Style-Sheet-Angaben dieser Datei ...
//-->
</style>
</head>
<body>
</body>
</html>



Syntax:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
h1 { font-size:48pt; color:#FF0000; font-style:italic; }
p,li { font-size:12pt;
      line-height:14pt;
      font-family:Helvetica,Arial;
      letter-spacing:0.2mm;
      word-spacing:0.8mm; }
//-->
</style>
</head>
<body>
<h1>Überschrift 1. Ordnung</h1>
<p>ein normaler Textabsatz</p>
<ul>
<li>Ein Listenpunkt
<li>Ein anderer Listenpunkt
</ul>
</body>
</html>


Das sieht dann so aus: Beispiel

In die Style-Definitionen kann man Kommentare einfügen. Die Syntax dafür ist aus der Programmiersprache C entlehnt:
Der Kommentar beginnt mit Schrägstrich-Stern und endet mit umgekehrter Reihenfolge. Anfang und Ende des Kommenmtars müssen in einer Zeile stehen.

Beispiel: /* Format für grünen Text, kreiert am 10.12.2005 von WB */
zum Anfang

Unterklassen


<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
p.normal { font-size:10pt; color:black; }
p.gross { font-size:12pt; color:black; }
p.klein { font-size:8pt; color:black; }
.rot { color:red; }
.blau { color:blue; }
//-->
</style>
</head>
<body>
<p class="normal">Normaler Textabsatz mit Schrift 10 Punkt schwarz</p>
<p class="gross">Textabsatz mit Schrift 12 Punkt schwarz</p>
<p class="klein">Textabsatz mit Schrift 8 Punkt schwarz</p>
<p class="rot">roter Textabsatz</p>
<address class="rot">roter Absatz für Adressen</address>
<blockquote class="blau">blaues Zitat</blockquote>
</body>
</html>


Das sieht dann so aus: Beispiel
zum Anfang

Zusammenfassung

CSS-Checkliste
zum Anfang

Quellen

zum Seitenanfang zum Workshop-Anfang zur Inhaltsübersicht