Style-Sheets

Über Style-Sheets

Aktueller Vorschlag des W3-Konsortiums

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

Anzeigebeispiele: Style-Sheets
(Derzeit nur mit dem UDI WWW-Browser möglich)

Über Style-Sheets

Style-Sheets sollen in HTML endlich ermöglichen, was in jeder halbwegs brauchbaren Textverarbeitung längst zum Standard gehört: separat definierte Absatzformate, die auf einzelne Textabsätze anwendbar sind. Dazu gehören Angaben zu Schriftarten, Absatzabständen, Bullets, automatischer Numerierung von Überschriften usw.

Style-Sheets sind derzeit (zum Redaktionsschluß dieses Dokuments) noch nicht endgültig festgelegt. 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.

Nur der UDI WWW-Browser interpretiert bisher Style-Sheets (ansatzweise). In der W3-Schmiede wird derzeit ferner 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 -

Konflikt: DTP-Feinheiten contra Plattformunabhängigkeit

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 Atari, 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.

Konkurrenz durch plattformunabhängige DTP-Formate

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.

Informationen über Style-Sheets im WWW

Im WWW finden Sie (ausschließlich englischsprachige) Information über Style-Sheets in HTML:

Style-Sheets Verweis-Seite des W3-Konsortiums -
Mailing-Liste zu aktuellen HTML-Themen -
Die aktuelle Style-Sheet-Draft -

HTML-Dateien selbst erstellen
Style-Sheets

Aktueller Vorschlag des W3-Konsortiums

Der hier vorgestellte Stand wurde am 10.08.95 im WWW publiziert, und zwar von:

Håkon W Lie -

Bert Bos -

HTML-Dateien selbst erstellen
Style-Sheets

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, das 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".

HTML-Dateien selbst erstellen
Style-Sheets

Wo Style-Sheets definiert werden

Vom Anwender werden die Style-Sheets im WWW-Browser im Dialog definiert, sodaß keine HTML-Kenntnisse nötig sind. Der Browser legt die Daten in Style-Sheet-Dateien ab.

Der HTML-Autor kann Style-Sheets an folgenden Stellen definieren:

Innerhalb einer HTML-Datei, wodurch der Geltungsbereich auf die eine Datei beschränkt ist.
In Form einer separaten Style-Sheet-Datei, die in jeder beliebigen HTML-Datei als Referenz angegeben werden kann.
Kombinationen sollen möglich sein, d.h. es soll erlaubt sein, in einer HTML-Datei eine separate Style-Sheet-Datei zu referenzieren und zugleich in der Datei weitere Style-Angaben zu notieren. Wenn in der HTML-Datei Angaben vorkommen, die zu den referenzierten Style-Sheet-Angaben im Widerspruch stehen, sollen die Angaben innerhalb der HTML-Datei Vorrang haben. So ist es möglich, ein zentrales Style-Sheet zu verwenden und für den Einzelfall geringfügig abzuwandeln.

HTML-Dateien selbst erstellen
Style-Sheets

Wie Style-Sheets in HTML definiert werden

Innerhalb einer HTML-Datei, so schlägt die Style-Sheet-Draft vor, sollen Style-Sheets im Dateikopf definiert werden, also zwischen <head> und </head>. Die Angaben zum Style-Sheet sollen in das Tag <style> und sein Gegenstück </style> eingeschlossen werden.

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 = #D0D0FF

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

HTML-Dateien selbst erstellen
Style-Sheets

Klassen eines HTML-Elements

In HTML 3.0 können einem HTML-Element, z.B. <h1> (Überschrift 1. Ordnung) oder <p> (Absatz im Fließtext) mehrere "Ausprägungen" zugeordnet werden. Diese Ausprägungen werden als Klassen (engl.: classes) bezeichnet. Dies ist besonders im Zusammenhang mit Style-Sheets interessant.

Beispiel

   
   p.schwarz: text-color = black
   p.blau: text-color = blue
   p.rotfett: text-color = red
   p.rotfett: font-weight = bold

Im 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-Dateien selbst erstellen
Style-Sheets

Schema der Style-Sheet-Angaben

Alle Style-Sheet-Angaben halten sich an folgendes Schema:


  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 = white

HTML-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

HTML-Dateien selbst erstellen
Style-Sheets

Bedingte Gültigkeit von Style-Sheet-Angaben

Sie können erzwingen, daß eine Style-Sheet-Angabe nur in bestimmten Umgebungen gültig ist. So können Sie z.B. festlegen, daß em nur innerhalb von Überschriften rot dargestellt wird, sonst dagegen in der Normalschrift.

Beispiele


  (h1,h2,h3,h4,h5,h6) em : text-color = red
  /h1/ p: text-color = blue

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

HTML-Dateien selbst erstellen
Style-Sheets