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 spezielle Art von Komponentenwerttypen.

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. Andere Typen sind in den jeweiligen Spezifikationen definiert.

Im Folgenden finden Sie einen Verweis auf die Typen, die Sie am ehesten antreffen werden. Es handelt sich jedoch nicht um eine umfassende Referenz aller in jeder CSS-Spezifikation definierten Typen.

Syntax

In der formalen CSS-Syntax werden Datentypen durch ein Schlüsselwort zwischen den spitzen Klammern < und > 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 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 beim übergeordneten Element.
revert: Setzt die Kaskade auf den Wert des früheren Ursprungs zurück.
revert-layer: Setzt die Kaskade auf den Wert der früheren Kaskadenebene 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 mit der Eigenschaft grid-area zugewiesene Name.

<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 zitierte Zeichenkette, wie sie als 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 meisten davon sind im CSS-Werte- und -Einheitenmodul definiert, jedoch werden zusätzliche Typen in anderen Modulen beschrieben, wenn sie spezifisch für diese Spezifikation sind — zum Beispiel die fr-Einheit im CSS Grid Layout-Modul.

<integer>: Eine oder mehrere Dezimalstellen 0 bis 9, optional mit vorangestelltem - oder +.
<number>: Reelle Zahlen, die auch eine Bruchkomponente haben können, zum Beispiel 1 oder 1.34.
<dimension>: Eine Zahl mit einer zugehörigen Einheit, zum Beispiel 90deg, 50ms oder 15em. Dieser Typ umfasst Entfernungen (<length>), Dauer (<time>), Frequenzen (<frequency>), Auflösungen (<resolution>) und andere Mengen.
<percentage>: Eine Zahl mit einem Prozentzeichen dahinter, 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 fr-Einheit und für die Größenbestimmung von Gittern verwendet.

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.
<time>: Zeiteinheiten 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 einem Einheitenkennzeichen von dpi, dpcm, dppx, oder x.

Kombinationen von Typen

Einige CSS-Eigenschaften können entweder einen <dimension> oder einen <percentage>-Wert annehmen. In diesem Fall wird der Prozentwert in eine Menge aufgelöst, die mit der zulässigen Dimension übereinstimmt. Eigenschaften, die zusätzlich zur Dimension ein Prozent akzeptieren können, verwenden einen der unten aufgeführten Typen.

<length-percentage>: Ein Typ, der eine Länge oder ein Prozent als Wert akzeptieren kann.
<frequency-percentage>: Ein Typ, der eine Frequenz oder ein Prozent als Wert akzeptieren kann.
<angle-percentage>: Ein Typ, der einen Winkel oder ein Prozent als Wert akzeptieren kann.
<time-percentage>: Ein Typ, der eine Zeit oder ein Prozent als Wert akzeptieren kann.

Farbe

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

<color>: Angegeben als Schlüsselwort oder 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>: Bestimmt den <angle>, mit einem Einheitenkennzeichen deg, grad, rad, oder turn, oder eine einheitslose <number>, die als deg interpretiert wird, des Farbkreises, spezifisch für die <absolute-color-functions>, von denen es ein Bestandteil ist.

Bilder

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

<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>: Eine <color> und eine <length-percentage>, um den Farbstop für diesen Teil des Verlaufs anzugeben.
<linear-color-hint>: Eine <length-percentage>, um anzugeben, wie die Farbe interpoliert wird.
<ending-shape>: Wird für radiale Verläufe verwendet; kann einen Schlüsselwortwert circle oder ellipse haben.
<size>: Bestimmt die Größe der Endform des radialen Verlaufs. Dies akzeptiert einen Wert eines Schlüsselworts oder einer <length>, aber nicht eines Prozents.

2D-Positionierung

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

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

Berechnungsdatentypen

Diese Datentypen werden in CSS-Math-Funktion Berechnungen verwendet.

<calc-sum>: Eine Berechnung, die eine Sequenz von Berechnungswerten umfasst, die mit Additions (+) und Subtraktions (-) Operatoren durchsetzt sind. Dieser Datentyp erfordert, dass beide Werte Einheiten haben.
<calc-product>: Eine Berechnung, die eine Sequenz von Berechnungswerten umfasst, 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 Anzahl von CSS-Schlüsselwörtern, die numerische Konstanten wie e und π darstellen, die in CSS-Math-Funktionen 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 Behälterecke. Er wird von der Kurzschreibweise corner-shape und ihren Bestandteilen verwendet, um die Form zu spezifizieren, die auf betroffene Behälterecken angewendet wird.

Alphabetischer Index 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