CSS 2.1 ::Grundlegendes
Wertesyntax richtig interpretieren
Wer schon einmal im Original der CSS-Spezifikation gelesen hat, dem ist sicher die komplizierte Schreibweise der möglichen Werte aufgefallen. Diese Syntax folgt genauen Regeln, die an verschiedenen Stellen der Spezifikation beschrieben sind.
Deshalb soll dieser Artikel (für alle, die sich näher mit der Spezifikation befassen wollen) die formelle Syntax und die verwendeten Symbole der CSS-Werte zusammenfassen und erläutern.
Auf dieser Seite geht es also um die Syntax der Erläuterung innerhalb der CSS-2.1-Spezifikation. Die Syntax der notierten Werte innerhalb des Stylesheets ist im Artikel Aufbau der CSS-Regeln erklärt.
Die folgenden Symbole können in der Beschreibung aller Eigenschaften auftreten:
- Spitze Klammern:
<und> - Fragezeichen:
? - Plus-Zeichen:
+ - Stern:
* - (Leerzeichen)
Drei bzw. vier Symbole werden für die Eigenschaften verwendet, die mehrere alternative Werte haben können:
- Vertikale Balken: einfach (
|) und doppelt(||) - Eckige Klammern:
[und] - Geschweifte Klammern mit zwei Ziffern:
{x,y}
Stern, Plus-Zeichen, Fragezeichen und geschweifte Klammern können hinter jedem Werttyp, jedem Schlüsselwort oder jeder Wertgruppe auftreten.
Spitze Klammern: < und >
Spitze Klammern beinhalten meistens Ausdrücke, die für generische Wertangaben stehen, z. B. Farben-, Längen- oder Prozentwerte. (Generische Werte werden im Artikel 'CSS-Wertangaben' erläutert.) Im folgenden Beispiel aus der Spezifikation lassen sich für <color> beliebige Farbwerte einsetzen:
'color' Value: <color>
Umsetzungsbeispiele für das Stylesheet:
color: #ffcc00; color: navy; color: rgb(255,204,000);
Oft werden hier auch bestimmte sogenannte Werttypen eingesetzt, die ihrerseits wieder verschiedene Werte annehmen können. Ein gutes Beispiel dafür liefern die vier einzelnen Eigenschaften padding: der Werttyp padding-width lässt sich nicht im Stylesheet deklarieren, für ihn können aber Werte vom Typ <length> oder <percentage> eingesetzt werden. In CSS 2.1 sieht das so aus:
'padding-top', 'padding-right', 'padding-bottom', 'padding-left' Value: <padding-width>
Umsetzungsbeispiele für das Stylesheet:
padding-top: 1.0em; padding-left: 25%;
Eine dritte Möglichkeit findet sich bei der Beschreibung der Kurzschrift- Eigenschaften. Dort stehen die dazu gehörenden Einzeleigenschaften als Werttypen in den spitzen Klammern. Wichtig: diese Möglichkeit gilt für reguläre Werte, aber niemals für den Wert inherit. Im Beispiel kann die Eigenschaft cue die Werte der Einzeleigenschaften cue-before und cue-after annehmen:
'cue' Value: [ <'cue-before'> || <'cue-after'> ] | inherit
Umsetzungsbeispiel für das Stylesheet:
cue: url(/sounds/ping.wav) url(/sounds/pong.wav);
Fragezeichen: ?
Kurzfassung: 0-mal oder 1-mal.
Ein Fragezeichen steht hinter Werttypen oder Schlüsselwörtern (bzw. Gruppen davon), wenn diese optional sind. So können für die Eigenschaft border-spacing ein oder zwei Werte deklariert werden, deshalb ist der zweite Wert in der Spezifikation mit einem Fragezeichen versehen:
'border-spacing' Value: <length> <length>? | inherit
Umsetzungsbeispiele für das Stylesheet:
border-spacing: 1em; border-spacing: 5px 2px;
Plus-Zeichen: +
Kurzfassung: 1-mal oder mehrmals.
Ein Wert, auf den ein Plus-Zeichen folgt, kann beliebig oft wiederholt werden - er muss jedoch mindestens einmal auftreten. Das gleiche gilt auch für Wertgruppen. So definiert die Eigenschaft quotes die für Zitate verwendeten Anführungszeichen. Ein String für den Beginn und ein String für das Ende des Zitats muss definiert werden. Nach den ersten beiden Strings können noch weitere Sets von Anführungszeichen angegeben werden, die dann bei der Verschachtelung von Zitaten gelten.
'quotes' Value: [<string> <string>]+ | none | inherit
Umsetzungsbeispiele für das Stylesheet:
q:lang(en) { quotes: '"' '"' "'" "'" } q:lang(de) { quotes: "„" "”" '"' '"' }
Stern: *
Kurzfassung: 0-mal oder mehrmals.
Der Stern hat eine ähnliche Bedeutung wie das Plus-Zeichen, hier darf die davor stehende Wertangabe aber auch weggelassen werden, sie muss also mindestens 'null'-mal auftreten. Das erste der folgenden zwei Beispiele wurde der Spezifikation entnommen.
Die Eigenschaft font-family verlangt die Deklaration von einer oder mehreren Schriftarten, die spezifisch bzw. generisch sein können. Die Werte sind durch Kommata voneinander getrennt. Der erste Wert muss immer vorhanden sein, der zweite einschließlich des Kommas kann weggelassen oder beliebig oft wiederholt werden. Das zweite Beispiel zeigt eine alternative Notation, die aber dieselbe Bedeutung hat. (Der Wert inherit wurde aus Platzgründen entfernt.)
'font-family' Value: [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ]
'font-family' Value: [[ <family-name> | <generic-family>, ]* [ <family-name>| <generic-family>] ]
Umsetzungsbeispiele für das Stylesheet:
font-family: "trebuchet ms", verdana, sans-serif; font-family: "andale mono","courier new",monospace;
Leerzeichen
Durch Leerzeichen voneinander getrennte Werte sind nicht untereinander austauschbar, d. h. sie müssen im Stylesheet in der definierten Reihenfolge auftreten. Im Beispiel der Eigenschaft counter-increment muss der Werttyp <integer>, falls er notiert wird, immer hinter <identifier> stehen
'counter-increment' Value: [ <identifier> <integer>? ]+ | none | inherit
Umsetzungsbeispiele für das Stylesheet:
counter-increment: rechte-seite 2; counter-increment: kapitel 1;
Einfacher vertikaler Balken: |
Kurzfassung: alternatives 'oder'.
Ein senkrechter Balken wird verwendet, um mehrere alternative Werte voneinander zu trennen. Von diesen Werten ist genau einer (nicht mehr und nicht weniger) zu verwenden. So muss beispielsweise für die Eigenschaft font-variant entweder der Wert normal oder small-caps oder inherit deklariert werden.
'font-variant' Value: normal | small-caps | inherit
Umsetzungsbeispiel für das Stylesheet:
font-variant: small-caps;
Doppelte vertikale Balken: ||
Kurzfassung: einschließendes 'oder'.
Auch der vertikale Doppelbalken dient dazu, verschiedene alternative Werte voneinander zu trennen. Im Unterschied zum Einfachbalken können hier aber auch mehrere der genannten Werte in derselben Regel verwendet werden. Die Reihenfolge spielt dabei keine Rolle. Das Beispiel zeigt die möglichen Werte der Eigenschaft border. Es lassen sich ein, zwei oder drei Werte in beliebiger Reihenfolge deklarieren. (Der Wert inherit wurde aus Platzgründen entfernt.)
'border' Value: [ <border-width> || <border-style> || <'border-color'> ]
Umsetzungsbeispiele für das Stylesheet:
border: solid #abcdef; border: 1px solid; border: 1px solid #abcdef;
Eckige Klammern: [ und ]
Kurzfassung: Gruppierung.
Eckige Klammern fassen Teile der Definition zu einer Gruppe zusammen. Diese Gruppe kann dann nur als Ganzes auftreten, als Ganzes wiederholt werden usw. Dies wird oft durch ein Sonderzeichen hinter der schließenden Klammer, wie '+' oder '*', präzisiert. Das Beispiel für die Eigenschaft play-during zeigt, dass die Werte mix und repeat bedingt durch das Fragezeichen optional sind.
'play-during' Value: <uri> [ mix || repeat ]? | auto | none | inherit
Umsetzungsbeispiele für das Stylesheet:
play-during: url(/sounds/guitar.mp3) repeat; play-during: url(/sounds/drums.mp3);
Geschweifte Klammern: {x,y}
Geschweifte Klammern können hinter einzelnen Schlüsselworten, Werten oder Gruppen von Werten stehen. Innerhalb der Klammern stehen immer zwei Zahlen, die durch ein Komma getrennt sind. Sie geben an, wie oft der vorhergehende Wert mindestens und höchstens auftreten darf.
Sollte die Deklaration mehrere Werte aufweisen, müssen sie durch ein Leerzeichen voneinander getrennt werden. Die vorgegebene Reihenfolge ist dann zwingend.
Die für das Beispiel verwendete Eigenschaft border-style definiert das Rahmenmuster an den vier Seiten eines Elements. Sie kann einen, zwei, drei oder vier Werte aufweisen, die nach einer spezifischen Definition an den verschiedenen Seiten des Elementes angebracht werden.
'border-style' Value: <border-style>{1,4} | inherit
Umsetzungsbeispiele für das Stylesheet:
border-style: groove; border-style: dotted solid; border-style: none solid none; border-style: solid solid solid none
Praktische Beispiele
Hier folgen noch einige Beispiele, die das Zusammenwirken der oben erläuterten Syntaxregeln verdeutlichen. Wer mit einem standardskompatiblen Browser surft, kann die Regelbeispiele mit der Maus überfahren. Durch die unterschiedlichen Hintergrundfarben wird vielleicht einiges leichter erkennbar.
Eigenschaft counter-reset:
'counter-reset' Value: [ <identifier> <integer>? ]+ | none | inherit
Hier hat man die Wahl zwischen einer Wertegruppe oder none oder inherit. Wählt man den zweiten oder dritten Wert, ist die Regel damit vollständig.
Die erste Möglichkeit verlangt die Definition eines Identifizierers als Name für den Zähler und einer ganzen Zahl als Zählerinkrement. Die Angabe der ganzen Zahl ist optional. Dieses Konstrukt aus Zähler und Inkrement kann beliebig oft wiederholt werden.
Eigenschaft pause
'pause' Value: [ [<time> | <percentage>]{1,2} ] | inherit
Diese Eigenschaft lässt die Wahl zwischen einer Wertegruppe und dem Wert inherit zu.
Die Wertegruppe besteht aus einem Zeitwert und einem Prozentwert, von denen entweder der eine oder der andere notiert werden kann. Eine Regel kann einen oder zwei dieser Werte beinhalten.
Kurzschrift-Eigenschaft font
'font' Value: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Hier stehen zunächst eine umfangreiche Wertegruppe, sechs Systemschriftarten und der Wert inherit gleichberechtigt nebeneinander. Deklariert man eine der Systemschriftarten oder inherit, ist die Regel damit bereits vollständig. Es dürfen im Zusammenhang damit keine Komponenten der Wertegruppe notiert werden.
Die Wertegruppe ist selbst wiederum weiter unterteilt: sie enthält zuerst eine kleinere Wertegruppe, dann den Werttyp <font-size>, danach eine weitere Gruppe und am Ende den Werttyp <font-family>. Diese vier Komponenten sind durch ein Leerzeichen voneinander getrennt. Das bedeutet, dass die Reihenfolge der Komponenten eingehalten werden muss.
Die größte Gruppe enthält die Werttypen <font-style>, <font-variant> und <font-weight>. Sie ist als Ganzes optional, muss aber gegebenenfalls ganz am Anfang stehen. Von den darin stehenden Werttypen kann jeder einzelne entfallen, die Reihenfolge ihrer Notation ist beliebig (es gibt also 15 verschiedene Möglichkeiten).
An zweiter Stelle steht der Werttyp <font-size>, der immer vorhanden sein muss.
Dem kann, getrennt durch einen Schrägstrich, gegebenenfalls der Werttyp <line-height> angehängt werden.
Am Ende steht, wiederum als Pflichtparameter, der Werttyp <font-family>.
TOP
