Wertdefinition-Syntax

Werttypen der Komponenten

Schlüsselwörter

Generische Schlüsselwörter

Ein Schlüsselwort mit vordefinierter 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 in der Wertdefinition nicht angezeigt und sind implizit definiert.

Literale

In CSS können einige Zeichen alleine 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 zu trennen oder Parameter in mathematischen Funktionen; der Schrägstrich trennt oft Teile des Wertes, die semantisch unterschiedlich sind, aber eine gemeinsame Syntax haben. Typischerweise wird der Schrägstrich in Kurzschreibweise-Eigenschaften verwendet, um Komponenten desselben Typs zu trennen, die jedoch zu unterschiedlichen Eigenschaften gehören.

Beide Symbole erscheinen wörtlich in einer Wertdefinition.

Datentypen

Grundlegende Datentypen

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

Nichtterminale Datentypen

Weniger häufige Datentypen, nichtterminale Datentypen genannt, sind ebenfalls von < und > umgeben.

Nichtterminale Datentypen sind von zwei Arten:

• Datentypen, die denselben Namen wie eine Eigenschaft teilen und in Anführungszeichen gesetzt sind. In diesem Fall teilt der Datentyp denselben Wertemenge wie die Eigenschaft. Sie werden oft in der Definition von Kurzschreibweise-Eigenschaften verwendet.
• Datentypen, die nicht denselben Namen wie eine Eigenschaft teilen. Diese Datentypen sind den grundlegenden Datentypen sehr nahe. Sie unterscheiden sich von den grundlegenden Datentypen nur im physikalischen Ort ihrer Definition. In diesem Fall ist die Definition üblicherweise physikalisch sehr nah an der Definition der Eigenschaft, die sie verwendet.

Kombinatoren der Komponentenwerte

Klammern

Klammern umschließen mehrere Entitäten, Kombinatoren und Multiplikatoren und verwandeln sie dann in eine einzige 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 von den Klammern definierten Komponente steht, muss es vor dieser erscheinen.

Juxtaposition

Das Platzieren mehrerer Schlüsselwörter, Literale oder Datentypen nebeneinander, nur durch Leerzeichen getrennt, wird als Juxtaposition bezeichnet. Alle juxtapositionierten Komponenten sind verpflichtend und müssen 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ü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 keine <length> sind

Doppelt-Ampersand

Das Trennen von zwei oder mehr Komponenten durch ein doppeltes Ampersand, &&, 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.

Doppelbalken

Das Trennen von zwei oder mehr Komponenten durch einen Doppelbalken, ||, bedeutet, dass alle Entitäten Optionen sind: mindestens eine muss vorhanden sein, und sie können in beliebiger Reihenfolge erscheinen. Dies wird typischerweise verwendet, um die verschiedenen Werte einer Kurzschreibweise-Eigenschaft 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.

Einzelbalken

Das Trennen von zwei oder mehr Entitäten mit einem Einzelbalken, |, 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 entspricht 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.

Multiplikatoren der 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 Sternchenmultiplikator gibt an, dass die Entität null, einmal oder mehrere Male 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 jedem smaller-Schlüsselwort erscheinen muss.

Pluszeichen (+)

Der Plusmultiplikator gibt an, dass die Entität ein oder mehrere Male 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 jedem smaller-Schlüsselwort erscheinen muss.

Fragezeichen (?)

Der Fragezeichenmultiplikator gibt an, dass die Entität optional ist und null oder ein Mal erscheinen muss.

example = 
  bold smaller?  

Dieses Beispiel entspricht den folgenden Werten:

• bold
• bold smaller

Aber nicht:

• bold smaller smaller, da smaller höchstens einmal erscheinen muss.
• smaller, da bold juxtapositioniert ist und vor jedem smaller-Schlüsselwort erscheinen muss.

Geschweifte Klammern ({ })

Der geschweifte Klammer-Multiplikator, der zwei durch ein Komma getrennte ganze Zahlen A und B umschließ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 muss.
• smaller, da bold juxtapositioniert ist und vor jedem smaller-Schlüsselwort erscheinen muss.

Rautezeichen (#)

Der Rautezeichen-Multiplikator gibt an, dass die Entität einmal oder mehrmals wiederholt werden kann (zum Beispiel der Plusmultiplikator), aber jede Vorkommen wird durch ein Komma (',') getrennt.

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 werden müssen.
• smaller, da bold juxtapositioniert ist und vor jedem smaller-Schlüsselwort erscheinen muss.

Der 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 muss.

example = 
  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 erforderlich ist und mindestens einen Wert erzeugen muss; selbst wenn die Grammatik der in der Gruppe enthaltenen Elemente es sonst erlauben würde, den gesamten Inhalt wegzulassen, muss mindestens ein Komponentenwert enthalten sein.

example = 
  [ 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 smaller-Schlüsselwort erscheinen muss.
• bold smaller bold, da bold und smaller nur einmal erscheinen dürfen.

Klammerreiche-Notation ([min,max])

Einige Typen können numerische Werte innerhalb eines bestimmten Bereichs akzeptieren. Beispielsweise kann die column-count-Eigenschaft einen ganzzahligen Wert zwischen positiv eins und unendlich, einschließlich, akzeptieren. Die entsprechende Syntax sieht folgendermaßen aus:

example = 
  <integer [1,∞]>  

Jeder Wert außerhalb dieses spezifizierten Bereichs führt dazu, dass die gesamte Deklaration ungültig ist, daher wird der Browser sie ignorieren.

Die Klammerreiche-Notation [min, max] gibt einen inklusiven Bereich zwischen einem min- und einem max-Wert an. Diese Notation wird in numerischen Typnotations 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 null Werte mit oder ohne Einheiten 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 positive 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

Spezifikationen

Siehe auch

• CSS Schlüsselkonzepte:
  • CSS-Syntax
  • Kommentare
  • Spezifität
  • Vererbung
  • Box-Modell
  • Layoutmodi
  • Visuelles Formatierungsmodell
  • Ränder zusammenfallen
  • Werte
    • Initialwerte
    • Berechnete Werte
    • Verwendete Werte
    • Tatsächliche Werte
  • Wertdefinition-Syntax
  • Kurzschreibweise-Eigenschaften
  • Ersetzte Elemente