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

Die am häufigsten verwendeten Typen sind im Modul CSS Values and Units definiert. Dieses Modul definiert auch funktionale Notationen, die komplexere Typen oder Verarbeitungen ermöglichen. Andere Typen sind in den Spezifikationen definiert, auf die sie anwendbar sind.

Nachfolgend finden Sie einen Verweis auf die Typen, denen Sie am ehesten begegnen werden. Dies ist jedoch kein umfassendes Nachschlagewerk für alle Typen, die in jeder CSS-Spezifikation definiert sind.

Syntax

In der formalen CSS-Syntax werden Datentypen durch ein Schlüsselwort angegeben, das zwischen den spitzen Klammern < und > steht. Sie entsprechen keinem greifbaren CSS-Code-Element.

Textuelle Datentypen

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

Vorgegebene Schlüsselwörter

Schlüsselwörter mit einer vorgegebenen 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 anfänglicher Wert der Eigenschaft angegebene Wert.
inherit: Der berechnete Wert der Eigenschaft beim Elternelement.
revert: Setzt den Cascade zurück auf den Wert des früheren Ursprungs.
revert-layer: Setzt den Cascade auf den Wert der früheren Cascade-Schicht zurück.
unset: Verhält sich wie inherit oder initial, je nachdem, ob die Eigenschaft vererbt wird oder nicht.

<custom-ident>

Ein benutzerdefinierter Identifikator, 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 in Anführungszeichen gesetzte Zeichenfolge, wie sie zum Beispiel 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 Modul CSS Values and Units definiert, jedoch werden zusätzliche Typen in anderen Modulen beschrieben, wenn sie spezifisch für diese Spezifikation sind — zum Beispiel die Einheit fr im Modul CSS grid layout.

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

Mengen

Diese <dimension> Typen werden verwendet, um Distanzen und andere Mengen anzugeben.

<length>: Längen sind ein <dimension> und beziehen sich auf Distanzen.
<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 Einheit s oder ms.
<frequency>: Frequenzen sind ein <dimension> mit einer Hz oder kHz Einheit.
<resolution>: Es handelt sich um 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 zu einer Menge aufgelöst, die der zulässigen Dimension entspricht. 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 CSS-Farbmodul definiert den <color> Datentyp und andere Typen, die sich auf Farbe in CSS beziehen.

<color>: Wird als Schlüsselwort oder numerischer Farbwert angegeben.
<alpha-value>: Gibt die Transparenz einer Farbe an. Kann ein <number> sein, wobei 0 vollständig transparent ist und 1 vollständig undurchsichtig, oder ein <percentage>, wobei 0% vollständig transparent ist und 100% vollständig undurchsichtig.
<hue>: Gibt den <angle> an, mit einer Einheit deg, grad, rad oder turn, oder ein einheitenloses <number> interpretiert als deg, des Farbkreises, der spezifisch für die <absolute-color-functions> ist, deren Bestandteil er ist.

Bilder

Das CSS-Bilder Modul definiert die Datentypen, die mit Bildern umgehen, einschließlich Gradienten.

<image>: Ein URL-Verweis auf ein Bild oder einen Farbverlauf.
<color-stop-list>: Eine Liste von zwei oder mehr Farbstopps mit optionalen Übergangsinformationen unter Verwendung eines Farbhints.
<linear-color-stop>: Eine <color> und ein <length-percentage>, um den Farbverlauf in diesem Teil des Gradienten anzuzeigen.
<linear-color-hint>: Ein <length-percentage>, um anzuzeigen, wie die Farbe interpoliert.
<ending-shape>: Wird für radiale Gradienten verwendet; kann einen Schlüsselwortwert von circle oder ellipse haben.
<size>: Bestimmt die Größe der Endform eines radialen Gradienten. Dies 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üsselwortwert wie top oder left oder ein <length-percentage>.

Berechnungsdatentypen

Diese Datentypen werden in CSS-Mathematikfunktionen Berechnungen verwendet.

<calc-sum>: Eine Berechnung, die eine Sequenz von Berechnungswerten ist, durchsetzt mit Additions- (+) und Subtraktionsoperatoren (-). Dieser Datentyp erfordert, dass beide Werte Einheiten haben.
<calc-product>: Eine Berechnung, die eine Sequenz von Berechnungswerten ist, durchsetzt mit Multiplikations- (*) und Divisionsoperatoren (/). Beim Multiplizieren muss ein Wert einheitenlos sein. Beim Dividieren muss der zweite Wert einheitenlos sein.
<calc-value>: Definiert akzeptierte Werte für Berechnungen, Werte wie <number>, <dimension>, <percentage>, <calc-keyword> oder geschachtelte <calc-sum> Berechnungen.
<calc-keyword>: Definiert eine Reihe von CSS-Schlüsselwörtern, die numerische Konstanten repräsentieren, wie e und π, die in CSS-Mathematikfunktionen verwendet werden können.

Formdatentypen

Die CSS-Formen und CSS-Ränder und Box-Dekorationen Module 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. Es wird von der Kurzform-Eigenschaft corner-shape und ihren Bestandteileigenschaften verwendet, um die Form anzugeben, die auf die betroffenen Containerecken angewendet wird.

Spezifikationen

~~unsupported templ: spezifikationen~~

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