Textuelle Datentypen
Jede CSS-Deklaration besteht aus einem Paar aus Eigenschaft und Wert. Der Wert kann je nach Eigenschaft verschiedene Datentypen umfassen, wie ein einzelnes Schlüsselwort, eine Ganzzahl, eine Funktion oder eine Kombination unterschiedlicher Typen; einige Werte haben Einheiten, andere nicht. Dieser Leitfaden bietet einen Überblick über die textuellen Datentypen. Verweisen Sie für detailliertere Informationen auf die Seite für jeden Werttyp.
Textdaten-Typen sind entweder <string>, eine in Anführungszeichen gesetzte Reihe von Zeichen, ein <ident>, ein „CSS-Identifier“, der eine nicht in Anführungszeichen gesetzte Zeichenkette ist, oder ein optional in Anführungszeichen gesetzter <url>. Ein <string> wird entweder mit einfachen oder doppelten Anführungszeichen eingeschlossen. CSS-Identifier, die in den Spezifikationen als <ident> oder <custom-ident> aufgelistet sind, dürfen nicht in Anführungszeichen stehen.
In den CSS-Spezifikationen sind Werte, die vom Webentwickler definiert werden können — wie Keyframe-Animationsnamen, Schriftfamiliennamen oder Grid-Bereiche — als <custom-ident>, <string> oder beides aufgeführt.
Wenn sowohl in Anführungszeichen gesetzte als auch nicht in Anführungszeichen gesetzte vom Benutzer definierte Textwerte zulässig sind, listet die Spezifikation <custom-ident> | <string> auf, was bedeutet, dass Anführungszeichen optional sind, wie es bei [Keyframe-Animationsnamen] der Fall ist:
@keyframes validIdent {
/* keyframes go here */
}
@keyframes 'validString' {
/* keyframes go here */
}
Einige Textwerte sind nicht gültig, wenn sie in Anführungszeichen gesetzt sind. Zum Beispiel kann der Wert von grid-area ein <custom-ident> sein, sodass wenn wir einen Grid-Bereich namens content hätten, würden wir ihn ohne Anführungszeichen verwenden:
.item {
grid-area: content;
}
Im Vergleich dazu muss ein Datentyp, der ein <string> ist, wie ein String-Wert der content Eigenschaft, in Anführungszeichen gesetzt werden:
.item::after {
content: "This is my content.";
}
Obwohl Sie im Allgemeinen jeden beliebigen Namen erstellen können, einschließlich der Verwendung von Emojis, darf der Identifizierer nicht none, unset, initial oder inherit sein, nicht mit einer Ziffer oder zwei Bindestrichen beginnen und im Allgemeinen sollte er kein anderes vordefiniertes CSS-Schlüsselwort sein. Siehe die <custom-ident> und <string> Referenzseiten für mehr Details.
Vordefinierte Schlüsselwortwerte
Vordefinierte Schlüsselwörter sind Textwerte, die in der Spezifikation für diese Eigenschaft definiert sind. Diese Schlüsselwörter sind ebenfalls CSS-Identifier und werden daher ohne Anführungszeichen verwendet.
Wenn Sie die CSS-Eigenschaftswerts-Syntax in einer CSS-Spezifikation oder der MDN-Eigenschaftsseite betrachten, werden zulässige Schlüsselwörter in folgender Form aufgelistet. Die folgenden aufgezählten Werte sind die vordefinierten Schlüsselwortwerte, die für float zulässig sind.
left | right | none | inline-start | inline-end
Solche Werte werden ohne Anführungszeichen verwendet:
.box {
float: left;
}
CSS-weite Schlüsselwörter
Zusätzlich zu den vordefinierten Schlüsselwörtern, die Teil der Spezifikation für eine Eigenschaft sind, akzeptieren alle CSS-Eigenschaften die CSS-weiten oder „globalen“ Eigenschaftswerte initial, inherit, unset, revert und revert-layer, die explizit das Standardverhalten spezifizieren.
initial-
Repräsentiert den Wert, der als Anfangswert der Eigenschaft festgelegt ist.
inherit-
Repräsentiert den berechneten Wert der Eigenschaft des Elternelements, vorausgesetzt, sie wird vererbt.
unset-
Wirkt als entweder
inheritoderinitial, abhängig davon, ob die Eigenschaft vererbt wird oder nicht. revert-
Setzt die Eigenschaft auf ihren geerbten Wert zurück, wenn sie vom Elternteil geerbt wird, oder auf den Standardwert, der durch das Stylesheet des Benutzer-Agenten (oder von Benutzerstilen, falls vorhanden) festgelegt wird.
revert-layer-
Setzt den Wert einer Eigenschaft in einer Cascade Layer auf den Wert der Eigenschaft in einer CSS-Regel zurück, die das Element in einer vorherigen Cascade Layer trifft. Der Wert der Eigenschaft mit diesem Schlüsselwort wird neu berechnet, als ob keine Regeln auf das Ziel-Element in der aktuellen Cascade Layer angewendet wurden.
URLs
Ein <url> Typ verwendet funktionale Notation, die ein <string> akzeptiert, das eine URL ist. Dies kann eine absolute URL oder eine relative URL sein. Zum Beispiel, wenn Sie ein Hintergrundbild einfügen möchten, könnten Sie eine der folgenden Möglichkeiten verwenden:
.box {
background-image: url("images/my-background.png");
}
.box {
background-image: url("https://www.exammple.com/images/my-background.png");
}
Der Parameter für url() kann entweder in Anführungszeichen oder nicht in Anführungszeichen stehen. Wenn nicht in Anführungszeichen, wird er als <url-token> geparst, das zusätzliche Anforderungen hat, einschließlich des Escape bestimmter Zeichen. Weitere Informationen finden Sie unter <url>.