Wertedefinitionssyntax

Die CSS-Wertedefinitionssyntax, eine formale Grammatik, wird verwendet, um die Menge der gültigen Werte für eine CSS-Eigenschaft oder Funktion zu definieren. Zusätzlich zu dieser Syntax kann die Menge der gültigen Werte durch semantische Einschränkungen weiter eingeschränkt werden (zum Beispiel, dass eine Zahl streng positiv sein muss).

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

Komponentenwerttypen

Schlüsselwörter

Generische Schlüsselwörter

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

CSS-weite Schlüsselwörter

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

Literale

In CSS können einige Zeichen allein erscheinen, wie der Schrägstrich (/) oder das Komma (,), und werden in einer Eigenschaftsdefinition verwendet, um ihre Teile zu trennen. Das Komma wird oft verwendet, um Werte in Aufzählungen oder Parameter in mathematischen Funktionen zu trennen; der Schrägstrich trennt oft Teile eines Werts, die semantisch unterschiedlich sind, aber eine gemeinsame Syntax haben. Typischerweise wird der Schrägstrich in Kurzschrift-Eigenschaften verwendet, um Komponenten desselben Typs zu trennen, die zu verschiedenen Eigenschaften gehören.

Beide Symbole erscheinen wörtlich in einer Wertedefinition.

Datentypen

Grundlegende Datentypen

Einige Datentypen werden im gesamten CSS verwendet und sind einmalig für alle Werte in der Spezifikation definiert. Diese grundlegenden Datentypen werden durch ihren Namen dargestellt, umgeben von den Symbolen < und >: <angle>, <string>, …

Nichtterminale Datentypen

Weniger verbreitete Datentypen, sogenannte nichtterminale Datentypen, sind ebenfalls von < und > umgeben.

Nichtterminale Datentypen gibt es in zwei Arten:

  • Datentypen, die denselben Namen wie eine Eigenschaft teilen, in Anführungszeichen gesetzt. In diesem Fall teilt der Datentyp dieselbe Menge an Werten wie die Eigenschaft. Sie werden oft in der Definition von Kurzschrift-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 verwendet.

Komponentenwert-Kombinatoren

Klammern

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

css
bold [ thin && <length> ]

Dieses Beispiel entspricht den folgenden Werten:

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

Aber nicht:

  • thin bold 3em, da bold mit der in den Klammern definierten Komponente juxtapositioniert ist, muss es davor erscheinen.

Juxtaposition

Das Platzieren mehrerer Schlüsselwörter, Literale oder Datentypen nebeneinander, nur durch ein oder mehrere Leerzeichen getrennt, wird als Juxtaposition bezeichnet. Alle juxtapositionierten Komponenten sind verpflichtend und sollten in der genauen Reihenfolge erscheinen.

css
bold <length>, thin

Dieses Beispiel entspricht den 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 ausgedrückten Reihenfolge sein müssen
  • bold 1em thin, da die Entitäten verpflichtend sind; das Komma, ein Literal, muss vorhanden sein
  • bold 0.5ms, thin, da die ms-Werte nicht <length> sind

Doppelte kaufmännische Und

Das Trennen von zwei oder mehr Komponenten durch ein doppeltes kaufmännisches Und, &&, bedeutet, dass alle diese Entitäten verpflichtend sind, aber in beliebiger Reihenfolge erscheinen können.

css
bold && <length>

Dieses Beispiel entspricht den folgenden Werten:

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

Aber nicht:

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

Hinweis: Die Juxtaposition hat Vorrang vor dem doppelten kaufmännischen Und, was bedeutet, dass bold thin && <length> gleich [ bold thin ] && <length> ist. Es beschreibt bold thin <length> oder <length> bold thin, aber nicht bold <length> thin.

Doppelte Stange

Das Trennen von zwei oder mehr Komponenten durch eine doppelte Stange, ||, 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 Kurzschrift-Eigenschaft zu definieren.

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

Dieses Beispiel entspricht den folgenden Werten:

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

Aber nicht:

  • blue yellow, da eine Komponente höchstens einmal erscheinen muss.
  • bold, da es kein erlaubtes Schlüsselwort als Wert einer der Entitäten ist.

Hinweis: Das doppelte kaufmännische Und hat Vorrang vor der doppelten Stange, was bedeutet, dass bold || thin && <length> gleich bold || [ thin && <length> ] ist. Es beschreibt bold, thin <length>, bold thin <length> oder thin <length> bold, aber nicht <length> bold thin, da bold, wenn nicht weggelassen, vor oder nach der ganzen thin && <length>-Komponente platziert werden muss.

Einzelne Stange

Das Trennen von zwei oder mehr Entitäten durch eine einzelne Stange, |, 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.

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

Dieses Beispiel entspricht den 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 erscheinen darf.

Hinweis: Die doppelte Stange hat Vorrang vor der einzelnen Stange, was bedeutet, dass bold | thin || <length> gleich bold | [ thin || <length> ] ist. Es beschreibt bold, thin, <length>, <length> thin oder thin <length>, aber nicht bold <length>, da nur eine Entität von jeder Seite des |-Kombinators vorhanden sein kann.

Komponentenwert-Multiplikatoren

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.

Sternchen (*)

Der Sternchenmultiplikator zeigt an, dass die Entität null, einmal oder mehrmals erscheinen kann.

css
bold smaller*

Dieses Beispiel entspricht den folgenden Werten:

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

Aber nicht:

  • smaller, da bold juxtapositioniert ist und vor jedem smaller stehen muss.

Plus (+)

Der Plusmultiplikator zeigt an, dass die Entität einmal oder mehrmals erscheinen kann.

css
bold smaller+

Dieses Beispiel entspricht den 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 juxtapositioniert ist und vor jedem smaller stehen muss.

Fragezeichen (?)

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

css
bold smaller?

Dieses Beispiel entspricht den folgenden Werten:

  • bold
  • bold smaller

Aber nicht:

  • bold smaller smaller, da smaller höchstens einmal erscheinen darf.
  • smaller, da bold juxtapositioniert ist und vor jedem smaller stehen muss.

Geschweifte Klammern ({ })

Der Multiplikator mit geschweiften Klammern, der zwei durch ein Komma getrennte ganze Zahlen A und B einschließt, gibt an, dass die Entität mindestens A-mal und höchstens B-mal erscheinen muss.

css
bold smaller{1,3}

Dieses Beispiel entspricht den 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 juxtapositioniert ist und vor jedem smaller stehen muss.

Rautezeichen (#)

Der Rautenzeichen-Multiplikator zeigt an, dass die Entität einmal oder mehrmals wiederholt werden kann (zum Beispiel der Plus-Multiplikator), aber jedes Auftreten wird durch ein Komma (',') getrennt.

css
bold smaller#

Dieses Beispiel entspricht den 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 werden müssen.
  • smaller, da bold juxtapositioniert ist und vor jedem smaller stehen muss.

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

css
bold smaller#{1,3}

Dieses Beispiel entspricht den folgenden Werten:

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

Aber nicht:

  • bold smaller, smaller, smaller, kleiner, da smaller höchstens dreimal erscheinen darf.
css
bold smaller#{2}

Dieses Beispiel entspricht dem folgenden Wert:

  • bold smaller, smaller

Aber nicht:

  • bold smaller, da smaller genau zweimal erscheinen muss.

Ausrufezeichen (!)

Der Ausrufezeichen-Multiplikator nach einer Gruppe gibt an, dass die Gruppe benötigt wird und mindestens einen Wert produzieren muss; selbst wenn die Grammatik der Elemente innerhalb der Gruppe ansonsten das gesamte Fehlen der Inhalte erlauben würde, muss mindestens ein Komponentenwert nicht weggelassen werden.

css
[ bold? smaller? ]!

Dieses Beispiel entspricht den folgenden Werten:

  • bold
  • smaller
  • bold smaller

Aber nicht:

  • weder bold noch smaller, da eines von beiden erscheinen muss.
  • smaller bold, da bold juxtapositioniert ist und vor dem Schlüsselwort smaller stehen muss.
  • bold smaller bold, da bold und smaller nur einmal erscheinen dürfen.

Eingeklammertes Bereichsnotation ([min,max])

Einige Typen können numerische Werte in einem bestimmten Bereich akzeptieren. Beispielsweise kann die Eigenschaft column-count einen ganzzahligen Wert zwischen positiv 1 und Unendlich, inklusive, akzeptieren. Die entsprechende Syntax sieht so aus:

<integer [1,∞]>

Jeder Wert außerhalb dieses angegebenen Bereichs macht die ganze Deklaration ungültig, daher wird der Browser ihn ignorieren.

Die eingeklammerten Bereichsnotation [min, max] zeigt 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 angegeben haben. Typen, die in Einheiten angegeben werden, können Nullwerte mit oder ohne Einheiten angegeben haben, zum Beispiel <time [0s,10s]> oder <time [0,10s]>.

Hier sind einige weitere Beispiele:

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

Zusammenfassung

Zeichen Name Beschreibung Beispiel
Kombinatoren
Juxtaposition Komponenten sind obligatorisch und sollten in dieser Reihenfolge erscheinen solid <length>
&& Doppelte kaufmännische Und Komponenten sind obligatorisch, können jedoch in beliebiger Reihenfolge erscheinen <length> && <string>
|| Doppelte Stange Mindestens eine der Komponenten muss vorhanden sein, und sie können in beliebiger Reihenfolge erscheinen. <'border-image-outset'> || <'border-image-slice'>
| Einzelne Stange Genau eine der Komponenten muss vorhanden sein smaller | small | normal | big | bigger
[ ] Klammern Gruppieren Sie Komponenten, um Vorrangsregeln zu umgehen bold [ thin && <length> ]
Multiplikatoren
Kein Multiplikator Genau 1 Mal solid
* Sternchen 0 oder mehrmals bold smaller*
+ Pluszeichen 1 oder mehrmals bold smaller+
? Fragezeichen 0 oder 1 Mal (das heißt optional) bold smaller?
{min,max} Geschweifte Klammern Mindestens min Mal, höchstens max Mal bold smaller{1,3}
# Rautezeichen 1 oder mehrmals, wobei jedes Vorkommen durch ein Komma getrennt wird (,) bold smaller#
! Ausrufezeichen Gruppe muss mindestens 1 Wert erzeugen [ bold? smaller? ]!
Bereiche
[min,max] Numerischer Bereich in eckigen Klammern Gibt einen numerischen Bereich an <integer [0,∞]>

Spezifikationen

Specification
CSS Values and Units Module Level 4
# value-defs

Siehe auch