CSS-Datentypen

In der formalen CSS-Syntax werden Datentypen durch ein Keyword angezeigt, das zwischen spitzen Klammern < und > gesetzt wird. Sie entsprechen keiner greifbaren CSS-Code-Entität.

Diese Typen umfassen Schlüsselwörter und Bezeichner sowie Zeichenfolgen und URLs.

Vordefinierte Schlüsselwörter

Schlüsselwörter mit einer vordefinierten Bedeutung, zum Beispiel der Wert von collapse für die border-collapse-Eigenschaft.

CSS-weite Schlüsselwörter

Alle Eigenschaften, einschließlich benutzerdefinierter Eigenschaften, akzeptieren die CSS-weiten Schlüsselwörter:

initial

Der als Anfangswert der Eigenschaft angegebene Wert.

inherit

Der berechnete Wert der Eigenschaft des übergeordneten Elements.

revert

Rollt die Kaskade auf den Wert des früheren Ursprungs zurück.

revert-layer

Rollt die Kaskade auf den Wert der früheren Kaskadenschicht zurück.

unset

Agiert wie inherit oder initial, abhängig davon, ob die Eigenschaft vererbt wird oder nicht.

<custom-ident>

Ein benutzerdefinierter Bezeichner, zum Beispiel der Name, der mit der grid-area-Eigenschaft zugewiesen wird.

<dashed-ident>

Ein <custom-ident> mit der zusätzlichen Einschränkung, dass es mit zwei Bindestrichen beginnen muss, zum Beispiel für CSS Custom Properties.

<string>

Eine zitierte Zeichenfolge, wie sie beispielsweise für einen Wert der content-Eigenschaft verwendet wird.

<url>

Ein Verweis auf eine Ressource, beispielsweise als Wert einer background-image-Eigenschaft.

Diese Datentypen werden verwendet, um Mengen, Indizes und Positionen anzuzeigen. Der Großteil dieser Typen ist in der Values and Units-Spezifikation definiert, jedoch werden zusätzliche Typen in anderen Spezifikationen beschrieben, wo sie spezifisch für diese Spezifikation allein sind — zum Beispiel die fr-Einheit im CSS-Rasterlayout.

<integer>

Eine oder mehrere dezimale Einheiten von 0 bis 9.

<number>

Reelle Zahlen, die auch eine gebrochene Komponente haben können, zum Beispiel 1 oder 1.34.

<dimension>

Eine Zahl mit einer angehängten Einheit, zum Beispiel 23px oder 15em.

<percentage>

Eine Zahl mit einem angehängten Prozentzeichen, zum Beispiel 10%.

<ratio>

Ein Verhältnis, geschrieben mit der Syntax <number> / <number>.

<flex>

Eine flexible Länge, eingeführt für das CSS-Rasterlayout, geschrieben als <number> mit der angehängten fr-Einheit und verwendet für die Größenbestimmung von Rasterspuren.

Diese Typen werden verwendet, um Abstände und andere Mengen anzugeben.

<length>

Längen sind eine <dimension> und beziehen sich auf Entfernungen.

<angle>

Winkel werden in Eigenschaften wie linear-gradient() verwendet und sind eine <dimension> mit einer der Einheiten deg, grad, rad oder turn.

<time>

Dauereinheiten sind eine <dimension> mit einer s- oder ms-Einheit.

<frequency>

Frequenzen sind eine <dimension> mit einer Hz- oder kHz-Einheit.

<resolution>

Ist eine <dimension> mit einem Einheitenbezeichner von dpi, dpcm, dppx oder x.

Einige CSS-Eigenschaften können einen Dimensions- oder Prozentwert annehmen. In diesem Fall wird der Prozentwert in eine Menge umgewandelt, die mit der zulässigen Dimension übereinstimmt. Eigenschaften, die zusätzlich zu einer Dimension auch einen Prozentsatz akzeptieren können, verwenden einen der unten aufgeführten Typen.

<length-percentage>

Ein Typ, der eine Länge oder einen Prozentsatz als Wert akzeptieren kann.

<frequency-percentage>

Ein Typ, der eine Frequenz oder einen Prozentsatz als Wert akzeptieren kann.

<angle-percentage>

Ein Typ, der einen Winkel oder einen Prozentsatz als Wert akzeptieren kann.

<time-percentage>

Ein Typ, der eine Zeit oder einen Prozentsatz als Wert akzeptieren kann.

Die CSS-Farbspezifikation definiert den <color>-Datentyp und andere Typen, die sich auf Farben in CSS beziehen.

<color>

Angegeben als ein Schlüsselwort oder als numerischer Farbwert.

<alpha-value>

Gibt die Transparenz einer Farbe an. Kann ein <number> sein, in diesem Fall ist 0 vollständig transparent und 1 vollständig undurchsichtig, oder ein <percentage>, in diesem Fall ist 0% vollständig transparent und 100% vollständig undurchsichtig.

<hue>

Gibt den <angle> mit einem Einheitenbezeichner von deg, grad, rad oder turn an, oder eine einheitenlose <number>, die als deg interpretiert wird. Diese repräsentiert den Farbkreis, der spezifisch für die <absolute-color-functions> ist, deren Bestandteil sie ist.

Die CSS-Bilderspezifikation definiert die Datentypen, die sich mit Bildern, einschließlich Verläufen, befassen.

<image>

Ein URL-Verweis auf ein Bild oder einen Farbverlauf.

<color-stop-list>

Eine Liste von zwei oder mehr Farbstopps mit optionaler Übergangsinformation unter Verwendung eines Farbhinweises.

<linear-color-stop>

Eine <color> und eine <length-percentage>, um den Farbverlauf für diesen Teil des Gradienten anzuzeigen.

<linear-color-hint>

Eine <length-percentage>, um anzuzeigen, wie die Farbe interpoliert.

<ending-shape>

Wird für radiale Verläufe verwendet; kann einen Keyword-Wert von circle oder ellipse haben.

<size>

Bestimmt die Größe der Endform des radialen Verlaufs. Dies akzeptiert einen Wert eines Schlüsselworts oder einer <length>, jedoch keinen Prozentsatz.

Der <position>-Datentyp wird definiert, wie er für die <background-position>-Eigenschaft interpretiert wird.

<position>

Definiert die Position eines Objektbereichs. Akzeptiert einen Keyword-Wert wie top oder left, oder eine <length-percentage>.

Diese Datentypen werden in CSS-Mathematikfunktionen-Berechnungen verwendet.

<calc-sum>

Eine Berechnung, die eine Folge von Berechnungswerten ist, durchsetzt mit Additions- (+) und Subtraktions- (-) Operatoren. Dieser Datentyp erfordert, dass beide Werte Einheiten haben.

<calc-product>

Eine Berechnung, die eine Folge von Berechnungswerten ist, durchsetzt mit Multiplikations- (*) und Divisions- (/) Operatoren. Beim Multiplizieren muss ein Wert einheitenlos sein. Beim Dividieren muss der zweite Wert einheitenlos sein.

<calc-value>

Definiert akzeptierte Werte für Berechnungen, Werte wie <number>, <dimension>, <percentage>, <calc-keyword> oder verschachtelte <calc-sum>-Berechnungen.

<calc-keyword>

Definiert eine Anzahl von CSS-Schlüsselwörtern, die numerische Konstanten wie e und π darstellen, die in CSS-Mathematikfunktionen verwendet werden können.

• Modul CSS Werte und Einheiten
• Lernen: Werte und Einheiten
• CSS-Funktionale Notation