Cascading Stylesheets Stil mit <Stil>

CSS2-Referenz | HTML-4.01-Referenz | Farben, Zeichen und Maße | Workshop | Externe Links | Impressum | Hinweise

# Generated Content – Eigenschaften für dynamisch generierte Inhalte

Für die automatische Erzeugung von Inhalten in Aufzählungen und Mengentext und deren Durchnummerierung sind die Eigenschaften der Gruppe content verantwortlich. Vier Eigenschaften sind für die Formatierung von Texten spezifiziert:

content • counter-increment • counter-reset • quotes

## content

M1 N6 O5+ Erblich: Nein Version: CSS2 | content wird zusammen mit den Pseudoelementen :before und :after benutzt, um Inhalte entweder vor oder hinter dem angegebenen CSS-Selektor einzufügen. Der eingefügte Inhalt kann aus Zeichenketten, Hochkommas, URLs oder Zählern bestehen. | attr(alt) | counter(name) | counter(name, list-style-type) | counters(name, string) | counters(name, string, list-style-type) | no-close-quote | no-open-quote | close-quote | open-quote | string | url("urladdress")

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

Syntax: selector:after { ... }.

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

Syntax: selector:before { ... }.

content weist elf mögliche Werte auf:

- attr(alt) fügt den Text im alt-Attribut als Inhalt ein.
- counter(name) fügt einen Zähler mit Namen als Inhalt ein.
- counter(name, list-style-type) fügt einen Zähler mit Namen als Inhalt ein, der in dem angegebenen Listenstil dargestellt wird (z.B. decimal 1,2,3 ..., upper-latin I, II, III ...).
- counters(name, string) fügt alle Zähler mit Namen als Inhalt ein.
- counters(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 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.
- url("urladdress") ist eine URL-Adresse in Hochkommas.

#### Beispiel

    h1 {  color: #666666; font: 16px Verdana }
    h1:before {  content: "Kapitel "attr(title)" ";
                 color: red;
                 font: bold 16px/120% Georgia, Times }
    ...
    <h1 title="1">Background - Eigenschaften f&uuml;r den Hintergrund</h1>
    <p>Stile f&uuml;r die Gestaltung des Hintergrunds von Elementen</p>
    <h1 title="2"> Border - Eigenschaften f&uuml;r den Rahmen</h1>
    <p>Stile f&uuml;r die Gestaltung eines Rahmens um ein Element</p>
    <h1 title="3">Dimension</h1>
    <p>Stile f&uuml;r die Abmessungen und Ausrichtung von Elementen </p>

#### Bemerkung

Mozilla sowie Netscape unterstützen lediglich das Einfügen einfacher Inhalte wie Texte oder Bilder, allerdings auch attr- und url-Werte. Zähler hingegen sind nur in Opera 5+ implementiert.

Und so sollte es aussehen, wenn ein Browser den Stil content unterstützt:

Die Nummerierung der Kapitel wird durch das title-Attribut des <h1>-Tags bewirkt. Dabei könnte das title-Attribut von einem PHP-Skript auch als dynamischer Inhalt aus der Datenbank geliefert werden.

↑

## counter-increment

O5+ Erblich: Nein Version: CSS2 | counter-increment ist eine Liste von einem oder mehreren Paaren von identifier und number, die zu einem Selektor gehören und durch Leerzeichen voneinander getrennt sind. Jedes Paar setzt den numerischen Wert fest, durch den der Zähler jedes Mal, wenn der spezifische Selektor vorgefunden wird, erhöht wird. Wenn der numerische Wert number nicht angegeben ist, wird per Vorgabe der Zähler um "1" erhöht. Auf diese Weise können z.B. aufeinander folgende Textpassagen oder Bilder durchnummeriert werden. | none | [ identifier number? ]+

Wenn die display-Eigenschaft des Elements auf none gesetzt ist, wird der Zähler nie erhöht. Wenn die visibility-Eigenschaft des Elements auf hidden gesetzt ist, kann der Zähler erhöht werden.

none ist die Voreinstellung und verhindert das Hochzählen des Zählers.

identifier number Der Identifier-Teil des Wertepaares ist zwingend erforderlich, denn er identifiziert den Zähler und kann sich auf eine Klasse, einen Identifier oder Selektor beziehen. Der Zahlenwert number des Wertepaares ist optional und kann negative oder positive Werte annehmen. Wenn er nicht angegeben ist, wird der Zähler per Vorgabe um "1" erhöht.

#### Beispiel

    h1 {  color: #666666; font: 16px Verdana, sans-serif}
    h1:before { content:"Kapitel " counter(kapitel) "  ";
                counter-increment: kapitel;
                color: red;
                font: bold 16px/120% Georgia, serif }
    ...
    <h1>Background - Eigenschaften f&uuml;r den Hintergrund</h1>
    <p>Stile f&uuml;r die Gestaltung des Hintergrunds von Elementen</p>
    <h1> Border - Eigenschaften f&uuml;r den Rahmen</h1>
    <p>Stile f&uuml;r die Gestaltung eines Rahmens um ein Element</p>
    <h1>Dimension</h1>
    <p>Stile f&uuml;r die Abmessungen und Ausrichtung von Elementen </p>

Und so sollte es aussehen, wenn ein Browser das Hochzählen unterstützt:

In diesem Beispiel wird die Nummerierung der Kapitel einzig durch die Eigenschaft counter-increment des Stylesheets bewirkt.

↑

## counter-reset

O5+ (mit Einschränkungen) Erblich: Nein Version: CSS2 | counter-reset ist eine Liste von einem oder mehreren Paaren von identifier und number, die durch Leerzeichen voneinander getrennt sind und einem Selektor zugewiesen sind. Jedes Paar setzt den numerischen Wert des Zählers auf den Wert number zurück, wenn der spezielle Selektor vorgefunden wird. Wenn number nicht angegeben ist, wird der Zähler per Vorgabe auf null zurückgestellt. Auf diese Weise können aufeinander folgende Kapitel, Unterkapitel und Bilder mit 1.0, 1.1, 1.2 ... fortlaufend nummeriert werden. | none | [ identifier number? ]+

Wenn die display-Eigenschaft eines Elements mit none angegeben ist, kann der Zähler nicht zurückgesetzt werden. Wenn die visibility-Eigenschaft eines Elements mit hidden angegeben ist, kann der Zähler zurückgesetzt werden.

none ist die Voreinstellung und verhindert, dass der Zähler zurückgesetzt wird.

identifier number Der Identifier-Wert des Wertepaares ist zwingend erforderlich und identifiziert den Zähler. Er kann durch eine Klasse, eine id oder durch einen Selektor angesprochen werden. Der optionale numerische Wert ist der Wert, auf den der Zähler zurückgesetzt wird, wenn der spezifische Selektor vorgefunden wird. number kann positive und negative Werte annehmen. Wenn number nicht angegeben ist, wird der Zähler per Vorgabe auf "0" zurückgesetzt.

Der folgende Beispielcode vom W3C nummeriert Kapitel als 1, 1.1, 1.1.1 usw.

#### Beispiel

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

↑

## quotes

IE5 (Mac) Version: CSS2 Erblich: Ja | quotes ist eine Liste von einem oder mehreren Typen von öffnenden und schließenden Anführungszeichen, die durch Leerzeichen voneinander getrennt sind. So können spezielle Anführungszeichen gewählt werden, wenn die content-Eigenschaft Anführungszeichen vor oder hinter ein spezifisches Element setzt und dabei Stil und inhaltsabhängige Darstellungen bewahrt bleiben. (Anführungszeichen müssen nicht gesetzt werden. Wenn der eingesetzte Inhalt eine einfache Zeichenkette ist, kann man genauso gut <, >, *, ? oder beliebige andere Zeichen benutzen.) | none | [ string string? ]+

none verhindert die Darstellung von Anführungszeichen in der content-Eigenschaft.

string string kommt immer paarweise vor und definiert ein Paar aus öffnenden und schließenden Hochkommas. Die erste Zeichenfolge string definiert die öffnenden Hochkommas, die zweite Zeichenfolge string die schließenden Hochkommas. Jedes Anführungszeichen muss in doppelte öffnende und schließende Hochkommas gesetzt werden und darf keine Leerzeichen enthalten. Wenn Leerzeichen enthalten sind, werden sie dargestellt.

#### Beispiel

    <html>
    <style type="text/css">

    q:lang(en) { quotes: """ """ "'" "'" } oder
    q:lang(ge) { quotes: "»" "«" ">" "<"  }
    </style>
    ...
    <q>Dies sind <q>eingebettete</q> Hochkommas.</q>
    ...
    <html>

####
Darstellung

»Dies sind >eingebettete< Hochkommas.«

↑

aural Stile für die Sprachausgabe

border Stile für die Gestaltung eines Rahmens um ein Element

color und background Stile für die Vordergrundfarbe und Hintergrundgestaltung

content Stile für automatisch generierten Inhalt

dimension Stile für die Abmessungen und Ausrichtung von Elementen

font Stile für die Schriftgestaltung

lists and markers Stile für Aufzählungen und Listen

margin Stile für den Abstand eines Elements gegen umgebende Elemente

padding Stile für den inneren Abstand zum Element

paged media Stile für den Druck

positioning Stile für die Positionierung

Pseudoklassen und Pseudoelemente Stile für die Gestaltung von Pseudolinks und Pseudoelementen

table Stile für die Gestaltung von Tabellen

text Stile für die Absatzgestaltung

user interface Stile für die Gestaltung der Benutzeroberfläche durch Rahmen und Mauszeiger

Cascading Styleheets – Stil mit <Stil> • Das Begleitmaterial zum Buch
© media engineering Ulrike Häßler 2002 • Frechen