CSS-Datentypen

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

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

Vordefinierte Schlüsselwörter

Schlüsselwörter mit einer vordefinierten Bedeutung, beispielsweise der Wert collapse für die border-collapse-Eigenschaft.

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 am übergeordneten Element.

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, je nachdem, ob die Eigenschaft vererbt wird oder nicht.

<custom-ident>

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

<dashed-ident>

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

<string>

Eine angeführte Zeichenfolge, wie sie für einen Wert der content-Eigenschaft verwendet wird.

<url>

Ein Verweis auf eine Ressource, zum Beispiel als Wert von background-image.

Diese Datentypen werden verwendet, um Mengen, Indizes und Positionen anzugeben. Der Großteil davon ist in der Werte- und Einheitenspezifikation definiert, jedoch werden zusätzliche Typen in anderen Spezifikationen beschrieben, wenn sie spezifisch für diese Spezifikation sind - zum Beispiel die fr-Einheit im CSS Grid Layout.

<integer>

Eine oder mehrere Dezimaleinheiten von 0 bis 9.

<number>

Reelle Zahlen, die auch eine Bruchkomponente haben können, zum Beispiel 1 oder 1,34.

<dimension>

Eine Zahl mit einer daran angehängten Einheit, zum Beispiel 23px oder 15em.

<percentage>

Eine Zahl mit einem angehängten Prozentsymbol, zum Beispiel 10%.

<ratio>

Ein Verhältnis, geschrieben mit der Syntax <number> / <number>.

<flex>

Eine flexible Länge, die für das CSS Grid Layout eingeführt wurde, geschrieben als <number> mit daran angehängter fr-Einheit und verwendet für die Größenanpassung von Rasterspuren.

Diese Typen werden verwendet, um Abstände 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>

Zeiteinheiten sind ein <dimension> mit der Einheit s oder ms.

<frequency>

Frequenzen sind ein <dimension> mit einer angehängten Hz- oder kHz-Einheit.

<resolution>

Ist ein <dimension> mit einem Einheitenkennzeichen von dpi, dpcm, dppx oder x.

Einige CSS-Eigenschaften können ein Maß oder einen Prozentwert annehmen. In diesem Fall wird der Prozentwert in eine Menge aufgelöst, die dem zulässigen Maß entspricht. 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 Zeit oder einen Prozentsatz als Wert akzeptieren kann.

Die CSS-Farbspezifikation definiert den <color>-Datentyp und andere Typen, die sich auf Farben in CSS beziehen.

<color>

Angegeben als Schlüsselwort oder numerischer Farbwert.

<alpha-value>

Gibt die Transparenz einer Farbe an. Kann ein <number> sein, bei dem 0 vollständig transparent ist und 1 vollständig undurchsichtig ist, oder ein <percentage>, bei dem 0% vollständig transparent und 100% vollständig undurchsichtig ist.

<hue>

Gibt den <angle>, mit einem Einheitenkennzeichen von deg, grad, rad oder turn, oder eine einheitslose <number>-Angabe, interpretiert als deg, des Farbkreises an, der spezifisch für die <absolute-color-functions> ist, von denen er ein Bestandteil ist.

Die CSS-Bildspezifikation definiert die Datentypen, die sich mit Bildern, einschließlich Verläufen, befassen.

<image>

Ein URL-Verweis auf ein Bild oder einen Farbverlauf.

<color-stop-list>

Eine Liste von zwei oder mehr Farbstopps mit optionaler Übergangsinformation unter Verwendung eines Farbhints.

<linear-color-stop>

Ein <color> und ein <length-percentage>, um den Farbstop für diesen Teil des Farbverlaufs anzugeben.

<linear-color-hint>

Ein <length-percentage>, um anzugeben, wie die Farbe interpoliert.

<ending-shape>

Wird für radiale Verläufe verwendet; kann einen Schlüsselwortwert von circle oder ellipse haben.

<size>

Bestimmt die Größe der Endform des radialen Farbverlaufs. Akzeptiert einen Wert eines Schlüsselworts oder eines <length>, aber keinen Prozentsatz.

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

<position>

Definiert die Position einer Objektfläche. Akzeptiert einen Schlüsselwortwert wie top oder left, oder ein <length-percentage>.

Diese Datentypen werden in Berechnungen von CSS-Mathematikfunktionen verwendet.

<calc-sum>

Eine Berechnung, die eine Abfolge von Berechnungswerten mit Addition (+) und Subtraktion (-) -Operatoren darstellt. Dieser Datentyp erfordert, dass beide Werte Einheiten haben.

<calc-product>

Eine Berechnung, die eine Abfolge von Berechnungswerten mit Multiplikations (*) und Division (/)-Operatoren darstellt. Beim Multiplizieren muss ein Wert einheitslos sein. Bei der Division muss der zweite Wert einheitslos sein.

<calc-value>

Definiert akzeptierte Werte für Berechnungen, 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.

• CSS-Werte und Einheiten Modul
• Lernen: Werte und Einheiten
• CSS Funktionale Notation