CSS-Datentypen

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

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

Nachfolgend finden Sie eine Referenz zu den Typen, die Ihnen am häufigsten 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 ist. Sie entsprechen keiner greifbaren CSS-Code-Einheit.

Textuelle Datentypen

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

Vorgegebene Schlüsselwörter

Schlüsselwörter mit einer vorab definierten Bedeutung, beispielsweise der Wert collapse für die Eigenschaft border-collapse.

CSS-weit gültige Schlüsselwörter

Alle Eigenschaften, einschließlich benutzerdefinierter Eigenschaften, akzeptieren die CSS-weit gültigen Schlüsselwörter:

initial: Der Wert, der als Anfangswert der Eigenschaft angegeben ist.
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 früheren Kaskadenschicht zurück.
unset: Wirkt wie inherit oder initial, abhängig davon, ob die Eigenschaft vererbt wird oder nicht.

<custom-ident>

Ein benutzerdefinierter Bezeichner, beispielsweise der Name, der mit der Eigenschaft grid-area zugewiesen wird.

<dashed-ident>

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

<string>

Eine zitierte Zeichenfolge, die beispielsweise als Wert für die Eigenschaft content verwendet wird.

<url>

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

Numerische Datentypen

Diese Datentypen werden verwendet, um Mengen, Indizes und Positionen anzugeben. Die meisten dieser Typen sind im Modul CSS-Werte und Einheiten definiert. Weitere Typen werden in anderen Modulen beschrieben, wo sie spezifisch für diese Spezifikation sind, zum Beispiel die fr-Einheit im Modul CSS Grid-Layout.

<integer>: Eine oder mehrere dezimale Einheiten von 0 bis 9, optional mit - oder + vorangestellt.
<number>: Reelle Zahlen, die auch eine Bruchkomponente haben können, zum Beispiel 1 oder 1.34.
<dimension>: Eine Zahl mit einer daran angehängten Einheit, zum Beispiel 90deg, 50ms oder 15em. Dieser Typ umfasst Distanzen (<length>), Zeitdauern (<time>), Frequenzen (<frequency>), Auflösungen (<resolution>) und andere Mengen.
<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 ein <number> mit der fr-Einheit und verwendet für die Größenanpassung von Raster-Spuren.

Mengen

Diese <dimension>-Typen werden verwendet, um Distanzen 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 s oder ms-Einheit.
<frequency>: Frequenzen sind eine <dimension> mit einer Hz oder kHz-Einheit.
<resolution>: Ist eine <dimension> mit einer Einheit des 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 zu einer Menge aufgelöst, die mit der zulässigen Dimension übereinstimmt. Eigenschaften, die ein Prozentwert zusätzlich zu einer Dimension akzeptieren können, verwenden einen der unten aufgeführten Typen.

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

Farbe

Das CSS-Farb-Modul definiert den Datentyp <color> und andere Typen, die sich auf Farbe in CSS beziehen.

<color>: Angegeben als ein Schlüsselwort oder ein 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 Einheitsbezeichnung von deg, grad, rad oder turn, oder ein einheitsloses <number>, das als deg interpretiert wird, des Farbkreises an, spezifisch für die <absolute-color-functions>, von denen es ein Bestandteil ist.

Bilder

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

<image>: Eine URL-Referenz auf ein Bild oder einen Farbverlauf.
<color-stop-list>: Eine Liste von zwei oder mehr Farbverläufen mit optionalen Übergangsinformationen unter Verwendung eines Farbhinweises.
<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 Verläufe verwendet; kann einen Schlüsselwortwert von circle oder ellipse haben.
<size>: Bestimmt die Größe der Endform des radialen Gradienten. Diese akzeptiert einen Wert eines Schlüsselworts oder eines <length>, aber nicht eines Prozentwerts.

2D-Positionierung

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

Berechnungsdatentypen

Diese Datentypen werden in CSS-Mathematikfunktion-Berechnungen verwendet.

<calc-sum>: Eine Berechnung, die eine Folge von Berechnungswerten enthält, die mit Addition (+) und Subtraktion (-) Operators durchsetzt sind. Dieser Datentyp erfordert, dass beide Werte Einheiten haben.
<calc-product>: Eine Berechnung, die eine Folge von Berechnungswerten enthält, die mit Multiplikation (*) und Division (/) Operators durchsetzt sind. 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 geschachtelte <calc-sum>-Berechnungen.
<calc-keyword>: Definiert eine Reihe von CSS-Schlüsselwörtern, die numerische Konstanten wie e und π darstellen und in CSS-Mathematikfunktionen verwendet werden können.

Form-Datentypen

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

<basic-shape>: Beschreibt Formfunktionen, die in den Eigenschaften clip-path, shape-outside und offset-path verwendet werden.
<corner-shape-value>: Beschreibt die Form einer Behälterecke. Es wird von der Kurznotationseigenschaft corner-shape und ihren komponentenbildenden Eigenschaften verwendet, um die Form zu spezifizieren, die auf betroffene Behälterecken angewendet wird.

Alphabetisches Verzeichnis der Datentypen

Spezifikationen

Specification
CSS Values and Units Module Level 4

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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