CSS 2.1 ::Grundlegendes
CSS-Wertangaben
Jede CSS-Deklaration besteht aus einer Eigenschaft und einem oder mehreren Werten, deshalb kommt den Werten in CSS eine ebenso hohe Bedeutung zu wie den Eigenschaften selbst. Die Werte lassen sich auf verschiedene Weise unterteilen, am sinnvollsten ist zunächst die Einteilung nach der Verwendbarkeit: Zum einen gibt es Schlüsselworte, die nur für eine einzige Eigenschaft anwendbar sind, z. B. underline, hebrew oder small-caps. Dieser Gruppe gehören die meisten Werte an.
Der anderen Gruppe kann man alle generischen Werte zuordnen. Diese Werte sind für eine Reihe von Eigenschaften verwendbar. Sie repräsentieren meistens physikalische Einheiten.
Das Kapitel Schnellreferenz gibt eine Übersicht aller Werte für jede Eigenschaft. In der Vollreferenz werden die Werte dann ausführlich erläutert. Der Artikel CSS-Werte richtig interpretieren erklärt die Syntax der erlaubten Werte in der Spezifikation.
Farben
Da Farbwerte zu den grundlegenden Angaben in Websites gehören, gibt es ein ganze Reihe verschiedener Möglichkeiten, sie zu deklarieren. Die umfassende Behandlung der Farbwerte würde den Rahmen dieser Seite sprengen und wurde deshalb auf die Extraseite Farbwerte ausgelagert.
Frequenzen
Frequenzangaben bestehen stets aus einer numerischen Angabe, an die ohne Zwischenraum der Identifizierer einer Frequenzeinheit angehängt ist. Die Zahlenangabe darf nicht negativ sein, wenn sie 0 ist, kann die Angabe zur Einheit weggelassen werden. Mögliche Identifizierer sind:
hz für 'Hertz'
khz für 'Kilohertz'
Beispiel:
{ pitch: 10khz; }
Frequenzen treten unter CSS 2.1 nur im Zusammenhang mit auralen Eigenschaften auf. Da aber bis heute kein Browser diese Eigenschaften unterstützt, ist auch die Unterstützung von Frequenzangaben praktisch nicht vorhanden.
TOP
Längenwerte
Werte für Längenangaben stellen die größte und wichtigste Gruppe von CSS-Werten dar. Deshalb werden auch die Längenwerte auf einer Extraseite behandelt.
Prozente
Prozentwerte werden in CSS nicht nur für Dimensionen, sondern auch für andere Eigenschaften verwandt. Daher ist ihnen im Rahmen dieser Website eine eigene Seite gewidmet.
URI (Uniform Resource Identifier)
URI-Werte sind praktisch Webadressen, die auf bestimmte Dateien im Web zeigen. Dies können generell beliebige Dateien sein, innerhalb von CSS-Deklarationen erkennen die meisten Browser aber nur grafische Dateien. Es gibt absolute und relative URIs. Eine relative URI wird, abhängig von der Basis-URI, immer auf eine absolute URI zurückgeführt. Die Basis-URI ist immer der Pfad des Stylesheets, nicht der Pfad des Dokumentes selbst. Verwendet man externe CSS-Dateien, ist dies das Verzeichnis, in dem die Dateien untergebracht sind. Bei Verwendung interner Stylesheets ist der Pfad identisch mit dem Pfad des Dokumentes. (Un)rühmliche Ausnahme ist hier Navigator 4.x, der eine relative URI auf den Pfad des Dokuments selbst bezieht.
Beispiel für eine absolute URI:
{ background-image: url(http://www.thestyleworks.info/images/css-back-3.gif) }
Beispiel für eine relative URI, die auf dieselbe Datei zeigt:
{ background-image: url(/images/css-back-3.gif) }
Die Syntax: eine URI wird immer in runde Klammern eingefasst, denen die Kennung url vorangestellt ist. Zusätzlich sind Hochkommata oder Anführungszeichen erlaubt.
Die folgenden drei Beispiele bedeuten dasselbe:
{ background-image: url(/graphics/css-back.gif) }
{ background-image: url('/graphics/css-back.gif') }
{ background-image: url("/graphics/css-back.gif") }
Eine URI selbst darf auch runde Klammern, Anführungszeichen, Hochkommata, Leerzeichen oder Kommas enthalten. Diese müssen dann aber durch einen vorangestellten Backslash (\) 'entschärft' werden.
URI-Werte sind für visuelle und aurale Eigenschaften definiert, werden aber bis heute von allen Browsern nur für visuelle Eigenschaften unterstützt. Darüber hinaus stellt die Spezifikation es den Browsern frei, wie sie sich verhalten, wenn die angegebene Datei nicht dem Kontext angemessen oder nicht vorhanden ist.
TOP
Winkel
Winkelangaben bestehen stets aus einer numerischen Angabe, an die ohne Zwischenraum der Identifizierer einer Winkelmaßeinheit angehängt ist. Eine negative Zahlenangabe wird in ihr positives Äquivalent umgeformt, z. B. wird -45deg nach 315deg umgerechnet. Wenn sie 0 ist, kann die Angabe zur Einheit weggelassen werden. Mögliche Identifizierer sind:
deg für Winkel in 'Grad' (engl. 'degree'), ein Vollkreis entspricht 360 Grad.
grad für Winkel in 'Gon' (engl. 'grad'), ein Vollkreis entspricht 400 Gon.
rad für Winkel in 'Bogenmaß' (engl. 'radians'), ein Vollkreis entspricht 2 Pi = 6.2831853.
Beispiel:
{ elevation: 20deg; }
Winkelangaben treten unter CSS 2.1 nur nur im Zusammenhang mit auralen Eigenschaften auf. Da aber bis heute kein Browser diese Eigenschaften unterstützt, ist auch die Unterstützung von Winkelmaßen praktisch gleich null.
TOP
Zahlenwerte
für einige Eigenschaften sind auch reine Zahlenwerte ohne Identifizierer zugelassen. Das ist immer dann der Fall, wenn aus dem Kontext die Bedeutung der Zahl klar hervorgeht, wenn es sich um reine Verhältniswerte handelt oder wenn die Werte auf einen genau definierten Bereich beschränkt sind. Alle Zahlenwerte werden nur in Dezimalsystem notiert. Es gibt zwei Möglichkeiten:
<integer>: Eine positive ganze Zahl mit einer oder mehreren Stellen. Ganze Zahlen sind auf folgende Eigenschaften anwendbar: counter-increment, counter-reset, orphans, widows und z-index.
<number>: Eine ganze oder reelle Zahl mit einer beliebigen Anzahl von Vor- und Nachkommastellen. Sie kann positiv oder negativ sein. Wenn sie positiv ist, darf auch ein '+' vorangestellt sein. Möglich ist diese bei folgenden Eigenschaften: font-size-adjust, line-height, pitch-range, richness, speech-rate, stress und volume.
Beispiele:
{ z-index: 300; }
{ line-height: 16.66; }
Zeichenketten
Zeichenketten werden als Werte nur in wenigen Eigenschaften verwendet, die zudem alle nur von einem Teil der modernen Browser dargestellt werden. Sie werden durch Anführungszeichen oder Hochkommata eingefasst. Die zur Einfassung verwendeten Zeichen dürfen innerhalb des Strings nur mit vorangestelltem Backslash (\) auftreten.
Falsch:
{ content: "Gott sprach: "Es werde Licht!""; }
Richtig:
{ content: "Gott sprach: \"Es werde Licht!\"";}
Oder besser:
{ content: "Gott sprach: 'Es werde Licht!'"; }
Andere Möglichkeit, auch richtig:
{ content: 'Gott sprach: "Es werde Licht!"'; }
Zeichenketten können von beliebiger Länge sein, sie können sogar im Quelltext über mehrere Zeilen gehen. In dem Fall muss jedem Zeilensprung ein '\' vorangestellt werden.
Beispiel:
p { content: "Wer reitet so spät\ bei Nacht und Wind?" }
Ergebnis:
Wer reitet so spät bei Nacht und Wind?
Will man erreichen, dass innerhalb des generierten Texts auch Zeilenumbrüche ausgegeben werden, kann man die Escape- Sequenz "\A" verwenden.
Beispiel:
p { content: "Wer reitet so spät\Abei Nacht und Wind?" }
Ergebnis:
Wer reitet so spät
bei Nacht und Wind?
Zeitangaben
Zeitangaben bestehen stets aus einer numerischen Angabe, an die ohne Zwischenraum der Identifizierer einer Zeiteinheit angehängt ist. Die Zahlenangabe darf nicht negativ sein. Wenn sie 0 ist, kann die Angabe zur Einheit weggelassen werden. Mögliche Identifizierer sind:
s für 'Sekunde'
ms für 'Millisekunde'
Beispiel:
{ pause: 300ms; }
Zeitangaben treten unter CSS 2.1 nur nur im Zusammenhang mit auralen Eigenschaften auf. Da aber bis heute kein Browser diese Eigenschaften unterstützt, ist auch die Unterstützung von Zeitangaben praktisch nicht gegeben.
TOP
(inherit)
Die Beschreibung des Wertes inherit wurde in den Artikel Vererbungsregeln in CSS übernommen. Dort ist auch das Prinzip der Vererbung genau erklärt.
Nicht unterstützte Werte
Wenn ein Anwenderprogramm in einer Regel einen Wert findet, den es nicht unterstützt, dann muss es diesen Wert wie einen unerlaubten Wert behandeln und ignorieren. Es ist nicht erlaubt, dass der Browser z. B. versucht, eine der gewünschten Bildschirmausgabe nahekommende Dartellung zu erzeugen.
Ebenfalls nicht erlaubt ist, dass der Browser in dieser Situation die Abarbeitung der Regel abbricht. Wenn noch weitere Regeln folgen, deren Werte der Browser unterstützt, dann muss er diese auch darstellen.
TOP
