Wert-Definitionssyntax

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

In CSS können einige Zeichen eigenständig 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 oder Parameter in mathematikä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 Kurzschreibweiseigenschaften verwendet, um Komponenten desselben Typs zu trennen, die zu verschiedenen Eigenschaften gehören.

Beide Symbole erscheinen wörtlich in einer Wertdefinition.

Grundlegende Datentypen

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

Nicht-terminale Datentypen

Weniger häufige Datentypen, genannt nicht-terminale Datentypen, sind ebenfalls von < und > umgeben.

Nicht-terminale Datentypen sind zweierlei Art:

• Datentypen haben denselben Namen wie eine Eigenschaft, eingeschlossen in Anführungszeichen. In diesem Fall teilt der Datentyp dieselbe Wertemenge wie die Eigenschaft. Sie werden oft in der Definition von Kurzschreibweiseigenschaften verwendet.
• Datentypen haben nicht denselben Namen 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 ist die Definition normalerweise physisch sehr nahe an der Definition der Eigenschaft, die sie verwendet.

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

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 in der Nähe der durch die Klammern definierten Komponente steht und bevor dieser 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 exakten Reihenfolge erscheinen.

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 angegebenen 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

Das Trennen von zwei oder mehreren Komponenten durch ein doppeltes Und-Zeichen, &&, bedeutet, dass all diese Entitäten verpflichtend sind, aber in beliebiger Reihenfolge erscheinen dürfen.

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.

Das Trennen von zwei oder mehreren Komponenten durch einen doppelten Strich, ||, bedeutet, dass alle Entitäten Optionen sind: mindestens eine muss vorhanden sein, und sie dürfen in beliebiger Reihenfolge erscheinen. Typischerweise wird dies verwendet, um die verschiedenen Werte einer Kurzschreibweiseigenschaft zu definieren.

<'border-width'> || <'border-style'> || <'border-color'>

Dieses Beispiel entspricht den folgenden Werten:

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

Aber nicht:

• blue yellow, da eine Komponente höchstens einmal erscheinen darf.
• bold, da es kein erlaubtes Schlüsselwort als Wert einer der Entitäten ist.

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

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

Ein Multiplikator ist ein Zeichen, das angibt, wie oft eine vorangehende 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.

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

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.

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

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.

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

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 jedem smaller Schlüsselwort erscheinen muss.

Der geschweifte Klammern-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.

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 jedem smaller Schlüsselwort erscheinen muss.

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

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 unterschiedlichen 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 anzugeben, wie oft die Entität wiederholt wird.

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.

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 produzieren muss; auch wenn die Grammatik der Elemente innerhalb der Gruppe es anderweitig ermöglichen würde, dass der gesamte Inhalt weggelassen wird, darf mindestens ein Komponentenwert nicht weggelassen werden.

[ bold? smaller? ]!

Dieses Beispiel entspricht 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.

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

<integer [1,∞]>

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

Die Bereichsnotation in Klammern [min, max] gibt einen inklusiven Bereich zwischen einem min- und 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 spezifiziert 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 [-∞,∞]>: Jeder Ganzzahlwert von negativer Unendlichkeit bis positiver Unendlichkeit.
• <integer [0,∞]>: Jeder Ganzzahlwert 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,∞]>: Jeder Ganzzahlwert außer Null ist gültig.

• CSS-Schlüsselkonzepte:
  • CSS-Syntax
  • Kommentare
  • Spezifität
  • Vererbung
  • Box-Modell
  • Layout-Modi
  • Visuelle Formatierungsmodelle
  • Rand-Kollaps
  • Werte
    • Initialwerte
    • Berechnete Werte
    • Genutzte Werte
    • Tatsächliche Werte
  • Wert-Definitionssyntax
  • Kurzschrift-Eigenschaften
  • Ersetzte Elemente