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

16 Text
16.1 Einrückung: die 'text-indent'-Eigenschaft
16.2 Ausrichtung: die 'text-align'-Eigenschaft
16.3 Ausschmückung
16.3.1 Unterstreichen , Überstreichen , Durchstreichen und Blinken: die 'text-decoration'-Eigenschaft
16.3.2 Textschatten: die 'text-shadow'-Eigenschaft
16.4 Buchstaben- und Wortabstände: die 'letter-spacing'- und 'word-spacing'-Eigenschaften
16.5 Großschreibung: die 'text-transform'-Eigenschaft
16.6 Leerraum: die 'white-space'-Eigenschaft

16 Text

Die in den folgenden Abschnitten definierten Eigenschaften beeinflussen die visuelle Darstellung von Zeichen, Leerzeichen, Wörtern und Absätzen.

16.1 Einrückung: die 'text-indent'-Eigenschaft

'text-indent'

Wert:

<length> | <percentage | inherit

Ausgangswert:

0

Angewendet auf:

Elemente auf Blockebene

Vererbt:

Ja

Prozentwerte:

Beziehen sich auf die Breite des umschließenden Blocks

Medium:

Visual

Diese Eigenschaft gibt die Einrückung der ersten Textzeile in einem Block an. Genauer gesagt, sie gibt die Einrückung der ersten Box an, die in die erste Zeilen-Box des Blocks einfließt. Die Box wird relativ zur linken Kante der Zeilenbox eingerückt (für ein Rechts-nach-Links-Layout relativ zur rechten Kante). Benutzerprogramme sollten diese Einrückung als Leerzeichen darstellen.

Die Werte haben die folgenden Bedeutungen:

<length>
Die Einrückung erfolgt um einen feststehenden Betrag.
<percentage>
Die Einrückung erfolgt um einen Prozentsatz der Breite des umschließenden Blocks.

Der Wert 'text-indent' kann negativ sein, aber es gibt von der Implementierung abhängige Grenzen.

Beispiel

Das folgende Beispiel bewirkt eine Texteinrückung um '3em'.

  P { text-indent: 3em }

16.2 Ausrichtung: die 'text-align'-Eigenschaft

'text-align'

Wert:

left | right | center | justify | <string> | inherit

Ausgangswert:

Vom Benutzerprogramm und der Schreibrichtung abhängig

Angewendet auf:

Elemente auf Blockebene

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

Visual

Diese Eigenschaft beschreibt, wie Inline-Inhalt eines Blocks ausgerichtet wird. Die Werte haben die folgenden Bedeutungen:

left, right, center und justify
Richtet einen Text linksbündig, rechtsbündig, zentriert bzw. beidseitig aus.
<string>
Gibt einen String an, nach dem die Zellen einer Tabelle ausgerichtet werden (detaillierte Informationen und ein Beispiel finden Sie im Abschnitt 17.5.4 über die horizontale Ausrichtung in einer Spalte). Dieser Wert gilt nur für Tabellenzellen. Wird er für andere Elemente gesetzt, wird er wie 'left' oder 'right' behandelt, abhängig davon, ob 'direction' 'ltr' oder 'rtl' ist.

Ein Textblock ist ein Stapel aus Zeilen-Boxen. Für 'left', 'right' und 'center' gibt diese Eigenschaft an, wie die inzeiligen Boxen innerhalb jeder Zeilen-Box entlang der linken oder rechten Seiten der Zeilen-Box ausgerichtet sind; die Ausrichtung erfolgt nicht relativ zum Viewport. Im Fall von 'justify' kann das Benutzerprogramm die inzeiligen Boxen zusätzlich strecken, um sie an ihren Positionen auszurichten. (Weitere Informationen finden Sie auch unter 'letter-spacing' und 'word-spacing', siehe weiter unten).

Beispiel

Beachten Sie, dass 'text-align' in diesem Beispiel vererbt ist, und deshalb für alle Elemente auf Blockebene innerhalb des DIV-Elements mit 'class=center' der Inline-Inhalt zentriert ist.

DIV.center { text-align: center }

Hinweis: Welcher Algorithmus für die eigentliche Ausrichtung verwendet wird, ist vom Benutzerprogramm und der geschriebenen Sprache abhängig.

Konforme Benutzerprogramme dürfen den Wert 'justify' als 'left' oder 'right' interpretieren, abhängig davon, ob die Standardschreibrichtung des Elements von links nach rechts oder von rechts nach links ist.

16.3 Ausschmückung

16.3.1 Unterstreichen , Überstreichen , Durchstreichen und Blinken: die 'text-decoration'-Eigenschaft

'text-decoration'

Wert:

None | [underline | | overline | | line-through | | blink ] | inherit

Ausgangswert:

None

Angewendet auf:

Alle Elemente

Vererbt:

Nein (siehe Text)

Prozentwerte:

N/A

Medium:

visual

Diese Eigenschaft beschreibt Ausschmückungen, die dem Text eines Elements hinzugefügt werden. Wird die Eigenschaft für ein Element auf Blockebene angegeben, beeinflusst sie alle Ableitungen des Elements auf Inline-Ebene. Wird sie für ein Element auf Inline-Ebene angegeben (oder betrifft sie dieses), beeinflusst sie auch alle von dem Element erzeugten Boxen. Hat das Element keinen Inhalt oder keinen Textinhalt (z.B. das IMG-Element in HTML), müssen Benutzerprogramme diese Eigenschaft ignorieren .

Die Werte haben die folgenden Bedeutungen:

none
Erzeugt keine Textausschmückung.
underline
Jede Textzeile ist unterstrichen.
overline
Jede Textzeile hat eine Überstreichung.
line-through
Jede Textzeile ist mittig durchgestrichen.
blink
Der Text blinkt (er wechselt zwischen sichtbar und unsichtbar). Konforme Benutzerprogramme müssen diesen Wert nicht unterstützen.

Die für die Textausschmückung benötigten Farben sollen vom Wert der 'color'-Eigenschaft abgeleitet werden.

Die Eigenschaft wird nicht vererbt, aber die abgeleiteten Boxen einer Block-Box sollten mit derselben Ausschmückung formatiert werden (z.B. sollten sie alle unterstrichen dargestellt sein). Die Farbe der Ausschmückungen sollte immer dieselbe bleiben, selbst wenn die abgeleiteten Elemente andere 'color'-Werte haben.

Beispiel

Im folgenden Beispiel für HTML wird der Textinhalt aller A-Elemente, die als Hyperlinks dienen, unterstrichen dargestellt:

A[href] { text-decoration: underline }

16.3.2 Textschatten: die 'text-shadow'-Eigenschaft

'text-shadow'

Wert:

none | [<color | | <length> <length> <length>?,]* [<color> | | <length> <length> <length>?] | inherit

Ausgangswert:

none

Angewendet auf:

Alle Elemente

Vererbt:

Nein (siehe Text)

Prozentwerte:

N/A

Medium:

visual

Diese Eigenschaft nimmt eine Liste durch Kommas voneinander getrennter Schatteneffekte entgegen, die auf den Text des Elements angewendet werden. Die Schatteneffekte werden in der angegebenen Reihenfolge angewendet und können sich somit überlagern, aber sie überlagern niemals den eigentlichen Text. Schatteneffekte verändern die Größe einer Box nicht, können sich aber über ihre Grenzen hinaus erstrecken. Die Stapelebene der Schatteneffekte ist dieselbe wie für das eigentliche Element.

Jeder Schatteneffekt muss einen Abstand für den Schatten und kann optional einen Überblendradius und eine Schattenfarbe angeben.

Ein Schattenabstand wird mit zwei <length>-Werten angegeben, die den Abstand vom Text spezifizieren. Der erste Längenwert bestimmt den horizontalen Abstand zur rechten Textseite. Ein negativer Wert für die horizontale Länge platziert den Schatten links vom Text. Der zweite Längenwert gibt den vertikalen Abstand unterhalb des Texts an. Ein negativer Wert für die vertikale Länge platziert den Schatten oberhalb des Textes.

Optional kann nach dem Schattenabstand ein Überblendradius angegeben werden. Der Überblendradius ist ein Längenwert, der die Grenzen des Überblendeffekts bestimmt. Der genaue Algorithmus für die Berechnung des Überblendeffekts ist nicht vorgegeben.

Optional kann vor oder hinter den Längenwerten des Schatteneffekts ein Farbwert angegeben werden. Der Farbwert wird als Grundlage für den Schatteneffekt verwendet. Wird keine Farbe angegeben, wird stattdessen auf den Wert der 'color'-Eigenschaft zurückgegriffen.

Textschatten können in Kombination mit den Pseudo-Elementen :first-letter und :first-line verwendet werden.

Beispiel

Das folgende Beispiel setzt einen Textschatten rechts und unterhalb des Elementtexts. Weil keine Farbe angegeben wurde, hat der Schatten dieselbe Farbe wie das eigentliche Element, und weil kein Überblendradius angegeben ist, wird der Textschatten langsam ausgeblendet:

H1 { text-shadow: 0.2em 0.2em }

Das nächste Beispiel platziert einen Schatten rechts und unterhalb des Elementtexts. Der Schatten hat eine 5px breiten Überblendradius und ist rot.

H2 { text-shadow: 3px 3px 5px red }

Das nächste Beispiel gibt eine Liste mit Schatteneffekten an. Der erste Schatten liegt rechts und unterhalb des Elementtexts und ist rot ohne Überblendung. Der zweite Schatten überlagert den ersten Schatteneffekt, er ist gelb, wird langsam ausgeblendet und links und unterhalb des Texts platziert. Der dritte Schatteneffekt wird rechts und oberhalb des Texts platziert. Weil für den dritten Schatteneffekt keine Schattenfarbe angegeben ist, wird der Wert der 'color'-Eigenschaft des Elements verwendet:

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

Betrachten Sie das folgende Beispiel:

SPAN.glow { 
background: white;
color: white;
text-shadow: black 0px 0px 5px;
}

Hier haben die 'background'- und 'color'-Eigenschaften denselben Wert, und die 'text-shadow'-Eigenschaft wird verwendet, um einen „Sonnenfinsterniseffekt“ zu erzeugen:

Hinweis. Diese Eigenschaft ist in CSS1 nicht definiert. Einige Schatteneffekte (wie beispielsweise der aus dem letzten Beispiel) zeigt diesen Text in Benutzerprogrammen, die nur CSS1 unterstützen, möglicherweise unsichtbar an.

16.4 Buchstaben- und Wortabstände: die 'letter-spacing'- und 'word-spacing'-Eigenschaften

'letter-spacing'

Wert:

normal | <length> | inherit

Ausgangswert:

normal

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

visual

Diese Eigenschaft gibt das Abstandsverhalten zwischen Textzeichen an. Die Werte haben die folgenden Bedeutungen:

normal
Der Abstand ist der normale Abstand für die aktuelle Schrift. Dieser Wert erlaubt, dass das Benutzerprogramm den Abstand zwischen Zeichen ändert, um Text auszurichten.
<length>
Dieser Wert gibt den Abstand zwischen den Zeichen zusätzlich zu dem Standardabstand zwischen Zeichen an. Werte können negativ sein, aber es kann von der jeweiligen Implementierung abhängige Grenzen geben. Benutzerprogramme dürfen den Leeraum zwischen den Buchstaben nicht weiter vergrößern oder verkleinern, um Text auszurichten.

Algorithmen für die Zeichenabstände sind vom Benutzerprogramm abhängig. Die Zeichenabstände können auch durch die Ausrichtung beeinflusst werden (siehe auch die Beschreibung der 'text-align'-Eigenschaft oben).

Beispiel

In diesem Beispiel wird der Abstand zwischen Zeichen in BLOCKQUOTE-Elementen um '0,1 em' vergrößert:

BLOCKQUOTE { letter-spacing: 0.1em }

Im folgenden Beispiel ist es dem Benutzerprogramm nicht erlaubt, den Abstand zwischen den Zeichen zu verändern:

BLOCKQUOTE { letter-spacing: 0cm }   /* Wie '0' */

Wenn der resultierende Abstand zwischen zwei Zeichen nicht derselbe wie der Standardabstand ist, sollten die Benutzerprogramme keine Ligaturen verwenden.

Konforme Benutzerprogramme könnten den Wert der 'letter-spacing'-Eigenschaft als 'normal' interpretieren.

'word-spacing'

Wert:

normal | <length> | inherit

Ausgangswert:

normal

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

visual

Diese Eigenschaft gibt das Abstandsverhalten zwischen Wörtern an. Die Werte haben die folgenden Bedeutungen:

normal
Der normale Abstand zwischen Wörtern, wie durch die aktuelle Schrift und/oder das Benutzerprogramm definiert.
<length>
Dieser Wert gibt den Abstand zwischen Wörtern zusätzlich zum Standardabstand zwischen Wörtern an. Die Werte können negativ sein, aber möglicherweise gibt es von der Implementierung abhängige Obergrenzen.

Algorithmen für den Wortabstand sind vom Benutzerprogramm abhängig. Der Wortabstand wird außerdem durch die Ausrichtung beeinflusst (siehe auch die Informationen zur 'text-align'-Eigenschaft).

Beispiel

In diesem Beispiel wird der Wortabstand zwischen jedem Wort in H1-Elementen um '1em' erhöht.

H1 { word-spacing: 1em }

Konforme Benutzerprogramme können den Wert der 'word-spacing'-Eigenschaft als 'normal' interpretieren.

16.5 Großschreibung: die 'text-transform'-Eigenschaft

'text-transform'

Wert:

capitalize | uppercase | lowercase | none | inherit

Ausgangswert:

none

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

visual

Diese Eigenschaft steuert die Effekte zur Großschreibung von Text. Die Werte haben die folgenden Bedeutungen:

capitalize
Schreibt das erste Zeichen eines jeden Wortes in Großbuchstaben.
uppercase
Wandelt alle Zeichen eines jeden Wortes in Großbuchstaben um.
lowercase
Wandelt alle Zeichen eines jeden Wortes in Kleinbuchstaben um.
none
Keine Effekte zur Großschreibung.

Die eigentliche Umwandlung ist für jeden dieser Fälle von der geschriebenen Sprache abhängig. Möglichkeiten, die Sprache eines Elements festzustellen, finden Sie in RFC 2070 ([RFC2070]).

Konforme Benutzerprogramme können den Wert von 'text-transform' für Zeichen, die nicht aus dem Latin-1-Repertoire stammen auf 'none' setzen, ebenso für Elemente in Sprachen, für die sich die Umwandlung von der in den Fallumwandlungstabellen von ISO 10646 ([ISO10646]) unterscheidet.

Beispiel

In diesem Beispiel wird der gesamte Text in einem H1-Element in Großbuchstaben umgewandelt.

H1 { text-transform: uppercase }

16.6 Leerraum: die 'white-space'-Eigenschaft

'white-space'

Wert:

normal | pre | nowrap | inherit

Ausgangswert:

Normal

Angewendet auf:

Elemente auf Blockebene

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

visual

Diese Eigenschaft deklariert, wie Leerraum innerhalb des Elements behandelt wird. Die Werte haben die folgenden Bedeutungen:

normal
Dieser Wert weist Benutzerprogramme an, Leerraum-Folgen zu komprimieren und bei Bedarf Zeilen umzubrechen, um Zeilen-Boxen zu füllen. Es können zusätzliche Zeilenumbrüche erzeugt werden, wenn „\A“ in erzeugtem Inhalt (z.B. für das BR-Element in HTML) auftritt.
pre
Dieser Wert verhindert, dass Benutzerprogramme Leerraum-Folgen komprimieren. Zeilen werden nur an Neuezeile-Zeichen der Quelle umbrochen, oder wenn im erzeugten Inhalt „\A“ auftritt.
nowrap
Dieser Wert komprimiert Leerraum wie für 'normal', unterdrückt aber Zeilenumbrüche innerhalb von Text, außer diejenigen, die durch „\A“ in erzeugtem Inhalt erzeugt werden (z.B. für das BR-Element in HTML).

Beispiel

Die folgenden Beispiele zeigen, welches Leerraum-Verhalten von den PRE- und P-Elementen erwartet wird, und zudem das "nowrap"-Attribut in HTML.

PRE        { white-space: pre }
P { white-space: normal }
TD[nowrap] { white-space: nowrap }

Konforme Benutzerprogramme können die 'white-space'-Eigenschaft in Autor- und Benutzer-Stylesheets ignorieren, müssen aber einen Wert dafür im Standard-Stylesheet angeben.