edition W3C.de

Cascading Style Sheets, Level 2

Deutsche Übersetzung

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

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

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

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



Inhaltsverzeichnis

12 Erzeugter Inhalt, automatische Nummerierung und Listen
12.1 Die Pseudoelemente :before und :after
12.2 Die 'content'-Eigenschaft
12.3 Zusammenspiel von :before und :after mit den Elementen 'compact' und 'run-in'
12.4 Anführungszeichen
12.4.1 Anführungszeichen mit der 'quotes'-Eigenschaft angeben
12.4.2 Anführungszeichen mit der 'content'-Eigenschaft einfügen
12.5 Automatische Zähler und Nummerierung
12.5.2 Verschachtelte Zähler und Gültigkeitsbereich
12.5.3  Zählerstile
12.5.4  Zähler in Elementen mit 'display:none'
12.6 Markierungen (Marker) und Listen
12.6.1 Markierungen: die Eigenschaft 'marker-offset'
12.6.2 Listen: die Eigenschaften 'list-style-type', 'list-style-image', 'list-style-position' und 'list-style'

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:

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.

Beispiel

Die folgende Regel beispielsweise fügt die Zeichenkette „Hinweis: “ vor dem Inhalt jedes P-Elements ein, dessen „class“-Attribut den Wert „note“ hat:

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.

Beispiel

Beispielsweise fügen die folgenden Regeln ein öffnendes Anführungszeichen vor jedem Q-Element ein. Die Farbe des Anführungszeichens ist rot, aber die Schrift ist dieselbe wie die Schrift des restlichen Q-Elements:

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

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

Beispiel

Weil also beispielsweise der Ausgangswert der Eigenschaft 'display' gleich 'inline' ist, wird das Anführungszeichen im vorigen Beispiel als inzeilige Box eingefügt (also auf derselben Zeile wie der anfängliche Textinhalt des Elements). Das nächste Beispiel setzt die 'display'-Eigenschaft explizit auf 'block', so dass der eingefügte Text zu einem Block wird.

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

Beachten Sie, dass ein akustisches Benutzerprogramm nach der Darstellung des restlichen BODY-Elements die Wörter „Das Ende“ aussprechen würde.

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:

Hinweis. In zukünftigen Versionen von CSS sind möglicherweise auch andere Werte erlaubt.

12.2 Die 'content'-Eigenschaft

'content'

Wert:

[<string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote]+ | inherit

Ausgangswert

leerer String

Angewendet auf:

'display : marker' und die Pseudoelemente :before und :after

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

All

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.

Beispiel

Die folgende Regel bewirkt, dass eine Sounddatei am Ende eines Zitats abgespielt wird (weitere Mechanismen finden Sie im Abschnitt 19 über akustische Stylesheets):

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

Die nächste Regel fügt den Text des HTML-Attributs „alt“ vor dem Bild ein. Wenn das Bild nicht angezeigt wird, sieht der Leser statt dessen den „alt“-Text.

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).

Beispiel

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).

Hinweis. In zukünftigen Versionen von CSS kann es sein, dass die 'content'-Eigenschaft zusätzliche Werte akzeptiert, so dass der Stil von Bereichen des erzeugten Inhalts variiert wird, aber in CSS2 hat der gesamte Inhalt der Pseudoelemente :before und :after denselben Stil.

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.

Beispiel

Nachfolgend sehen Sie ein Beispiel für einen 'run-in'-Header mit einem :after-Pseudoelement gefolgt von einem Absatz mit einem :before-Pseudoelement. Alle Pseudoelemente dieses Beispiels sind inline (das ist der Standard). Wenn das nachfolgende Stylesheet

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

auf dieses Quelldokument angewendet wird

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

sieht die visuelle Formatierung wie folgt aus:

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.

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

'quotes'

Wert:

[<string> <string>]+ | none | inherit

Ausgangswert:

Vom Benutzerprogramm abhängig

Angewendet auf:

Alle Elemente

Geerbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

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.

Beispiel

Wendet man beispielsweise das folgende Stylesheet

/* 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 }

auf das folgende HTML-Fragment an

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

erhält man

"Quote me!"

während dieses HTML

<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>

Folgendes erzeugen würde:

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

Hinweis. Während die durch die 'quotes' in den vorigen Beispielen angegebenen Anführungszeichen alle bequem auf den Computertastaturen liegen, würde ein wirklich hochqualitativer Schriftsatz andere ISO 10646-Zeichen erfordern. Die folgende informelle Tabelle listet einige der ISO 10646-Anführungszeichen auf:

Angenäherte Darstellung ISO 10646-Code (hex) Beschreibung
" 0022 ANFÜHRUNGSZEICHEN [das doppelte ASCII-Anführungszeichen]
' 0027 APOSTROPH [das einfache ASCII-Anführungszeichen]
< 2039 EINZELNES ANFÜHRUNGSZEICHEN SPITZE KLAMMER NACH LINKS
> 203A EINZELNES ANFÜHRUNGSZEICHEN SPITZE KLAMMER NACH RECHTS
« 00AB ANFÜHRUNGSZEICHEN DOPPELTE SPITZE KLAMMER NACH LINKS
» 00BB ANFÜHRUNGSZEICHEN DOPPELTE SPITZE KLAMMER NACH RECHTS
` 2018 LINKES EINFACHES ANFÜHRUNGSZEICHEN [einfach oben 6]
' 2019 RECHTES EINFACHES ANFÜHRUNGSZEICHEN [einfach oben 9]
`` 201C LINKES DOPPELTES ANFÜHRUNGSZEICHEN [doppelt oben 6]
'' 201D RECHTES DOPPELTES ANFÜHRUNGSZEICHEN [doppelt oben 9]
,, 201E DOPPELTES UNTERES ANFÜHRUNGSZEICHEN [doppelt unten 9]

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.

Beispiel

Das folgende Stylesheet setzt öffnende Anführungszeichen für jeden Absatz in einem BLOCKQUOTE und fügt am Ende ein einzelnes schließendes Anführungszeichen ein:

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

Das basiert auf dem letzten Absatz, der mit der Klasse „last“ markiert wurde, weil es keine Selektoren gibt, die mit dem letzten untergeordneten Element eines Elements übereinstimmen können.

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

Hinweis. Wenn ein Zitat in einer anderen Sprache vorliegt als der umschließende Text, ist es üblich, den Text mit Anführungszeichen der Sprache des umschließenden Texts auszuzeichnen, nicht mit den Anführungszeichen der Sprache des Zitats.

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›.» 

Beispiel

Ein Stylesheet wie das Folgende setzt die 'quotes'-Eigenschaft so, dass 'open-quote' und 'close-quote' korrekt für alle Elemente funktionieren. Diese Regeln gelten für Dokumente, die nur Englisch, Französisch oder beides enthalten. Für jede zusätzliche Sprache wird eine weitere Regel benötigt. Beachten Sie die Verwendung des untergeordneten Kombinatorzeichens („>“), um Anführungszeichen für Elemente abhängig von der Sprache des umschließenden Texts zu setzen:

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

Die Anführungszeichen für das Englische sind hier in einer Form gezeigt, die die meisten Leute über die Tastatur eingeben können. Wenn Sie sie direkt eingeben können, sehen sie wie folgt aus:

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

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.

'counter-reset'

Wert:

[<identifier> <integer>]+ | none | inherit

Ausgangswert:

None

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

All

'counter-increment'

Wert:

[<identifier> <integer>]+ | none | inherit

Ausgangswert:

None

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

All

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.

Beispiel

Dieses Beispiel zeigt eine Möglichkeit, Kapitel und Abschnitte mit „Kapitel 1“, „1.1“, „1.2“ usw. zu nummerieren.

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 }

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.

Beispiel

Folgendes genügt also, um verschachtelte Listenelemente zu nummerieren. Das Ergebnis kommt jenem sehr nahe, wenn man 'display:list-item' und 'list-style: inside' für das LI-Element setzt:

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.

Beispiel

Wenn wir die n-te Instanz des Zählers „item“ als item[n] bezeichnen und den Anfang und das Ende eines Gültigkeitsbereiches mit „(“ und „)“, verwendet das folgende HTML-Fragment die angegebenen Zähler. (Wir setzen dabei das Stylesheet aus dem obigen Beispiel voraus.)

<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.

Beispiel

Das folgende Stylesheet nummeriert verschachtelte Listenelemente als „1“, „1.1“, „1.1.1“ usw.

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

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) }

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.

Beispiel

Beispielsweise inkrementieren nach dem folgenden Stylesheet H2s mit der Klasse „secret“ 'count2' nicht.

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

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

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.

Beispiel

Das folgende Beispiel etwa zeigt, wie Markierungen dazu verwendet werden, um Punkte hinter jeder Nummer einer geordneten Liste einzufügen. Diese HTML-Datei und das Stylesheet

<!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>

sollte etwa Folgendes erzeugen:

   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.

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.

Beispiel

Im folgenden Beispiel wird der Inhalt innerhalb einer Markierungs-Box einer festen Breite zentriert. Das folgende Dokument

<!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>

sollte etwa Folgendes erzeugen:

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

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

Beispiel

Das Dokument

<!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>

sollte ungefähr Folgendes erzeugen (hier ersetzen ASCII-Kunstwerke die Smiley-GIFs):

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

Das folgende Beispiel verwendet Markierungen, um Bemerkungen zu nummerieren.

Beispiel

Das Dokument

<!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>

sollte ungefähr Folgendes produzieren:

            This is the first paragraph 
in this document.

Note 1: This is a very short
document.

This is the end.

'marker-offset'

Wert:

<length> | auto | inherit

Ausgangswert:

auto

Angewendet auf:

Elemente mit 'display: marker'

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

visual

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.

Beispiel

Das folgende Beispiel zeigt, wie Markierungen dazu verwendet werden können, um Punkte nach jedem nummerierten Listenelement einzufügen. Das nachfolgende HTML-Programm und Stylesheet

<!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>

sollte etwa Folgendes erzeugen:

        Ein langer vorhergehender
Absatz ...

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

Ein langer nachfolgender
Absatz ...

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.

'list-style-type'

Wert:

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit

Ausgangswert:

disc

Angewendet auf:

Elemente mit ''display: list-item'

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

visual

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.

Hinweis. Dieses Dokument gibt keinen genauen Mechanismus für die einzelnen Nummerierungssymbole an (z.B. wie römische Nummern berechnet werden). Eine zukünftige W3C-Spezifikation enthält möglicherweise weitere Informationen zu diesem Thema.

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.

Beispiel

Das folgende HTML-Dokument

<!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>

könnte etwa Folgendes erzeugen:

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

Beachten Sie, dass die Ausrichtung dieser Listenmarkierungen (hier rechts ausgerichtet) vom Benutzerprogramm abhängig ist.

Zukünftige Versionen von CSS stellen möglicherweise vollständigere Mechanismen für internationale Nummerierungssysteme bereit.

'list-style-image'

Wert:

<uri> | none | inherit

Ausgangswert:

none

Angewendet auf:

Elemente mit ''display: list-item'

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

visual

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.

Beispiel

Das folgende Beispiel setzt die Markierung am Anfang jedes Listenelements auf das Bild „ellipse.png“.

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

'list-style-position'

Wert:

inside | outside | inherit

Ausgangswert:

outside

Angewendet auf:

Elemente mit ''display: list-item'

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

visual

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.

'list-style|

Wert:

[<'list-style-type'> | | <'list-style-position'> | | <'list-style-image'> ] |

Ausgangswert:

Für zusammenfassende Eigenschaften nicht definiert.

Angewendet auf:

Elemente mit ''display: list-item'

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

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.

Beispiel

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.

Beispiel

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.