12 Erzeugter Inhalt, automatische Nummerierung und Listen

In einigen Fällen wollen Autoren, dass Benutzerprogramme Inhalt darstellen, der nicht aus dem Dokumentbaum stammt. Ein bekanntes Beispiel dafür ist eine nummerierte Liste; der Autor will die Nummern nicht explizit auflisten, sondern das Benutzerprogramm soll sie automatisch erzeugen. Analog dazu könnte es beispielsweise vorkommen, dass das Benutzerprogramm das Wort „Abbildung“ vor einer Bildunterschrift einfügt, oder die Wörter „Kapitel 7“ vor dem Titel des siebten Kapitels. Insbesondere für Audio oder Braille sollten die Benutzerprogramme in der Lage sein, diese Zeichenketten einzufügen.

In CSS2 kann Inhalt mit Hilfe mehrerer Mechanismen erzeugt werden:

• Die 'content'-Eigenschaft, in Kombination mit den Pseudoelementen :before und :after.
• Die akustischen Eigenschaften 'cue-before' und 'cue-after' (lesen Sie dazu das Kapitel 19 über akustische Stylesheets). Wenn die Eigenschaft 'content' mit den akustischen Eigenschaften kombiniert wird, werden sie in der folgenden Reihenfolge dargestellt: :before, 'cue-before', ('pause-before'), dem Elementinhalt, ('pause-after'), 'cue-after' und :after.
• Elemente mit dem Wert 'list-item' für die 'display'-Eigenschaft.

Nachfolgend beschreiben wir die Mechanismen der 'content'-Eigenschaft.

12.1 Die Pseudoelemente :before und :after

Autoren geben den Stil und die Position erzeugten Inhalts mit Hilfe der Pseudoelemente :before und :after an. Wie ihre Namen schon sagen, geben die Pseudoelemente :before und :after die Position von Inhalt vor und hinter dem Dokumentbauminhalt eines Elements an. Die 'content'-Eigenschaft gibt in Kombination mit diesen Pseudoelementen an, was eingefügt wird.

P.note:before { content: "Hinweis: " }

Die Formatierungsobjekte (zum Beispiel Boxen), die von einem Element erzeugt werden, enthalten den automatisch erzeugten Inhalt. Wenn man beispielsweise das obige Stylesheet wie folgt abändert:

P.note:before { content: "Note: " }
P.note        { border: solid green }

wird ein durchgezogener grüner Rahmen um den gesamten Absatz angezeigt, inklusive der ersten Zeichenkette.

Die Pseudoelemente :before und :after erben alle vererbbaren Eigenschaften von dem Element im Dokumentbaum, dem sie zugeordnet sind.

Q:before {
  content: open-quote;
  color: red
}

In der Deklaration der Pseudoelemente :before oder :after nehmen nicht geerbte Eigenschaften ihren Ausgangswert an.

BODY:after {
    content: "Das Ende";
    display: block;
    margin-top: 2em;
    text-align: center;
}

Benutzerprogramme müssen die folgenden Eigenschaften für die Pseudoelemente :before und :after ignorieren: 'position', 'float', Listeneigenschaften und Tabelleneigenschaften.

Die Pseudoelemente :before und :after erlauben, dass die 'display'-Eigenschaft die folgenden Werte annimmt:

• Wenn das Subjekt (siehe Abschnitt 5.2) des Selektors ein Blocklevel-Element ist, sind die erlaubten Werte 'none', 'inline', 'block' und 'marker'. Wenn der Wert von 'display' einen andern Wert hat, verhält sich das Pseudoelement so, als wäre der Wert gleich 'block'.
• Wenn das Subjekt des Selektors ein Inline-Level-Element ist, sind die erlaubten Werte 'none' und 'inline'. Wenn der Wert von 'display' einen anderen Wert hat, verhält sich das Pseudoelement so, als wäre der Wert gleich 'inline'.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

12.2 Die 'content'-Eigenschaft

Diese Eigenschaft wird für die Pseudoelemente :before und :after verwendet, um Inhalt in einem Dokument zu erzeugen. Die Werte haben die folgenden Bedeutungen:

<string>

Textinhalt (lesen Sie dazu den Abschnitt 4.3.10 über Zeichenketten).

<uri>

Der Wert ist ein URI, der eine externe Ressource angibt. Wenn ein Benutzerprogramm die Ressource aufgrund der von ihm unterstützen Medientypen nicht unterstützen kann, muss es sie ignorieren. Hinweis. CSS2 bietet keinen Mechanismus, um die Größe des eingebetteten Objekts zu ändern oder um eine Textbeschreibung bereitzustellen, wie etwa die Attribute „alt“ oder „longdesc“ für Bilder in HTML. Das kann sich jedoch in zukünftigen Versionen von CSS ändern.

<counter>

Zähler können mit zwei verschiedenen Funktionen angegeben werden: 'counter()' oder 'counters()'. Die erste Funktion hat zwei Formen: 'counter(name)' oder 'counter(name, style)'. Der erzeugte Text ist der Wert des benannten Zählers an dieser Stelle in der Formatierungsstruktur; er wird im angegebenen Stil formatiert (standardmäßig 'decimal'). Die zweite Funktion hat ebenfalls zwei Formen: 'counters(name, string)' oder 'counters(name, string, style)'. Der erzeugte Text ist der Wert aller Zähler mit dem betreffenden Namen an dieser Stelle der Formatierungsstruktur, abgetrennt durch den angegebenen String. Die Zähler werden in dem angegeben Stil dargestellt (standardmäßig 'decimal'). Weitere Informationen finden Sie im Abschnitt 12.5 über automatische Zähler und Nummerierung.

open-quote und close-quote

Diese Werte werden durch die geeignete Zeichenkette aus der Eigenschaft 'quotes' ersetzt.

no-open-quote und no-close-quote

Fügt nichts ein (die leere Zeichenkette), inkrementiert (bzw. dekrementiert) aber die Verschachtelungsebene für Anführungszeichen.

attr(X)

Diese Funktion gibt den Wert des Attributs X für das Subjekt des Selektors als Zeichenkette zurück. Die Zeichenkette wird vom CSS-Prozessor nicht geparst. Wenn das Subjekt des Selektors kein Attribut X hat, wird eine leere Zeichenkette zurückgegeben. Ob bei den Attributnamen die Groß-/Kleinschreibung berücksichtigt wird, ist von der Dokumentsprache abhängig. Hinweis. In CSS2 ist es nicht möglich, auf Attributwerte für andere Elemente des Selektors zuzugreifen.

Die 'display'-Eigenschaft steuert, ob der Inhalt in einem Block, einer Inline- oder Markierungs-Box angezeigt wird.

Autoren sollten 'content'-Deklarationen in @media-Regeln platzieren, wenn der Inhalt vom Medium abhängig ist. Beispielsweise könnte literaler Text für jede Mediengruppe verwendet werden, während Bilder sich nur auf visuelle und Bitmap-Mediengruppen beziehen und Sounddateien nur auf die akustische Mediengruppe.

@media aural {
   BLOCKQUOTE:after { content: url("beautiful-music.wav") }
   }

IMG:before { content: attr(alt) }

Autoren können Neuezeilezeichen in den erzeugten Inhalt einfügen, indem sie die Escape-Folge „\A“ in einen der Strings hinter der 'content'-Eigenschaft einfügen. Damit wird ein erzwungener Zeilenumbruch eingefügt, ähnlich dem BR-Element in HTML. Weitere Informationen über die Escape-Folge „\A“ finden Sie in „Zeichenketten“ (4.3.10) und „Zeichen und Groß-/Kleinschreibung“ (4.1.3).

H1:before {
    display: block;
    text-align: center;
    content: "chapter\A hoofdstuk\A chapitre"
}

Erzeugter Inhalt verändert den Dokumentbaum nicht. Insbesondere wird er nicht an den Dokumentsprachprozessor zurückgemeldet (z.B. für ein erneutes Parsing).

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

12.3 Zusammenspiel von :before und :after mit den Elementen 'compact' und 'run-in'

Die folgenden Fälle können auftreten:

1. Ein 'run-in'- oder 'compact'-Element hat ein :before-Pseudoelement des Typs 'inline': Das Pseudoelement wird berücksichtigt, wenn die Größe der Element-Box berechnet wird (für 'compact'), und innerhalb derselben Block-Box wie das Element dargestellt.
2. Ein 'run-in'- oder 'compact'-Element hat ein :after-Pseudoelement des Typs 'inline': Die Regeln des vorhergehenden Punktes werden angewendet.
3. Ein 'run-in'- oder 'compact'-Element hat ein :before-Pseudoelement des Typs 'block': Das Pseudoelement wird als Block oberhalb des Elements formatiert und bei der Berechnung der Elementgröße (für 'compact') nicht berücksichtigt.
4. Ein 'run-in-'- oder 'compact'-Element hat ein :after-Pseudoelement des Typs 'block': Sowohl das Element als auch sein :after-Pseudoelement werden als Block-Box formatiert. Das Element ist nicht als Inline-Box in seinem eigenen :after-Pseudoelement formatiert.
5. Das Element, das einem 'run-in'- oder 'compact'-Element folgt, hat ein :before-Pseudoelement des Typs 'block': Die Entscheidung, wie das 'run-in'/'compact'-Element formatiert wird, wird abhängig von der Block-Box getroffen, die aus dem :before-Pseudoelement resultiert.
6. Das Element, das einem 'run-in'- oder 'compact'-Element folgt, hat ein :before-Pseudoelement des Typs 'inline': Die Entscheidung, wie das 'run-in'/'compact'-Element formatiert wird, ist vom 'display'-Wert des Elements abhängig, dem das :before zugeordnet ist.

H3 { display: run-in }
H3:after { content: ": " }
P:before { content: "... " }

<H3>Zentauren</H3>
<P>haben Hufe
<P>Haben einen Schwanz

Zentauren: ... haben Hufe
... haben einen Schwanz

12.4 Anführungszeichen

In CSS2 können Autoren in einer den Stil berücksichtigenden und kontextabhängigen Weise angeben, wie die Benutzerprogramme Anführungszeichen darstellen sollen. Die Eigenschaft 'quotes' gibt Paare von Anführungszeichen für jede Ebene der eingebetteten Zitate an. Die 'content'-Eigenschaft bietet Zugriff auf diese Anführungszeichen und bewirkt, dass sie vor und hinter einem Zitat eingefügt werden.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

12.4.1 Anführungszeichen mit der 'quotes'-Eigenschaft angeben

Diese Eigenschaft gibt die Anführungszeichen für eine beliebige Anzahl eingebetteter Zitate an. Die Werte haben die folgenden Bedeutungen:

none

Die Werte 'open-quote' und 'close-quote' der 'content'-Eigenschaft erzeugen keine Anführungsstriche.

[<string> <string>]+

Werte für die 'open-quote'- und 'close-quote'-Werte der 'content'-Eigenschaft werden dieser Liste mit Anführungszeichenpaaren (öffnende und schließende) entnommen. Das erste Paar (ganz links) stellt die äußerste Zitatebene dar, das zweite Paar die erste Einbettungsebene usw. Das Benutzerprogramm muss abhängig von der Einbettungsebene das geeignete Anführungszeichenpaar verwenden.

/* Gibt Anführungszeichenpaare für zwei Ebenen in zwei Sprachen an */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "«" "»" "<" ">" }

/* Anführungszeichen vor und nach Q-Elementinhalt einfügen */
Q:before { content: open-quote }
Q:after  { content: close-quote }

<HTML lang="en">
  <HEAD>
  <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Quote me!</Q>
  </BODY>
</HTML> 

"Quote me!"

<HTML lang="no">
  <HEAD>
  <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
  </BODY>
</HTML>

«Trøndere gråter når <Vinsjan på kaia> blir deklamert.»

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

12.4.2 Anführungszeichen mit der 'content'-Eigenschaft einfügen

Mit den 'open-quote'-Werten der 'content'-Eigenschaft werden Anführungszeichen an den geeigneten Stellen in einem Dokument eingefügt. Jedes Auftreten von 'open-quote' oder 'close-quote' wird durch einen Wert von 'quotes' ersetzt, abhängig von der Verschachtelungstiefe.

'open-quote' bezieht sich auf das erste Anführungszeichen eines Paares, 'close-quote' auf das zweite. Welches Anführungszeichenpaar verwendet wird, ist von der Verschachtelungstiefe der Anführungszeichen abhängig: Die Anzahl der Auftreten von 'open-quote' wird im gesamten erzeugten Text vor dem aktuellen Auftreten gezählt, minus der Anzahl des Auftretens von 'close-quote'. Ist die Tiefe gleich 0, wird das erste Paar verwendet, ist die Tiefe 1, wird das zweite Paar verwendet usw. Ist die Tiefe größer als die Anzahl der Paare, wird das letzte Paar fortlaufend wiederholt.

Beachten Sie, dass diese Anführungszeichentiefe unabhängig von der Verschachtelung des Quelldokuments oder der Formatierungsstruktur ist.

Einige typographische Stile fordern, dass öffnende Anführungszeichen vor jedem Absatz eines Zitats wiederholt werden, das sich über mehrere Absätze erstreckt, aber nur der letzte Absatz endet mit einem schließenden Anführungszeichen. In CSS kann das erzielt werden, indem schließende „Phantom“-Anführungszeichen gesetzt werden. Das Schlüsselwort 'no-close-quote' dekrementiert die Zitatebene, fügt aber kein Anführungszeichen ein.

BLOCKQUOTE P:before     { content: open-quote }
BLOCKQUOTE P:after      { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }

Aus Symmetriegründen gibt es auch das Schlüsselwort 'no-open-quote', das nichts einfügt, sondern die Anführungszeichentiefe um eins inkrementiert.

Ein Beispiel für Französisch innerhalb von Englisch:

The device of the order of the garter is “Honi soit qui mal y pense.” 

Englisch innerhalb von Französisch:

Il disait: «Il faut mettre l'action en ‹fast forward›.» 

[LANG|=fr] > *  { quotes: "«" "»" "\2039" "\203A" }
[LANG|=en] > *  { quotes: "\201C" "\201D" "\2018" "\2019" }

[LANG|=fr] > * { quotes: "«" "»" "‹" "›" }
[LANG|=en] > * { quotes: "“" "”" "‘" "’" }

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

12.5 Automatische Zähler und Nummerierung

Die automatische Nummerierung in CSS2 wird durch zwei Eigenschaften gesteuert, 'counter-increment' und 'counter-reset'. Die Zähler, die durch diese Eigenschaften definiert sind, werden in Kombination mit den Funktionen counter() und counters() der Eigenschaft 'content' verwendet.

Die Eigenschaft 'counter-increment' akzeptiert einen oder mehrere Namen von Zählern (IDs), jeweils optional gefolgt von einer ganzen Zahl. Die ganze Zahl gibt an, um wie viel der Zähler bei jedem Auftreten des Elements inkrementiert wird. Das Standardinkrement ist 1. Null und negative ganze Zahlen sind erlaubt.

Die Eigenschaft 'counter-reset' enthält außerdem eine Liste eines oder mehrerer Namen von Zählern, jeweils optional gefolgt von einer ganzen Zahl. Die ganze Zahl gibt den Wert an, auf den der Zähler bei jedem Auftreten des Elements gesetzt wird. Der Standardwert ist 0.

Wenn 'counter-increment' auf einen Zähler verweist, der sich nicht im Gültigkeitsbereich (siehe unten) eines 'counter-reset' befindet, wird angenommen, dass der Zähler vom Wurzelelement auf 0 zurückgesetzt wurde.

H1:before {
    content: "Kapitel " counter(chapter) ". ";
    counter-increment: chapter;  /* 1 zu chapter addieren */
    counter-reset: section;      /* section auf 0 setzen */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

Wenn ein Element einen Zähler inkrementiert/zurücksetzt und ihn auch verwendet (in der 'content'-Eigenschaft seines :before- oder :after-Pseudoelements), wird der Zähler nach dem Inkrementieren/Zurücksetzen verwendet.

Wenn ein Element einen Zähler sowohl zurücksetzt als auch inkrementiert, wird der Zähler zuerst zurückgesetzt und dann inkrementiert.

Die Eigenschaft 'counter-reset' folgt den Kaskadierungsregeln. Aufgrund der Kaskadierung setzt das folgende Stylesheet:

H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }

nur 'imagenum' zurück. Um beide Zähler zurückzusetzen, müssen sie zusammen angegeben werden:

H1 { counter-reset: section -1 imagenum 99 }

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

12.5.2 Verschachtelte Zähler und Gültigkeitsbereich

Zähler sind „selbst-verschachtelnd“, in der Hinsicht, dass eine Wiederverwendung eines Zählers in einem untergeordneten Elements automatisch eine neue Instanz des Zählers erzeugt. Das ist wichtig für Situationen wie beispielsweise Listen in HTML, wo Elemente in beliebiger Tiefe innerhalb sich selbst verschachtelt werden können. Es wäre unmöglich, für jede Ebene eindeutig benannte Zähler zu definieren.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

Die Selbstverschachtelung basiert auf dem Prinzip, dass jedes Element, das einen 'counter-reset' für einen Zähler X hat, einen neuen Zähler X erzeugt, dessen Gültigkeitsbereich das Element ist, seine vorhergehenden gleichrangigen Elemente und alle Ableitungen des Elements und seiner vorhergehenden gleichrangigen Elemente.

In dem obigen Beispiel erzeugt ein OL einen Zähler, und alle untergeordneten Elemente des OL beziehen sich auf diesen Zähler.

<OL>               <!-- (set item[0] to 0          -->
  <LI>item         <!--  increment item[0] (= 1)   -->
  <LI>item         <!--  increment item[0] (= 2)   -->
    <OL>           <!--  (set item[1] to 0         -->
      <LI>item     <!--   increment item[1] (= 1)  -->
      <LI>item     <!--   increment item[1] (= 2)  -->
      <LI>item     <!--   increment item[1] (= 3)  -->
        <OL>       <!--   (set item[2] to 0        -->
          <LI>item <!--    increment item[2] (= 1) -->
        </OL>      <!--   )                        -->
        <OL>       <!--   (set item[3] to 0        -->
          <LI>     <!--    increment item[3] (= 1) -->
        </OL>      <!--   )                        -->
      <LI>item     <!--   increment item[1] (= 4)  -->
    </OL>          <!--  )                         -->
  <LI>item         <!--  increment item[0] (= 3)   -->
  <LI>item         <!--  increment item[0] (= 4)   -->
</OL>              <!-- )                          -->
<OL>               <!-- (reset item[4] to 0        -->
  <LI>item         <!--  increment item[4] (= 1)   -->
  <LI>item         <!--  increment item[4] (= 2)   -->
</OL>              <!-- )                          -->

Die Funktion 'counters()' erzeugt einen String, der sich aus den Werten aller Zähler mit demselben Namen zusammensetzt, getrennt durch einen vorgegebenen String.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

12.5.3  Zählerstile

Standardmäßig werden Zähler mit Dezimalzahlen formatiert, aber alle Stile, die für die Eigenschaft 'list-style-type' zur Verfügung stehen, stehen auch für Zähler zur Verfügung. Die Notation sieht wie folgt aus:

counter(name)

das ist der Standardstil; oder:

counter(
name
, 'list-style-type')

Alle Stile sind erlaubt, unter anderem 'disc', 'circle', 'square' und 'none'.

H1:before        { content: counter(chno, upper-latin) ". " }
H2:before        { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before  { content: counter(notecntr, disc) " " }
P:before         { content: counter(p, none) }

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

12.5.4  Zähler in Elementen mit 'display:none'

Ein Element, das nicht angezeigt wird ('display' ist auf 'none' gesetzt), kann einen Zähler nicht inkrementieren oder zurücksetzen.

H2.secret {counter-increment: count2; display: none}

Elemente, deren 'visibility' auf 'hidden' gesetzt ist, inkrementieren die Zähler dagegen sehr wohl.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

12.6 Markierungen (Marker) und Listen

Die meisten Elemente auf Blockebene in CSS erzeugen eine Hauptblock-Box. In diesem Abschnitt beschreiben wir zwei CSS-Mechanismen, die bewirken, dass ein Element zwei Blöcke erzeugt: eine Hauptblock-Box (für den Inhalt eines Elements) und eine separate Markierungs-Box (für Dekorationen, wie beispielsweise einen Punkt, ein Bild oder eine Nummer). Die Markierungs-Box kann innerhalb oder außerhalb der Haupt-Box platziert werden. Anders als :before- und :after-Inhalt beeinflusst die Markierungs-Box die Position der Haupt-Box nicht, egal welches Positionierungsschema verwendet wird.

Der allgemeinere der beiden Mechanismen ist neu in CSS2 und wird auch als Markierungen (Marker) bezeichnet. Der einschränkendere Mechanismus beinhaltet die Listeneigenschaften von CSS1. Mit Listeneigenschaften können Autoren schnelle Ergebnisse für viele gebräuchliche geordnete und nicht geordnete Listenszenarien erzielen. Markierungen bieten Autoren jedoch eine präzise Kontrolle über den Inhalt und die Position der Markierung. Markierungen können in Kombination mit Zählern verwendet werden, um neue Listenstile zu erzeugen, um Randbemerkungen zu nummerieren und für vieles andere mehr.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Creating a list with markers</TITLE>
     <STYLE type="text/css">
   LI:before { 
       display: marker;
       content: counter(mycounter, lower-roman) ".";
       counter-increment: mycounter;
   }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> Das erste Element.
      <LI> Das zweite Element.
      <LI> Das dritte Element.
    </OL>
  </BODY>
</HTML>

   i. Das erste Element.
  ii. Das zweite Element.
 iii. Das dritte Element.

Mit abgeleiteten Selektoren und untergeordneten Selektoren (siehe Abschnitte 5.5 und 5.6) ist es möglich, unterschiedliche Markierungstypen anzugeben, abhängig von der Tiefe der eingebetteten Listen.

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

12.6.1 Markierungen: die Eigenschaft 'marker-offset'

Markierungen werden erzeugt, indem die 'display'-Eigenschaft innerhalb eines :before- oder :after-Pseudoelements auf 'marker' gesetzt wird. Während der :before- und :after-Inhalt 'block' und 'inline' Teil der von dem Element erzeugten Haupt-Box ist, wird 'marker'-Inhalt in einer unabhängigen Markierungs-Box außerhalb der Haupt-Box formatiert. Markierungs-Boxen werden als einzelne Zeile formatiert (das heißt als Zeilen-Box), weshalb sie nicht so flexibel wie Floats sind. Die Markeriungs-Box wird nur erzeugt, wenn die 'content'-Eigenschaft für das Pseudoelement tatsächlich Inhalt erzeugt.

Markierungs-Boxen haben Polsterungen (padding) und Rahmen (border), aber keine Ränder (margin).

Für das :before-Pseudoelement wird die Grundlinie des Texts in der Markierungs-Box vertikal an der Grundlinie des Texts in der ersten Zeile des Inhalts der Haupt-Box ausgerichtet. Enthält die Haupt-Box keinen Text, wird die obere äußere Kante der Markierungs-Box an der oberen äußeren Kante der Haupt-Box ausgerichtet. Für das :after-Pseudoelement wird die Grundlinie des Texts in der Markierungs-Box vertikal an der Grundlinie des Texts in der letzten Inhaltszeile der Inhalts-Box ausgerichtet. Enthält die Haupt-Box keinen Text, wird die untere äußere Kante der Markierungs-Box an der unteren äußeren Kante der Haupt-Box ausgerichtet.

Die Höhe einer Markierungs-Box wird durch die Eigenschaft 'line-height' festgelegt. Die :before- (:after-) Markierungs-Box wird in der Höhenberechnung der ersten (letzten) Zeilen-Box der Haupt-Box berücksichtigt. Markierungen werden also an der ersten und letzten Zeile eines Elementinhalts ausgerichtet, selbst wenn sich die Markierungs-Boxen in unterschiedlichen Zeilen-Boxen befinden. Falls es in einer Haupt-Box keine erste oder letzte Zeilen-Box gibt, richtet die Markierungs-Box selbst eine Zeilen-Box ein.

Die vertikale Ausrichtung einer Markierungs-Box innerhalb ihrer Zeilen-Box wird mit Hilfe der Eigenschaft 'vertical-align' festgelegt.

Ist der Wert der 'width'-Eigenschaft gleich 'auto', dann ist die Inhaltsbreite der Markierungs-Box gleich der des Inhalts, andernfalls ist sie gleich dem Wert von 'width'. Für Werte von 'width' kleiner als die Inhaltsbreite gibt die 'overflow'-Eigenschaft das Überlaufverhalten an. Markierungs-Boxen können Haupt-Boxen überlappen. Für Werte von 'width' größer der Inhaltsbreite gibt die Eigenschaft 'text-align' die horizontale Ausrichtung des Inhalts in der Markierungs-Box an.

Die Eigenschaft 'marker-offset' gibt den horizontalen Offset zwischen einer Markierungs-Box und der zugehörigen Haupt-Box an. Der Abstand wird zwischen ihren am nächsten beieinander liegenden Rahmenkanten gemessen. Hinweis: Wenn eine Markierung rechts eines Floats in einem von links nach rechts formatierenden Kontext verläuft, fließt die Haupt-Box an der rechten Seite des Floats vorbei, während die Markierungs-Box links vom Float erscheint. Weil die linke Rahmenkante der Haupt-Box links von dem Float liegt (lesen Sie dazu die Beschreibung von Floats) und die Markierungs-Boxen außerhalb der Rahmenkante der Haupt-Box liegen, liegt die Markierung ebenfalls links von dem Float. Ein analoges Verhalten ergibt sich für die Formatierung von rechts nach links, wenn eine Markierung links von einem Float vorbeiläuft.

Wenn die Eigenschaft 'display' den Wert 'marker' für den von einem Element mit 'display: list-item' erzeugten Inhalt hat, ersetzt eine für ':before' erzeugte Markierungs-Box die normale Listenelementmarkierung.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
 <HTML>
    <HEAD>
      <TITLE>Inhaltsausrichtung in der Markierungs-Box</TITLE>
      <STYLE type="text/css">
           LI:before { 
               display: marker;
               content: "(" counter(counter) ")";
               counter-increment: counter;
               width: 6em;
               text-align: center;
           }
      </STYLE>
   </HEAD>
   <BODY>
     <OL>
       <LI> Das erste Element.
       <LI> Das zweite Element.
       <LI> Das dritte Element.
     </OL>
   </BODY>
 </HTML>

 (1)    Das erste 
        Element.
 (2)    Das zweite 
        Element.
 (3)    Das dritte 
        Element.

Das nächste Beispiel erzeugt Markierungen vor und nach den Listeneinträgen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Markers before and after list items</TITLE>
    <STYLE type="text/css">
      @media screen, print {
         LI:before { 
          display: marker;
       content: url("smiley.gif");
         LI:after {
       display: marker;
          content: url("sad.gif");
         }
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>
  </BODY>
</HTML>

  :-) first list item 
      comes first      :-(
  :-) second list item 
      comes second     :-(

Das folgende Beispiel verwendet Markierungen, um Bemerkungen zu nummerieren.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Markers to create numbered notes4>/TITLE>
    <STYLE type="text/css">
      P { margin-left: 12 em; }
      @media screen, print {
         P.Note:before         { 
         display: marker;
       content: url("note.gif") 
                       "Note " counter(note-counter) ":";
              counter-increment: note-counter;
              text-align: left;
              width: 10em;
         }
     }
    </STYLE>
  </HEAD>
  <BODY>
    <P>This is the first paragraph in this document.</P>
    <P CLASS="Note">This is a very short document.</P>
    <P>This is the end.</P>
  </BODY>
</HTML>

            This is the first paragraph 
            in this document.

  Note 1:   This is a very short 
            document.
           
            This is the end.

Diese Eigenschaft gibt den Abstand zwischen der nächstliegenden Rahmenkanten einer Markierungs-Box und der zugehörigen Haupt-Box an. Der Abstand kann entweder benutzerspezifisch (<length>) oder vom Benutzerprogramm ('auto') gewählt sein. Längen können negativ sein, aber es gibt von der Implementierung abhängige Obergrenzen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
    <HEAD>
      <TITLE>Markierungsbeispiel 5</TITLE>
      <STYLE type="text/css">
           P { margin-left: 8em } /* Platz für Zähler schaffen */
           LI:before { 
               display: marker;
               marker-offset: 3em;
               content: counter(mycounter, lower-roman) ".";
               counter-increment: mycounter;
           }   
      </STYLE>
   </HEAD>
   <BODY>
     <P> Ein langer vorhergehender Absatz....
     <OL>
       <LI> Das erste Element.
       <LI> Das zweite Element.
       <LI> Das dritte Element.
     </OL>
     <P> Ein langer nachfolgender Absatz... 
   </BODY>
 </HTML>

        Ein langer vorhergehender
        Absatz ...
      
   i.   Das erste Element.
  ii.   Das zweite Element.
 iii.   Das dritte Element.

        Ein langer nachfolgender
        Absatz ...

Erste Seite von CSS-Spezifikation Inhaltsverzeichnis Haut

12.6.2 Listen: die Eigenschaften 'list-style-type', 'list-style-image', 'list-style-position' und 'list-style'

Die Listeneigenschaften erlauben eine grundlegende visuelle Formatierung von Listen. Wie bei allgemeineren Markierungen erzeugt ein Element mit 'display: list-item' eine Haupt-Box für den Elementinhalt und eine optionale Markierungs-Box. Die anderen Listeneigenschaften erlauben den Autoren, den Markierungstyp anzugeben (Bild, Glyphen oder Nummer) sowie die Position relativ zur Haupt-Box (außerhalb davon oder innerhalb davon vor dem Inhalt). Sie erlauben es den Autoren jedoch nicht, unterschiedliche Stile (Farben, Schriften, Ausrichtung und so weiter) für die Listenmarkierung anzugeben oder ihre Position relativ zur Haupt-Box anzupassen.

Wird darüber hinaus eine Markierung M (erzeugt mit 'display: marker') für ein durch die Listeneigenschaften erzeugtes Listenelement verwendet, ersetzt M die Standard-Listenelementmarkierung.

Diese Eigenschaft gibt das Erscheinungsbild der Listenelementmarkierung an, wenn 'list-style-image' den Wert 'none' hat oder wenn das Bild, auf das die URI verweist, nicht angezeigt werden kann. Der Wert 'none' spezifiziert keine Markierung, andernfalls gibt es drei Typen von Markierungen: Glyphen, Nummerierungssysteme und alphabetische Systeme. Hinweis: Nummerierte Listen verbessern den Zugriff auf ein Dokument, weil es damit einfacher wird, sich innerhalb von Listen zu orientieren.

Glyphen werden mit disc, circle und square angegeben. Die genaue Darstellung ist vom Benutzerprogramm abhängig.

Nummerierungssysteme werden wie folgt spezifiziert:

decimal

Dezimalzahlen, beginnend mit 1.

decimal-leading-zero

Dezimalzahlen, denen, wenn sie einstellig sind, eine Null vorangestellt wird (z.B. 01, 02, 03, ..., 98, 99).

lower-roman

Kleine römische Zahlen (i, ii, iii, iv, v usw.)

upper-roman

Große römische Zahlen (I, II, III, IV, V usw.)

hebrew

Traditionelle hebräische Nummerierung (Alef, Bet, ... Tet Vav, Tet Zayin, ... Yod Tet, Kaf ...).

georgian

Traditionelle georgianische Nummerierung (an, ban, gan, ..., he, tan, in, in-an, ...).

armenian

Traditionelle armenische Nummerierung.

cjk-ideoraphic

Einfache ideographische Nummern.

hiragana

a, i, u, e, o, ka, ki, ...

katakana

A, I, U, E, O, KA, KI, …

hiragana-iroha

i, ro, ha, ni, ho, he, to, …

katakana-iroha

I, RO, HA, NI, HO, HE, TO, …

Ein Benutzerprogramm, das ein Nummerierungssymbol nicht erkennt, sollte 'decimal' verwenden.

Alphabetische Systeme werden wie folgt spezifiziert:

lower latin oder lower-alpha

ASCII-Kleinbuchstaben (a, b, c, …, z).

upper-latin oder upper-alpha

ASCII-Großbuchstaben (A, B, C, ..., Z)

lower-greek

Kleine klassische griechische Buchstaben, Alpha, Beta, Gamma, ...(α, β, γ, ...)

Diese Spezifikation definiert nicht, wie alphabetische Systeme am Ende des Alphabets fortgesetzt werden. Nach 26 Listenelementen ist beispielsweise die Darstellung von 'lower-latin' nicht definiert. Für lange Listen empfehlen wir den Autoren deshalb, echte Nummern anzugeben.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Nummerierung mit kleinen lateinischen Zahlen</TITLE>
     <STYLE type="text/css">
          OL { list-style-type: lower-roman }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> Erstes Element.
      <LI> Zweites Element.
      <LI> Drittes Element.
    </OL>
  </BODY>
</HTML>

  i Erstes Element.
 ii Zweites Element.
iii Drittes Element.

Diese Eigenschaft legt das Bild fest, das als Listenelementmarkierung verwendet wird. Wenn das Bild zur Verfügung steht, ersetzt es die Markierung, die mit der Markierung 'list-style-type' festgelegt wurde.

UL { list-style-image: url("http://png.com/ellipse.png") }

Diese Eigenschaft gibt die Position der Markierungs-Box in der Hauptblock-Box an. Die Werte haben die folgenden Bedeutungen:

outside

Die Markierungs-Box liegt außerhalb der Hauptblock-Box. Hinweis: CSS1 hat die genaue Position der Markierungs-Box nicht angegeben, und aus Kompatibilitätsgründen bleibt CSS2 ähnlich mehrdeutig. Um eine genauere Kontrolle über die Markierungs-Boxen zu gewinnen, verwenden Sie bitte Markierungen.

inside

Die Markierungs-Box ist die erste inzeilige Box in der Hauptblock-Box, welcher der Elementinhalt folgt.

Beispiel

<HTML>
  <HEAD>
    <TITLE>Comparison of inside/outside position</TITLE>
    <STYLE type="text/css">
      UL         { list-style: outside }
      UL.compact { list-style: inside }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>

    <UL class="compact">
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>
  </BODY>
</HTML>

Das obige Beispiel könnte wie folgt formatiert werden:

In einem Text, der von rechts nach links verläuft, befinden sich die Markierungen auf der rechten Seite des Rahmens.

Die Eigenschaft 'list-style' ist eine zusammenfassende Notation, mit der die drei Eigenschaften 'list-style-type', 'list-style-image' und 'list-style-position' an einer einzigen Stelle im Stylesheet festgelegt werden.

UL { list-style: upper-roman inside }  /* Jede UL */
UL UL { list-style: circle outside } /* Jeder UL-Nachfahre einer UL */

Obwohl Autoren die 'list-style'-Information direkt für Listenelemente angeben können (z.B. LI in HTML), sollte das mit Vorsicht erfolgen. Die folgenden Regeln sehen ganz ähnlich aus, aber die erste deklariert einen abgeleiteten Selektor, die zweite dagegen einen (spezifischeren) untergeordneten Selektor.

OL.alpha LI   { list-style: lower-alpha } /* Jeder LI-Nachfahre einer OL */
OL.alpha > LI { list-style: lower-alpha } /* Jedes LI-Kind einer OL */

Autoren, die nur den abgeleiteten Selektor verwenden, erzielen damit vielleicht nicht die erwarteten Ergebnisse. Betrachten Sie die folgenden Regeln:

<HTML>
  <HEAD>
    <TITLE>WARNUNG: Unerwartete Ergebnisse aufgrund der Kaskade</TITLE>
    <STYLE type="text/css">
      OL.alpha LI  { list-style: lower-alpha }
      UL LI        { list-style: disc }
    </STYLE>
  </HEAD>
  <BODY>
    <OL class="alpha">
      <LI>level 1
      <UL>
         <LI>level 2
      </UL>
    </OL>
  </BODY>
</HTML>

Die gewünschte Darstellung hätte Listenelemente der Ebene 1 mit 'lower-alpha'-Beschrifungen und Elemente der Ebene 2 mit 'disc'-Beschriftungen. Die kaskadierende Reihenfolge bewirkt, dass die erste Stilregel (die spezifische Klasseninformationen enthält) die zweite verdeckt. Die folgenden Regeln lösen dieses Problem, indem sie statt dessen den untergeordneten Selektor verwenden:

OL.alpha > LI  { list-style: lower-alpha }
UL LI   { list-style: disc }

Eine weitere Lösung bestünde darin, die 'list-style'-Information nur für die Listentypelemente anzugeben:

OL.alpha  { list-style: lower-alpha }
UL        { list-style: disc }

Vererbung überträgt die 'list-style'-Werte von den OL- und UL-Elementen an die LI-Elemente. Das ist die empfohlene Vorgehensweise zur Angabe der Listenstilinformation.

Ein URI-Wert kann mit einem beliebigen anderen Wert kombiniert werden, wie beispielsweise in:

UL { list-style: url("http://png.com/ellipse.png") disc }

Im obigen Beispiel wird 'disc' verwendet, wenn das Bild nicht zur Verfügung steht.

Der Wert 'none' für die 'list-style'-Eigenschaft setzt sowohl 'list-style-type' als auch 'list-style-image' auf 'none':

UL { list-style: none }

Das Ergebnis ist, dass keine Markierung für die Listenelemente angezeigt wird.

You are on the German version of the site, but your system indicates that you prefer to use the English language.
The entire site is not translated yet, but the menus and buttons on the interface are largely translated.

Would you like to reach the page in English?
Click here to continue in English: Consult the English version of this page

U bevindt zich op de Duits versie van de site, maar uw systeem geeft aan dat u liever de Nederlandse taal gebruikt.
De hele site is nog niet vertaald, maar de menu's en knoppen op de interface zijn grotendeels vertaald.

Wilt u de pagina in het Nederlands bereiken?
Klik hier om door te gaan in het Nederlands: Raadpleeg de Nederlandse versie van deze pagina

Vous vous trouvez sur la version allemande du site, mais votre système indique que vous préférez utiliser la langue française.

Souhaitez-vous atteindre la page en français?
Cliquez ici pour continuer en français: Consulter la page en français