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 besondere 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 Verarbeitung erlauben. Andere Typen werden in den Spezifikationen definiert, auf die sie sich beziehen.

Im Folgenden finden Sie eine Referenz zu den Typen, die Ihnen am häufigsten begegnen, jedoch ist es keine umfassende Referenz für alle Typen, die in jeder CSS-Spezifikation definiert sind.

Syntax

css

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

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

Textuelle Datentypen

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

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 angegebene Wert.
inherit: Der errechnete Wert der Eigenschaft des übergeordneten Elements.
revert: Setzt die Kaskade auf den Wert des früheren Ursprungs zurück.
unset: Agiert wie inherit oder initial, je nachdem ob die Eigenschaft vererbt wird oder nicht.

<custom-ident>

Ein benutzerdefinierter Identifikator, 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 bei CSS Custom Properties.

<string>

Eine zitierte Zeichenfolge, 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 davon ist in der Values and Units-Spezifikation definiert, jedoch werden zusätzliche Typen in anderen Spezifikationen beschrieben, wo sie spezifisch für diese sind — zum Beispiel die Einheit fr in CSS Grid Layout.

<integer>: Eine oder mehrere Dezimalstellen 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 zugehörigen 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, die für CSS grid layout eingeführt wurde, geschrieben als <number> mit der fr-Einheit und verwendet für die Größenbestimmung der Rasterspur.

Mengen

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 Einheitenkennzeichen dpi, dpcm, dppx oder x.

Kombinationen von Typen

Einige CSS-Eigenschaften können sowohl eine Dimension als auch einen 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 auch einen Prozentsatz akzeptieren können, werden einen der unten aufgelisteten Typen verwenden.

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

Farbe

Die CSS Color Specification definiert den <color>-Datentyp und andere Typen, die sich auf Farbe 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 opak ist, oder ein <percentage>, wobei 0% vollständig transparent und 100% vollständig opak ist.
<hue>: Gibt den <angle> an, mit einem Einheitenkennzeichen deg, grad, rad oder turn, oder eine einheitslose <number>, die als deg interpretiert wird, des Farbkreises, der spezifisch für die <absolute-color-functions> ist, von denen es ein Bestandteil ist.

Bilder

Die CSS Images Specification definiert die Datentypen, die sich mit Bildern beschäftigen, einschließlich Gradienten.

<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 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.
<ending-shape>: Wird für radiale Gradienten verwendet; kann einen Schlüsselwortwert circle oder ellipse haben.
<size>: Bestimmt die Größe der Endform des radialen Gradienten. Dies akzeptiert einen Wert eines Schlüsselworts oder einer <length>, jedoch keinen Prozentsatz.

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-Mathematikfunktion-Berechnungen verwendet.

<calc-sum>: Eine Berechnung, die eine Sequenz von Berechnungswerten, unterbrochen durch Additions- (+) und Subtraktions- (-) Operatoren, darstellt. Dieser Datentyp erfordert, dass beide Werte Einheiten haben.
<calc-product>: Eine Berechnung, die eine Sequenz von Berechnungswerten, unterbrochen durch Multiplikations- (*) und Divisions- (/) Operatoren, darstellt. 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, wie zum Beispiel <number>, <dimension>, <percentage>, <calc-keyword> oder geschachtelte <calc-sum>-Berechnungen.
<calc-keyword>: Definiert eine Reihe von CSS-Schlüsselwörtern, die numerische Konstanten wie e und π darstellen, die in CSS-Mathematikfunktionen verwendet werden können.

Spezifikationen

Specification
CSS Values and Units Module Level 4