Wert-Definitionssyntax

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-Funktionen akzeptieren die Schlüsselwörter inherit, initial, revert, revert-layer und unset. Sie werden in der Wert-Definition nicht angezeigt und sind implizit definiert.

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 häufig verwendet, um Werte in Aufzählungen oder Parameter in mathematischen Funktionen zu trennen; der Schrägstrich trennt oft Teile eines Wertes, die semantisch unterschiedlich, aber von gleicher Syntax sind. Typischerweise wird der Schrägstrich bei Kurzschreibweise-Eigenschaften verwendet, um Komponenten desselben Typs zu trennen, die jedoch zu verschiedenen Eigenschaften gehören.

Beide Symbole erscheinen wörtlich in einer Wert-Definition.

Grundlegende Datentypen

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

Nicht-terminal Datentypen

Weniger gebräuchliche Datentypen, sogenannte nicht-terminal Datentypen, sind ebenfalls von < und > umgeben.

Nicht-terminale Datentypen gibt es in zwei Arten:

• Datentypen, die den gleichen Namen wie eine Eigenschaft teilen, in Anführungszeichen gesetzt. In diesem Fall teilt der Datentyp die gleiche Menge von Werten wie die Eigenschaft. Sie werden häufig in der Definition von Kurzschreibweise-Eigenschaften verwendet.
• Datentypen, die nicht den gleichen Namen wie eine Eigenschaft teilen. Diese Datentypen sind den grundlegenden Datentypen sehr ähnlich. Sie unterscheiden sich nur von den grundlegenden Datentypen durch den physikalischen Ort ihrer Definition. In diesem Fall ist die Definition üblicherweise physisch sehr nah an der Definition der diese Datentypen benutzenden Eigenschaft.

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

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 durch die Klammern definierten Komponente verknüpft ist, muss es davor erscheinen.

Das nebeneinanderstellen mehrerer Schlüsselwörter, Literale oder Datentypen, nur durch ein oder mehrere Leerzeichen getrennt, wird als Juxtaposition bezeichnet. Alle juxtapositionierten Komponenten sind verpflichtend und sollten in genau dieser Reihenfolge erscheinen.

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 Einheiten in der angegebenen Reihenfolge erscheinen müssen
• bold 1em thin, da die Einheiten verbindlich sind; das Komma, ein Literal, muss vorhanden sein
• bold 0.5ms, thin, da die ms-Werte keine <length> sind

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

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.

Das Trennen von zwei oder mehr Komponenten durch einen doppelten Strich, ||, 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 Kurzform-Eigenschaft zu definieren.

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

Dieses Beispiel passt zu den folgenden Werten:

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

Aber nicht:

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

Das Trennen von zwei oder mehr Entitäten durch einen einzelnen Strich, |, 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 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.

Ein Multiplikator ist ein Zeichen, das angibt, wie oft eine vorhergehende Einheit 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 Sternchen-Multiplikator gibt an, dass die Entität null, einmal oder mehrmals erscheinen darf.

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.

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

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.

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

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.

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

Der Rautezeichen-Multiplikator zeigt an, dass die Entität mindestens einmal oder mehrmals wiederholt werden kann (ähnlich dem Plus-Multiplikator), jedoch muss jede Instanz durch ein Komma (',') getrennt sein.

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

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.

bold smaller#{2}

Dieses Beispiel passt zum folgenden Wert:

• bold smaller, smaller

Aber nicht:

• bold smaller, da smaller genau zweimal erscheinen muss.

Der Ausrufezeichen-Multiplikator nach einer Gruppe zeigt an, dass die Gruppe erforderlich ist und mindestens einen Wert produzieren muss; auch wenn die Grammatik der Inhalte innerhalb der Gruppe es sonst erlauben würde, den gesamten Inhalt wegzulassen, muss mindestens ein Komponentenwert nicht weggelassen werden.

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

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

<integer [1,∞]>

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

Die Klammernotierung des Bereichs [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]>. Unendlichkeiten (-∞ und ∞) dürfen keine Einheiten angegeben haben. Typen, die in Einheiten spezifiziert werden, 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 ganzzahlige Wert von negativer zu positiver Unendlichkeit.
• <integer [0,∞]>: Jeder ganzzahlige Wert ab 0 bis zur positiven Unendlichkeit ist gültig. Negative Ganzzahlen sind ungültig.
• <time [0s,10s]> oder <time [0,10s]>: Jede Dauer zwischen 0 und 10 Sekunden ist gültig.
• <integer [-∞,-1]> | <integer [1,∞]>: Jede Ganzzahl außer Null ist gültig.

• CSS Schlüsselkonzepte:
  • CSS-Syntax
  • Kommentare
  • Spezifität
  • Vererbung
  • Box-Modell
  • Layout-Modi
  • Visuelles Formatierungsmodell
  • Randzusammenfall
  • Werte
    • Anfangswerte
    • Berechnete Werte
    • Verwendete Werte
    • Tatsächliche Werte
  • Wert-Definitionssyntax
  • Kurzschreibweise-Eigenschaften
  • Ersetzte Elemente