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 besondere Art von Komponenten-Wertetyp.

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

Im Folgenden finden Sie eine Referenz der Typen, auf die Sie am wahrscheinlichsten stoßen werden, es handelt sich jedoch nicht um eine 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 dargestellt, das zwischen den spitzen Klammern < und > platziert wird. 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-weitreichende Schlüsselwörter

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

initial: Der als Anfangswert der Eigenschaft angegebene Wert.
inherit: Der berechnete Wert der Eigenschaft am Element des übergeordneten Elements.
revert: Setzt die Kaskade auf den Wert des früheren Ursprungs zurück.
revert-layer: Setzt die Kaskade auf den Wert des früheren Kaskadenschicht zurück.
unset: Wirkt 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 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 angeführte Zeichenkette, wie sie beispielsweise 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 Mehrheit dieser Typen ist im CSS Werte- und Einheitenmodul definiert, jedoch werden zusätzliche Typen in anderen Modulen beschrieben, wo sie spezifisch für diese Spezifikation alleine sind — zum Beispiel die fr-Einheit im CSS grid layout-Modul.

<integer>: Eine oder mehrere Dezimaleinheiten von 0 bis 9, optional mit einem davorstehenden - oder +.
<number>: Reelle Zahlen, die auch einen Bruchteil enthalten können, zum Beispiel 1 oder 1.34.
<dimension>: Eine Zahl mit einer daran angehängten Einheit, zum Beispiel 90deg, 50ms oder 15em. Dieser Typ umfasst Entfernungen (<length>), Dauern (<time>), Frequenzen (<frequency>), Auflösungen (<resolution>) und andere Mengen.
<percentage>: Eine Zahl mit einem vorangestellten Prozentzeichen, zum Beispiel 10%.
<ratio>: Ein Verhältnis, geschrieben in der Syntax <number> / <number>.
<flex>: Eine flexible Länge, eingeführt für CSS grid layout, geschrieben als ein <number> mit der Einheit fr und verwendet für die Gitterspuroptimierung.

Mengen

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

<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.
<time>: Dauer-Einheiten 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 Einheitskennung von 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 prozentuale Wert auf eine Menge aufgelöst, die mit dem zulässigen Maß übereinstimmt. Eigenschaften, die zusätzlich zu einem Maß 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 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 Dauer oder einen Prozentsatz als Wert akzeptieren kann.

Farbe

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

<color>: Als ein Schlüsselwort oder ein numerischer Farbwert spezifiziert.
<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 ein einheitsloser <number>, interpretiert als deg, des Farbrads, spezifisch für die <absolute-color-functions>, von denen es ein Bestandteil ist.

Bilder

Das CSS images-Modul definiert die Datentypen, die mit Bildern arbeiten, einschließlich Verläufen.

<image>: Ein URL-Verweis auf ein Bild oder einen Farbverlauf.
<color-stop-list>: Eine Liste aus zwei oder mehr Farbstopps mit optionalen Übergangsinformationen mithilfe eines Farbhints.
<linear-color-stop>: Eine <color> und ein <length-percentage>, um den Farbstop für diesen Teil des Verlaufs anzuzeigen.
<linear-color-hint>: Ein <length-percentage>, um anzugeben, wie die Farbe interpoliert.
<ending-shape>: Wird für Radialverläufe verwendet; kann einen Schlüsselwortwert circle oder ellipse haben.
<size>: Bestimmt die Größe der endenden Form des Radialverlaufs. Dies akzeptiert einen Wert eines Schlüsselworts oder eines <length>, jedoch keinen Prozentsatz.

2D-Positionierung

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

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

Berechnungsdatentypen

Diese Datentypen werden in CSS-Mathematikfunktionen-Berechnungen verwendet.

<calc-sum>: Eine Berechnung, die eine Sequenz von Berechnungswerten beinhaltet, die mit Additions- (+) und Subtraktions- (-) Operatoren durchsetzt sind. Bei diesem Datentyp müssen beide Werte Einheiten besitzen.
<calc-product>: Eine Berechnung, die eine Sequenz von Berechnungswerten beinhaltet, die mit Multiplikations- (*) und Divisions- (/) Operatoren durchsetzt sind. 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 Reihe von CSS-Schlüsselwörtern, die numerische Konstanten wie e und π darstellen, die in CSS-Mathematikfunktionen verwendet werden können.

Form-Datentypen

Die CSS shapes und CSS borders and box decorations-Module 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 Container-Ecke. Es wird von der Kurzschreibweiseigenschaft corner-shape und ihren Bestandteileigenschaften verwendet, um die Form anzugeben, die auf betroffene Container-Ecken 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