Die CSS-Wertdefinition Syntax, 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 bei der Anforderung, dass eine Zahl strikt positiv sein muss).
Die Definition der Syntax beschreibt, welche Werte erlaubt sind und wie sie miteinander interagieren. Eine Komponente kann ein Schlüsselwort, einige als Literal betrachtete Zeichen oder ein Wert eines bestimmten CSS-Datentyps oder einer anderen CSS-Eigenschaft sein.
Komponententypen Schlüsselwörter Generische SchlüsselwörterEin Schlüsselwort mit vorgegebener Bedeutung erscheint wörtlich, ohne Anführungszeichen. Zum Beispiel: auto
, smaller
oder ease-in
.
Alle CSS-Eigenschaften akzeptieren die Schlüsselwörter inherit
, initial
, revert
, revert-layer
und unset
. Sie werden nicht in der Wertdefinition angezeigt und sind implizit definiert.
In CSS können einige Zeichen allein stehen, wie zum Beispiel 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 des Wertes, die semantisch unterschiedlich, aber syntaktisch gleich sind. Typischerweise wird der Schrägstrich in Kurzschreibweisen von Eigenschaften verwendet, um Komponenten desselben Typs zu trennen, die zu unterschiedlichen Eigenschaften gehören.
Beide Symbole erscheinen wörtlich in einer Wertdefinition.
Datentypen GrunddatentypenEinige Datentypen werden in ganz CSS verwendet und sind einmalig für alle Werte in der Spezifikation definiert. Diese Grunddatentypen werden mit ihrem Namen in den Symbolen <
und >
dargestellt: <angle>
, <string>
, â¦
Weniger häufig verwendete Datentypen, nicht-terminale Datentypen genannt, sind ebenfalls von <
und >
umgeben.
Nicht-terminale Datentypen gibt es in zwei Arten:
Klammern schlieÃen mehrere Entitäten, Kombinatoren und Multiplikatoren ein und transformieren sie dann als eine einzelne Komponente. Sie werden verwendet, um Komponenten zu gruppieren, um die Vorrangregeln zu umgehen.
example =
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
neben der durch die Klammern definierten Komponente, erscheinen muss und es vor ihr erscheinen muss.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.
example =
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üssenbold 1em thin
, da die Entitäten verpflichtend sind; das Komma, ein Literal, muss vorhanden seinbold 0.5ms, thin
, da die ms
-Werte nicht <length>
sindDas Trennen von zwei oder mehr Komponenten durch ein doppeltes Kaufmanns-Und, &&
, bedeutet, dass all diese Entitäten verpflichtend sind, aber in beliebiger Reihenfolge erscheinen können.
example =
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 dürfen.Hinweis: Die Juxtaposition hat Vorrang vor dem doppelten Kaufmanns-Und, was bedeutet, dass bold thin && <length>
gleichwertig mit [ bold thin ] && <length>
ist. Es beschreibt bold thin <length>
oder <length> bold thin
, aber nicht bold <length> thin
.
Das Trennen von zwei oder mehr Komponenten durch einen doppelten Balken, ||
, bedeutet, dass alle Entitäten Optionen sind: Mindestens eine muss vorhanden sein, und sie können in beliebiger Reihenfolge auftreten. Typischerweise wird dies verwendet, um die verschiedenen Werte einer Kurzschreibweise zu definieren.
example =
<number> ||
<length> ||
<color>
Dieses Beispiel entspricht den folgenden Werten:
1em 1 blue
blue 1em
1 1px yellow
Aber nicht:
blue yellow
, da eine Komponente höchstens einmal erscheinen darf.bold
, da es kein Schlüsselwort ist, das als Wert einer der Entitäten erlaubt ist.Hinweis: Das doppelte Kaufmanns-Und hat Vorrang vor dem doppelten Balken, was bedeutet, dass bold || thin && <length>
gleichwertig mit 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 gesamten thin && <length>
Komponente platziert werden muss.
Das Trennen von zwei oder mehr Entitäten durch einen einzelnen 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.
example =
<percentage> |
<length> |
left |
center |
right |
top |
bottom
Diese Beispielwerte entsprechen 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 vorhanden sein darf.Hinweis: Der doppelte Balken hat Vorrang vor dem einzelnen Balken, was bedeutet, dass bold | thin || <length>
gleichwertig mit 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 darf.
Ein Multiplikator ist ein Zeichen, das angibt, wie oft eine vorhergehende 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.
Sternchen (*
)
Der Sternchen-Multiplikator gibt an, dass die Entität null, ein- oder mehrmals erscheinen darf.
example =
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 einem smaller
-Schlüsselwort erscheinen muss.+
)
Der Plus-Multiplikator zeigt an, dass die Entität ein- oder mehrmals erscheinen darf.
example =
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 einem smaller
-Schlüsselwort erscheinen muss.?
)
Der Fragezeichen-Multiplikator gibt an, dass die Entität optional ist und null oder einmal erscheinen darf.
example =
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 einem smaller
-Schlüsselwort erscheinen muss.{ }
)
Der geschweifte Klammern-Multiplikator, 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.
example =
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 einem smaller
-Schlüsselwort erscheinen muss.#
)
Der Rautezeichen-Multiplikator gibt an, dass die Entität ein- oder mehrmals wiederholt werden kann (zum Beispiel, der Plus-Multiplikator), aber jedes Vorkommen muss durch ein Komma (',') getrennt werden.
example =
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 sein müssen.smaller
, da bold
juxtapositioniert ist und vor einem smaller
-Schlüsselwort erscheinen muss.Das Rautezeichen kann optional von geschweiften Klammern gefolgt werden, um anzugeben, wie oft die Entität wiederholt wird.
example =
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, smaller
, da smaller
höchstens dreimal erscheinen darf.example =
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 ansonsten das gesamte Inhalt erlauben würde, weggelassen zu werden, muss mindestens ein Komponentenwert nicht weggelassen werden.
example =
[ bold? smaller? ]!
Dieses Beispiel entspricht den folgenden Werten:
bold
smaller
bold smaller
Aber nicht:
bold
noch smaller
, da einer von ihnen erscheinen muss.smaller bold
, da bold
juxtapositioniert ist und vor dem smaller
-Schlüsselwort erscheinen muss.bold smaller bold
, da bold
und smaller
nur einmal erscheinen dürfen.[min,max]
)
Einige Typen können numerische Werte innerhalb eines bestimmten Bereichs akzeptieren. Zum Beispiel kann die column-count
-Eigenschaft einen ganzzahligen Wert zwischen positivem 1 und Unendlichkeit, einschlieÃlich, akzeptieren. Die entsprechende Syntax sieht folgendermaÃen aus:
example =
<integer [1,â]>
Jeder Wert auÃerhalb dieses bestimmten Bereichs macht die gesamte Deklaration ungültig, daher wird der Browser sie ignorieren.
Die Eingeklammerte Bereichsnotation [min, max]
zeigt 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 spezifiziert sind, können Nullwerte mit oder ohne Einheiten spezifiziert haben, zum Beispiel <time [0s,10s]>
oder <time [0,10s]>
.
Hier sind einige weitere Beispiele:
<integer [-â,â]>
: Jede Ganzzahl von negativer Unendlichkeit bis positiver Unendlichkeit.<integer [0,â]>
: Jede Ganzzahl von 0 bis positiver 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.solid <length>
&&
Doppelkaufmanns-Und Komponenten sind verpflichtend, können jedoch in beliebiger Reihenfolge erscheinen <length> && <string>
||
Doppelbalken Mindestens eine der Komponenten muss vorhanden sein, und sie kann in beliebiger Reihenfolge erscheinen. <'border-image-outset'> || <'border-image-slice'>
|
Einzelbalken Genau eine der Komponenten muss vorhanden sein smaller | small | normal | big | bigger
[ ]
Klammern Gruppieren Komponenten, um Vorrangregeln 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 ist bold smaller#
!
Ausrufezeichen Gruppe muss mindestens 1 Wert erzeugen [ bold? smaller? ]!
Bereiche [min,max]
Numerischer eingeklammeter Bereich Gibt einen numerischen Bereich an <integer [0,â]>
Spezifikationen Siehe auch
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4