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

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

Nachfolgend finden Sie eine Referenz zu den Typen, mit denen Sie am ehesten in Berührung kommen, jedoch ist dies keine umfassende Referenz für alle in jeder CSS-Spezifikation definierten Typen.

Syntax

In der formalen CSS-Syntax werden Datentypen durch ein Schlüsselwort zwischen den spitzen Klammern < und > angegeben. Sie entsprechen keiner greifbaren CSS-Codeeinheit.

Textuelle Datentypen

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

Vorgegebene Schlüsselwörter

Schlüsselwörter mit einer vordefinierten Bedeutung, zum Beispiel 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 initialer Wert der Eigenschaft angegebene Wert.
inherit: Der berechnete Wert der Eigenschaft im Elternelement des 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 Kaskadenebene 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 Eigenschaft grid-area zugewiesen wurde.

<dashed-ident>

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

<string>

Eine in Anführungszeichen gesetzte Zeichenkette, wie sie zum Beispiel für einen Wert der Eigenschaft content verwendet wird.

<url>

Ein Zeiger 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 nur für diese Spezifikation sind — zum Beispiel die fr Einheit im Modul CSS-Grid-Layout.

<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 Entfernungen (<length>), Zeiträume (<time>), Frequenzen (<frequency>), Auflösungen (<resolution>) und andere Mengen.
<percentage>: Eine Zahl mit einem dazugehörigen 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 zur Größenbestimmung von Gitterspalten.

Mengen

Diese <dimension> Typen werden zur Angabe von Entfernungen und anderen Größen verwendet.

<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 angehängten Einheit von deg, grad, rad oder turn.
<time>: Zeitdauereinheiten sind ein <dimension> mit einer s oder ms Einheit.
<frequency>: Frequenzen sind ein <dimension> mit einer angehängten Einheit von Hz oder kHz.
<resolution>: Eine <dimension> mit einem Einheitenkennzeichen 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 neben einer Dimension auch einen Prozentwert 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>: Als Schlüsselwort oder numerischer Farbwert angegeben.
<alpha-value>: Gibt die Transparenz einer Farbe an. Kann ein <number> sein, wobei 0 vollständig transparent ist und 1 vollständig undurchsichtig, oder ein <percentage>, wobei 0 % vollständig transparent und 100 % vollständig undurchsichtig ist.
<hue>: Gibt den <angle> an, mit einem Einheitenkennzeichen von deg, grad, rad oder turn, oder eine einheitenlose <number>, die als deg interpretiert wird, des Farbkreises, der für die <absolute-color-functions>, deren Teil er ist, spezifisch ist.

Bilder

Das CSS-Bildermodul definiert die Datentypen, die mit Bildern umgehen, einschließlich Gradienten.

<image>: Ein URL-Verweis auf ein Bild oder einen Farbverlauf.
<color-stop-list>: Eine Liste von zwei oder mehr Farbstops mit optionalen Übergangsinformationen unter Verwendung eines Farbhints.
<linear-color-stop>: Eine <color> und ein <length-percentage>, um den Farbstop für diesen Teil des Gradienten anzugeben.
<linear-color-hint>: Ein <length-percentage>, um anzugeben, wie die Farbe interpoliert.
<ending-shape>: Wird für radiale Verläufe verwendet und kann einen Schlüsselwortwert von circle oder ellipse haben.
<size>: Bestimmt die Größe der Form, die das Ende des radialen Verlaufs bildet. Dies akzeptiert einen Wert eines Schlüsselwortes oder eine <length>, jedoch keinen Prozentsatz.

2D-Positionierung

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

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

Berechnungsdatentypen

Diese Datentypen werden in CSS-Mathematikfunktionen Berechnungen verwendet.

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

Formdatentypen

Die Module CSS-Formen und CSS-Ränder und Box-Dekorationen 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. Diese wird von der Kurzschreibweise corner-shape und ihren Bestandteilen verwendet, um die auf die betroffenen Containerecken angewendete Form anzugeben.

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