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

Die am häufigsten verwendeten Typen sind im Modul CSS Values and Units definiert. Dieses Modul definiert auch funktionale Notationen, die komplexere Typen oder Prozesse ermöglichen. Weitere Typen werden in den Spezifikationen definiert, auf die sie sich beziehen.

Im Folgenden finden Sie einen Verweis auf die Typen, die Ihnen am wahrscheinlichsten begegnen werden, es handelt sich jedoch nicht um eine umfassende Referenz für alle Typen, die in jeder CSS-Spezifikation definiert sind.

Syntax

In der formalen CSS-Syntax werden Datentypen durch ein Schlüsselwort gekennzeichnet, das zwischen den spitzen Klammern < und > platziert wird. Sie entsprechen keiner greifbaren CSS-Code-Entität.

Textuelle Datentypen

Diese Typen beinhalten Schlüsselwörter und Bezeichner sowie Zeichenketten und URLs.

Vordefinierte Schlüsselwörter

Schlüsselwörter mit vordefinierter Bedeutung, beispielsweise 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 anfänglicher Wert der Eigenschaft angegebene Wert.
inherit: Der berechnete Wert der Eigenschaft am Elternelement.
revert: Setzt die Kaskade auf den Wert des früheren Ursprungs zurück.
revert-layer: Setzt die Kaskade auf den Wert der vorherigen Kaskadenebene zurück.
revert-rule: Setzt die Kaskade auf den Wert einer früheren zutreffenden Stilregel zurück.
unset: Verhält sich wie inherit oder initial, je nachdem, ob die Eigenschaft vererbt wird oder nicht.

<custom-ident>

Ein benutzerdefinierter Bezeichner, zum Beispiel der mit der Eigenschaft grid-area 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 zitierte Zeichenkette, wie sie für einen Wert der Eigenschaft content 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 im Modul CSS-Werte und -Einheiten definiert, jedoch werden zusätzliche Typen in anderen Modulen beschrieben, wo sie spezifisch für diese Spezifikation sind — zum Beispiel die fr Einheit im CSS Grid Layout Modul.

<integer>: Eine oder mehrere Dezimalstellen von 0 bis 9, optional vorangestellt von - oder +.
<number>: Reelle Zahlen, die auch eine Bruchkomponente haben können, zum Beispiel 1 oder 1.34.
<dimension>: Eine Zahl mit einer Einheit, zum Beispiel 90deg, 50ms oder 15em. Dieser Typ umfasst Distanzen (<length>), Dauer (<time>), Frequenzen (<frequency>), Auflösungen (<resolution>) und andere Mengen.
<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 das CSS Grid Layout, geschrieben als <number> mit der fr Einheit und verwendet für die Dimensionierung von Gitterspuren.

Mengen

Diese <dimension> Typen werden verwendet, um Distanzen und andere Mengen anzugeben.

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

Kombinationen von Typen

Einige CSS-Eigenschaften können einen <dimension> oder einen <percentage> Wert annehmen. In diesem Fall wird der Prozentwert auf eine Größe umgerechnet, die der erlaubten Dimension entspricht. Eigenschaften, die zusätzlich zu einer Dimension 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.

Farbe

Das CSS-Farbmodul 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 undurchsichtig ist, oder ein <percentage>, wobei 0% vollständig transparent und 100% vollständig undurchsichtig ist.
<hue>: Gibt den <angle> mit einer Einheit deg, grad, rad oder turn an, oder eine einheitslose <number>, die als deg interpretiert wird, des Farbrads spezifisch für die <absolute-color-functions>, von denen es ein Bestandteil ist.

Bilder

Das CSS-Bilder-Modul definiert die Datentypen, die mit Bildern, einschließlich Verläufen, arbeiten.

<image>: Eine URL-Referenz auf ein Bild oder einen Farbverlauf.
<color-stop-list>: Eine Liste von zwei oder mehr Farbunterbrechungen mit optionalen Übergangsinformationen unter Verwendung eines Farbhints.
<linear-color-stop>: Ein <color> und ein <length-percentage>, um den Farbunterbrechungspunkt für diesen Teil des Verlaufs anzugeben.
<linear-color-hint>: Ein <length-percentage>, um anzugeben, wie die Farbe interpoliert wird.
<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üsselwortes oder eines <length>, jedoch keinen Prozentsatz.

2D-Positionierung

Der <position> Datentyp wird basierend auf der für die Eigenschaft background-position definierten verwendet.

<position>: Definiert die Position einer Objektfläche. Akzeptiert einen Schlüsselwortwert wie top oder left oder einen <length-percentage>.

Berechnungsdatentypen

Diese Datentypen werden in CSS-Math-Funktionsberechnungen verwendet.

<calc-sum>: Eine Berechnung, die eine Folge von Berechnungswerten ist, durchzogen mit Addition (+) und Subtraktion (-) Operatoren. Dieser Datentyp erfordert, dass beide Werte Einheiten haben.
<calc-product>: Eine Berechnung, die eine Folge von Berechnungswerten ist, durchzogen mit Multiplikation (*) und Division (/) Operatoren. Beim Multiplizieren 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 Reihe von CSS-Schlüsselwörtern, die numerische Konstanten wie e und π darstellen, die in CSS-Math-Funktionen verwendet werden können.

Formdatentypen

Die CSS-Formen und CSS-Ränder und Box-Dekorationen Module definieren Formdatentypen:

<basic-shape>: Beschreibt Formfunktionen, die in den Eigenschaften clip-path, shape-outside und offset-path verwendet werden.
<corner-shape-value>: Beschreibt die Form einer Containerecke. Sie wird von der Kurzschrift-Eigenschaft corner-shape und ihren Bestandteileigenschaften verwendet, um die Form zu spezifizieren, die auf betroffene Containerecken angewendet wird.

Alphabetisches Verzeichnis der Datentypen

Spezifikationen

Spezifikation
CSS Values and Units Module Level 4

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden