Wertedefinition Syntax

Allgemeine Schlüsselwörter

Ein Schlüsselwort mit einer vordefinierten Bedeutung erscheint wörtlich, ohne Anführungszeichen. Zum Beispiel: auto, smaller oder ease-in.

Der spezielle Fall von inherit, initial und unset

Alle CSS-Eigenschaften akzeptieren die Schlüsselwörter inherit, initial und unset. Sie werden in der Wertedefinition nicht angezeigt und sind implizit definiert.

In CSS können einige Zeichen allein stehen, wie der Schrägstrich (/) oder das Komma (,), und werden in einer Eigenschaftsdefinition verwendet, um ihre Teile zu trennen. Das Komma wird häufig verwendet, um Werte in Aufzählungen oder Parameter in mathematisch-ähnlichen Funktionen zu trennen; der Schrägstrich trennt oft Teile des Wertes, die semantisch unterschiedlich, aber syntaktisch gleich sind. Typischerweise wird der Schrägstrich in Kurzform-Eigenschaften verwendet; um Komponenten desselben Typs zu trennen, die jedoch zu unterschiedlichen Eigenschaften gehören.

Beide Symbole erscheinen wörtlich in einer Wertedefinition.

Grundlegende Datentypen

Einige Datentypen werden in ganz CSS verwendet und werden einmal für alle Werte in der Spezifikation definiert. Diese als grundlegende Datentypen bezeichnet, werden durch ihren Namen umgeben von den Symbolen < und > dargestellt: <angle>, <string>, …

Nicht-terminal Datentypen

Weniger gebräuchliche Datentypen, genannt nicht-terminal Datentypen, sind ebenfalls von < und > umgeben.

Nicht-terminale Datentypen gibt es in zwei Arten:

• Datentypen, die denselben Namen wie eine Eigenschaft teilen, in Anführungszeichen gesetzt. In diesem Fall teilt der Datentyp denselben Wertebereich wie die Eigenschaft. Sie werden häufig in der Definition von Kurzform-Eigenschaften verwendet.
• Datentypen, die nicht denselben Namen wie eine Eigenschaft teilen. Diese Datentypen sind den grundlegenden Datentypen sehr ähnlich. Sie unterscheiden sich von den grundlegenden Datentypen nur durch den physischen Ort ihrer Definition. In diesem Fall ist die Definition normalerweise physisch sehr nah an der Definition der Eigenschaft, die sie nutzt.

Klammern umschließen mehrere Entitäten, Kombinatoren und Multiplikatoren und transformieren sie dann als eine einzige Komponente. Sie werden verwendet, um Komponenten zu gruppieren, um die Vorrangregeln zu umgehen.

bold [ thin && <length> ]

Dieses Beispiel entspricht folgenden Werten:

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

Aber nicht:

• thin bold 3em, da bold neben der durch die Klammern definierten Komponente steht, muss es davor erscheinen.

Mehrere Schlüsselwörter, Literale oder Datentypen nebeneinander zu platzieren, die nur durch ein oder mehrere Leerzeichen getrennt sind, wird Aneinanderreihung genannt. Alle aneinandergereihten Komponenten sind obligatorisch und sollten in der genauen Reihenfolge erscheinen.

bold <length>, thin

Dieses Beispiel entspricht folgenden Werten:

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

Aber nicht:

• thin 1em, bold, da die Entitäten in der angegebenen Reihenfolge sein müssen
• bold 1em thin, da die Entitäten obligatorisch sind; das Komma, ein Literal, muss vorhanden sein
• bold 0.5ms, thin, da die ms Werte nicht <length> sind

Das Trennen von zwei oder mehr Komponenten durch ein doppeltes Und-Zeichen, &&, bedeutet, dass all diese Entitäten obligatorisch, aber in beliebiger Reihenfolge erscheinen können.

bold && <length>

Dieses Beispiel entspricht folgenden Werten:

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

Aber nicht:

• bold, da beide Komponenten in dem Wert erscheinen müssen.
• bold 1em bold, da beide Komponenten nur einmal erscheinen dürfen.

Das Trennen von zwei oder mehr Komponenten durch einen Doppelbalken, ||, bedeutet, dass alle Entitäten Optionen sind: Mindestens eine muss vorhanden sein, und sie können in beliebiger Reihenfolge erscheinen. Typischerweise wird dies verwendet, um die verschiedenen Werte einer Kurzform-Eigenschaft zu definieren.

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

Dieses Beispiel entspricht folgenden Werten:

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

Aber nicht:

• blue yellow, da eine Komponente nur einmal erscheinen darf.
• bold, da es kein Schlüsselwort ist, das als Wert einer der Entitäten zulässig ist.

Das Trennen von zwei oder mehr Entitäten durch einen einfachen Balken, |, bedeutet, dass alle Entitäten exklusive Optionen sind: Genau eine dieser Optionen muss vorhanden sein. Dies wird typischerweise verwendet, um eine Liste möglicher Schlüsselwörter zu trennen.

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

Dieses Beispiel entspricht folgenden Werten:

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

Aber nicht:

• center 3%, da nur eine der Komponenten vorhanden sein darf.
• 3em 4.5em, da eine Komponente höchstens einmal vorhanden sein darf.

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

Multiplikatoren können nicht hinzugefügt werden und haben Vorrang vor allen Kombinatoren.

Der Sternchen-Multiplikator gibt an, dass die Entität null, einmal oder mehrmals erscheinen kann.

bold smaller*

Dieses Beispiel entspricht folgenden Werten:

• bold
• bold smaller
• bold smaller smaller
• bold smaller smaller smaller, und so weiter.

Aber nicht:

• smaller, da bold aneinandergereiht ist und vor jedem smaller-Schlüsselwort erscheinen muss.

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

bold smaller+

Dieses Beispiel entspricht folgenden Werten:

• bold smaller
• bold smaller smaller
• bold smaller smaller smaller, und so weiter.

Aber nicht:

• bold, da smaller mindestens einmal erscheinen muss.
• smaller, da bold aneinandergereiht ist und vor jedem smaller-Schlüsselwort erscheinen muss.

Der Fragezeichen-Multiplikator zeigt an, dass die Entität optional ist und null oder einmal erscheinen muss.

bold smaller?

Dieses Beispiel entspricht folgenden Werten:

• bold
• bold smaller

Aber nicht:

• bold smaller smaller, da smaller höchstens einmal erscheinen darf.
• smaller, da bold aneinandergereiht ist und vor jedem smaller-Schlüsselwort erscheinen muss.

Der Multiplikator für geschweifte Klammern, der zwei durch ein Komma getrennte Ganzzahlen A und B einschließt, gibt an, dass die Entität mindestens A-mal und höchstens B-mal erscheinen muss.

bold smaller{1,3}

Dieses Beispiel entspricht folgenden Werten:

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

Aber nicht:

• bold, da smaller mindestens einmal erscheinen muss.
• bold smaller smaller smaller smaller, da smaller höchstens dreimal erscheinen darf.
• smaller, da bold aneinandergereiht ist und vor jedem smaller-Schlüsselwort erscheinen muss.

Der Rautezeichen-Multiplikator gibt an, dass die Entität einmal oder mehrmals wiederholt werden kann (z.B. der Plus-Multiplikator), aber jedes Vorkommen wird durch ein Komma (',') getrennt.

bold smaller#

Dieses Beispiel entspricht folgenden Werten:

• bold smaller
• bold smaller, smaller
• bold smaller, smaller, smaller, und so weiter.

Aber nicht:

• bold, da smaller mindestens einmal erscheinen muss.
• bold smaller smaller smaller, da die verschiedenen Vorkommen von smaller durch Kommas getrennt sein müssen.
• smaller, da bold aneinandergereiht ist und vor jedem smaller-Schlüsselwort erscheinen muss.

Das Rautezeichen kann optional von geschweiften Klammern gefolgt werden, um anzugeben, wie oft die Entität wiederholt wird.

bold smaller#{1,3}

Dieses Beispiel entspricht folgenden Werten:

• bold smaller
• bold smaller, smaller
• bold smaller, smaller, smaller

Aber nicht:

• bold smaller, smaller, smaller, smaller, da smaller höchstens dreimal erscheinen darf.

bold smaller#{2}

Dieses Beispiel entspricht dem folgenden Wert:

• bold smaller, smaller

Aber nicht:

• bold smaller, da smaller genau zweimal erscheinen muss.

Der Ausrufezeichen-Multiplikator nach einer Gruppe gibt an, dass die Gruppe erforderlich ist und mindestens einen Wert erzeugen muss; selbst wenn die Grammatik der Elemente innerhalb der Gruppe andernfalls erlauben würde, dass der gesamte Inhalt ausgelassen wird, darf mindestens ein Komponentenwert nicht ausgelassen werden.

[ bold? smaller? ]!

Dieses Beispiel entspricht folgenden Werten:

• bold
• smaller
• bold smaller

Aber nicht:

• weder bold noch smaller, da einer von ihnen erscheinen muss.
• smaller bold, da bold aneinandergereiht ist und vor dem smaller-Schlüsselwort erscheinen muss.
• bold smaller bold, da bold und smaller nur einmal erscheinen dürfen.

Einige Typen können numerische Werte innerhalb eines bestimmten Bereichs akzeptieren. Zum Beispiel kann die column-count-Eigenschaft einen ganzzahligen Wert zwischen positiv 1 und Unendlich, inklusive, akzeptieren. Die entsprechende Syntax sieht folgendermaßen aus:

<integer [1,∞]>

Ein Wert außerhalb dieses angegebenen Bereichs führt dazu, dass die gesamte Deklaration ungültig ist, und wird daher vom Browser ignoriert.

Die Klammerbereichsnotation [min, max] gibt einen inklusiven Bereich zwischen einem min- und max-Wert an. Diese Notation wird in numerischen Typ-Notationen verwendet und kann Einheiten enthalten, z.B. <angle [0,180deg]>. Positive und negative Unendlichkeit (-∞ und ∞) dürfen keine Einheiten haben. In Einheiten spezifizierte Typen können Nullwerte mit oder ohne Einheiten haben, z.B. <time [0s,10s]> oder <time [0,10s]>.

Hier sind einige weitere Beispiele:

• <integer [-∞,∞]>: Jede ganze Zahl von negativer Unendlichkeit bis positiver Unendlichkeit.
• <integer [0,∞]>: Jede ganze Zahl von 0 bis positive Unendlichkeit ist gültig. Negative ganze Zahlen sind ungültig.
• <time [0s,10s]> oder <time [0,10s]>: Jede Dauer von 0 bis 10 Sekunden ist gültig.
• <integer [-∞,-1]> | <integer [1,∞]>: Jede ganze Zahl außer Null ist gültig.

• Wichtige CSS-Konzepte:
  • CSS-Syntax
  • Kommentare
  • Spezifität
  • Vererbung
  • Box-Modell
  • Layout-Modi
  • Visuelle Formatierungsmodelle
  • Rand-Zusammenfall
  • Werte
    • Anfangswerte
    • Berechnete Werte
    • Verwendete Werte
    • Tatsächliche Werte
  • Wertedefinition Syntax
  • Kurzform-Eigenschaften
  • Ersetzte Elemente