Wertdefinitionssyntax

Eine formale Grammatik, die CSS Wertdefinitionssyntax, wird für die Definition einer Menge von gültigen Werten für eine CSS Eigenschaft oder Funktion verwendet. Zusätzlich zu dieser Syntax kann die Menge an gültigen Werten durch semantische Beschränkungen (wie z. B. dass eine Zahl positiv sein muss) weiter eingegrenzt werden.

Die Definitionssyntax beschreibt, welche Werte erlaubt sind und die Interaktionen zwischen ihnen. Eine Komponente kann ein Schlüsselwort sein, einige Zeichen, die als Literal interpretiert werden, oder ein Wert eines vorhandenen CSS Datentyps einer anderen CSS Eigenschaft.

Komponentenwert Typen

Schlüsselwörter

Generische Schlüsselwörter

Ein Schlüsselwort mit einer vordefinierten Bedeutung wird wortgetreu, ohne Anführungszeichen, dargestellt, zum Beispiel: auto, smaller oder ease-in.

Die Spezialfälle inherit und initial

Alle CSS Eigenschaften akzeptieren die Schlüsselwörter inherit und initial, die durchweg in CSS definiert werden. Sie werden nicht in der Wertdefinition angezeigt und werden implizit definiert.

Literale

In CSS können einige Zeichen getrennt auftreten, wie der Schrägstrich ('/') oder das Komma (','), und werden in der Eigenschaftendefinition verwendet, um Teile voneinander zu trennen. Das Komma wird oft verwendet, um Werte in Aufzählungen oder Parameter in Mathematik ähnlichen Funktionen zu trennen; der Schrägstrich trennt oft Teile eines Wertes, die semantisch unterscheiden, jedoch eine gemeinsame Syntax haben. Normalerweise wird der Schrägstrich manchmal in Kurzform Eigenschaften verwendet, um Komponenten von einander zu trennen, die vom gleichen Typ sind, aber zu verschiedenen Eigenschaften gehören.

Beide Symbole erscheinen buchstäblich in einer Wertdefinition.

Datentypen

Elementare Datentypen

Bestimmte Daten werden überall in CSS verwendet und werden einmalig für alle Werte in der Spezifikation definiert. Die sogenannten elementaren Datentypen werden durch ihren von den Symbolen '<' und '>' umschlossenen Namen gekennzeichnet: <angle>, <string>, …

Nichtterminale Datentypen

Weniger häufige Datentypen, genannt nichtterminale Datentypen, werden ebenfalls von '<' und '>' umschlossen.

Es gibt zwei Arten von nichtterminalen Datentypen:

• Datentypen, die den Namen einer Eigenschaft teilen, eingeschlossen von Anführungszeichen. In diesem Fall teilt der Datentyp die gleiche Menge an Werten wie die Eigenschaft. Sie werden oft in der Definition von Kurzform Eigenschaften verwendet.
• Datentypen, die den Namen einer Eigenschaft nicht teilen. Diese Datentypen ähneln den elementaren Datentypen. Sie unterscheiden sich lediglich in der Stelle ihrer Definition von den elementaren Datentypen: In diesem Fall ist die Definition normalerweise sehr nahe bei der Definition der Eigenschaft, die sie benutzt.

Komponentenwert Kombinatoren

Eckige Klammern

Eckige Klammern schließen mehrere Entitäten, Kombinatoren und Multiplikatoren ein und transformieren diese anschließend als eine einzige Komponente. Sie werden benutzt, um Komponenten zu gruppieren und so die Rangordnungsregeln zu umgehen.

bold [ thin && <length> ]

Dieses Beispiel passt auf die folgenden Werte:

• bold thin 2vh
• bold 0 thin
• bold thin 3.5em

Aber nicht:

• thin bold 3em; da bold neben die durch die Klammern definierte Komponente gestellt ist, muss sie davor erscheinen.

Nebeneinanderstellung

Wenn mehrere Schlüsselwörter, Literale oder Datentypen aufgereiht werden und nur durch ein oder mehrere Leerzeichen getrennt werden, nennt man dies Nebeneinanderstellung. Alle nebeneinander gestellten Komponenten sind zwingend und müssen in der exakten Reihenfolge angegeben werden.

bold <length> , thin

Dieses Beispiel passt auf die folgenden Werte:

• bold 1em, thin
• bold 0, thin
• bold 2.5cm, thin
• bold 3vh, thin

Aber nicht:

• thin 1em, bold, da die Entitäten in der beschriebenen Reihenfolge stehen müssen.
• bold 1em thin, da die Entitäten zwingend angegeben werden müssen; das Komma und ein Literal müssen vorhanden sein.
• bold 0.5ms, thin, da ms Werte keine <length> Werte sind.

Doppeltes Und-Zeichen

Wenn zwei oder mehrere Komponenten durch ein doppeltes Und-Zeichen, &&, getrennt sind, bedeutet das, dass alle diese Entitäten zwingend sind, jedoch in beliebiger Reihenfolge auftreten können.

bold && <length>

Dieses Beispiel passt auf die folgenden Werte:

• bold 1em
• bold 0
• 2.5cm bold
• 3vh bold

Aber nicht:

• bold, da beide Komponenten im Wert vorkommen müssen.
• bold 1em bold, da beide Komponenten nur einmal vorkommen dürfen.

Doppelter Balken

Wenn zwei oder mehrere Komponenten durch einen doppelten Balken, ||, getrennt sind, bedeutet das, dass alle Entitäten optional sind: mindestens eine davon muss angegeben werden, und sie können in beliebiger Reihenfolge auftreten. Normalerweise wird dies verwendet, um die verschiedenen Werte einer Kurzform Eigenschaft zu definieren.

<'border-width'> || <'border-style'> || <'border-color'>

Dieses Beispiel passt auf die folgenden Werte:

• 1em solid blue
• blue 1em
• solid 1px yellow

Aber nicht:

• blue yellow, da eine Komponente nur einmal vorkommen darf.
• bold, da es kein erlaubtes Schlüsselwort als Wert für irgendeine Entität ist.

Einfacher Balken

Wenn zwei oder mehrere Entitäten durch einen einfachen Balken, |, getrennt werden, bedeutet das, dass alle Entitäten exklusive Optionen sind: genau eine dieser Optionen muss angegeben werden. Dies wird normalerweise benutzt, um eine Liste möglicher Schlüsselwörter zu trennen.

<percentage> | <length> | left | center | right | top | bottom

Dieses Beispiel passt auf die folgenden Werte:

• 3%
• 0
• 3.5em
• left
• center
• right
• top
• bottom

Aber nicht:

• center 3%, da nur eine der Komponenten angegeben werden darf.
• 3em 4.5em, da eine Komponente nur einmal vorkommen darf.

Komponentenwert Multiplikatoren

Ein Multiplikator ist ein Zeichen, das angibt, wie oft eine vorhergehende Entität wiederholt werden kann. Ohne einen Multiplikator muss eine Entität exakt einmal vorkommen.

Asterisk (*)

Der Asterisk Multiplikator gibt an, dass die Entität keinmal, einmal oder mehrmals vorkommen kann.

bold smaller*

Dieses Beispiel passt auf die folgende Werte:

• bold
• bold smaller
• bold smaller smaller
• bold smaller smaller smaller and so on.

Aber nicht:

• smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.

Plus (+)

Der Plus Multiplikator gibt an, dass die Entität einmal oder mehrmals vorkommen kann.

bold smaller+

Dieses Beispiel passt auf die folgenden Werte:

• bold smaller
• bold smaller smaller
• bold smaller smaller smaller and so on.

Aber nicht:

• bold, da smaller mindestens einmal vorkommen muss.
• smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.

Fragezeichen (?)

Der Fragezeichen Multiplikator gibt an, dass die Entität optional ist und keinmal oder einmal vorkommen kann.

bold smaller?

Dieses Beispiel passt auf die folgenden Werte:

• bold
• bold smaller

Aber nicht:

• bold smaller smaller, da smaller höchstens einmal vorkommen darf.
• smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.

Geschweifte Klammern ({ })

Der Geschweifte Klammern Multiplikator schließt zwei durch Komma getrennte Ganzzahlen A und B ein und gibt an, dass die Entität mindestens A-mal vorkommen muss und höchstens B-mal vorkommen darf.

bold smaller{1,3}

Dieses Beispiel passt auf die folgenden Werte:

• bold smaller
• bold smaller smaller
• bold smaller smaller smaller

Aber nicht:

• bold, da smaller mindestens einmal vorkommen muss.
• bold smaller smaller smaller smaller, da smaller höchstens dreimal vorkommen darf.
• smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.

Rautensymbol (#)

Der Rautensymbol Multiplizierer gibt an, dass die Entität einmal oder mehrmals wiederholt werden kann (wie beim Plus Multiplikator), jedoch jedes Vorkommen durch ein Komma (',') getrennt wird.

bold smaller#

Dieses Beispiel passt auf die folgenden Werte:

• bold smaller
• bold smaller, smaller
• bold smaller, smaller, smaller and so on.

Aber nicht:

• bold, da smaller mindestens einmal vorkommen muss.
• bold smaller smaller smaller, da verschiedene Vorkommen von smaller durch Komma getrennt werden müssen.
• smaller, da bold eine Nebeneinanderstellung ist und vor jeglichem smaller Schlüsselwort stehen muss.

Übersicht

Spezifikationen

Siehe auch

• CSS Schlüsselkonzepte: CSS Syntax, Spezifität und Vererbung, das Boxmodell, Layoutmodi und visuelle Formatierungsmodelle und Abstandzusammenfallen, or the initiale, berechnete, verwendete and tatsächliche Werte. Definitions of Wertsyntax, Kurzschreibweiseeigenschaften and ersetzte Elemente.