CSS-Datentypen

selector {
  property: <unit-data-type>;
}

Im formalen CSS-Syntax werden Datentypen durch ein zwischen den spitzen Klammern < und > platziertes Schlüsselwort dargestellt.

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

Vorgegebene Schlüsselwörter

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

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 auf dem übergeordneten Element.

revert

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

unset

Wirkt 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 Eigenschaft grid-area zugewiesen wird.

<dashed-ident>

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

<string>

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

<url>

Ein Zeiger auf eine Ressource, zum Beispiel als Wert von background-image.

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

<integer>

Eine oder mehrere Dezimaleinheiten von 0 bis 9.

<number>

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

<dimension>

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

<percentage>

Eine Zahl mit einem Prozentzeichen, zum Beispiel 10 %.

<ratio>

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

<flex>

Eine flexible Länge eingeführt für CSS-Grid-Layout, geschrieben als <number> mit der Einheit fr und verwendet für die Größe von Grid-Spuren.

Diese Typen werden verwendet, um Entfernungen und andere Mengen anzugeben.

<length>

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

<angle>

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

<time>

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

<frequency>

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

<resolution>

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

Einige CSS-Eigenschaften können einen Maßwert oder einen Prozentwert annehmen. In diesem Fall wird der Prozentwert auf eine Menge aufgelöst, die dem zulässigen Maß entspricht. Eigenschaften, die zusätzlich zu einem Maß einen Prozentsatz akzeptieren können, verwenden einen der unten aufgeführten Typen.

<length-percentage>

Ein Typ, der ein Maß 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-Farbenspezifikation definiert den Datentyp <color> und andere Typen, die sich auf Farben in CSS beziehen.

<color>

Angegeben als Schlüsselwort oder numerischer Farbwert.

<alpha-value>

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

<hue>

Gibt den <angle> an, mit einem Einheitsbezeichner von deg, grad, rad oder turn, oder ein einheitloses <number>, das als deg interpretiert wird, des Farbkreises, spezifisch für die <absolute-color-functions>, von denen es ein Bestandteil ist.

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

<image>

Eine URL-Referenz zu einem Bild oder einem Farbverlauf.

<color-stop-list>

Eine Liste von zwei oder mehr Farbstopps mit optionalen Übergangsinformationen unter Verwendung eines Farbhints.

<linear-color-stop>

Eine <color> und ein <length-percentage>, um den Farbverlauf für diesen Teil des Verlaufs anzugeben.

<linear-color-hint>

Ein <length-percentage>, um anzugeben, wie die Farbe interpoliert.

<ending-shape>

Wird für radiale Verläufe verwendet; kann einen Schlüsselwortwert von circle oder ellipse haben.

<size>

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

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

<position>

Definiert die Position eines Objektbereichs. Akzeptiert einen Schlüsselwortwert wie top oder left, oder ein <length-percentage>.

Diese Datentypen werden in CSS-Math-Funktion Berechnungen verwendet.

<calc-sum>

Eine Berechnung, die eine Abfolge von Berechnungswerten ist, die mit Addition (+) und Subtraktion (-) verknüpft sind. Dieser Datentyp erfordert, dass beide Werte Einheiten haben.

<calc-product>

Eine Berechnung, die eine Abfolge von Berechnungswerten ist, die mit Multiplikation (*) und Division (/) verknüpft sind. Bei der Multiplikation muss ein Wert einheitslos sein. Bei der Division muss der zweite Wert einheitslos 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-Math-Funktionen verwendet werden können.

• CSS Units and Values
• Learn: Values and units
• CSS Functional Notation