Wertdefinition-Syntax

Komponententypen

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 und sind implizit definiert.

Literale

Im CSS können einige Zeichen eigenständig erscheinen, wie der Schrägstrich (/) oder das Komma (,), und werden in einer Eigenschaftendefinition genutzt, 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 verschieden sind, aber eine gemeinsame Syntax haben. Typischerweise wird der Schrägstrich in Kurzschreibeigenschaften verwendet, um Komponenten des gleichen Typs, die zu verschiedenen Eigenschaften gehören, zu trennen.

Beide Symbole erscheinen wörtlich in einer Wertdefinition.

Datentypen

Basisdatentypen

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

Nicht-terminale Datentypen

Weniger gängige Datentypen, sogenannte nicht-terminale Datentypen, sind ebenfalls von < und > umgeben.

Nicht-terminale Datentypen gibt es in zwei Arten:

• Datentypen mit dem gleichen Namen wie eine Eigenschaft, in Anführungszeichen gesetzt. In diesem Fall teilt der Datentyp die gleiche Menge an Werten wie die Eigenschaft. Sie werden oft in der Definition von Kurzschreibeigenschaften verwendet.
• Datentypen ohne den gleichen Namen wie eine Eigenschaft. Diese Datentypen sind den Basisdatentypen sehr nahe. Sie unterscheiden sich von den Basisdatentypen nur im physischen Ort ihrer Definition. In diesem Fall ist die Definition normalerweise physisch sehr nah an der Definition der Eigenschaft, die sie verwendet.

Kombinatoren für Komponentenwerte

Klammern

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

example = 
  bold [ thin && <length> ]  

Dieses Beispiel passt zu den folgenden Werten:

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

Aber nicht zu:

• thin bold 3em, da bold mit der Komponente, die durch die Klammern definiert ist, in Reihe steht, muss es davor erscheinen.

Nebeneinanderstellung

Das Platzieren mehrerer Schlüsselwörter, Literale oder Datentypen nebeneinander, nur durch ein oder mehrere Leerzeichen getrennt, wird Nebeneinanderstellung genannt. Alle nebeneinandergestellten Komponenten sind zwingend erforderlich und müssen in der genauen 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 zu:

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

Doppelte Und-Verknüpfung

Das Trennen von zwei oder mehr Komponenten durch eine doppelte Und-Verknüpfung, &&, bedeutet, dass alle diese Entitäten zwingend erforderlich sind, jedoch 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 zu:

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

Doppelte Oder-Verknüpfung

Das Trennen von zwei oder mehr Komponenten durch eine doppelte Oder-Verknüpfung, ||, 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 Kurzschreibeigenschaft zu definieren.

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

Dieses Beispiel passt zu den folgenden Werten:

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

Aber nicht zu:

• 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.

Einfache Oder-Verknüpfung

Das Trennen von zwei oder mehr Entitäten durch eine einfache Oder-Verknüpfung, |, 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 zu:

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

Multiplikatoren für Komponentenwerte

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 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 zu:

• smaller, da bold in Reihe steht und vor jedem smaller Schlüsselwort erscheinen muss.

Pluszeichen (+)

Der Plus-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 zu:

• bold, da smaller mindestens einmal erscheinen muss.
• smaller, da bold in Reihe 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 zu:

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

Geschweifte Klammern ({ })

Der geschweifte Klammern Multiplikator, umschließt zwei durch ein Komma getrennte ganze Zahlen A und B und zeigt an, dass die Entität mindestens A 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 zu:

• bold, da smaller mindestens einmal erscheinen muss.
• bold smaller smaller smaller smaller, da smaller höchstens dreimal erscheinen darf.
• smaller, da bold in Reihe 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 Plus-Multiplikator), aber jedes Vorkommen 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 zu:

• 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 in Reihe steht und vor jedem smaller Schlüsselwort erscheinen muss.

Das Rautenzeichen kann optional von geschweiften 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 zu:

• 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 zu:

• 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 produzieren muss; selbst wenn die Grammatik der Elemente innerhalb der Gruppe ansonsten das Auslassen der gesamten Inhalte erlauben würde, muss mindestens ein Komponentenwert nicht weggelassen werden.

example = 
  [ bold? smaller? ]!  

Dieses Beispiel passt zu den folgenden Werten:

• bold
• smaller
• bold smaller

Aber nicht zu:

• weder bold noch smaller, da eines von ihnen erscheinen muss.
• smaller bold, da bold in Reihe 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 Eigenschaft column-count einen ganzzahligen Wert zwischen positiv 1 und unendlich, einschließlich, akzeptieren. Die entsprechende Syntax sieht so aus:

example = 
  <integer [1,∞]>  

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

Die Klammerbereichsnotation [min, max] gibt einen inklusiven Bereich zwischen einem min- und einem max-Wert an. Diese Notation wird in numerischen Typnotationen verwendet und kann Einheiten enthalten, z.B. <angle [0,180deg]>. Positive und negative Unendlichkeit (-∞ und ∞) dürfen keine Einheiten angeben. 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 [-∞,∞]>: Jeder ganze Wert von negativer Unendlichkeit bis positiver Unendlichkeit.
• <integer [0,∞]>: Jeder ganzzahlige Wert von 0 bis zu 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,∞]>: Jeder ganzzahlige Wert außer null ist gültig.

Zusammenfassung

Spezifikationen

Siehe auch

• CSS-Schlüsselkonzepte:
  • CSS-Syntax
  • Kommentare
  • Spezifizität
  • Vererbung
  • Box-Modell
  • Layout-Modi
  • Visuelles Formatierungsmodell
  • Rand-Zusammenbruch
  • Werte
    • Anfangswerte
    • Berechnete Werte
    • Verwendete Werte
    • Tatsächliche Werte
  • Wertdefinition-Syntax
  • Kurzschreibeigenschaften
  • Ersetzte Elemente