HTML-Dateien selbst erstellen
Dokumentation: HTML
Style-Sheets - Formatvorlagen

Style-Sheets in HTML einbinden

 Allgemeines zu Style-Sheets
 Arten, Style-Sheets zu definieren

Allgemeines zu Style-Sheets

Style-Sheets sollen in HTML endlich ermöglichen, was in jeder halbwegs brauchbaren Textverarbeitung längst zum Standard gehört: definierte Formate, die auf einzelne Textabsätze anwendbar sind. Dazu gehören Angaben zu Schriftarten, Absatzabständen, Einzügen usw.

DTP-Feinheiten, wie sie durch Style-Sheets realisiert werden sollen, stehen in Konflikt zu den unterschiedlichen Betriebssystem- und Oberflächen-Ressourcen der Anwender. Als HTML-Entwickler wissen Sie nicht, womit Ihre WWW-Seiten gelesen werden, ob mit einem MS-Windows-PC, einem Mac, einem Amiga, einer Sun oder einem VMS-Großrechner. HTML stellt zwar einen einheitlichen Zeichensatz zur Verfügung, aber Sie werden kaum eine Schriftart finden, die auf wirklich jedem Rechner installiert ist. Auch erzwungene Schriftgrößen sind problematisch. Auf einem Bildschirm mit 1280x1024 Pixeln sieht eine 9-Punkt-Schrift ziemlich mikrig aus, auf einem Bildschirm mit 640x480 Pixeln dagegen recht ordentlich.

Echte DTP-Präzision wird HTML im Rahmen seines Ansatzes ohnehin nie erreichen können. Da sind Formate wie das des Acrobat Reader (PDF-Dateien) wesentlich ausgereifter. Und auch das PDF-Format ist plattformunabhängig. Nachteil gegenüber HTML sind die vergleichsweise teueren Editierwerkzeuge und die Dateigrößen. Dazu kommt, daß perfektes Print-Layout nicht unbedingt die beste Lösung für Information ist, die am Bildschirm gelesen wird.

Style-Sheets sind bislang kein offizieller Bestandteil von HTML. Aber das W3-Konsortium bietet eine mittlerweile ziemlich ausgereifte Empfehlung zum Notieren von Style-Sheets an. Diese Empfehlung ist in der Internet-Draft  Cascading Style Sheets  zusammengefaßt.

Der Microsoft Internet Explorer interpretiert ab Version 3.0 Style-Sheets entsprechend der gegenwärtigen Vorschläge, ebenso Netscape ab Version 4.0. Da die Technik noch nicht ausgereift ist, kommt es jedoch nicht immer zu den gewünschten Anzeigeergebnissen. Aufgrund dieser Situation sollten Sie Style-Sheets noch nicht wie selbstverständlich auf Ihren WWW-Seiten verwenden und vermeiden, sie zum zentralen Gestaltungsmittel zu machen.

Arten, Style-Sheets zu definieren

Style-Sheets können Sie auf verschiedene Arten definieren.

Beispiel:

 
<html>
<head>
<title>Titel der Datei</title>
<link rel=stylesheet type="text/css" href="formate.css" title="Meine Formate">
<style type="text/css">
@import url(beispiel.css);
  ... Style-Sheet-Definitionen ...
</style>
</head>
<body>
<p style="color: green">Ziemlich gr&uuml;ner Absatz</p>
</body>
</html>

Erläuterung:

Das obige Beispiel zeigt eine komplette HTML-Datei. Darin werden auf vier verschiedene Arten Style-Sheets definiert:
  1. Mit dem Befehl <link rel=stylesheet type="text/css" href=... title=....> im Kopf der HTML-Datei. Die Style-Sheet-Definitionen müssen dabei in einer separaten Datei stehen. Es muß sich um eine reine Textdatei handeln, die möglichst die Endung .css haben sollte. Diese Datei geben Sie bei der Angabe href= an. Die Angabe muß in Anführungszeichen stehen. Es gelten die gleichen Regeln wie beim  Schema für alle Verweise in HTML. Bei dieser Art, Style-Sheets einzubinden, kann der Anwender entscheiden, ob er die HTML-Datei normal oder mit Style-Sheets formatiert angezeigt bekommen will. Dazu sollte der WWW-Browser dem Anwender  Standardverweise anbieten. Die Standardverweise werden zum Beispiel als Funktionsleiste mit anklickbaren Buttons angeboten. Mit der Angabe title= können Sie die Beschriftung solcher Verweis-Buttons bestimmen. Die Angabe sollte in Anführungszeichen stehen und die damit verknüpften Style-Sheet-Definitionen charakterisieren. Leider ist diese Art, Style-Sheets zu definieren, derzeit unbrauchbar, weil die meisten WWW-Browser keine Standardverweise interpretieren.

  2. Mit dem Befehl <style...> ... </style> im Kopf der HTML-Datei. Bei dieser Art, Style-Sheets einzubinden, bestimmen Sie als Autor der HTML-Datei, daß die definierten Formate verwendet werden. Der Anwender hat keine Wahlmöglichkeit. Im einleitenden <style>-Tag müssen Sie den Typ der Formatdefinition angeben. Das geschieht bei allen hier beschriebenen Formatiermöglichkeiten durch die Angabe type="text/css". Zwischen dem einleitenden Tag und dem abschließenden </style> können Sie Style-Sheets definieren.

  3. Mit dem Befehl @import url(...); innerhalb von <style...> ... </style> im Kopf der HTML-Datei. Die Style-Sheet-Definitionen müssen dabei in einer separaten Datei stehen. Das hat den Vorteil, daß Sie dieselben Formate in vielen verschiedenen HTML-Dateien verwenden können. Es muß sich um eine reine Textdatei handeln, die möglichst die Endung .css haben sollte. Innerhalb der runden Klammern können Sie eine Datei im gleichen Verzeichnis, in einem anderen Verzeichnis oder in Form einer vollständigen URL-Adresse angeben. Die Adressierung bei relativen Pfadnamen funktioniert genauso wie etwa beim  Referenzieren einer Grafik in einem anderem Verzeichnis. Wenn Sie innerhalb von <style...> ... </style> sowohl Formatdefinitionen aus einer separaten Datei importieren als auch wie bei (2.) beschrieben direkt Formate definieren, haben die direkt definierten Formate Vorrang vor den importierten Formaten. So können Sie etwa immer wieder verwendete Formate importieren und einige davon mit dateispezifischen Formaten überschreiben.

  4. Mit Style-Sheet-Definitionen direkt im Text der HTML-Datei, also innerhalb von <body> ... </body>. Solche Definitionen gelten nur einmalig für den Textbereich, für den sie definiert werden. Dazu notieren Sie im einleitenden HTML-Tag eines Textbereichs die Angabe style= und dahinter, in Anführungszeichen, die gewünschte Formatdefinition. Im obigen Beispiel wird die Angabe im Absatz-Tag <p> notiert. Die Angabe kann in Befehlen für  Absatztypen und Textgestaltung verwendet werden.

Beachten Sie:

Nachdem Sie entschieden haben, wie Sie Style-Sheets einbinden wollen, können Sie die eigentlichen  Style-Sheet-Angaben definieren. Wenn Sie eine separate CSS-Datei dazu verwenden, sollte die Datei nichts anderes als erlaubte Style-Sheet-Definitionen enthalten.

Blättern:
Tips zum Umgang mit Frames     Style-Sheet-Angaben definieren

HTML-Dateien selbst erstellen
Dokumentation: HTML
Style-Sheets - Formatvorlagen

© 1997  Stefan Münz, s.muenz@euromail.com