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 Verarbeitungen ermöglichen. Andere Typen sind in den Spezifikationen definiert, auf die sie zutreffen.

Nachfolgend finden Sie eine Referenz zu den Typen, denen Sie am ehesten begegnen werden. Dies ist jedoch keine 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 > steht. Sie entsprechen keiner greifbaren CSS-Code-Einheit.

Textuelle Datentypen

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

Vordefinierte Schlüsselwörter

Schlüsselwörter mit vordefinierter 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 Startwert der Eigenschaft angegebene Wert.
inherit: Der berechnete Wert der Eigenschaft des übergeordneten Elements.
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, zum Beispiel der Name, der mit der grid-area-Eigenschaft zugewiesen wurde.

<dashed-ident>

Ein <custom-ident> mit der zusätzlichen Einschränkung, dass es mit zwei Bindestrichen beginnen muss, z.B. bei CSS Custom Properties.

<string>

Eine in Anführungszeichen gesetzte Zeichenfolge, wie sie z.B. 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 im CSS-Values-and-Units-Modul definiert. Weitere Typen werden in anderen Modulen beschrieben, bei denen sie spezifisch für die jeweilige Spezifikation sind — zum Beispiel die fr-Einheit im CSS-Grid-Layout-Modul.

<integer>: Eine oder mehrere Dezimaleinheiten 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 angehängten Einheit, zum Beispiel 90deg, 50ms oder 15em. Dieser Typ umfasst Distanzen (<length>), Dauerzeiten (<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 <number> mit der fr-Einheit angehängt und verwendet für die Größenanpassung der Grid-Spuren.

Mengen

Diese <dimension>-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 einem 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 einer Einheit von dpi, dpcm, dppx oder x.

Kombinationen von Typen

Einige CSS-Eigenschaften können sowohl einen <dimension>- als auch einen <percentage>-Wert annehmen. In diesem Fall wird der Prozentwert in eine Menge aufgelöst, die der zulässigen 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 annehmen kann.
<frequency-percentage>: Ein Typ, der eine Frequenz oder einen Prozentsatz als Wert annehmen kann.
<angle-percentage>: Ein Typ, der einen Winkel oder einen Prozentsatz als Wert annehmen kann.
<time-percentage>: Ein Typ, der eine Zeit oder einen Prozentsatz als Wert annehmen kann.

Farbe

Das CSS-Farbmodul definiert den <color>-Datentyp und andere Typen, die sich in CSS auf Farbe 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> an, mit einer Einheit von deg, grad, rad oder turn, oder ein einheitenloses <number>, das als deg interpretiert wird, des Farbkreises, der spezifisch für die <absolute-color-functions> ist, von denen es ein Bestandteil ist.

Bilder

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

<image>: Eine URL-Referenz zu einem Bild oder einem Farbverlauf.
<color-stop-list>: Eine Liste von zwei oder mehr Farbstopps mit optionalen Übergangsinformationen mittels eines Farbhints.
<linear-color-stop>: Eine <color> und eine <length-percentage>, um den Farbverlauf für diesen Teil des Gradienten anzuzeigen.
<linear-color-hint>: Eine <length-percentage>, um anzugeben, wie die Farbe interpoliert wird.
<ending-shape>: Verwendet für radiale Gradienten; kann einen Schlüsselwortwert von circle oder ellipse haben.
<size>: Bestimmt die Größe der Endform des radialen Gradienten. Dies akzeptiert einen Wert eines Schlüsselworts oder eines <length>, jedoch keinen Prozentsatz.

2D-Positionierung

Der <position>-Datentyp wird so 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 eine <length-percentage>.

Berechnungsdatentypen

Diese Datentypen werden in CSS-Mathematikfunktionen-Berechnungen verwendet.

<calc-sum>: Eine Berechnung, die eine Folge von Berechnungswerten ist, durchsetzt mit Addition (+) und Subtraktion (-) Operatoren. Dieser Datentyp erfordert, dass beide Werte Einheiten haben.
<calc-product>: Eine Berechnung, die eine Folge von Berechnungswerten ist, durchsetzt mit Multiplikations (*) und Divisionsoperatoren (/). 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, die in CSS-Mathematikfunktionen verwendet werden können.

Formen-Datentypen

Die CSS-Formen und CSS-Rahmen und Box-Dekorationen Module definieren Formen-Datentypen:

<basic-shape>: Beschreibt Formfunktionen, die in den clip-path, shape-outside, und offset-path-Eigenschaften verwendet werden.
<corner-shape-value>: Beschreibt die Form einer Containerecke. Es wird von der corner-shape Kurzschreibweise und ihren Bestandteileigenschaften verwendet, um die Form anzugeben, die auf die betroffenen Containerecken 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