Wertedefinitionssyntax

Komponententypen

Schlüsselwörter

Allgemeine 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. Diese werden in der Wertedefinition nicht angezeigt und sind implizit definiert.

Literale

Im CSS können einige Zeichen, wie der Schrägstrich (/) oder das Komma (,), alleine stehen und werden in einer Eigenschaftsdefinition verwendet, um ihre Teile zu trennen. Das Komma wird oft 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 sind, aber eine gemeinsame Syntax haben. Typischerweise wird der Schrägstrich in Kurzschreibweisen verwendet, um Komponenten desselben Typs zu trennen, die jedoch zu verschiedenen Eigenschaften gehören.

Beide Symbole erscheinen wörtlich in einer Wertedefinition.

Datentypen

Grundlegende Datentypen

Einige Datentypen werden in ganz CSS verwendet und sind einmal für alle Werte in der Spezifikation definiert. Diese sogenannten grundlegenden Datentypen werden mit ihrem Namen dargestellt, umgeben von den Symbolen < und >: <angle>, <string>, …

Nichtterminale Datentypen

Weniger verbreitete Datentypen, die als nichtterminale Datentypen bezeichnet werden, sind ebenfalls von < und > umgeben.

Nichtterminale Datentypen sind von zwei Arten:

• Datentypen, die denselben Namen wie eine Eigenschaft teilen, in Anführungszeichen gesetzt. In diesem Fall hat der Datentyp denselben Wertebereich wie die Eigenschaft. Sie werden oft bei der Definition von Kurzschreibweisen verwendet.
• Datentypen, die nicht denselben Namen wie eine Eigenschaft teilen. Diese Datentypen sind den grundlegenden Datentypen sehr ähnlich. Sie unterscheiden sich nur von den grundlegenden Datentypen durch die physische Lage ihrer Definition. In diesem Fall ist die Definition normalerweise physisch sehr nah an der Definition der Eigenschaft, die sie verwendet.

Komponentenkombinatoren

Klammern

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

example = 
  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 der durch die Klammern definierten Komponente steht, muss es davor erscheinen.

Nebeneinanderstellung

Das Nebeneinanderlegen mehrerer Schlüsselwörter, Literale oder Datentypen, nur durch ein oder mehrere Leerzeichen getrennt, wird als Nebeneinanderstellung bezeichnet. Alle nebeneinander gestellten Komponenten sind verpflichtend und müssen in genau der Reihenfolge erscheinen.

example = 
  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 ausgedrückten Ordnung sein müssen
• bold 1em thin, da die Entitäten obligatorisch sind; das Komma, ein Literal, muss vorhanden sein
• bold 0.5ms, thin, da ms-Werte keine <length> sind

Doppelte Kaufmanns-Und

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

example = 
  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.

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 Kurzschreibweise zu definieren.

example = 
  <number>  ||
  <length>  ||
  <color>   

Dieses Beispiel passt zu 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 als Wert eines der Entitäten erlaubtes Schlüsselwort ist.

Einfache Stange

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

example = 
  <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 darf.
• 3em 4.5em, da eine Komponente höchstens einmal vorhanden sein darf.

Komponentenmultiplikatoren

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 hinzugefügt werden und haben Vorrang vor allen Kombinatoren.

Sternchen (*)

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

example = 
  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, da bold nebeneinander steht und vor jedem smaller-Schlüsselwort erscheinen muss.

Pluszeichen (+)

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

example = 
  bold smaller+  

Dieses Beispiel passt zu 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 nebeneinander steht und vor jedem smaller-Schlüsselwort erscheinen muss.

Fragezeichen (?)

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

example = 
  bold smaller?  

Dieses Beispiel passt zu den folgenden Werten:

• bold
• bold smaller

Aber nicht:

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

Geschwungene Klammern ({ })

Der geschwungene 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 passt zu 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 nebeneinander steht und vor jedem smaller-Schlüsselwort erscheinen muss.

Rautenzeichen (#)

Der Rautenzeichen-Multiplikator gibt an, dass die Entität einmal oder mehrmals wiederholt werden kann (zum Beispiel der Pluszeichen-Multiplikator), aber jede Vorkommnis durch ein Komma (',') getrennt ist.

example = 
  bold smaller#  

Dieses Beispiel passt zu 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 Vorkomnise von smaller durch Kommata getrennt werden müssen.
• smaller, da bold nebeneinander steht und vor jedem smaller-Schlüsselwort erscheinen muss.

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

example = 
  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, smaller, da smaller höchstens dreimal erscheinen darf.

example = 
  bold smaller#{2}  

Dieses Beispiel passt zu 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 erforderlich ist und mindestens einen Wert erzeugen muss; selbst wenn die Grammatik der Elemente in der Gruppe deren gesamtes Weglassen erlauben würde, muss mindestens ein Komponentwert nicht weggelassen werden.

example = 
  [ bold? smaller? ]!  

Dieses Beispiel passt zu den folgenden Werten:

• bold
• smaller
• bold smaller

Aber nicht:

• weder bold noch smaller, da eines von ihnen erscheinen muss.
• smaller bold, da bold nebeneinander steht und vor dem smaller-Schlüsselwort erscheinen muss.
• bold smaller bold, da bold und smaller nur einmal erscheinen dürfen.

Klammerbereichsnotation ([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 unendlich, einschließlich, akzeptieren. Die entsprechende Syntax sieht folgendermaßen aus:

example = 
  <integer [1,∞]>  

Jeder Wert, der außerhalb dieses angegebenen Bereichs liegt, bewirkt, dass die gesamte Deklaration ungültig wird, daher ignoriert der Browser sie.

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

Hier sind einige weitere Beispiele:

• <integer [-∞,∞]>: Jede Ganzzahl von negativer Unendlichkeit zu positiver Unendlichkeit.
• <integer [0,∞]>: Jede Ganzzahl von 0 zu positiver Unendlichkeit ist gültig. Negative Ganzzahlen sind ungültig.
• <time [0s,10s]> oder <time [0,10s]>: Jeder Zeitraum von 0 bis 10 Sekunden ist gültig.
• <integer [-∞,-1]> | <integer [1,∞]>: Jede Ganzzahl außer Null ist gültig.

Zusammenfassung

Spezifikationen

Siehe auch

• Zentrale CSS-Konzepte:
  • CSS-Syntax
  • Kommentare
  • Spezifität
  • Vererbung
  • Box-Modell
  • Layout-Modi
  • Visuelles Formatierungsmodell
  • Randkollaps
  • Werte
    • Initialwerte
    • Berechnete Werte
    • Verwendete Werte
    • Tatsächliche Werte
  • Wertedefinitionssyntax
  • Kurzschreibweisen
  • Ersetzte Elemente