Stil mit {stil}

Dez 07

CSS content • Inhalte mit CSS generieren

Für die automatische Erzeugung von Zählern in Aufzählungen und Listen und deren Nummerierung sind die CSS-Eigenschaften der Gruppe content verantwortlich. Während das reine HTML uns bereits die Erzeugung der Listenpunkte und die einfache Nummerierung von geordneten Listen abnimmt (mit dem <ul>- und <ol>-Tag), erlaubt CSS die automatische Erzeugung von Zählern in verschachtelten Listen – z.B. für Inhaltsverzeichnisse und die Numerierung von Kapiteln in Dokumentationen.

Folgende Eigenschaften sind für die automatische Erzeugung von Inhalten (.z.B. für die Erzeugung von Kapitelnummerierung) vorgesehen:

• content fügt automatisch Inhalte vor oder nach einem Selektor ein
• counter-increment
• counter-reset
• quotes

Die CSS-Eigenschaft content zeigt zusammen mit :before und :after einfache Zeichenketten zusätzlich zum Element an, setzt Bilder vor oder nach einem Element ein oder nummeriert verschachtelte geordnete Listen.

Beispiel: URL eines Links beim Druck ausgeben

Die generelle Syntax ist

selector:before { content: "<string>" attr(<x>) attr(<y>) "<string>"; }

Die CSS-Eigenschaft content setzt im folgenden Beispiel ein Bild vor einen Link und hinter den Link die ausgeschriebene Adresse in runde Klammern. Interessant ist eine derartige Eigenschaft z.B. für die Darstellung einer Webseite im Druck, wo der Benutzer mit dem reinen Text eines Links nichts anfangen kann.

a.show:before { content: url(bild.gif) " " attr(href) " "; }
…
<p><a class="show" href="…generated.html">Hier ist ein Link</a></p>

Hier ist ein Link

content

M1 N6 O5 S1 CSS2/CSS2.1 Erblich: Nein

content

wird zusammen mit den Pseudoelementen :before und :after benutzt, um Inhalte entweder vor oder hinter dem gebenen CSS-Selektor einzufügen. Der eingefügte Inhalt kann aus Zeichenketten, Hochkommas, URLs oder Zählern bestehen.

Werte

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

Beachten Sie bitte, dass content nicht vererbt wird. Da aber :before und :after ihre Eigenschaften vererben, können verschiedene CSS-Eigenschaften auf den Inhalt angewendet werden.

:after

bestimmt, dass Inhalte nach dem Element eingefügt werden, das durch den Selektor angegeben ist. Der Doppelpunkt ist erforderlich.
Syntax: selector:after { ... }.

:before

legt fest, dass Inhalte vor dem Element eingefügt werden, das durch den Selektor angegeben ist. Der Doppelpunkt ist erforderlich.
Syntax: selector:before { ... }.

none

verhindert die Generierung des Pseudoelements

normal

wirkt wie none

<counter>

(name, string, list-style-type) fügt alle Zähler mit Namen als Inhalt ein und stellt sie in dem angegebenen Listenstil dar (z.B. decimal 1,2,3 ..., upper-latin I, II, III …).

close-quote

close-quote fügt ein schließendes Hochkomma ein, wie es in der CSS-Eigenschaft für verschachtelte Hochkommas definiert ist.

no-close-quote

fügt kein schließendes Hochkomma ein, sondern zählt die CSS-Eigenschaft quotes herunter.

no-open-quote

fügt kein öffnendes Hochkomma ein, sondern zählt die CSS-Eigenschaft quotes hoch.

open-quote

fügt ein öffnendes Hochkomma ein, wie es in der CSS-Eigenschaft für verschachtelte Hochkommas definiert ist.

string

fügt eine Zeichenkette oder einen Text in Hochkommas ein.

<uri>

ist eine externe Resource – z.B. die Adresse eines Bildes.

zurück zum Seitenanfang