CSS-Datentypen

CSS-Datentypen definieren typische Werte (einschließlich Schlüsselwörter und Einheiten), die von CSS-Eigenschaften und Funktionen akzeptiert werden. Sie sind eine spezielle Art von Komponentenwerttyp.

Die am häufigsten verwendeten Typen sind in der CSS Values and Units-Spezifikation definiert. Diese Spezifikation definiert auch funktionale Notationen, die komplexere Typen oder Verarbeitungen ermöglichen. Andere Typen sind in den Spezifikationen definiert, auf die sie zutreffen.

Im Folgenden finden Sie einen Verweis auf die Typen, mit denen Sie am wahrscheinlichsten konfrontiert werden, es ist jedoch kein umfassender Verweis auf alle Typen, die in jeder CSS-Spezifikation definiert sind.

Syntax

css

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

In formaler CSS-Syntax werden Datentypen durch ein Schlüsselwort gekennzeichnet, das zwischen den spitzen Klammern < und > gesetzt wird.

Textuelle Datentypen

Diese Typen schließen Schlüsselwörter und Bezeichner sowie Zeichenfolgen und URLs ein.

Vordefinierte Schlüsselwörter

Schlüsselwörter mit einer vordefinierten Bedeutung, zum Beispiel der Wert 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 festgelegte Wert.
inherit: Der berechnete Wert der Eigenschaft des Elternelements.
revert: Setzt den Kaskadenwert auf den Wert der vorherigen Quelle zurück.
revert-layer: Setzt den Kaskadenwert auf den Wert der vorherigen Kaskadenschicht zurück.
unset: Fungiert je nach Vererbungsstatus als inherit oder initial.

<custom-ident>

Ein benutzerdefinierter Bezeichner, zum Beispiel der mittels der grid-area-Eigenschaft vergebene Name.

<dashed-ident>

Ein <custom-ident> mit der zusätzlichen Einschränkung, dass es mit zwei Bindestrichen beginnen muss, beispielsweise bei benutzerdefinierten CSS-Eigenschaften.

<string>

Eine in Anführungszeichen gesetzte Zeichenkette, wie sie für einen Wert der content-Eigenschaft verwendet wird.

<url>

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

Numerische Datentypen

Diese Datentypen werden verwendet, um Mengen, Indizes und Positionen anzugeben. Die Mehrheit dieser Typen wird in der Values and Units-Spezifikation definiert, jedoch werden zusätzliche Typen in anderen Spezifikationen beschrieben, wenn sie spezifisch für diese Spezifikation allein sind — beispielsweise die fr-Einheit 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 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-Grid-Layout, geschrieben als <number> mit der fr-Einheit angehängt und verwendet zur Größenbestimmung von Rasterspuren.

Mengen

Diese Typen werden verwendet, um Entfernungen 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 Einheit s oder ms.
<frequency>: Frequenzen sind eine <dimension> mit einer angehängten Einheit Hz oder kHz.
<resolution>: Ist eine <dimension> mit einer Einheitenkennung dpi, dpcm, dppx, oder x.

Kombinationen von Typen

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

<length-percentage>: Ein Typ, der eine Länge oder ein Prozent als Wert akzeptieren kann.
<frequency-percentage>: Ein Typ, der eine Frequenz oder ein Prozent als Wert akzeptieren kann.
<angle-percentage>: Ein Typ, der einen Winkel oder ein Prozent als Wert akzeptieren kann.
<time-percentage>: Ein Typ, der eine Zeit oder ein Prozent als Wert akzeptieren kann.

Farbe

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

<color>: Angegeben als Schlüsselwort oder numerischer Farbwert.
<alpha-value>: Spezifiziert die Transparenz einer Farbe. Kann eine <number> sein, wobei 0 völlig transparent und 1 völlig undurchsichtig ist, oder ein <percentage>, wobei 0% völlig transparent und 100% völlig undurchsichtig ist.
<hue>: Spezifiziert den <angle>, mit einer Einheitenkennung deg, grad, rad, oder turn, oder eine einheitenlose <number>, die als deg interpretiert wird, des Farbrads, das spezifisch für die <absolute-color-functions> ist, von denen es ein Bestandteil ist.

Bilder

Die CSS-Bilderspezifikation definiert die Datentypen, die mit Bildern zu tun haben, einschließlich Verläufen.

<image>: Eine URL-Verknüpfung 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>: Ein <color> und ein <length-percentage>, um den Farbverlauf für diesen Teil des Gradienten anzuzeigen.
<linear-color-hint>: Ein <length-percentage>, um anzuzeigen, wie die Farbe interpoliert wird.
<ending-shape>: Wird für radiale Verläufe verwendet; kann einen Schlüsselwortwert circle oder ellipse haben.
<size>: Bestimmt die Größe der Endform des radialen Gradienten. Dies akzeptiert einen Schlüsselwortwert oder eine <length>, aber keinen Prozentwert.

2D-Positionierung

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

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

Berechnungsdatentypen

Diese Datentypen werden in CSS-Mathematische Funktionen-Berechnungen verwendet.

<calc-sum>: Eine Berechnung, die eine Folge von Berechnungswerten darstellt, durch Addition (+) und Subtraktion (-) Operatoren unterbrochen. Bei diesem Datentyp müssen beide Werte Einheiten haben.
<calc-product>: Eine Berechnung, die eine Folge von Berechnungswerten darstellt, durch Multiplikations (*) und Divisions (/) Operatoren unterbrochen. Beim Multiplizieren muss ein Wert einheitslos sein. Beim Dividieren 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 und in CSS-Mathematikfunktionen verwendet werden können.

Spezifikationen

Specification
CSS Values and Units Module Level 4