2 Einführung in CSS2

Inhaltsverzeichnis

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="https://www.gaudry.be/de/css-rf-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:

  • den Typ des Links: zu einem "Stylesheet".
  • die Position des Stylesheets: über das Attribut 'href'.
  • den Typ des zu verknüpfenden Stylesheets: "text/css".

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="https://www.gaudry.be/de/css-rf-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:

  • Elemente im Dokumentbaum und bestimmte Beziehungen zwischen ihnen (siehe Abschnitt über Selektoren).
  • Attribute von Elementen im Dokumentbaum sowie Werte dieser Attribute (siehe Abschnitt über Attributselektoren).
  • Einige Teile des Elementinhalts (siehe Pseudo-Elemente :first-line und :first-letter).
  • Elemente des Dokumentbaums, wenn sie sich in einem bestimmten Status befinden (siehe Abschnitt über Pseudo-Klassen).
  • Einige Aspekte der Zeichenfläche, auf der das Dokument dargestellt wird.
  • Einige Systeminformationen (siehe den Abschnitt über die Benutzeroberfläche).

  

2.4 CSS-Entwurfskonzepte

CSS2 basiert wie auch CSS1 auf bestimmten Entwurfsgrundlagen:

  • Aufwärts- und Abwärtskompatibilität. CSS2-Benutzerprogramme verstehen CSS1-Stylesheets. CSS1–Benutzerprogramme können CSS2-Stylesheets lesen und verwerfen alle Teile, die sie nicht verstehen. Außerdem können Benutzerprogramme ohne CSS-Unterstützung Stil-erweiterte Dokumente anzeigen. Natürlich können die durch CSS ermöglichten stilistischen Erweiterungen nicht dargestellt werden, aber der gesamte Inhalt wird angezeigt.
  • Ergänzung strukturierter Dokumente. Stylesheets ergänzen strukturierte Dokumente (z.B. HTML- und XML-Applikationen) und stellen dafür stilistische Informationen für den mit Markup gekennzeichneten Text bereit. Es sollte ganz einfach sein, das Stylesheet zu ändern, und zwar mit wenig oder ohne Einfluss auf das Markup.
  • Unabhängigkeit von Hersteller, Plattform und Gerät. Stylesheets eröffnen die Möglichkeit, dass Dokumente unabhängig vom Hersteller, von der Plattform und vom Gerät werden. Stylesheets als solche sind ebenfalls unabhängig von Hersteller und Plattform, aber CSS2 ermöglicht es Ihnen, ein Stylesheet für eine bestimmte Gruppe von Geräten (z.B. Drucker) anzulegen.
  • Wartbarkeit. Webmaster können die Wartbarkeit ihrer Site verbessern und ein konsistentes Look&Feel für eine gesamte Site schaffen, indem sie von Dokumenten aus auf Stylesheets verweisen. Ändert sich beispielsweise die Hintergrundfarbe für ein Unternehmen, muss nur eine einzige Datei geändert werden.
  • Einfachheit. CSS2 ist komplexer als CSS1, bleibt aber eine einfache Stilsprache, die vom Menschen lesbar und schreibbar ist. Die CSS-Eigenschaften werden so weit möglich voneinander unabhängig verwaltet, und es gibt im Allgemeinen jeweils nur eine einzige Methode, um einen bestimmten Effekt zu erzielen.
  • Netzwerkleistung. CSS unterstützt kompakte Codierungen für die Darstellung von Inhalt. Verglichen mit Bildern oder Audiodateien, die von Autoren oft verwendet werden, um bestimmte Darstellungseffekte zu erzielen, verringern Stylesheets häufig die Inhaltsgröße. Darüber hinaus müssen weniger Netzwerkverbindungen geöffnet werden, wodurch die Netzwerkleistung weiter gesteigert wird.
  • Flexibilität. CSS kann auf mehrere Arten auf Inhalt angewendet werden. Das Schlüsselkonzept ist es, Stilinformationen zu kaskadieren, die im Standard-Stylesheet (des Benutzerprogramms), in Benutzer-Stylesheets, in verknüpften Stylesheets, im Dokumentkopf und in Attributen für die Elemente, die den Dokumentrumpf bilden, enthalten sind.
  • Reichhaltigkeit. Den Autoren steht eine umfassende Menge an Darstellungseffekten zur Verfügung, die die Reichhaltigkeit des Web als Ausdrucksmedium vergrößern. Die Designer haben lange auf die Funktionalität gewartet, die man häufig im Desktop-Publishing und in Diashow-Applikationen findet. Einige der geforderten Darstellungseffekte stehen in Konflikt mit der Geräteunabhängigkeit, aber CSS2 ist auf dem besten Weg, die Anforderungen der Designer zu erfüllen.
  • Alternative Sprachbindungen. Die Menge der in dieser Spezifikation beschriebenen CSS-Eigenschaften bildet ein konsistentes Formatierungsmodell für visuelle und akustische Darstellungen. Der Zugriff auf dieses Formatierungsmodell kann über die Sprache CSS erfolgen, aber es sind auch Bindungen zu anderen Sprachen möglich. Beispielsweise könnte ein JavaScript-Programm den Wert der 'color'-Eigenschaft eines bestimmten Elements ändern.
  • Zugänglichkeit. Einige Funktionsmerkmale von CSS bieten behinderten Benutzern einen verbesserten Zugriff auf das Web:
  • Eigenschaften zur Steuerung der Schriftdarstellung erlauben den Autoren, Bitmap-Textbilder zu vermeiden, die z.B. für Blinde nicht zugänglich sind.
  • Positionierungseigenschaften erlauben Autoren, Markup-Tricks zu vermeiden (z.B. unsichtbare Bilder), um ein Layout zu erzwingen.
  • Die Semantik von !important-Regeln bedeutet, dass Benutzer mit bestimmten Anforderungen an die Darstellung die Stylesheets des Autors überschreiben können.
  • Der neue 'inherit'-Wert für alle Eigenschaften verbessert die Allgemeinheit der Kaskadierung und erlaubt eine einfachere und konsistentere Einstellung der Formatierung.
  • Eine verbesserte Medienunterstützung, unter anderem Mediengruppen, Braille und TTY-Medientypen, erlaubt Benutzern und Autoren, Seiten auf diese Geräte zuzuschneiden.
  • Akustische Eigenschaften bieten Kontrolle über Sprach- und Audioausgabe.
  • Die Attributselektoren, die 'attr()'-Funktion und die 'content'-Eigenschaft bieten Zugriff auf alternativen Inhalt.
  • Zähler und Abschnitt/Absatz-Nummerierung können die Navigation im Dokument verbessern und Einrückungen ersparen (wichtig für Braille-Geräte). Die Eigenschaften 'word-spacing' und 'text-independent' vermeiden darüber hinaus den Bedarf an zusätzlichem Leerraum im Dokument.

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