Style-Sheets sind derzeit (zum Redaktionsschluß dieses Dokuments) noch nicht endgültig festgelegt und werden bislang noch von keinem kommerziellen WWW-Browser interpretiert. Style-Sheets für HTML sind seit geraumer Zeit heiß diskutiert. Aus den Diskussionen, die unter der Schirmherrschaft des W3-Konsortiums stattfinden, kristallisiert sich allmählich ein Style-Sheet-Konzept heraus.
Keiner der bekannten WWW-Browser interpretiert bisher Style-Sheets. In der W3-Schmiede wird derzeit ein experimenteller Browser mit dem Namen "Arena" entwickelt, der Style-Sheets interpretieren kann. Das Programm kann in Quellcode-Form downgeloaded werden. Compliliert werden kann es jedoch nur für Unix-Umgebungen.
Experimenteller WWW-Browser: Arena
Style-Sheets Verweis-Seite des W3-Konsortiums
Mailing-Liste zu aktuellen HTML-Themen
Die aktuelle Style-Sheet-Draft
Wer Style-Sheets definiert
Wo Style-Sheets definiert werden
Wie Style-Sheets in HTML definiert werden
Klassen eines HTML-Elements
Schema der Style-Sheet-Angaben
Bedingte Gültigkeit von Style-Sheet-Angaben
Style-Sheet-Angaben für Schrift
Style-Sheet-Angaben für Text
Style-Sheet-Angaben für Absätze
Style-Sheet-Angaben für Listen
Wer Style-Sheets definiert
Sowohl HTML-Autoren als auch Anwender (Leser) sollen Style-Sheets
definieren können. WWW-Browser sollen dem Anwender erlauben,
eine oder mehrere persönliche Einstellungen für Schriftarten,
Farben, Absatzeigenschaften usw. abzuspeichern. Dabei soll das gleiche
Format verwendet werden, das auch HTML-Autoren benutzen, um das
Erscheinungsbild ihrer Dateien zu kontrollieren.
Wenn ein HTML-Autor ein Style-Sheet definiert, daß vom eingestellten Style-Sheet des Anwenders abweicht, soll das Style-Sheet des Autors Vorrang haben. Es sei denn, der Browser ermöglicht (wie Netscape) ein "always use mine".
Der HTML-Autor kann Style-Sheets an folgenden Stellen definieren:
Beispiel
<html> <head> <title>Dokument mit blauer H1-Überschrift in Helvetica</title> <style notation=CSS> h1: text-color = blue h1: font = 14pt helvetica bold </style> <link rel=StyleSheet href="MYSTYLE.CSS"> </head> <body> <h1>Und das ist die H1-Überschrift!</h1> Die Datei "mystyle.css" enthält weitere Angaben, z.B. für die Formatierung dieses Textes hier </body> </html>In separaten Style-Sheet-Dateien können die Angaben ohne HTML-Tags notiert werden. Die Syntax der Angaben selbst soll jedoch die gleiche sein wie innerhalb von <style> bzw. </style>.
Beispiel: Separate Style-Sheet-Datei MYSTYLE.CSS
style notation=CSS h1: text-color = red h1: font = 18pt helvetica bold p.normal = text-color = #D0D0FFBetrachten Sie dieses Beispiel und das obere als zusammenhängend. Im oberen Beispiel wird die Datei MYSTYLE.CSS, deren Inhalt das untere Beispiel auflistet, in Form einer Link-Anweisung referenziert. Bei den Angaben zu h1 haben die Angaben in der HTML-Datei Vorrang vor den Angaben in der separaten Style-Sheet-Datei.
Beispiel
p.schwarz: text-color = black p.blau: text-color = blue p.rotfett: text-color = red p.rotfett: font-weight = boldIm Beispiel bekommt das Tag <p> drei Klassen (Ausprägungen) zugewiesen: schwarz, blau und rotfett.
Beispiel im Text einer HTML-Datei
<p.schwarz>Das ist ein Absatz in schwarzer Schrift</p> <p.blau>Das ist ein Absatz in blauer Schrift</p> <p.rotfett>Das ist ein Absatz in roter und fetter Schrift</p>Erst mit Hilfe von Style-Definitionen und Klassen können Sie in HTML Absatzformate definieren, wie sie aus Textverarbeitungs- und DTP-Programmen bekannt sind.
HTML-Element[, HTML-Element, ...]: Eigenschaft = Wert[, Eigenschaft = Wert, ...]
Beispiel
h3: font-size = 18 h1, dt, blockquote: font-weight = bold h4: text-color = red, font = helvetica bold p.spezial, li.spezial: text-color = grey, font = times html: text-color = whiteHTML-Element(e) ist eines oder sind mehrere HTML-Sprachelemente, z.B. h1, p, li usw. Wenn Sie mehrere HTML-Sprachelemente angeben, trennen Sie diese durch Kommata. Die zugeordneten Eigenschaften und Werte gelten dann für alle genannten HTML-Elemente. Sie können auch HTML als "Sprachelement" angeben. Dann gelten die zugeordneten Eigenschaften und Werte für alle Sprachelemente der HTML-Datei.
Eigenschaft ist eine näher zu bestimmende
Eigenschaft(en) für das oder die angegebenen HTML-Elemente,
z.B. text-color, font-weight usw.
Wert ist die genaue Ausprägung einer Eigenschaft,
z.B. blue bei text-color
Wenn Sie mehrere Eigenschaften mit Werten gleichzeitig zuweisen wollen,
trennen Sie die Angaben durch Kommata.
Auch relative Angaben sind zulässig.
Beispiel
h2: font-size = h1[font-size] * 0.8
Beispiele
(h1,h2,h3,h4,h5,h6) em : text-color = red /h1/ p: text-color = blueWenn Sie dem Element, das Sie näher spezifizieren, in Klammern ein anderes Element voranstellen, gelten die zugeordneten Eigenschaften und Werte für das Element nur, wenn es innerhalb des vorangestellten Elements vorkommt.
Wenn Sie dem Element, das Sie näher spezifizieren, in Schrägstrichen ein anderes Element voranstellen, gelten die zugeordneten Eigenschaften und Werte für das Element nur, wenn es unmittelbar auf das vorangestellte Element folgt.
font-size-index =
(Schriftgröße logisch, in Zahl zwischen 1 und 7 oder in den Angaben smallest | smaller | small | normal | large | larger | largest)
text-background =
(Texthintergrundfarbe in Namen, Hexwerten oder in Form eines Wallpaper-Verweises)
text-spacing =
(Zeilenabstand, wie font-leading)
text-line =
(Text-Effekt, z.B. schattiert, blinkend uws.)
text-position =
(Textposition, z.B. hoch- oder tiefgestellt)
text-transform =
(Textübersetzung, z.B. Kapitächen, Großbuchstaben usw.)
text-effect =
(Spezialeffekte, z.B. erster Buchstabe im Absatz größer)
margin left =
(Einrückung von links)
margin right =
(Einrückung von rechts)
margin top =
(Abstand vom aktuellen Absatz zum Absatz darüber)
margin bottom =
(Abstand vom aktuellen Absatz zum Absatz darunter)
indent =
(Extra-Einrückung der ersten Absatzzeile)
outdent =
(Extra-Ausrückung der ersten Absatzzeile)
width =
(Erzwungene Breite eines Absatzes)
height =
(Erzwungene Höhe eines Absatzes, z.B. mit Grafik)
number-style =
(Numerierungsstil, z.B. arabisch, römich)