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

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 einen Verweis auf die Typen, die Ihnen wahrscheinlich am häufigsten begegnen, es handelt sich jedoch nicht um einen umfassenden Verweis auf alle in jeder CSS-Spezifikation definierten Typen.

Syntax

In der formalen CSS-Syntax werden Datentypen durch ein Schlüsselwort gekennzeichnet, das zwischen den spitzen Klammern < und > steht. 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 angegebene Wert als Anfangswert der Eigenschaft.
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 vorherigen Kaskadenschicht zurück.
unset: Wirkt wie inherit oder initial, je nachdem, ob die Eigenschaft vererbt wird oder nicht.

<custom-ident>

Ein vom Benutzer definierter 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-benutzerdefinierten Eigenschaften.

<string>

Eine in Anführungszeichen gesetzte Zeichenkette, wie sie 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 zur Angabe von Mengen, Indizes und Positionen verwendet. Der Großteil dieser Typen ist im Modul CSS Werte und Einheiten definiert, jedoch werden zusätzliche Typen in anderen Modulen beschrieben, wo sie nur für diese Spezifikation spezifisch sind – zum Beispiel die Einheit fr im Modul CSS Grid-Layout.

<integer>: Eine oder mehrere Dezimaleinheiten 0 bis 9, optional vorangestellt mit - oder +.
<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 beinhaltet Entfernungen (<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 im Syntax <number> / <number>.
<flex>: Eine flexible Länge, die für das CSS Grid-Layout eingeführt wurde, geschrieben als ein <number> mit der fr Einheit angehängt und für das Größen von Grid-Spuren verwendet.

Größenangaben

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>: Dauerseinheiten 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 Einheitenbezeichner von dpi, dpcm, dppx oder x.

Kombinationen von Typen

Einige CSS-Eigenschaften können einen <dimension> oder einen <percentage> Wert übernehmen. In diesem Fall wird der Prozentwert auf eine Größe aufgelöst, die mit der zulässigen Dimension übereinstimmt. Eigenschaften, die zusätzlich zu einer Dimension auch 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.

Farbe

Das CSS-Farben 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 deckend ist, oder ein <percentage>, wobei 0% vollständig transparent und 100% vollständig deckend sind.
<hue>: Gibt den <angle> an, mit einem Einheitencode 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, deren Teil er ist.

Bilder

Das CSS-Bilder 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 optionalen Übergangsinformationen unter Verwendung eines Farbhints.
<linear-color-stop>: Eine <color> und eine <length-percentage>, um den Farbverlauf für diesen Teil des Gradienten anzugeben.
<linear-color-hint>: Eine <length-percentage>, um anzugeben, wie die Farbe interpoliert wird.
<ending-shape>: Wird für radiale Gradienten verwendet; kann einen Schlüsselwortwert von circle oder ellipse haben.
<size>: Bestimmt die Größe der Endform des radialen Gradienten. Dies akzeptiert einen Wert eines Schlüsselwortes oder eines <length>, aber nicht einen 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 eine <length-percentage>.

Berechnungsdatentypen

Diese Datentypen werden in CSS-Mathematikfunktionen Berechnungen verwendet.

<calc-sum>: Eine Berechnung, die eine Folge von Berechnungswerten mit Addition (+) und Subtraktion (-) Operatoren enthält. Dieser Datentyp erfordert, dass beide Werte Einheiten haben.
<calc-product>: Eine Berechnung, die eine Folge von Berechnungswerten mit Multiplikation (*) und Division (/) Operatoren enthält. Beim Multiplizieren muss ein Wert einheitslos sein. Beim Teilen 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.

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 Behälterecke. Es wird von der Kurzform- Eigenschaft corner-shape und ihren Bestandteileigenschaften verwendet, um die Form anzugeben, die auf die betroffenen 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