Wertdefinierungssyntax
Die CSS-Wertdefinierungssyntax, eine formale Grammatik, wird verwendet, um die Menge der gültigen Werte für eine CSS-Eigenschaft oder Funktion zu definieren. Neben dieser Syntax kann die Menge der gültigen Werte durch semantische Einschränkungen weiter eingeschränkt werden (zum Beispiel, wenn eine Zahl strikt positiv sein muss).
Die Definierungssyntax beschreibt, welche Werte erlaubt sind und die Interaktionen zwischen ihnen. Eine Komponente kann ein Schlüsselwort, einige Zeichen, die als Literal gelten, oder ein Wert eines bestimmten 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 Wertdefinition angezeigt, sondern sind implizit definiert.
Literale
In CSS können einige Zeichen allein auftreten, wie der Schrägstrich (/
) oder das Komma (,
), und werden in einer Eigenschaftsdefinition verwendet, um deren Teile zu trennen. Das Komma wird häufig verwendet, um Werte in Aufzählungen zu trennen oder Parameter in mathematisch anmutenden Funktionen; der Schrägstrich trennt oft Teile des Wertes, die semantisch unterschiedlich, aber von gemeinsamer Syntax sind. Typischerweise wird der Schrägstrich in Kurzschreibweisen verwendet, um Komponenten desselben Typs, aber zu verschiedenen Eigenschaften gehörend, zu trennen.
Beide Symbole erscheinen wörtlich in einer Wertdefinition.
Datentypen
Grundlegende Datentypen
Einige Datentypen werden in CSS universell verwendet und sind einmalig für alle in der Spezifikation definierten Werte. Diese werden als grundlegende Datentypen bezeichnet und werden durch ihren Namen, umgeben von den Symbolen <
und >
, dargestellt: <angle>
, <string>
, …
Nicht-terminale Datentypen
Weniger gebräuchliche Datentypen, sogenannte nicht-terminale Datentypen, sind ebenfalls von <
und >
umgeben.
Nicht-terminale Datentypen sind von zwei Arten:
- Datentypen mit demselben Namen wie eine Eigenschaft, in Anführungszeichen gesetzt. In diesem Fall teilt der Datentyp dieselbe Wertemenge wie die Eigenschaft. Sie werden oft in der Definition von Kurzschreibweisen verwendet.
- Datentypen ohne denselben Namen wie eine Eigenschaft. Diese Datentypen ähneln den grundlegenden Datentypen sehr. Sie unterscheiden sich nur in der physischen Lage ihrer Definition von den grundlegenden Datentypen. In diesem Fall liegt die Definition normalerweise physisch sehr nahe an der Definition der Eigenschaft, die sie verwendet.
Komponentenwertkombinatoren
Klammern
Mit Klammern werden mehrere Entitäten, Kombinatoren und Multiplikatoren umschlossen und dann als eine einzelne Komponente transformiert. Sie werden verwendet, um Komponenten zu gruppieren, um die Vorrangregeln zu umgehen.
bold [ thin && <length> ]
Dieses Beispiel passt zu den folgenden Werten:
bold thin 2vh
bold 0 thin
bold thin 3.5em
Aber nicht:
thin bold 3em
, dabold
mit der von den Klammern definierten Komponente verknüpft ist, muss es davor erscheinen.
Juxtaposition
Mehrere Schlüsselwörter, Literale oder Datentypen nebeneinander zu platzieren, nur durch ein oder mehrere Leerzeichen getrennt, nennt man Juxtaposition. Alle juxtapositionierten Komponenten sind verpflichtend und sollten in exakt der Reihenfolge erscheinen.
bold <length>, thin
Dieses Beispiel passt zu 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 angegebenen Reihenfolge stehen müssenbold 1em thin
, da die Entitäten verpflichtend sind; das Komma, ein Literal, muss vorhanden seinbold 0.5ms, thin
, da diems
-Werte kein<length>
Doppeltes kaufmännisches Und
Zwei oder mehr Komponenten durch ein doppeltes kaufmännisches Und (&&
) zu trennen, bedeutet, dass alle diese Entitäten verpflichtend, jedoch in beliebiger Reihenfolge erscheinen können.
bold && <length>
Dieses Beispiel passt zu 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 dürfen.
Hinweis:
Juxtaposition hat Vorrang gegenüber dem doppelten kaufmännischen Und, was bedeutet, dass bold thin && <length>
gleichbedeutend ist mit [ bold thin ] && <length>
. 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 unterschiedlichen Werte einer Kurzschreibeigenschaft zu definieren.
<'border-width'> || <'border-style'> || <'border-color'>
Dieses Beispiel passt zu 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 als Wert erlaubtes Schlüsselwort für eine der Entitäten ist.
Hinweis:
Das doppelte kaufmännische Und hat Vorrang gegenüber der doppelten Stange, was bedeutet, dass bold || thin && <length>
gleichbedeutend ist mit bold || [ thin && <length> ]
. 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 gesamten 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.
<percentage> | <length> | left | center | right | top | bottom
Dieses Beispiel passt zu den folgenden Werten:
3%
0
3.5em
left
center
right
top
bottom
Aber nicht:
center 3%
, da nur eine der Komponenten vorhanden sein muss.3em 4.5em
, da eine Komponente höchstens einmal vorhanden sein darf.
Hinweis:
Die doppelte Stange hat Vorrang gegenüber der einzelnen Stange, was bedeutet, dass bold | thin || <length>
gleichbedeutend ist mit bold | [ thin || <length> ]
. 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.
Komponentenwertmultiplikatoren
Ein Multiplikator ist ein Zeichen, das angibt, wie oft eine vorangehende Entität wiederholt werden kann. Ohne einen Multiplikator muss eine Entität genau einmal erscheinen.
Multiplikatoren können nicht addiert werden und haben Vorrang vor allen Kombinatoren.
Asterisk (*
)
Der Asterisk-Multiplikator zeigt an, dass die Entität null-, einmal oder mehrmals erscheinen kann.
bold smaller*
Dieses Beispiel passt zu den folgenden Werten:
bold
bold smaller
bold smaller smaller
bold smaller smaller smaller
und so weiter.
Aber nicht:
smaller
, dabold
juxtapositioniert ist und vor jedemsmaller
-Schlüsselwort erscheinen muss.
Plus (+
)
Der Plus-Multiplikator zeigt an, dass die Entität ein- oder mehrmals erscheinen kann.
bold smaller+
Dieses Beispiel passt zu den folgenden Werten:
bold smaller
bold smaller smaller
bold smaller smaller smaller
und so weiter.
Aber nicht:
bold
, dasmaller
mindestens einmal erscheinen muss.smaller
, dabold
juxtapositioniert ist und vor jedemsmaller
-Schlüsselwort erscheinen muss.
Fragezeichen (?
)
Der Fragezeichen-Multiplikator zeigt an, dass die Entität optional ist und null- oder einmal erscheinen muss.
bold smaller?
Dieses Beispiel passt zu den folgenden Werten:
bold
bold smaller
Aber nicht:
bold smaller smaller
, dasmaller
höchstens einmal erscheinen muss.smaller
, dabold
juxtapositioniert ist und vor jedemsmaller
-Schlüsselwort erscheinen muss.
Geschweifte Klammern ({ }
)
Der geschweifte Klammer-Multiplikator, 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 passt zu den folgenden Werten:
bold smaller
bold smaller smaller
bold smaller smaller smaller
Aber nicht:
bold
, dasmaller
mindestens einmal erscheinen muss.bold smaller smaller kleiner kleiner
, dasmaller
höchstens dreimal erscheinen darf.smaller
, dabold
juxtapositioniert ist und vor jedemsmaller
-Schlüsselwort erscheinen muss
Hash-Markierung (#
)
Der Hash-Markierung-Multiplikator gibt an, dass die Entität ein- oder mehrmals wiederholt werden kann (ähnlich dem Plus-Multiplikator), aber jede Vorkommen muss durch ein Komma (',') getrennt sein.
bold smaller#
Dieses Beispiel passt zu den folgenden Werten:
bold smaller
bold smaller, smaller
bold smaller, smaller, smaller
und so weiter.
Aber nicht:
bold
, dasmaller
mindestens einmal erscheinen muss.bold smaller smaller kleiner
, da die unterschiedlichen Vorkommen vonsmaller
durch Kommas getrennt sein müssen.smaller
, dabold
juxtapositioniert ist und vor jedemsmaller
-Schlüsselwort erscheinen muss.
Die Hash-Markierung kann optional durch geschweifte Klammern gefolgt werden, um anzugeben, wie oft die Entität wiederholt wird.
bold smaller#{1,3}
Dieses Beispiel passt zu den folgenden Werten:
bold smaller
bold smaller, smaller
bold smaller, smaller, smaller
Aber nicht:
bold smaller, smaller, smaller, kleiner
, dasmaller
höchstens dreimal erscheinen darf.
bold smaller#{2}
Dieses Beispiel passt zum folgenden Wert:
bold smaller, smaller
Aber nicht:
bold smaller
, dasmaller
genau zweimal erscheinen muss.
Ausrufezeichen (!
)
Der Ausrufezeichen-Multiplikator nach einer Gruppe zeigt an, dass die Gruppe erforderlich ist und mindestens einen Wert produzieren muss; selbst wenn die Grammatik der Elemente innerhalb der Gruppe zulassen würde, dass der gesamte Inhalt weggelassen wird, muss mindestens ein Komponentenwert nicht weggelassen werden.
[ bold? smaller? ]!
Dieses Beispiel passt zu den folgenden Werten:
bold
smaller
bold kleiner
Aber nicht:
- weder
bold
nochsmaller
, da eines von beiden erscheinen muss. smaller bold
, dabold
juxtapositioniert ist und vor demsmaller
-Schlüsselwort erscheinen muss.bold smaller bold
, dabold
undsmaller
nur einmal erscheinen dürfen.
Eingeschlossene Bereichsnotation ([min,max]
)
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 Unendlichkeit, einschließlich, akzeptieren. Die entsprechende Syntax sieht so aus:
<integer [1,∞]>
Jeder Wert außerhalb dieses festgelegten Bereichs macht die gesamte Deklaration ungültig, daher wird der Browser sie ignorieren.
Die eingeschlossene Bereichsnotation [min, max]
gibt einen inklusiven Bereich zwischen einem min
- und max
-Wert an. Diese Notation wird in numerischen Typnotationen verwendet und kann Einheiten einschließen, z. B. <angle [0,180deg]>
. Positive und negative Unendlichkeit (-∞ und ∞) dürfen keine Einheiten angegeben haben. Typen, die in Einheiten angegeben sind, können Nullwerte mit oder ohne Einheiten angegeben haben, z. B. <time [0s,10s]>
oder <time [0,10s]>
.
Hier sind einige weitere Beispiele:
<integer [-∞,∞]>
: Jeder Ganzzahlwert von negativer bis positiver Unendlichkeit.<integer [0,∞]>
: Jede Ganzzahl von 0 bis zur positiven Unendlichkeit ist gültig. Negative Ganzzahlen 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 Ganzzahl außer Null ist gültig.
Zusammenfassung
Zeichen | Name | Beschreibung | Beispiel |
---|---|---|---|
Kombinatoren | |||
Juxtaposition | Komponenten sind verpflichtend und sollten in dieser Reihenfolge erscheinen | solid <length> |
|
&& |
Doppeltes kaufmännisches Und | Komponenten sind verpflichtend, können aber 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 | Komponenten gruppieren, um Vorrangregeln zu umgehen | bold [ thin && <length> ] |
Multiplikatoren | |||
Kein Multiplikator | Genau 1 Mal | solid |
|
* |
Asterisk | 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} |
# |
Hash-Markierung | 1 oder mehrmals, wobei jede Vorkommen durch ein Komma (, ) getrennt ist |
bold smaller# |
! |
Ausrufezeichen | Gruppe muss mindestens 1 Wert produzieren | [ bold? smaller? ]! |
Bereiche | |||
[min,max] |
Numerischer eingeschlossener Bereich | Gibt einen numerischen Bereich an | <integer [0,∞]> |
Spezifikationen
Specification |
---|
CSS Values and Units Module Level 4 # value-defs |
Siehe auch
- Wichtige CSS-Konzepte: