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

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 zu den Typen, die Ihnen am wahrscheinlichsten begegnen, es ist jedoch keine umfassende Referenz für alle in jeder CSS-Spezifikation definierten Typen.

Syntax

In formaler CSS-Syntax werden Datentypen durch ein Schlüsselwort gekennzeichnet, das zwischen den spitzen Klammern < und > platziert ist. Sie entsprechen keinem greifbaren CSS-Code-Element.

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-weite Schlüsselwörter

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

initial: Der Wert, der als Anfangswert der Eigenschaft festgelegt ist.
inherit: Der berechnete Wert der Eigenschaft des Elternelements.
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: Verhält sich wie inherit oder initial, abhängig davon, ob die Eigenschaft vererbt wird oder nicht.

<custom-ident>

Ein benutzerdefinierter Bezeichner, zum Beispiel der Name, der mit der Eigenschaft grid-area vergeben wurde.

<dashed-ident>

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

<string>

Eine in Anführungszeichen gesetzte Zeichenkette, wie sie für einen Wert der 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 Mehrheit davon 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 sind — zum Beispiel die fr-Einheit im Modul CSS-Gitterlayout.

<integer>: Eine oder mehrere Dezimaleinheiten von 0 bis 9, optional vorangestellt durch - oder +.
<number>: Reelle Zahlen, die auch eine gebrochene Komponente haben können, zum Beispiel 1 oder 1.34.
<dimension>: Eine Zahl mit einer Einheit, zum Beispiel 90deg, 50ms oder 15em. Dieser Typ umfasst Abstände (<length>), Zeitdauern (<time>), Frequenzen (<frequency>), Auflösungen (<resolution>) und andere Mengen.
<percentage>: Eine Zahl mit einem Prozentzeichen, zum Beispiel 10%.
<ratio>: Ein Verhältnis, geschrieben im Syntax <number> / <number>.
<flex>: Eine flexible Länge, eingeführt für das CSS-Gitterlayout, geschrieben als ein <number> mit der Einheit fr und zur Größenbestimmung des Gitter-Tracks verwendet.

Mengen

Diese <dimension> Typen werden verwendet, um Abstände und andere Mengen anzugeben.

<length>: Längen sind ein <dimension> und beziehen sich auf Abstände.
<angle>: Winkel werden in Eigenschaften wie linear-gradient() verwendet und sind ein <dimension> mit einer der Einheiten deg, grad, rad oder turn.
<time>: Zeitdauereinheiten sind ein <dimension> mit einer Einheit s oder ms.
<frequency>: Frequenzen sind ein <dimension> mit einer Einheit Hz oder kHz.
<resolution>: Ist ein <dimension> mit einer Einheit 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 auf eine mit der zulässigen Dimension übereinstimmende Menge aufgelöst. Eigenschaften, die zusätzlich zu einer Dimension einen Prozentsatz akzeptieren können, verwenden einen der unten aufgeführten Typen.

<length-percentage>: Ein Typ, der entweder eine Länge oder einen Prozentsatz als Wert akzeptieren kann.
<frequency-percentage>: Ein Typ, der entweder eine Frequenz oder einen Prozentsatz als Wert akzeptieren kann.
<angle-percentage>: Ein Typ, der entweder einen Winkel oder einen Prozentsatz als Wert akzeptieren kann.
<time-percentage>: Ein Typ, der entweder 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 undurchsichtig ist, oder ein <percentage>, wobei 0% vollständig transparent und 100% vollständig undurchsichtig ist.
<hue>: Gibt den <angle> an, mit einer Einheitskennung von deg, grad, rad oder turn, oder eine einheitslose <number>, die als deg interpretiert wird, des Farbkreises, der spezifisch für die <absolute-color-functions> ist, von denen er ein Bestandteil ist.

Bilder

Das Modul CSS-Bilder definiert die Datentypen, die sich mit Bildern beschäftigen, einschließlich Farbverläufe.

<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 Farbhinweises.
<linear-color-stop>: Eine <color> und eine <length-percentage>, um den Farbstopp für diesen Teil des Verlaufs anzuzeigen.
<linear-color-hint>: Eine <length-percentage>, um anzugeben, wie die Farbe interpoliert.
<ending-shape>: Wird für Radialverläufe verwendet; kann einen Schlüsselwortwert von circle oder ellipse haben.
<size>: Bestimmt die Größe der Endform des Radialverlaufs. Dies akzeptiert einen Wert eines Schlüsselworts oder einer <length>, jedoch keinen Prozentsatz.

2D-Positionierung

Der <position> Datentyp wird entsprechend der Definition für die Eigenschaft <background-position> interpretiert.

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

Berechnungsdatentypen

Diese Datentypen werden in Berechnungen von CSS-Mathematikfunktionen verwendet.

<calc-sum>: Eine Berechnung, die eine Abfolge von Berechnungswerten, unterteilt durch Additions- (+) und Subtraktionsoperatoren (-), ist. Dieser Datentyp erfordert, dass beide Werte Einheiten haben.
<calc-product>: Eine Berechnung, die eine Abfolge von Berechnungswerten, unterteilt durch Multiplikations- (*) und Divisionsoperatoren (/), ist. 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.

Form-Datentypen

Die Module CSS-Formen und CSS-Ränder und Box-Dekorationen 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 Containerecke. Es wird von der Abkürzungseigenschaft corner-shape und ihren Bestandteileigenschaften verwendet, um die Form zu spezifizieren, die auf betroffene Containerecken angewendet wird.

Help improve MDN

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

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