Inhaltsverzeichnis
2 Einführung in CSS2In 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.
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.
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:
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.
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.
CSS2-Selektoren und Eigenschaften erlauben, dass sich Stylesheets auf die folgenden Teile eines Dokuments oder Benutzerprogramms beziehen:
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].