Textuelle Datentypen
Jede CSS-Deklaration besteht aus einem Paar von Eigenschaft und Wert. Der Wert kann je nach Eigenschaft verschiedene Datentypen enthalten, wie ein einzelnes Schlüsselwort, eine Ganzzahl, eine Funktion oder eine Kombination verschiedener Typen; einige Werte haben Einheiten, während andere keine haben. Dieser Leitfaden bietet einen Überblick über die textuellen Datentypen. Für detailliertere Informationen verweisen wir auf die Seite für jeden Wertetyp.
Textdatentypen sind entweder <string>, eine in Anführungszeichen gesetzte Zeichenfolge, ein <ident>, ein „CSS-Identifikator“, der eine nicht in Anführungszeichen gesetzte Zeichenfolge ist, oder ein optional in Anführungszeichen gesetzer <url>. Ein <string> wird entweder mit einfachen oder doppelten Anführungszeichen gesetzt. CSS-Identifikatoren, die in den Spezifikationen als <ident> oder <custom-ident> aufgeführt sind, müssen ohne Anführungszeichen sein.
In den CSS-Spezifikationen sind Werte, die vom Webentwickler definiert werden können — wie Keyframe-Animationsnamen, Schriftfamiliennamen oder Gitterbereiche — als <custom-ident>, <string> oder beides aufgeführt.
Wenn sowohl in Anführungszeichen gesetzte als auch nicht in Anführungszeichen gesetzte benutzerdefinierte Textwerte erlaubt sind, wird die Spezifikation <custom-ident> | <string> auflisten, 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 ungültig, wenn sie in Anführungszeichen eingeschlossen sind. Beispielsweise kann der Wert von grid-area ein <custom-ident> sein, daher würden wir, wenn wir einen Gitterbereich namens content hätten, diesen ohne Anführungszeichen verwenden:
.item {
grid-area: content;
}
Im Vergleich dazu muss ein Datenwert, der ein <string> ist, wie ein String-Wert der content-Eigenschaft, in Anführungszeichen gesetzt werden:
.item::after {
content: "This is my content.";
}
Während Sie im Allgemeinen jeden Namen erstellen können, den Sie möchten, einschließlich der Verwendung von Emojis, darf der Identifikator nicht none, unset, initial oder inherit sein, nicht mit einer Ziffer oder zwei Bindestrichen beginnen, und im Allgemeinen möchten Sie nicht, dass es sich um ein anderes vordefiniertes CSS-Schlüsselwort handelt. Siehe die Referenzseiten <custom-ident> und <string> für weitere Details.
Vordefinierte Schlüsselwortwerte
Vordefinierte Schlüsselwörter sind Textwerte, die von der Spezifikation für diese Eigenschaft definiert sind. Diese Schlüsselwörter sind ebenfalls CSS-Identifikatoren und werden daher ohne Anführungszeichen verwendet.
Wenn Sie CSS-Eigenschaftswert-Syntax in einer CSS-Spezifikation oder auf der MDN-Eigenschaftsseite ansehen, werden die zulässigen Schlüsselwörter in der folgenden Form aufgelistet. Die folgenden aufgezählten Werte sind die vordefinierten Schlüsselwortwerte, die für float erlaubt 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 Standardverhaltensweisen angeben.
initial-
Stellt den als anfänglichen Wert der Eigenschaft spezifizierten Wert dar.
inherit-
Stellt den berechneten Wert der Eigenschaft am Eltern-Element dar, sofern es vererbt wird.
unset-
Wirkt entweder als
inheritoderinitial, abhängig davon, ob die Eigenschaft vererbt wird oder nicht. revert-
Setzt die Eigenschaft auf ihren geerbten Wert zurück, wenn sie von ihrem Elternteil erbt, oder auf den Standardwert, der durch das Stylesheet des Benutzeragenten festgelegt wird (oder durch Benutzerstile, sofern vorhanden).
revert-layer-
Setzt den Wert einer Eigenschaft in einem Cascade-Layer auf den Wert der Eigenschaft in einer CSS-Regel zurück, die das Element in einem vorherigen Cascade-Layer matcht. Der Wert der Eigenschaft mit diesem Schlüsselwort wird neu berechnet, als ob keine Regeln auf das Ziel-Element im aktuellen Cascade-Layer angewendet worden wären.
URLs
Ein <url>-Typ verwendet funktionale Notation, die ein <string> akzeptiert, das eine URL ist. Dies kann eine absolute oder eine relative URL sein. Wenn Sie beispielsweise ein Hintergrundbild einfügen möchten, könnten Sie eines der folgenden 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 gesetzt oder nicht gesetzt werden. Wenn er nicht gesetzt ist, wird er als <url-token> geparst, was zusätzliche Anforderungen wie das Entkommen bestimmter Zeichen mit sich bringt. Weitere Informationen finden Sie unter <url>.