Wertdefinition Syntax

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

Literale

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

Beide Symbole erscheinen wörtlich in einer Wertdefinition.

Datentypen

Grundlegende Datentypen

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

Nicht-terminale Datentypen

Weniger gebräuchliche Datentypen, als nicht-terminale Datentypen bezeichnet, sind ebenfalls von < und > umgeben.

Nicht-terminale Datentypen sind von zwei Arten:

• Datentypen, die den gleichen Namen wie eine Eigenschaft teilen, in Anführungszeichen gesetzt. In diesem Fall teilt der Datentyp denselben Wertensatz wie die Eigenschaft. Sie werden oft in der Definition von Kurzschreib-Eigenschaften verwendet.
• Datentypen, die den gleichen Namen nicht teilen wie eine Eigenschaft. Diese Datentypen sind den grundlegenden Datentypen sehr nahe. Sie unterscheiden sich nur in der physischen Lage ihrer Definition von den grundlegenden Datentypen. In diesem Fall befindet sich die Definition normalerweise physisch sehr nah an der Definition der Eigenschaft, die sie verwendet.

Komponentenwert-Kombinatoren

Klammern

Klammern umschließen mehrere Entitäten, Kombinatoren und Multiplikatoren und verwandeln 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:

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

Juxtaposition

Das Platzieren mehrerer Schlüsselwörter, Literale oder Datentypen nebeneinander, nur durch eines oder mehrere Leerzeichen getrennt, wird Juxtaposition genannt. Alle juxtapositionierten Komponenten sind obligatorisch und müssen in genau dieser 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 angegebenen Reihenfolge sein müssen
• bold 1em thin, da die Entitäten obligatorisch sind; das Komma, ein Literal, muss vorhanden sein
• bold 0.5ms, thin, da die ms-Werte keine <length> sind

Doppelte kaufmännische Und-Zeichen

Das Trennen von zwei oder mehr Komponenten durch ein doppeltes kaufmännisches Und-Zeichen, &&, bedeutet, dass alle diese Entitäten obligatorisch sind, 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 vertikale Linie

Das Trennen von zwei oder mehr Komponenten durch eine doppelte vertikale Linie, ||, 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 Kurzschreib-Eigenschaft 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 muss.
• bold, da es kein erlaubtes Schlüsselwort für einen der Entitäten ist.

Einzelne vertikale Linie

Das Trennen von zwei oder mehr Entitäten durch eine einzelne vertikale Linie, |, bedeutet, dass alle Entitäten exklusive Optionen sind: genau eine dieser Optionen muss präsent sein. Dies wird normalerweise 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 muss.
• 3em 4.5em, da eine Komponente höchstens einmal vorhanden sein darf.

Komponentenwert-Multiplikatoren

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 mehrere Male 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 juxtapositioniert ist, und vor jedem smaller-Schlüsselwort erscheinen muss.

Pluszeichen (+)

Der Plus-Multiplikator gibt an, dass die Entität ein- 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 juxtapositioniert ist 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 juxtapositioniert ist und vor jedem smaller-Schlüsselwort erscheinen muss.

Geschweifte Klammern ({ })

Der Multiplikator mit geschweiften Klammern, 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 juxtapositioniert ist und vor jedem smaller-Schlüsselwort erscheinen muss

Rautezeichen (#)

Der Rautezeichen-Multiplikator gibt an, dass die Entität einmal oder öfter wiederholt werden kann (zum Beispiel der Plus-Multiplikator), aber jede Vorkommen wird durch Kommas (',') getrennt.

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 Vorkommen von smaller durch Kommas getrennt sein müssen.
• smaller, da bold juxtapositioniert ist und vor jedem smaller-Schlüsselwort erscheinen muss.

Das Rautezeichen kann optional von geschweiften Klammern gefolgt werden, um anzuzeigen, 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 folgendem 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 innerhalb der Gruppe es sonst erlauben würde, die gesamten Inhalte wegzulassen, muss mindestens ein Komponentenwert nicht weggelassen werden.

example = 
  [ bold? smaller? ]!  

Dieses Beispiel passt zu den folgenden Werten:

• bold
• smaller
• bold smaller

Aber nicht:

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

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 unendlich, einschließlich, akzeptieren. Die entsprechende Syntax sieht so aus:

example = 
  <integer [1,∞]>  

Ein Wert außerhalb dieses angegebenen Bereichs führt dazu, dass die gesamte Deklaration ungültig ist, daher wird der Browser ihn 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 beinhalten, 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 spezifiziert haben, zum Beispiel <time [0s,10s]> oder <time [0,10s]>.

Hier sind einige weitere Beispiele:

• <integer [-∞,∞]>: Beliebige Ganzzahl von negativer Unendlichkeit bis positiver Unendlichkeit.
• <integer [0,∞]>: Beliebige 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
  • Layout-Modi
  • Visuelles Formatierungsmodell
  • Randzusammenführung
  • Werte
    • Standardwerte
    • Berechnete Werte
    • Verwendete Werte
    • Tatsächliche Werte
  • Wertdefinition Syntax
  • Kurzschreib-Eigenschaften
  • Ersetzte Elemente