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

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 werden in den Spezifikationen definiert, auf die sie angewendet werden.

Nachfolgend finden Sie einen Verweis auf die Typen, die Sie am wahrscheinlichsten antreffen werden. Es handelt sich jedoch nicht um eine umfassende Referenz für alle in jeder CSS-Spezifikation definierten Typen.

Syntax

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

Textuelle Datentypen

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

Vordefinierte 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 Anfangswert der Eigenschaft angegebene Wert.
inherit: Der berechnete Wert der Eigenschaft auf dem 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.
revert-rule: Setzt die Kaskade auf den Wert einer früheren, übereinstimmenden Stilregel zurück.
unset: Funktioniert als inherit oder initial, abhängig davon, ob die Eigenschaft vererbt wird oder nicht.

<custom-ident>

Ein benutzerdefinierter Bezeichner, zum Beispiel der Name, der mithilfe der Eigenschaft grid-area zugewiesen wird.

<dashed-ident>

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

<string>

Eine angegebene Zeichenkette, wie sie beispielsweise für einen Wert der Eigenschaft content verwendet wird.

<url>

Ein Zeiger auf eine Ressource, zum Beispiel als Wert der Eigenschaft background-image.

Numerische Datentypen

Diese Datentypen werden verwendet, um Mengen, Indizes und Positionen anzugeben. Die Mehrheit dieser Typen ist im CSS-Werte- und Einheitenmodul definiert. Zusätzliche Typen werden jedoch in anderen Modulen beschrieben, in denen sie allein auf diese Spezifikation zutreffen, zum Beispiel die fr-Einheit im CSS Grid Layout-Modul.

<integer>: Eine oder mehrere Dezimaleinheiten von 0 bis 9, optional vorangestellt mit - oder +.
<number>: Reelle Zahlen, die auch eine gebrochene Komponente 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 ein <number> mit der fr-Einheit angehängt und verwendet für die Größenanpassung von Gitternetzen.

Mengen

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

<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 Einheit s oder ms.
<frequency>: Frequenzen sind eine <dimension> mit einer Einheit Hz oder kHz.
<resolution>: Ist eine <dimension> mit einer Einheitkennung wie dpi, dpcm, dppx oder x.

Kombinationen von Typen

Einige CSS-Eigenschaften können einen <dimension> oder einen <percentage> als Wert nehmen. In diesem Fall wird der Prozentwert auf 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 als Wert eine Länge oder einen Prozentsatz akzeptieren kann.
<frequency-percentage>: Ein Typ, der als Wert eine Frequenz oder einen Prozentsatz akzeptieren kann.
<angle-percentage>: Ein Typ, der als Wert einen Winkel oder einen Prozentsatz akzeptieren kann.
<time-percentage>: Ein Typ, der als Wert eine Zeit oder einen Prozentsatz akzeptieren kann.

Farbe

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

<color>: Angegeben als Schlüsselwort oder als numerischer Farbwert.
<alpha-value>: Gibt die Transparenz einer Farbe an. Kann eine <number> sein, wobei 0 vollständig transparent und 1 vollständig deckend ist, oder ein <percentage>, wobei 0% vollständig transparent und 100% vollständig deckend ist.
<hue>: Gibt den <angle> an, mit einer Einheitenkennung von deg, grad, rad oder turn, oder einen einheitslosen <number>, der 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 sich mit Bildern befassen, einschließlich Gradienten.

<image>: Eine URL-Referenz zu einem Bild oder einem Farbverlauf.
<color-stop-list>: Eine Liste von zwei oder mehr Farbstops mit optionalen Übergangsinformationen unter Verwendung eines Farbhints.
<linear-color-stop>: Ein <color> und ein <length-percentage>, um den Farbstop 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 Gradienten verwendet; kann einen Schlüsselwert wie circle oder ellipse haben.
<size>: Bestimmt die Größe der Endform des radialen Gradienten. Dies akzeptiert einen Wert eines Schlüsselwortes oder eine <length>, aber keinen Prozentsatz.

2D-Positionierung

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

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

Berechnungsdatentypen

Diese Datentypen werden in CSS-Mathematikfunktionen verwendet.

<calc-sum>: Eine Berechnung, die eine Folge von Berechnungswerten ist, die durch Addition (+) und Subtraktion (-) Operatoren unterbrochen sind. Dieser Datentyp erfordert, dass beide Werte Einheiten haben.
<calc-product>: Eine Berechnung, die eine Folge von Berechnungswerten ist, die durch Multiplikation (*) und Division (/) Operatoren unterbrochen sind. Bei der Multiplikation muss ein Wert einheitslos sein. Bei der Division muss der zweite Wert einheitslos sein.
<calc-value>: Definiert akzeptierte Werte für Berechnungen, wie beispielsweise <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 und in CSS-Mathematikfunktionen verwendet werden können.

Formdatentypen

Die Module CSS Shapes und CSS Borders and Box Decorations 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. Wird von der verkürzten Eigenschaft corner-shape und ihren Komponenten-Eigenschaften verwendet, um die Form zu spezifizieren, die auf die betroffenen 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