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

Die am häufigsten verwendeten Typen sind im Modul CSS-Werte und -Einheiten 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.

Unten finden Sie eine Referenz der Typen, auf die Sie höchstwahrscheinlich stoßen werden, es ist jedoch keine umfassende Referenz für alle in jeder CSS-Spezifikation definierten Typen.

Syntax

In formaler CSS-Syntax werden Datentypen durch ein zwischen den spitzen Klammern < und > platziertes Schlüsselwort gekennzeichnet. 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 vordefinierter Bedeutung, zum Beispiel der Wert collapse für die Eigenschaft border-collapse.

CSS-weit verbreitete Schlüsselwörter

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

initial: Der Wert, der als anfänglicher Wert der Eigenschaft angegeben wird.
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: Wirkt wie inherit oder initial, abhängig davon, ob die Eigenschaft vererbt wird oder nicht.

<custom-ident>

Ein benutzerdefinierter Bezeichner, z. B. 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 in CSS Custom Properties.

<string>

Eine in Anführungszeichen gesetzte 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 Mehrzahl dieser Typen ist im Modul für CSS-Werte und -Einheiten definiert, jedoch werden zusätzliche Typen in anderen Modulen beschrieben, wo sie spezifisch für diese Spezifikation allein sind – 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 Einheit angehängt, zum Beispiel 90deg, 50ms oder 15em. Dieser Typ umfasst Entfernungen (<length>), Zeitdauern (<time>), Frequenzen (<frequency>), Auflösungen (<resolution>) und andere Mengen.
<percentage>: Eine Zahl mit einem Prozentzeichen angehängt, zum Beispiel 10%.
<ratio>: Ein Verhältnis, geschrieben mit der Syntax <number> / <number>.
<flex>: Eine flexible Länge, die für CSS-Grid-Layout eingeführt wurde, geschrieben als <number> mit der angehängten fr-Einheit und verwendet für Grid-Track-Größen.

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 einer der Einheiten deg, grad, rad oder turn angehängt.
<time>: Zeiteinheiten sind ein <dimension> mit einer s oder ms Einheit.
<frequency>: Frequenzen sind ein <dimension> mit einer Hz oder kHz Einheit angehängt.
<resolution>: Ist ein <dimension> mit einem Einheitenkennzeichen von dpi, dpcm, dppx oder x.

Kombinationen von Typen

Einige CSS-Eigenschaften können einen <dimension> oder einen <percentage> Wert akzeptieren. In diesem Fall wird der Prozentwert zu einer Menge aufgelöst, die der zulässigen Dimension entspricht. Eigenschaften, die zusätzlich zu einer Dimension einen Prozentsatz akzeptieren können, nutzen 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 Modul CSS-Farbe definiert den <color> Datentyp 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 opak ist, oder ein <percentage>, wobei 0% vollständig transparent und 100% vollständig opak 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 Farbrads spezifisch für die <absolute-color-functions>, deren Teil es ist.

Bilder

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

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

2D-Positionierung

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

<position>: Definiert die Position eines Objektbereichs. Akzeptiert einen Schlüsselwert 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, die mit Additions- (+) und Subtraktions- (-) Operatoren unterbrochen werden. Dieser Datentyp erfordert, dass beide Werte Einheiten besitzen.
<calc-product>: Eine Berechnung, die eine Folge von Berechnungswerten ist, die mit Multiplikations- (*) und Divisions- (/) Operatoren unterbrochen werden. Bei der Multiplikation muss ein Wert einheitenlos sein. Bei der Division 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 Reihe von CSS-Schlüsselwörtern, die numerische Konstanten wie e und π darstellen, die 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. Sie wird von der corner-shape Kurznotation-Eigenschaft und ihren Bestandteileigenschaften verwendet, um die Form zu spezifizieren, die auf betroffene Containerecken angewendet wird.

Alphabetisches Verzeichnis von 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