edition W3C.de

HTML 4.01-Spezifikation

Deutsche Übersetzung

Diese Version:
http://www.edition-w3.de/TR/1999/REC-html401-19991224
Aktuelle Version:
http://www.edition-w3c.de/TR/html4
Übersetzer:
Christine Kühnel (Übersetzung, fachliche Kommentierung) <kuehnel@screenexa.net>
Stefan Mintert (Fachlektorat und fachliche Kommentierung) <www.mintert.com/stefan/mail/>
Stefan Schumacher (Übersetzung, fachliche Kommentierung) <sts@schumacher-netz.de>

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.

Diese Veröffentlichung ist eine Vorveröffentlichung. Kein Teil dieses Textes darf kopiert werden. Alle Rechte vorbehalten. Nach Abschluss der Arbeit wird das endgültige Dokument unter der oben angegebenen Adresse veröffentlicht. Die jetzige Veröffentlichung während der laufenden Arbeit dient zur Information von Interessierten und zur Prüfung durch die Fachöffentlichkeit. Sollten Sie Fehler finden oder Verbesserungsvorschläge haben, schicken Sie diese bitte per Mail an die Übersetzer.
Folgende Teile liegen noch in Englisch vor und müssen noch in deutscher Fassung generiert werden: (a) Gesamtinhaltsverzeichnis (b) Index



14 Stylesheets

Inhaltsverzeichnis

14.1 Einführung in Stylesheets

Stylesheets bedeuten einen wichtigen Durchbruch für Web-Designer. Stylesheets erweitern die Möglichkeiten der Designer, das Erscheinungsbild ihrer Seiten zu verbessern. In der wissenschaftlichen Umgebung, in der das Web entwickelt wurde, hat man mehr Wert auf den Inhalt als auf die Darstellung des Dokuments gelegt. Nachdem Menschen aus immer mehr Schichten und Berufen das Web entdeckten, führten die Grenzen von HTML zu einer fortschreitenden Frustration, und Autoren wurden gezwungen, diese stilistischen Einschränkungen von HTML zu umgehen. Auch wenn die Absichten gut waren – die Darstellung von Web-Seiten zu verbessern – hatten die verwendeten Techniken unschöne Nebenwirkungen. Diese Techniken funktionieren für einige Leuten manchmal, nicht für alle Leuten für immer. Dies Techniken sind es:

Diese Techniken erhöhen die Komplexität von Web-Seiten erheblich, bieten begrenzte Flexibilität, leiden an Interoperabilitätsproblemen und erzeugen unangenehme Nachteile für Menschen mit Behinderungen.

Stylesheets lösen diese Probleme im gleichen Moment, in dem sie die begrenzten Darstellungsmechanismen in HTML überwinden. Stylesheets machen es einfach, den Leerraum zwischen Textzeilen anzugeben, die Einrückung von Zeilen zu steuern, Farben für Text und Hintergrund festzulegen, Schriftgröße und -art und eine Fülle weiterer Details zu steuern.

Zum Beispiel bestimmt das folgende kurze CSS-Stylesheet (gespeichert in der Datei special.css) die grüne Textfarbe des Absatzes und umrandet diesen mit einer geschlossenen roten Linie:

P.special {
color : green;
border: solid red;
}

Autoren können dieses Stylesheet mit Hilfe des LINK-Elements in ihr HTML-Quelldokument einbinden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
    <LINK href="special.css" rel="stylesheet" type="text/css">
  </HEAD>
  <BODY>
    <P class="special">Dieser Absatz sollte speziellen grünen Text enthalten.</P>
  </BODY>
</HTML>

HTML 4 unterstützt die folgenden Stylesheet-Eigenschaften:

Flexible Platzierung der Stilinformationen
Die Verwaltung von Stylesheets in separaten Dateien erleichtert ihre Wiederverwendung. Manchmal ist es sinnvoll, Darstellungsanweisungen innerhalb des Dokuments anzugeben, in dem sie angewendet werden. Entweder geschlossen am Anfang eines Dokuments, oder als Attributwert in den Elementen innerhalb des Dokumentrumpfes. Um es einfacher zu machen, die Formatierung für einen gesamten Website zu verwalten, beschreibt diese Spezifikation wie HTTP-Header verwendet werden können, um einem Dokument Stylesheets zuzuweisen.
Unabhängigkeit von bestimmten Stylesheet-Sprachen
Diese Spezifikation bindet HTML nicht an irgendeine bestimmte Stylesheet-Sprache. Dies erlaubt die Verwendung unterschiedlicher Sprachen, zum Beispiel einfache Sprachen für die Mehrheit der Benutzer und komplexere für eine Minderheit mit hoch spezialisierten Anforderungen. Die unten stehenden Beispiele verwenden durchgehend die Sprache CSS (Cascading Style Sheets) [CSS1], andere Stylesheet-Sprachen wären jedoch auch möglich.
Kaskadierend
Dies ist die Fähigkeit einiger Stylesheet-Sprachen wie CSS, die Formatierungsinformationen verschiedener Quellen miteinander zu vermischen. Es können zum Beispiel firmenweite Formatierungsrichtlinien sein, das gemeinsame Layout einer Dokumentreihe und ein Stil, der speziell für ein Dokument gilt. Werden diese getrennt gespeichert, können Stylesheets wiederverwendet werden, die Erstellung vereinfachen und Zwischenspeicherungen im Netz (caching) besser nutzen. Die Kaskade definiert eine geordnete Reihenfolge der Stylesheets. Vorschriften in späteren Stylesheets haben Vorrang gegenüber den zuvor gelesenen. Nicht alle Stylesheet-Sprachen sind kaskadierend.
Medienabhängigkeit
HTML erlaubt Autoren, Dokumente unabhängig von bestimmten Medien zu erstellen. Dies gestattet Benutzern den Zugang zu Web-Seiten mit vielen verschiedenen Geräten und Medien, zum Beispiel mit graphischen Displays für Computer, die mit Windows, Macintosh OS und X11 laufen, mit Zusatzgeräten für Fernseher, mit besonders ausgestatteten Telefonen und PDA-basierten tragbaren Geräten, sowie mit sprachbasierten Browsern und Blindenschrift anzeigenden Tastgeräten.

Stylesheets richten sich im Gegensatz dazu an bestimmte Medien oder Mediengruppen. Ein Stylesheet, das für die Ausgabe am Bildschirm gedacht ist, kann auch zum Drucken geeignet sein, ist jedoch für sprachbasierte Browser wenig hilfreich. Diese Spezifikation erlaubt Ihnen, die groben Medienkategorien zu definieren, für die ein Stylesheet geeignet ist. Dies hilft Benutzerprogrammen dabei, den Empfang ungeeigneter Stylesheets zu vermeiden. Stylesheet-Sprachen können Möglichkeiten zur Beschreibung von Medienabhängigkeiten innerhalb desselben Stylesheets enthalten.

Anmerkung der Übersetzer:

Ein Beispiel für ein CSS-Stylesheet, das Formatierungen für mehrere Ausgabemedien enthält, finden Sie in Abschnitt 7.2.1 der CSS2-Spezifikation. In Anhang A von CSS2 finden Sie ein Stylesheet für HTML 4-Dokumente. Auch dieses Stylesheet besitzt Formatierungsregeln für unterschiedliche Medien.

Alternative Stile
Autoren möchten dem Leser eventuell verschiedene Möglichkeiten anbieten, ein Dokument zu betrachten. Zum Beispiel mit einem Stylesheet, um kompakte Dokumente mit kleinen Schriftarten darzustellen, oder mit einem Stylesheet, das größere Schriftarten zur besseren Lesbarkeit bietet. Diese Spezifikation gestattet es Autoren, ein bevorzugtes Stylesheet wie auch Alternativen für bestimmmte Benutzer oder Medien anzugeben. Die Benutzerprogramme sollten Benutzern die Möglichkeit geben, zwischen alternativen Stylesheets zu wählen oder diese ganz auszuschalten.
Leistungsbedenken
Einige Personen haben Bedenken über die Leistungsfähigkeit von Stylesheets ausgesprochen. Zum Beispiel könnte der Empfang eines externen Stylesheets die vollständige Darstellung für den Benutzer verlangsamen. Eine ähnliche Situation tritt ein, wenn der Dokumentkopf eine lange Aufzählung mit Stilregeln enthält.

Der aktuelle Vorschlag trägt diesem Umstand insofern Rechnung, dass es Autoren gestattet wird, die Darstellungsanweisungen innerhalb der HTML-Elemente anzugeben. Die Darstellungsanweisung ist folglich immer dann verfügbar, wenn ein Benutzerprogramm die betreffenden Elemente darstellen möchte.

In vielen Fällen werden Autoren den Vorteil eines gemeinsamen Stylesheets für mehrere Dokumente nutzen. In diesem Fall wird die Verwendung von Formatierungsregeln innerhalb des Dokuments zu einer geringeren Leistung führen, als wenn auf ein Stylesheet verwiesen würde, da für die meisten Dokumente bereits ein Stylesheet im lokalen Cache vorhanden sein wird. Die öffentliche Verfügbarkeit von guten Stylesheets wird diesen Effekt verstärken.

14.2 HTML-Dokumente formatieren

Anmerkung: Das Beispiel des Stylesheets für HTML 4, das in [CSS2] enthalten ist, stellt allgemein anerkannte Standardformatierungsinformationen für jedes Element dar. Sowohl Autoren als auch Entwickler könnten dies als eine nützliche Quelle ansehen.

HTML-Dokumente können Stylesheet-Regeln direkt enthalten oder Stylesheets importieren.

Jede Stylesheet-Sprache kann mit HTML verwendet werden. Eine einfache Stylesheet-Sprache kann den Anforderungen der meisten Benutzer genügen, andere Sprachen können jedoch für hochspezialisierte Anforderungen eher geeignet sein. Diese Spezifikation verwendet für Beispiele die Formatierungssprache »Cascading Style Sheets« ([CSS1]), kurz CSS.

Die Syntax von Formatierungsangaben (siehe auch Abschnitt 6.15, »Stylesheet-Daten«) ist abhängig von der verwendeten Stylesheet-Sprache.

14.2.1 Festlegen der Standard-Stylesheet-Sprache

Autoren müssen die Stylesheet-Sprache angeben, die für die Formatierungsinformationen eines HTML-Dokuments gelten soll.

Anmerkung der Übersetzer:

Die praktische Relevanz dieses Abschnitts ist ziemlich gering: Für den Fall, dass Formatierungsinformationen im Element STYLE im Kopf der HTML-Datei stehen, muss zwingend das Attribut type die Stylesheet-Sprache angeben. Für den Fall, dass die Formatierungsanweisungen in einer externen CSS-Datei stehen, die von der HTML-Datei per LINK eingebunden wird, muss der Web-Server in der HTTP-Antwort in der Zeile Content-type den Wert text/css angeben. Eine Typangabe in der CSS-Datei ist nicht möglich.

Der Sinn dieses Abschnitts beschränkt sich im Übrigen dann auf die inzeiligen Formatierungsanweisungen, die im nächsten Abschnitt erklärt werden. Allerdings ist gerade diese inzeilige Platzierung von Formatierungsanweisungen diejenige, von der man möglichst Abstand nehmen soll.

Autoren sollten das Element META verwenden, um die voreingestellte Stylesheet-Sprache für ein Dokument zu bestimmen. Um die Voreinstellung zum Beispiel auf CSS zu setzen, sollten Autoren die folgende Deklaration in den HEAD ihrer Dokumente einfügen:

<META http-equiv="Content-Style-Type" content="text/css">

Die voreingestellte Stylesheet-Sprache kann auch über HTTP-Header festgelegt werden. Die oben beschriebene META-Deklaration ist äquivalent zu dem HTTP-Header:

Content-Style-Type: text/css

Benutzerprogramme sollten die Voreinstellung für die Stylesheet-Sprache für ein Dokument anhand der folgenden Schritte bestimmen (von höchster zu niedrigster Priorität):

  1. Geben META-Deklarationen den »Content-Style-Type« an, bestimmt die letzte Deklaration in der Dokumentzeichenfolge die Voreinstellung für die Stylesheet-Sprache.
  2. Anderenfalls, wenn irgendwelche HTTP-Header den »Content-Style-Type« angeben, bestimmt die letzte Angabe in der Dokumentzeichenfolge die Voreinstellung für die Stylesheet-Sprache.
  3. Ansonsten ist die Voreinstellung für die Stylesheet-Sprache »text/css«.

Dokumente, welche Elemente enthalten, die das Attribut style verwenden, die aber keine voreingestellte Stylesheet-Sprache definieren, sind inkorrekt. Webseiten erzeugende Programme sollten Voreinstellungen für Stylesheet-Informationen generieren (üblicherweise eine META-Deklaration), so dass Benutzerprogramme sich nicht auf die Voreinstellung »text/css« berufen müssen.

14.2.2 Inzeilige Formatierungsinformation

Attributdefinitionen

style = style [CN]
Dieses Attribut gibt Formatierungsinformationen für das aktuelle Element an.

DieSyntax des Wertes des Attributs style wird von der voreingestellten Stylesheet-Sprache festgelegt. Um zum Beispiel inzeilige Formatierangaben nach [CSS2] anzugeben, verwenden Sie die Blocksyntax für Deklarationen wie in Abschnitt 4.1.8 beschrieben (ohne die begrenzenden geschweiften Klammern).

Anmerkung der Übersetzer:

Gemeint ist hier Abschnitt 4.1.8 der Spezifikation für »Cascading Style Sheets, Level 2«, der erklärt, dass Deklarationen für denselben Selektor in durch Semikolons (;) voneinander getrennten Gruppen angeordnet werden können.

Dieses CSS-Beispiel legt die Farbe und die Schriftgröße für den Text in einem bestimmten Absatz fest.

<P style="font-size: 12pt; color: fuchsia">Sind Stylesheets nicht wunderbar?</P>

In CSS haben die Eigenschaftsdeklarationen die Form »name: wert« und werden durch ein Semikolon getrennt.

Zur Angabe von Formatierungsinformationen für mehr als ein Element, sollten Autoren das Element STYLE verwenden. Um eine optimale Flexibilität zu erreichen, sollten Autoren die Formatierungen in externen Stylesheets definieren.

14.2.3 Formatierungsinformationen im Kopf: das Element STYLE

<!ELEMENT STYLE - - %StyleSheet        -- style info -->
<!ATTLIST STYLE
  %i18n;                               -- lang, dir, for use with title --
  type        %ContentType;  #REQUIRED -- content type of style language --
  media       %MediaDesc;    #IMPLIED  -- designed for use with these media --
  title       %Text;         #IMPLIED  -- advisory title --
  >

Start-Tag: erforderlich, End-Tag: erforderlich

Attributdefinitionen

type = content-type [CI]
Dieses Attribut gibt die Stylesheet-Sprache des Elementinhalts an und überschreibt die voreingestellte Stylesheet-Sprache. Die Stylesheet-Sprache wird als Inhaltstyp angegeben (zum Beispiel »text/css«). Autoren müssen einen Wert für dieses Attribut angeben; es gibt keinen Standardwert für dieses Attribut.
media = media-descriptors [CI]
Dieses Attribut gibt das anvisierte Zielmedium für die Formatierungsinformationen an. Es kann eine einzelne Medienbeschreibung sein oder eine durch Kommata getrennte Liste. Der Standardwert für dieses Attribut ist »screen« für die Bildschirmausgabe.

Anmerkung der Übersetzer:

Bislang spielt keine andere Stylesheet-Sprache als CSS eine Rolle für die Einbettung in HTML beziehungsweise XHTML, und es ist auch keine Alternative absehbar. (In XML-Dateien werden üblicherweise keine Formatierungsinformationen integriert; statt dessen werden meist externe Stylesheets referenziert.) Für das HTML-Element STYLE gilt damit in der Praxis immer, dass das Attribut type den Wert »text/css« besitzt.

Die Funktion des media-Attributs kann auch eine @media-Regel in CSS übernehmen. Details finden Sie in der CSS2-Spezifikation im Abschnitt 7.2.1.

An anderer Stelle definierte Attribute

Das Element STYLE gestattet Autoren, Stylesheet-Regeln in den Kopf des Dokuments zu stellen. HTML erlaubt eine beliebige Anzahl von STYLE-Elementen im HEAD-Bereich eines Dokuments.

Benutzerprogramme, die keine Stylesheets unterstützen beziehungsweise die von einem STYLE-Element verwendete spezifische Stylesheet-Sprache nicht unterstützen, müssen den Inhalt des STYLE-Elements verbergen. Es ist ein Fehler, den Inhalt als Teil des Dokumenttextes darzustellen. Einige Stylesheet-Sprachen unterstützen die Syntax, den Inhalt vor nicht konformen Benutzerprogrammen zu verbergen.

Die Syntax der Formatierungsangaben ist abhängig von der Stylesheet-Sprache.

Einige Stylesheet-Implementierungen mögen vielfältigere Regeln im STYLE-Element erlauben als im style-Attribut. Zum Beispiel können mit CSS die Regeln in einem STYLE-Element bestimmt werden für:

Vorgaben zur Verarbeitungsreihenfolge der Formatierungsregeln und zur Vererbung sind abhängig von der Stylesheet-Sprache.

Die folgende CSS STYLE-Deklaration erzeugt einen Rahmen um jedes H1-Element im Dokument und zentriert es auf der Seite:

<HEAD>
 <STYLE type="text/css">
   H1 {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>

Um anzugeben, dass die Formatierungsinformation nur für H1-Elemente einer bestimmten Klasse gelten soll, verändern wir sie wie folgt:

<HEAD>
 <STYLE type="text/css">
   H1.myclass {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>
<BODY>
 <H1 class="myclass">Dieses H1 wird durch unsere Formatvorlage verändert.</H1>
 <H1>Dieses ist nicht von unserer Formatvorlage betroffen.</H1>
</BODY>

Zuletzt, um den Geltungsbereich der Formatierungsinformationen auf eine einzige Instanz von H1 zu begrenzen, wird das id-Attribut gesetzt:

<HEAD>
 <STYLE type="text/css">
   #myid {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>
<BODY>
 <H1 class="myclass">Dieses H1 ist nicht betroffen</H1>
 <H1 id="myid">Diese H1 ist vom Stil betroffen</H1>
 <H1>Dieses H1 ist nicht betroffen</H1>
</BODY>

Auch wenn Formatierungsinformationen für fast jedes HTML-Element angegeben werden können, sind zwei Elemente, DIV und SPAN, dadurch besonders wertvoll, dass sie keiner darstellungsrelevanten Semantik unterliegen (außer Block-Level versus inzeilig). Werden sie mit Stylesheets kombiniert, erlauben diese Elemente dem Benutzer, HTML unbegrenzt zu erweitern, speziell wenn sie mit den Attributen class und id verwendet werden.

Im folgenden Beispiel verwenden wir das Element SPAN, um das Schriftformat der ersten Worte eines Absatzes auf klein geschriebene Großbuchstaben (small caps) zu setzen:

<HEAD>
 <STYLE type="text/css">
  SPAN.sc-ex { font-variant: small-caps }
 </STYLE>
</HEAD>
<BODY>
  <P><SPAN class="sc-ex">Die ersten</SPAN> Worte
  dieses Absatzes sind klein geschriebene Großbuchstaben.
</BODY>

Im folgenden Beispiel verwenden wir DIV und das class-Attribute, um die Textausrichtung für diejenigen Absätze festzulegen, die den zusammenfassenden Abschnitt eines wissenschaftlichen Beitrags ausmachen. Diese Formatierungsinformation kann für andere zusammenfassende Abschnitte wiederverwendet werden, indem das class-Attribut an anderer Stelle im Dokument gesetzt wird.

<HEAD>
 <STYLE type="text/css">
   DIV.zusammenfassung { text-align: justify }
 </STYLE>
</HEAD>
<BODY>
 <DIV class="zusammenfassung">
   <P>Die Produktgruppe Chieftain ist unser Marktgewinner für
     das kommende Jahr. Dieser Bericht legt dar, wie Chieftain gegen 
     wettbewerbende Produkte plaziert wird.

   <P>Chieftain ersetzt den Commander-Bereich, der bis
     auf Weiteres auf der Preisliste bestehen bleibt.
 </DIV>
</BODY>

14.2.4 Medientypen

HTML gestattet es Autoren, Dokumente zu entwerfen, die sich die Charakteristika der Medien zunutze machen, auf denen sie dargestellt werden sollen (zum Beispiel graphische Displays, Fernsehbildschirme, portable Geräte, sprachbasierte Browser, Blindenschrift darstellende Tastgeräte usw.). Durch die Angabe des Attributs media gestatten Autoren den Benutzerprogrammen, Stylesheets selektiv zu laden und anzuwenden. Bitte beachten Sie die Liste der anerkannten Medien-Deskriptoren (siehe Abschnitt 6.13).

Die folgenden Beispiel-Deklarationen gelten für H1-Elemente. Bei einer Projektion auf einem Geschäftstreffen werden alle Instanzen blau dargestellt werden. Beim Druck werden sie alle zentriert werden.

<HEAD>
 <STYLE type="text/css" media="projection">
    H1 { color: blue}
 </STYLE>

 <STYLE type="text/css" media="print">
   H1 { text-align: center }
 </STYLE>

Anmerkung der Übersetzer:

Der Medientyp »projection« wird zum Beispiel vom Opera-Browser verstanden. Damit ist eine PowerPoint-ähnliche Präsentation auf Basis von HTML-Dateien möglich. Sie eignen sich gleichzeitig für den »normalen« Einsatz im Web (letzteres wird dann natürlich über CSS-Anweisungen für »screen« formatiert).

Dieses Beispiel fügt Ankern Soundeffekte hinzu, wenn eine Sprachausgabe verwendet wird:

 <STYLE type="text/css" media="aural">
   A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
 </STYLE>
</HEAD>

Anmerkung der Übersetzer:

Details über akustische Stylesheets enthält das Kapitel 19 der CSS2-Spezifikation.

Mediensteuerung ist besonders interessant, wenn sie in Bezug auf externe Stylesheets verwendet wird. Benutzerprogramme können dadurch Zeit sparen, dass sie nur die relevanten Stylesheets für das aktuelle Gerät aus dem Netz laden. Zum Beispiel können sprachbasierte Browser den Download von Stylesheets vermeiden, die für die optische Darstellung entworfen worden sind. Beachten Sie den Abschnitt 14.4.1, »Medienabhängige Kaskaden«, für weitergehende Informationen.

14.3 Externe Stylesheets

Autoren können Stylesheets von HTML-Dokumenten trennen. Dies bietet mehrere Vorteile:

14.3.1 Bevorzugte und alternative Stylesheets

HTML erlaubt Autoren, eine beliebige Anzahl externer Stylesheets mit einem Dokument zu verknüpfen. Die Stylesheet-Sprache definiert, wie sich mehrere externe Stylesheets gegenseitig beeinflussen (zum Beispiel die CSS-Kaskadenregeln).

Autoren können eine beliebige Anzahl sich gegenseitig ausschließender Stylesheets angeben, genannt alternative Stylesheets. Benutzer können das bevorzugte Stylesheet unter diesen abhängig von ihren Benutzervorgaben wählen. Zum Beispiel kann ein Autor ein Stylesheet für kleine Displays angeben und ein anderes für Benutzer mit verminderter Sehfähigkeit (zum Beispiel große Schriftarten). Benutzerprogramme sollten Benutzern die Auswahl der alternativen Stylesheets ermöglichen.

Der Autor kann angeben, dass eines der alternativen Stylesheets das bevorzugte ist. Benutzerprogramme sollten das bevorzugte Stylesheet des Autors anwenden, wenn der Benutzer keine andere Alternative ausgewählt hat.

Autoren können mehrere alternative Stylesheets (eingeschlossen das bevorzugte Stylesheet des Autors) unter einem einzigen Formatnamen zusammenfassen. Wenn der Benutzer eine benannte Formatvorlage wählt, muss das Benutzerprogramm alle Stylesheets mit diesem Namen anwenden. Benutzerprogramme dürfen keine alternativen Stylesheets mit einem anderen Formatnamen anwenden. Der Abschnitt »Aufruf externer Stylesheets« erklärt, wie eine Gruppe von Stylesheets benannt wird.

Autoren können auch beständige Stylesheets (persistent style sheets) angeben, die Benutzerprogramme zusätzlich zu jedem alternativen Stylesheet anwenden müssen.

Benutzerprogramme müssen Medien-Deskriptoren respektieren, wenn ein Stylesheet angewendet wird.

Benutzerprogramme sollten Benutzern ebenfalls gestatten, die Stylesheets des Autors vollständig zu ignorieren. In diesem Fall darf das Benutzerprogramm kein beständiges oder alternatives Stylesheet verarbeiten.

14.3.2 Angabe externer Stylesheets

Autoren rufen externe Stylesheets mit den folgenden Attributen des Elements LINK auf:

Benutzerprogramme sollten Benutzern ein Mittel zur Verfügung stellen, sich die Liste der alternativen Formate anzusehen und aus ihr zu wählen. Der Wert des Attributs title wird als Name jeder Auswahlmöglichkeit empfohlen.

In diesem Beispiel geben wir zuerst ein beständiges Stylesheet an, das in der Datei mystyle.css abgelegt ist:

<LINK href="mystyle.css" rel="stylesheet" type="text/css">

Die Angabe des Attributs title verwandelt dieses Stylesheet in das vom Autor bevorzugte Stylesheet:

 <LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css">

Der Zusatz des Schlüsselworts »alternate« zum Attribut rel verwandelt es in ein alternatives Stylesheet:

<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css">

Anmerkung der Übersetzer:

Betrachten Sie den folgenden Ausschnitt aus einer (X)HTML-Datei:

<link href="standard.css" 
      rel="stylesheet" 
      type="text/css" />

<link href="gross.css" 
      title="Große Schrift" 
      rel="stylesheet" 
      type="text/css" />

<link href="kontrast.css" 
      title="kontrastreiches Layout"
      rel="alternate stylesheet" 
      type="text/css" />

Wird diese Datei im Mozilla betrachtet, erlaubt der Browser über ein Menü die Auswahl der gewünschten Formatierung (siehe Abbildung). Das unbenannte Stylesheet (das beständige Stylesheet) wird in der englischen Version als »Basic Page Style« bezeichnet. Dessen Formatierungsregeln werden in jedem Fall angewendet. Außerdem ist das bevorzugte Stylesheet ausgewählt (in diesem Fall »Große Schrift«) und die darin festgelegte Formatierung gilt zusätzlich.

Auswahl alternativer Stylesheets im Mozilla

Weitere Informationen über externe Stylesheets finden Sie in Abschnitt 12.3.2, »Links und externe Stylesheets«.

Autoren können auch das Element META verwenden, um das bevorzugte Stylesheet eines Dokuments zu bestimmen. Um zum Beispiel das Stylesheet »compact« als bevorzugt zu bestimmen (siehe vorausgegangenes Beispiel), können Autoren die folgende Zeile im HEAD einfügen:

<META http-equiv="Default-Style" content="compact">

Das bevorzugte Stylesheet kann ebenso mit Hilfe eines HTTP-Headers bestimmt werden. Die META-Deklaration oben ist äquivalent zu dem HTTP-Header:

Default-Style: "compact"

Geben zwei oder mehr META-Deklarationen oder HTTP-Header das bevorzugte Stylesheet an, hat die letzte Angabe Vorrang. Aus diesem Grund wird erwartet, dass HTTP-Header vor dem HEAD des Dokuments angegeben werden.

Geben zwei oder mehr LINK-Elemente das bevorzugte Stylesheet an, hat das erste den Vorrang.

Bevorzugte Stylesheets, die mit META oder mit HTTP-Headern bestimmt werden, haben Vorrang vor denen, die über das Element LINK bestimmt werden.

14.4 Cascading Style Sheets

Kaskadierende Stylesheet-Sprachen wie CSS gestatten die Vermischung von Formatierungsinformationen aus mehreren Quellen. Jedoch unterstützen nicht alle Stylesheet-Sprachen diese Kaskade. Um eine Kaskade zu definieren, geben Autoren eine Reihe von LINK- und/oder STYLE-Elementen an. Die Formatierungsinformationen werden in der Reihenfolge kaskadiert, in der die Elemente im HEAD erscheinen.

Anmerkung: Diese Spezifikation gibt nicht an, wie Stylesheets von unterschiedlichen Formatierungssprachen kaskadieren. Autoren sollten Stylesheet-Sprachen nicht vermischen.

Im folgenden Beispiel geben wir zwei alternative Stylesheets mit Namen »compact« an. Wählt der Benutzer das Format »compact«, muss das Benutzerprogramm die beiden externen Stylesheets sowie das beständige Stylesheet »common.css« anwenden. Wählt der Benutzer das Format »big print«, werden nur das alternative Stylesheet »bigprint.css« und das beständige »common.css« verarbeitet.

<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
<LINK rel="stylesheet" href="common.css" type="text/css">

Hier das Beispiel einer Kaskade. Es wird sowohl das LINK- als auch das STYLE-Element einbezogen.

<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
    p.special { color: rgb(230, 100, 180) }
</STYLE>

14.4.1 Medienabhängige Kaskaden

Eine Kaskade kann Stylesheets einschließen, die für verschiedene Medien geeignet sind. Sowohl LINK als auch STYLE können das Attribut media verwenden. Das Benutzerprogramm ist dann dafür verantwortlich, die Stylesheets herauszufiltern, die für das aktuelle Medium nicht passend sind.

Im folgenden Beispiel definieren wir eine Kaskade, bei der das Stylesheet »corporate« in verschiedenen Versionen bereitgestellt wird: eine für die Druckausgabe, eine für die Bildschirmausgabe und eine für sprachbasierte Browser (nützlich, sagen wir mal, um E-Mails im Auto zu »lesen«). Das Stylesheet »techreport« gilt für alle Medien. Die Farbregel des STYLE-Elements wird für die Druck- und Bildschirmausgabe verwendet, jedoch nicht für die Sprachausgabe.

<LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE media="screen, print" type="text/css">
    p.special { color: rgb(230, 100, 180) }
</STYLE>

14.4.2 Vererbung und Kaskadierung

Möchte das Benutzerprogramm ein Dokument darstellen, muss es Werte für die Formateigenschaften finden, zum Beispiel für die Schriftfamilie, Schriftart, -größe, Zeilenhöhe, Textfarbe und so weiter. Der genaue Mechanismus ist abhängig von der Stylesheet-Sprache. Die folgende Beschreibung ist jedoch allgemein anwendbar:

Der Mechanismus der Kaskade wird angewendet, wenn mehrere Formatierungsregeln direkt für ein Element gelten. Der Mechanismus gestattet es dem Benutzerprogramm, die Regeln nach Spezifität zu sortieren, um festzustellen, welche Regel angewendet werden soll. Wird keine Regel gefunden, hängt der weitere Ablauf davon ab, ob die Formateigenschaft vererbt werden kann oder nicht. Nicht alle Eigenschaften können vererbt werden. Für diese Eigenschaften bietet die Stylesheet-Sprache voreingestellte Werte an, die angewendet werden, wenn keine expliziten Regeln für ein bestimmtes Element angegeben sind.

Kann die Eigenschaft vererbt werden, untersucht das Benutzerprogramm das nächst umschließende Element, um zu sehen, ob eine Regel dafür existiert. Dieser Vorgang wird fortgeführt bis eine geeignete Regel gefunden wird. Dieser Mechanismus erlaubt die kompakte Angabe von Stylesheets. Zum Beispiel können Autoren die Schriftart für alle Elemente innerhalb des BODY durch eine einzige Regel festlegen, die für das Element BODY gilt.

14.5 Formatierungsangaben vor Benutzerprogrammen verbergen

Einige Stylesheet-Sprachen unterstützen eine Syntax, die Autoren erlaubt, den Inhalt eines STYLE-Elements vor nicht konformen Benutzerprogrammen zu verbergen.

Dieses Beispiel zeigt für CSS, wie der Inhalt eines STYLE-Elements auskommentiert wird, um zu gewährleisten, dass ältere, nicht konforme Benutzerprogramme diesen Inhalt nicht als Text darstellen.

<STYLE type="text/css">
<!--
   H1 { color: red }
   P  { color: blue}
   -->
</STYLE>

14.6 Mit HTTP-Headern auf Stylesheets verweisen

Dieser Abschnitt gilt nur für Benutzerprogramme, die konform zu HTTP-Versionen sind, die ein Link Header-Feld definieren. Beachten Sie, dass HTTP 1.1 wie definiert in [RFC2616] kein Link Header-Feld einschließt (siehe Abschnitt 19.6.3).

Administratoren von Web-Servern mögen es als angenehm empfinden, einen Server so zu konfigurieren, dass ein Stylesheet auf eine Gruppe von mehreren Seiten angewandt wird. Der HTTP Link Header hat den gleichen Effekt wie ein LINK-Element mit den gleichen Attributen und Werten. Mehrere Link Header haben die Wirkung wie mehrere LINK-Elemente, die in der gleichen Reihenfolge erscheinen. Zum Beispiel entspricht

Link: <http://www.acme.com/corporate.css>; REL=stylesheet

der Angabe

<LINK rel="stylesheet" href="http://www.acme.com/corporate.css">

Es ist möglich, mehrere alternative Formate mit Hilfe mehrerer Link Header anzugeben, und dann das rel-Attribut zur Bestimmung des voreingestellten Formats heranzuziehen.

Im folgenden Beispiel wird »compact« als Voreinstellung verwendet, weil das Schlüsselwort »alternate« für das rel-Attribut nicht gesetzt ist.

Link: <compact.css>; rel="stylesheet"; title="compact"
Link: <bigprint.css>; rel="alternate stylesheet"; title="big print"

Dies sollte ebenfalls funktionieren, wenn HTML-Dokumente per E-Mail verschickt werden. Einige E-Mail-Programme können die Reihenfolge von [RFC822]-Headern verändern. Um sich dagegen zu schützen, dass die Kaskadierungsreihenfolge für Stylesheets berührt wird, die über Link Header angegeben werden, können Autoren die Header-Verkettung verwenden, um mehrere Instanzen eines Header-Feldes zusammenzulegen. Die Anführungszeichen sind nur notwendig, wenn der Attributwert Leerraum enthält. Verwenden Sie SGML-Entities, um Zeichen zu referenzieren, die ansonsten in einem HTTP- oder E-Mail-Header nicht gestattet wären, oder die möglicherweise auf dem Weg durch Gateways verändert werden könnten.

Anmerkung der Übersetzer:

Das Versenden von E-Mail im HTML-Format ist sehr umstritten. Viele Menschen ärgern sich über kleine Schriften, schlechten Kontrast und ähnliches in Mails. Viele ernstzunehmende Sicherheitslücken in Mail-Programmen werden erst durch HTML-Mails und darin eingebettete Programme zu einem Problem.

An dieser Stelle wollen wir kein Urteil für oder gegen HTML-Mails fällen; nur eine Bitte: schicken Sie uns keine HTML-Mails! ;-)

Die Elemente LINK und META, die durch HTTP-Header angegeben werden, sind so definiert, dass sie vor irgendeinem expliziten LINK- und META-Element im Dokumentkopf angegeben werden müssen.