edition W3C.de

Cascading Style Sheets, Level 2

Deutsche Übersetzung

Diese Version:
http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512
Aktuelle Version:
http://www.edition-w3c.de/TR/REC-CSS2
Übersetzer:
Judith Muhr (Übersetzung)
Stefan Mintert (Fachlektorat und Kommentierung), mintert.com <stefan@mintert.com>

Bei diesem Dokument handelt es sich um eine Übersetzung eines W3C-Textes. Dieser Text ist urheberrechtlich geschützt; bitte beachten Sie die nachfolgenden Hinweise des Originaldokuments. Die Rechte an der Übersetzung liegen bei den Übersetzern und dem Verlag Addison-Wesley. Die Übersetzung hat keine durch das W3C legitimierte, normative Wirkung. Das einzige maßgebliche Dokument ist das englische Original.

Bitte senden Sie Fehler und Korrekturen zur deutschen Fassung an die Übersetzer.

Kommentare der Übersetzer, die als solche gekennzeichnet sind, unterliegen dem Urheberrecht der Übersetzer. Sie sind nicht Bestandteil des Ursprungsdokuments.



Inhaltsverzeichnis

2 Einführung in CSS2
2.1 Ein kurzer CSS2-Überblick für HTML
2.2 Ein kurzer CSS2-Überblick für XML
2.3 Das CSS2-Verarbeitungsmodell
2.3.1 Die Zeichenfläche
2.3.2 CSS2-Adressierungsmodell
2.4 CSS-Entwurfskonzepte

Einführung in CSS2

2.1 Ein kurzer CSS2-Überblick für HTML

In diesem Überblick zeigen wir, wie einfach es sein kann, einfache Stylesheets zu entwerfen. Dazu benötigen Sie Grundkenntnisse in HTML (siehe [HTML40]), und Sie sollten die wichtigsten Begriffe aus dem Desktop-Publishing kennen.

Wir beginnen mit einem kleinen HTML-Dokument:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Bachs Homepage</TITLE>
</HEAD>
<BODY>
<H1>Bachs Homepage</H1>
<P>Johann Sebastian Bach war ein
begnadeter Komponist.
</BODY>
</HTML>

Um die Textfarbe der H1-Elemente auf Blau zu setzen, schreiben Sie die folgende CSS-Regel:

H1 { color: blue }

Eine CSS-Regel besteht aus zwei Hauptteilen: Selektor ('H1') und Deklaration ('color: blue'). Die Deklaration setzt sich aus zwei Teilen zusammen: Eigenschaft ('color') und Wert ('blue'). Obwohl das obige Beispiel nur versucht, eine einzige der für die Darstellung eines HTML-Dokuments benötigte Eigenschaft zu steuern, qualifiziert es sich selbst als Stylesheet. Kombiniert mit anderen Stylesheets (ein grundlegendes Funktionsmerkmal von CSS ist, dass Stylesheets kombiniert werden können) legt es die endgültige Darstellung des Dokuments fest.

Die HTML 4.0-Spezifikation definiert, wie Stylesheet-Regeln für HTML-Dokumente angegeben werden können: entweder innerhalb des HTML-Dokuments oder über ein externes Stylesheet. Um das Stylesheet in das Dokument einzufügen, verwenden Sie das STYLE-Element:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Bachs Homepage</TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Bachs Homepage</H1>
<P>Johann Sebastian Bach war
ein begnadeter Komponist.
</BODY>
</HTML>

Einer maximalen Flexibilität halber empfehlen wir Autoren, externe Stylesheets zu verwenden; diese können verändert werden, ohne dass das HTML-Quelldokument verändert werden muss, und sie können zudem von mehreren Dokumenten gemeinsam genutzt werden. Für die Verknüpfung mit einem externen Stylesheet verwenden Sie das LINK-Element:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Bachs Homepage</TITLE>
<LINK rel="stylesheet" href="bach.css"
type="text/css">
</HEAD>
<BODY>
<H1>Bachs Homepage</H1>
<P>Johann Sebastian Bach war
ein begnadeter Komponist.
</BODY>
</HTML>

Das LINK-Element gibt Folgendes an:

Um die enge Beziehung zwischen einem Stylesheet und der strukturierten Auszeichnungsprache zu zeigen, verwenden wir in diesem Überblick ebenfalls das STYLE-Element. Jetzt fügen wir mehr Farben ein:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Bachs Homepage</TITLE>
<STYLE type="text/css">
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Bachs Homepage</H1>
<P>Johann Sebastian Bach war
ein begnadeter Komponist. </BODY>
</HTML>

Jetzt enthält das Stylesheet zwei Regeln: die erste setzt die Farbe des BODY-Elements auf 'red', während die zweite die Farbe des H1-Elements auf 'blue' setzt. Weil für das P-Element kein Farbwert angegeben wurde, erbt es die Farbe von seinem übergeordneten Element, BODY. Das H1-Element ist ebenfalls ein untergeordnetes Element von BODY, aber die zweite Regel überschreibt den geerbten Wert. In CSS gibt es häufig solche Konflikte zwischen unterschiedlichen Werten, und diese Spezifikation beschreibt, wie sie aufgelöst werden.

CSS2 unterstützt mehr als 100 verschiedene Eigenschaften, unter anderem 'color'. Jetzt betrachten wir einige der anderen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Bachs Homepage</TITLE>
<STYLE type="text/css">
BODY {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
</STYLE>
</HEAD>
<BODY>
<H1>Bachs Homepage</H1>
<P>Johann Sebastian Bach
war ein begnadeter Komponist.
</BODY>
</HTML>

Als Erstes bemerken Sie, dass mehrere Deklarationen innerhalb eines Blocks gruppiert sind, der in geschweifte Klammern ({...}) eingeschlossen ist, und dass diese Deklarationen durch Semikolons voneinander getrennt sind. Auch der letzten Deklaration kann ein Semikolon folgen.

Die erste Deklaration des BODY-Elements setzt die Schriftfamilie auf „Gill Sans“. Falls diese Schrift nicht verfügbar ist, verwendet das Benutzerprogramm (häufig auch als „Browser“ bezeichnet) die Schriftfamilie 'sans-serif', eine der fünf abstrakten Schriftfamilien, die alle Benutzerprogramme kennen. Untergeordnete Elemente von BODY erben den Wert der Eigenschaft 'font-family'.

Die zweite Deklaration setzt die Schriftgröße des BODY-Elements auf 12 Punkte. Die Einheit „Punkt“ wird im Schriftsatz häufig verwendet, um Schriftgrößen und andere Längenwerte anzugeben. Es handelt sich dabei um ein Beispiel für eine absolute Einheit, die nicht relativ zur Umgebung skaliert wird.

Die dritte Deklaration verwendet eine relative Einheit, die in Hinblick auf ihre Umgebung skaliert wird. Die Einheit „em“ bezieht sich auf die Schriftgröße des Elements. In diesem Fall sind die Ränder um das BODY-Element dreimal breiter als die Schriftgröße.

2.2 Ein kurzer CSS2-Überblick für XML

CSS kann für beliebige strukturierte Dokumentformate verwendet werden, beispielsweise in Anwendungen von XML (eXtensible Markup Language, [XML10]). Tatsächlich ist XML mehr von Stylesheets abhängig als HTML, weil Autoren ihre eigenen Elemente kreieren können, von denen die Benutzerprogramme nicht automatisch wissen, wie sie anzuzeigen sind.

Nachfolgend sehen Sie einen einfachen XML-Ausschnitt:

<?xml version="1.0" encoding="iso-8859-1"?>
<ARTICLE>
<HEADLINE>Friedrich der Große trifft Bach</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
Eines Abends, als er gerade seine
<INSTRUMENT>Flöte</INSTRUMENT> vorbereitete
und seine Musiker versammelt waren, brachte
ihm ein Offizier eine Liste aller angekommenen
Fremden.
</PARA>
</ARTICLE>

Um diesen Ausschnitt als Dokument anzuzeigen, müssen wir zuerst deklarieren, welche Elemente inzeilig sind (das heißt, es werden keine Leerzeilen eingefügt) und welche sich auf Blockebene befinden (das heißt, es werden Leerzeilen zwischen ihnen eingefügt).

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

Die erste Regel deklariert INSTRUMENT als inline, und die zweite Regel, die eine Liste durch Kommas voneinander getrennten Selektoren angibt, deklariert alle anderen Elemente als auf Blockebene befindlich.

Ein Vorschlag für die Verknüpfung eines Stylesheets mit einem XML-Dokument ist die Verwendung einer Verarbeitungsanweisung:

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
<HEADLINE>Friedrich der Große trifft Bach</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
Eines Abends, als er gerade seine
<INSTRUMENT>Flöte</INSTRUMENT> vorbereitete
und seine Musiker versammelt waren, brachte ihm ein
Offizier eine Liste aller angekommenen Fremden.
</PARA>
</ARTICLE>

Ein visuelles Benutzerprogramm könnte das obige Beispiel wie folgt formatieren:

Beachten Sie, dass das Wort „Flöte“ innerhalb des Absatzes bleibt, weil es sich dabei um den Inhalt des inzeiligen Elements INSTRUMENT handelt.

Dennoch ist der Text immer noch nicht so formatiert, wie Sie das erwarten würden. Beispielsweise sollte die Schriftgröße für die Überschrift größer sein als für den restlichen Text, und man könnte den Namen des Autors kursiv darstellen:

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

Ein visuelles Benutzerprogramm könnte das obige Beispiel wie folgt formatieren:

Durch zusätzliche Regeln, die Sie dem Stylesheet hinzufügen, können Sie die Darstellung des Dokuments weiter verbessern.

2.3 Das CSS2-Verarbeitungsmodell

Dieser Abschnitt stellt ein mögliches Modell vor, wie Benutzerprogramme funktionieren, die CSS unterstützen. Dabei handelt es sich nur um ein konzeptuelles Modell; reale Implementierungen können davon abweichen.

In diesem Modell verarbeitet ein Benutzerprogramm eine Quelle, indem es die folgenden Schritte durchläuft:

  1. Parsing des Quelldokuments und Anlegen eines Dokumentbaums.
  2. Identifizieren des Ziel-Medientyps.
  3. Laden aller dem Dokument zugeordneten Stylesheets, die für den Ziel-Medientyp angegeben sind.
  4. Vorbereitung jedes Elements des Dokumentbaums, indem jeder Eigenschaft, die auf den Ziel-Medientyp anzuwenden ist, ein einziger Wert zugewiesen wird. Eigenschaften werden entsprechend den im Abschnitt über Kaskaden und Vererbung beschriebenen Mechanismen Werte zugewiesen.

    Die Berechnung von Werten ist teilweise von dem für den Ziel-Medientyp geeigneten Formatierungsalgorithmus abhängig. Ist das Zielmedium beispielsweise der Bildschirm, wenden Benutzerprogramme das visuelle Formatierungsmodell an. Handelt es sich bei dem Zielmedium um eine gedruckte Seite, wenden Benutzerprogramme das Seitenmodell an. Handelt es sich bei dem Zielmedium um ein akustisches Darstellungsgerät (z.B. Sprachsynthesizer), wenden Benutzerprogramme das akustische Darstellungsmodell an.
  5. Aus dem vorbereiteten Dokumentbaum wird eine Formatierungsstruktur erzeugt. Häufig erinnert die Formatierungsstruktur stark an den Dokumentbaum, sie kann sich aber auch wesentlich davon unterscheiden, insbesondere, wenn Autoren Pseudo-Elemente und erzeugten Inhalt verwenden. Erstens muss die Formatierungsstruktur überhaupt keine Baumform aufweisen – welche Form die Struktur hat, ist von der Implementierung abhängig. Zweitens kann die Formatierungsstruktur mehr oder weniger Information enthalten als der Dokumentbaum. Hat beispielsweise ein Element im Dokumentbaum den Wert 'none' für die 'display'-Eigenschaft, erzeugt dieses Element nichts in der Formatierungsstruktur. Ein Listenelement hingegen kann in der Formatierungsstruktur mehr Informationen erzeugen: den Inhalt des Listenelements und die Listenstilinformation (z.B. ein Bild von einem Markierungspunkt).

    Beachten Sie, dass das CSS-Benutzerprogramm den Dokumentbaum während dieser Phase nicht verändert. Insbesondere wird der durch Stylesheets erzeugte Inhalt nicht an den Dokumentsprachprozessor zurückgemeldet (z.B. für ein erneutes Parsing).
  6. Übertragen der Formatierungsstruktur an das Zielmedium (z.B. Ausdrucken der Ergebnisse, Anzeige auf dem Bildschirm, sprachliche Darstellung usw.).

Schritt 1 liegt außerhalb des Gültigkeitsbereichs dieser Spezifikation (siehe z.B. [DOM]).

Die Schritte 2 bis 5 werden in dieser Spezifikation behandelt.

Schritt 6 liegt außerhalb des Gültigkeitsbereichs dieser Spezifikation.

2.3.1 Die Zeichenfläche

Der Begriff Zeichenfläche (Canvas) beschreibt für alle Medien den „Bereich, wo die Formatierungsstruktur dargestellt wird“. Die Zeichenfläche ist für jede Dimension des Raums unendlich, aber die Darstellung erfolgt normalerweise innerhalb eines endlichen Bereichs der Zeichenfläche, der dem Zielmedium entsprechend durch das Benutzerprogramm eingerichtet wird. Beispielsweise geben Benutzerprogramme, die etwas auf einem Bildschirm darstellen, eine Mindestbreite vor und wählen eine Ausgangsbreite, die auf den Maßen des Viewports basiert. Benutzerprogramme, die etwas auf einer gedruckten Seite anzeigen, geben Beschränkungen für Breite und Höhe vor. Akustische Benutzerprogramme können Beschränkungen im Audioraum vorgeben, nicht aber hinsichtlich der Zeit.

2.3.2 CSS2-Adressierungsmodell

CSS2-Selektoren und Eigenschaften erlauben, dass sich Stylesheets auf die folgenden Teile eines Dokuments oder Benutzerprogramms beziehen:

2.4 CSS-Entwurfskonzepte

CSS2 basiert wie auch CSS1 auf bestimmten Entwurfsgrundlagen:

Hinweis. Weitere Informationen zum Entwurf zugänglicher Dokumente mit CSS und HTML finden Sie in [WAI-PAGEAUTH].