Textuelle Datentypen

Jede CSS-Deklaration besteht aus einem Paar von Eigenschaften/Werten. 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 zu jedem Werttyp verweisen wir auf die jeweilige Seite.

Textuelle Datentypen sind entweder <string>, eine in Anführungszeichen gesetzte Zeichenfolge, ein <ident>, ein "CSS Identifier", der eine nicht in Anführungszeichen gesetzte Zeichenfolge ist, oder ein optional in Anführungszeichen gesetztes <url>. Ein <string> wird entweder mit einfachen oder doppelten Anführungszeichen versehen. CSS-Bezeichner, in den Spezifikationen als <ident> oder <custom-ident> aufgeführt, müssen ohne Anführungszeichen sein.

In CSS-Spezifikationen sind Werte, die vom Webentwickler definiert werden können — wie Namen von Keyframe-Animationen, Schriftfamiliennamen oder Rasterbereiche — 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 erlaubt sind, wird die Spezifikation <custom-ident> | <string> auflisten, was bedeutet, dass Anführungszeichen optional sind, wie es bei [Namen von Keyframe-Animationen] der Fall ist:

css
@keyframe validIdent {
  /* keyframes go here */
}
@keyframe '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 wir, wenn wir einen Rasterbereich namens content hätten, diesen ohne Anführungszeichen verwenden würden:

css
.item {
  grid-area: content;
}

Im Vergleich dazu muss ein Datentyp, der ein <string> ist, wie ein Stringwert der content-Eigenschaft, in Anführungszeichen gesetzt werden:

css
.item::after {
  content: "This is my content.";
}

Während Sie im Allgemeinen jeden beliebigen Namen erstellen können, einschließlich der Verwendung von Emojis, darf der Bezeichner 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 zu <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-Bezeichner und werden daher ohne Anführungszeichen verwendet.

Wenn Sie die Syntax der CSS-Eigenschaftswerte in einer CSS-Spezifikation oder auf der MDN-Eigenschaftsseite ansehen, werden zulässige Schlüsselwörter in folgender 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:

css
.box {
  float: left;
}

CSS-weite Werte

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 als Anfangswert der Eigenschaft festgelegten Wert.

inherit

Repräsentiert den berechneten Wert der Eigenschaft beim übergeordneten Element, vorausgesetzt, er wird vererbt.

unset

Wirkt entweder als inherit oder initial, 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 oder benutzerdefinierte Stile festgelegt wird (falls vorhanden).

revert-layer

Setzt den Wert einer Eigenschaft in einer Kaskadenschicht auf den Wert der Eigenschaft in einer CSS-Regel zurück, die auf das Element in einer vorherigen Kaskadenschicht angewendet wurde. Der Wert der Eigenschaft mit diesem Schlüsselwort wird neu berechnet, als ob keine Regeln in der aktuellen Kaskadenschicht auf das Zielelement 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. Wenn Sie beispielsweise ein Hintergrundbild einfügen möchten, könnten Sie entweder der folgenden Schritte verwenden:

css
.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 in Anführungszeichen gesetzt sein. Wenn er nicht in Anführungszeichen gesetzt ist, wird er als <url-token> analysiert, das zusätzliche Anforderungen inklusive der Flucht bestimmter Zeichen hat. Siehe <url> für weitere Informationen.

Siehe auch