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 im CSS Values and Units-Modul definiert. Dieses Modul definiert auch funktionale Notationen, die komplexere Typen oder Verarbeitung ermöglichen. Andere Typen sind in den Spezifikationen definiert, auf die sie angewendet werden.

Nachfolgend finden Sie eine Referenz zu den Typen, auf die Sie höchstwahrscheinlich stoßen werden. Es handelt sich jedoch nicht um eine umfassende Referenz für alle Typen, die in jeder CSS-Spezifikation definiert sind.

Syntax

css

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

Im formalen CSS-Syntax werden Datentypen durch ein Schlüsselwort angezeigt, das zwischen spitzen Klammern < und > gesetzt wird.

Textuelle Datentypen

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 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 beim übergeordneten Element.
revert: Setzt die Kaskade auf den Wert des früheren Ursprungs zurück.
revert-layer: Setzt die Kaskade auf den Wert der früheren Kaskadenschicht zurück.
unset: Wirkt wie inherit oder initial, je nachdem, ob die Eigenschaft vererbt wird oder nicht.

<custom-ident>

Ein benutzerdefinierter Bezeichner, beispielsweise der über die grid-area-Eigenschaft zugewiesene Name.

<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 Zeichenfolge in Anführungszeichen, wie sie als 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 ist in der Values and Units-Spezifikation definiert, jedoch werden weitere Typen in anderen Spezifikationen beschrieben, wo sie spezifisch nur für diese Spezifikation sind — beispielsweise die fr-Einheit im CSS-Grid-Layout.

<integer>: Eine oder mehrere Dezimaleinheiten von 0 bis 9.
<number>: Reelle Zahlen, die auch eine Bruchteils-Komponente haben können, zum Beispiel 1 oder 1,34.
<dimension>: Eine Zahl mit einer daran angehängten Einheit, zum Beispiel 23px oder 15em.
<percentage>: Eine Zahl mit einem Prozentsymbol, zum Beispiel 10%.
<ratio>: Ein Verhältnis, geschrieben mit der Syntax <number> / <number>.
<flex>: Eine flexible Länge, die für das CSS-Grid-Layout eingeführt wurde, geschrieben als <number> mit der fr-Einheit und verwendet für die Größenanpassung von Grid-Tracks.

Mengenangaben

Diese Typen werden verwendet, um Abstände und andere Größen anzugeben.

<length>: Längen sind eine <dimension> und beziehen sich auf Abstände.
<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 einer Einheitenangabe von dpi, dpcm, dppx oder x.

Kombinationen von Typen

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

<length-percentage>: Ein Typ, der einen Längenwert 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 Zeitdauer oder einen Prozentsatz 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>: Gibt die Transparenz einer Farbe an. Kann entweder eine <number>, wobei 0 vollständig transparent und 1 vollständig undurchsichtig ist, oder ein <percentage>, wobei 0% vollständig transparent und 100% vollständig undurchsichtig sind.
<hue>: Gibt den <angle> an, mit einer Einheit von deg, grad, rad, oder turn, oder eine einheitenlose <number>, die als deg interpretiert wird, des Farbkreises, spezifisch für die <absolute-color-functions>, deren Teil es ist.

Bilder

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

<image>: Ein URL-Verweis auf ein Bild oder einen Farbverlauf.
<color-stop-list>: Eine Liste aus zwei oder mehr Farbstopps mit optionaler Übergangsinformation unter Verwendung eines Farbhints.
<linear-color-stop>: Eine <color> und eine <length-percentage>, um den Farbstopp 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 Gradienten verwendet; kann den Schlüsselwert circle oder ellipse haben.
<size>: Bestimmt die Größe der Endform des radialen Gradienten. Akzeptiert einen Schlüsselwortwert oder eine <length>, jedoch keinen Prozentsatz.

2D-Positionierung

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

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

Berechnungsdatentypen

Diese Datentypen werden in CSS-Math-Funktionen berechnungen verwendet.

<calc-sum>: Eine Berechnung, die eine Sequenz von Berechnungswerten darstellt, gespickt mit Additions- (+) und Subtraktions- (-) Operatoren. Dieser Datentyp erfordert, dass beide Werte Einheiten haben.
<calc-product>: Eine Berechnung, die eine Sequenz von Berechnungswerten darstellt, gespickt 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 geschachtelte <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.

Spezifikationen

Specification
CSS Values and Units Module Level 4