Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.

View in EnglishAlways switch to English

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 besondere Art vonKomponentenwerttypen.

Die am häufigsten verwendeten Typen sind im ModulCSS-Werte und Einheiten definiert. Dieses Modul definiert auchfunktionale Notationen, die komplexere Typen oder Verarbeitungen ermöglichen. Andere Typen sind in den Spezifikationen definiert, auf die sie zutreffen.

Unten finden Sie eine Referenz zu den Typen, die Ihnen am wahrscheinlichsten begegnen, es ist jedoch keine umfassende Referenz für alle in jeder CSS-Spezifikation definierten Typen.

Syntax

In formaler CSS-Syntax werden Datentypen durch ein Schlüsselwort gekennzeichnet, das zwischen den spitzen Klammern< und> platziert ist. Sie entsprechen keinem greifbaren CSS-Code-Element.

Textuelle Datentypen

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

Vordefinierte Schlüsselwörter

Schlüsselwörter mit vordefinierter Bedeutung, zum Beispiel der Wertcollapse für die Eigenschaftborder-collapse.

CSS-weite Schlüsselwörter

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

initial: Der Wert, der als Anfangswert der Eigenschaft festgelegt ist.
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 früherenKaskadenschicht zurück.
unset: Verhält sich wieinherit oderinitial, abhängig davon, ob die Eigenschaft vererbt wird oder nicht.

<custom-ident>

Ein benutzerdefinierter Bezeichner, zum Beispiel der Name, der mit der Eigenschaftgrid-area vergeben wurde.

<dashed-ident>

Ein<custom-ident> mit der zusätzlichen Einschränkung, dass er mit zwei Bindestrichen beginnen muss, zum Beispiel bei denbenutzerdefinierten CSS-Eigenschaften.

<string>

Eine in Anführungszeichen gesetzte Zeichenkette, wie sie für einen Wert der Eigenschaftcontent verwendet wird.

<url>

Ein Zeiger auf eine Ressource, beispielsweise als Wert vonbackground-image.

Numerische Datentypen

Diese Datentypen werden verwendet, um Mengen, Indizes und Positionen anzugeben. Die Mehrheit davon ist im Modul für CSS-Werte und Einheiten definiert, jedoch werden zusätzliche Typen in anderen Modulen beschrieben, wo sie spezifisch für diese Spezifikation sind — zum Beispiel diefr-Einheit im ModulCSS-Gitterlayout.

<integer>: Eine oder mehrere Dezimaleinheiten von 0 bis 9, optional vorangestellt durch- oder+.
<number>: Reelle Zahlen, die auch eine gebrochene Komponente haben können, zum Beispiel1 oder1.34.
<dimension>: Eine Zahl mit einer Einheit, zum Beispiel90deg,50ms oder15em. Dieser Typ umfasst Abstände (<length>), Zeitdauern (<time>), Frequenzen (<frequency>), Auflösungen (<resolution>) und andere Mengen.
<percentage>: Eine Zahl mit einem Prozentzeichen, zum Beispiel10%.
<ratio>: Ein Verhältnis, geschrieben im Syntax<number> / <number>.
<flex>: Eine flexible Länge, eingeführt für dasCSS-Gitterlayout, geschrieben als ein<number> mit der Einheitfr und zur Größenbestimmung des Gitter-Tracks verwendet.

Mengen

Diese<dimension> Typen werden verwendet, um Abstände und andere Mengen anzugeben.

<length>: Längen sind ein<dimension> und beziehen sich auf Abstände.
<angle>: Winkel werden in Eigenschaften wielinear-gradient() verwendet und sind ein<dimension> mit einer der Einheitendeg,grad,rad oderturn.
<time>: Zeitdauereinheiten sind ein<dimension> mit einer Einheits oderms.
<frequency>: Frequenzen sind ein<dimension> mit einer EinheitHz oderkHz.
<resolution>: Ist ein<dimension> mit einer Einheitdpi,dpcm,dppx oderx.

Kombinationen von Typen

Einige CSS-Eigenschaften können einen<dimension> oder einen<percentage> Wert annehmen. In diesem Fall wird der Prozentwert auf eine mit der zulässigen Dimension übereinstimmende Menge aufgelöst. 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 ModulCSS-Farbe definiert den<color> Datentyp und andere Typen, die sich auf Farbe in CSS beziehen.

<color>: Angegeben als ein Schlüsselwort oder ein numerischer Farbwert.
<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 vondeg,grad,rad oderturn, oder eine einheitslose<number>, die alsdeg interpretiert wird, desFarbkreises, der spezifisch für die<absolute-color-functions> ist, von denen er ein Bestandteil ist.

Bilder

Das ModulCSS-Bilder definiert die Datentypen, die sich mit Bildern beschäftigen, einschließlich Farbverläufe.

<image>: Eine URL-Referenz zu einem Bild oder einem Farbverlauf.
<color-stop-list>: Eine Liste von zwei oder mehr Farbstopps mit optionalen Übergangsinformationen mittels eines Farbhinweises.
<linear-color-stop>: Eine<color> und eine<length-percentage>, um den Farbstopp für diesen Teil des Verlaufs anzuzeigen.
<linear-color-hint>: Eine<length-percentage>, um anzugeben, wie die Farbe interpoliert.
<ending-shape>: Wird für Radialverläufe verwendet; kann einen Schlüsselwortwert voncircle oderellipse haben.
<size>: Bestimmt die Größe der Endform des Radialverlaufs. Dies akzeptiert einen Wert eines Schlüsselworts oder einer<length>, jedoch keinen Prozentsatz.

2D-Positionierung

Der<position> Datentyp wird entsprechend der Definition für die Eigenschaft<background-position> interpretiert.

<position>: Bestimmt die Position eines Objektbereichs. Akzeptiert einen Schlüsselwortwert wietop oderleft oder eine<length-percentage>.

Berechnungsdatentypen

Diese Datentypen werden in Berechnungen vonCSS-Mathematikfunktionen verwendet.

<calc-sum>: Eine Berechnung, die eine Abfolge von Berechnungswerten, unterteilt durch Additions- (+) und Subtraktionsoperatoren (-), ist. Dieser Datentyp erfordert, dass beide Werte Einheiten haben.
<calc-product>: Eine Berechnung, die eine Abfolge von Berechnungswerten, unterteilt durch Multiplikations- (*) und Divisionsoperatoren (/), ist. 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 wiee undπ darstellen, die in CSS-Mathematikfunktionen verwendet werden können.

Form-Datentypen

Die ModuleCSS-Formen undCSS-Ränder und Box-Dekorationen definieren Form-Datentypen:

<basic-shape>: Beschreibt Formfunktionen, die in den Eigenschaftenclip-path,shape-outside undoffset-path verwendet werden.
<corner-shape-value>: Beschreibt die Form einer Containerecke. Es wird von der Abkürzungseigenschaftcorner-shape und ihrenBestandteileigenschaften verwendet, um die Form zu spezifizieren, die auf betroffene Containerecken angewendet wird.

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen •Fehler mit dieser Übersetzung melden

Movatterモバイル変換