CSS-Werte und Einheiten

• <custom-ident>
• Vordefinierte Schlüsselwörter als <ident>
• <string>
• <url>

Textdaten-Typen sind entweder <string>, eine in Anführungszeichen stehende Zeichenreihe, oder ein <ident>, ein "CSS Identifier", der eine nicht zitierte Zeichenkette ist. Ein <string> muss mit einfachen oder doppelten Anführungszeichen versehen sein. CSS-Identifikatoren, in den Spezifikationen als <ident> oder <custom-ident> aufgeführt, müssen unverändert sein.

In den CSS-Spezifikationen sind Werte, die vom Webentwickler definiert werden können, wie Keyframe-Animationen, Schriftartfamiliennamen oder Rasterbereiche, als <custom-ident>, <string> oder beides aufgeführt.

Wenn sowohl zitierte als auch unzitierte benutzerdefinierte Textwerte erlaubt sind, gibt die Spezifikation <custom-ident> | <string> an, was bedeutet, dass Anführungszeichen optional sind, wie im Fall von Animationsnamen:

@keyframe validIdent {
  /* keyframes go here */
}
@keyframe 'validString' {
  /* keyframes go here */
}

Einige Textwerte sind nicht gültig, wenn sie in Anführungszeichen eingeschlossen sind. Zum Beispiel kann der Wert von grid-area ein <custom-ident> sein, sodass wir bei einem Rasterbereich namens content diesen ohne Anführungszeichen verwenden würden:

.item {
  grid-area: content;
}

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

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

Obwohl Sie grundsätzlich jeden beliebigen Namen erstellen können, einschließlich der Verwendung von Emojis, darf der Identifier 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 Referenzseiten <custom-ident> und <string> für weitere Details.

Vordefinierte Schlüsselwörter sind Textwerte, die durch die Spezifikation für diese Eigenschaft definiert sind. Diese Schlüsselwörter sind ebenfalls CSS-Identifikatoren und werden daher ohne Anführungszeichen verwendet.

Beim Betrachten der CSS-Eigenschaftswertsyn­tax in einer CSS-Spezifikation oder auf der MDN-Eigenschaftsseite werden zulässige Schlüsselwörter in der folgenden Form aufgeführt. Die folgenden 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;
}

Zusätzlich zu den vordefinierten Schlüsselwörtern, die Teil der Spezifikation einer Eigenschaft sind, akzeptieren alle CSS-Eigenschaften die CSS-weiten Eigenschaftswerte initial, inherit, unset, revert, und revert-layer, die explizit Standardverhalten angeben.

initial

Repräsentiert den als anfänglichen Wert der Eigenschaft spezifizierten Wert.

inherit

Stellt den berechneten Wert der Eigenschaft auf dem Elternelement dar, sofern sie geerbt wird.

unset

Wirkt entweder als inherit oder initial, je nachdem, ob die Eigenschaft vererbbar ist oder nicht.

revert

Setzt die Eigenschaft auf ihren geerbten Wert zurück, falls sie vom übergeordneten Element erbt, oder auf den Standardwert, der durch das Stylesheet des Benutzeragents (oder durch Benutzerstile, falls vorhanden) etabliert wurde.

revert-layer

Setzt den Wert einer Eigenschaft in einer Kaskadenschicht auf den Wert der Eigenschaft in einer CSS-Regel zurück, die dem Element in einer vorherigen Kaskadenschicht entspricht. Der Wert der Eigenschaft mit diesem Schlüsselwort wird neu berechnet, als ob im Ziel-Element in der aktuellen Kaskadenschicht keine Regeln festgelegt worden wären.

Ein Typ <url> verwendet funktionale Notation, die ein <string> akzeptiert, das eine URL ist. Dies kann eine absolute URL oder eine relative URL sein. Beispielsweise, wenn Sie ein Hintergrundbild einbinden möchten, können Sie eine der folgenden Optionen 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 zitiert oder unzitiert sein. Wenn er unzitiert ist, wird er als <url-token> analysiert, das zusätzliche Anforderungen einschließlich des Entkommens bestimmter Zeichen hat. Weitere Informationen finden Sie unter <url>.

• <integer>
• <number>
• <dimension>
• <percentage>

Eine Ganzzahl ist eine oder mehrere Dezimalziffern, 0 bis 9, wie 1024 oder -55. Eine Ganzzahl kann durch ein +- oder --Symbol vorangestellt werden, ohne dass zwischen dem Symbol und der Ganzzahl ein Leerzeichen steht.

Ein <number> stellt eine reelle Zahl dar, die möglicherweise oder möglicherweise nicht ein Komma mit einer Bruchkomponente enthält, zum Beispiel 0.255, 128 oder -1.2. Zahlen können ebenfalls mit einem +- oder --Symbol vorangestellt werden.

Ein <dimension> ist eine <number> mit einer angehängten Einheit, zum Beispiel 45deg, 100ms oder 10px. Der angehängte Einheit-Identifikator ist nicht case-sensitive. Es gibt nie einen Leerschritt oder andere Zeichen zwischen der Zahl und dem Einheiten-Identifikator: das heißt, 1 cm ist nicht gültig.

CSS verwendet Maßeinheiten, um anzugeben:

• <length> (Distanz-Einheiten)
• <angle>
• <time>
• <frequency>
• <flex>
• <resolution>

Diese werden alle in den folgenden Unterabschnitten behandelt.

Distanz-Einheiten

Wo eine Distanz-Einheit, auch bekannt als Länge, als Wert für eine Eigenschaft erlaubt ist, wird dies als Type <length> beschrieben. In CSS gibt es zwei Arten von Längen: relative und absolute. Relative Längeneinheiten geben eine Länge im Verhältnis zu etwas anderem an.

Es gibt zwei Arten von relativen Längen: schriftbezogene Längen und Ansichtsfenster-Prozentsatzlängen. Diese kommen beide in zwei Typen. Schriftbezogene Längeinheiten sind entweder lokale schriftbezogene oder wurzel-schriftbezogene. Ansichtsfenster-Prozentsatzlängen sind entweder relativ zur Höhe oder Breite des Ansichtsfensters oder, wie im CSS Containment Modul definiert, relativ zu einem Container.

Lokale schriftbezogene Längen

Lokale schriftbezogene Längen sind relativ zur "lokalen" Schriftgröße oder Zeilenhöhe und spezifizieren eine Länge im Verhältnis zu einer berechneten Größe eines Merkmals des Elements selbst oder relativ zum geerbten Wert des Elements im Fall eines zirkulären Verweises, wie etwa beim em-Wert einer font-size-Eigenschaft oder einem lh-Wert einer line-height-Eigenschaft. Zum Beispiel, em ist relativ zur Schriftgröße auf dem Element und ex ist relativ zur x-Höhe der Schrift des Elements.

Wurzel-schriftbezogene Längen

Wurzel-schriftbezogene Längen geben eine Länge im Verhältnis zum Wurzelelement Vorfahr des Elements an, wie <html> oder <SVG>. Beispielsweise ist rem relativ zur Schriftgröße auf dem Wurzelelement und rex ist die x-Höhe der Schrift des Wurzelelements.

Ansichtsfenster-Einheiten

Ansichtsfenster-Einheiten geben eine Länge relativ zu den Abmessungen des Ansichtsfensters an. Beispielsweise ist vw relativ zur Breite des Ansichtsfensters und vh relativ zur Höhe des Ansichtsfensters.

Container-Einheiten

Container-Abfrage Längeneinheiten geben eine Länge an, die relativ zu den Abmessungen eines Abfragecontainers ist. Beispielsweise ist cqw relativ zur Breite des Abfragecontainers und cqh ist relativ zur Höhe des Abfragecontainers.

Absolute Längeneinheiten

Absolute Längeneinheiten sind an eine physische Länge gebunden: entweder ein Zoll oder ein Zentimeter. Viele dieser Einheiten sind daher nützlicher, wenn die Ausgabe ein festes Medienformat hat, wie z.B. Druck. Zum Beispiel, mm ist ein physischer Millimeter, 1/10 eines Zentimeters.

Beim Einfügen eines Längenwertes, wenn die Länge 0 ist, ist der Einheiten-Identifikator nicht erforderlich. Andernfalls ist der Einheiten-Identifikator erforderlich, ist nicht case-sensitive und muss unmittelbar nach dem numerischen Teil des Wertes kommen, ohne dass ein Leerzeichen dazwischen ist.

Winkeleinheiten

Winkelwerte werden durch den Typ <angle> dargestellt und akzeptieren die folgenden Werte:

Zeiteinheiten

Zeitwerte werden durch den Typ <time> dargestellt. Bei der Angabe eines Zeitwertes ist der Einheiten-Identifikator — das s oder ms — erforderlich. Er akzeptiert die folgenden Werte.

Frequenzeinheiten

Frequenzwerte werden durch den Typ <frequency> dargestellt. Sie akzeptieren die folgenden Werte.

1Hz, welcher auch als 1hz oder 1HZ geschrieben werden kann, ist ein Zyklus pro Sekunde.

Flex-Einheiten

Flex-Einheiten werden durch den Typ <flex> dargestellt. Sie akzeptieren den folgenden Wert.

Auflösungseinheiten

Auflösungseinheiten werden durch den Typ <resolution> dargestellt. Sie repräsentieren die Größe eines einzelnen Punkts in einer grafischen Darstellung, z.B. eines Bildschirms, indem angegeben wird, wie viele dieser Punkte in einen CSS-Zoll, Zentimeter oder Pixel passen. Es werden die folgenden Werte akzeptiert:

Prozentsätze

Ein <percentage> ist ein Typ, der einen Bruchteil eines anderen Wertes darstellt.

Prozentwerte sind immer relativ zu einer anderen Größe, zum Beispiel einer Länge. Jede Eigenschaft, die Prozentsätze erlaubt, definiert auch die Größe, auf die sich der Prozentsatz bezieht. Diese Größe kann ein Wert einer anderen Eigenschaft des gleichen Elements sein, der Wert einer Eigenschaft eines Vorfahrelements, eine Messung eines enthaltenen Blocks oder etwas anderes.

Als Beispiel, wenn Sie die width eines Kastens als Prozentsatz angeben, bezieht sich dies auf den Prozentsatz der berechneten Breite des Elternkastens:

.box {
  width: 50%;
}

Einige Eigenschaften akzeptieren eine Maßeinheit, die entweder eine von zwei Typen sein kann, zum Beispiel eine <length> oder ein <percentage>. In diesem Fall wird der erlaubte Wert in der Spezifikation als Kombinationseinheit detailliert beschrieben, z.B. <length-percentage>. Andere mögliche Kombinationen sind wie folgt:

• <frequency-percentage>
• <angle-percentage>
• <time-percentage>

• <color>
• <image>
• <position>

Farbe

Der <color>-Wert gibt die Farbe einer Elementeigenschaft an (z.B. ihre Hintergrundfarbe) und ist im CSS-Farbmodul definiert.

Bild

Der <image>-Wert spezifiziert alle verschiedenen Bildtypen, die in CSS verwendet werden können, und ist im CSS Image Values and Replaced Content Module definiert.

Position

Der <position>-Typ definiert die 2D-Positionierung eines Objekts innerhalb eines Positionierungsbereichs, beispielsweise eines Hintergrundbilds innerhalb eines Containers. Dieser Typ wird als background-position interpretiert und daher in der CSS Backgrounds and Borders Spezifikation spezifiziert.

• calc()
• min()
• max()
• minmax()
• clamp()
• toggle()
• attr()

Funktionale Notation ist ein Werttyp, der komplexere Typen darstellen oder spezielle Verarbeitung durch CSS anstoßen kann. Die Syntax beginnt mit dem Namen der Funktion, gefolgt unmittelbar von einer linken Klammer (, gefolgt von den Argument(en) für die Notation, gefolgt von einer rechten Klammer ). Funktionen können mehrere Argumente annehmen, die ähnlich wie ein CSS-Eigenschaftswert formatiert sind.

Leerzeichen sind erlaubt, aber innerhalb der Klammern optional. (Aber beachten Sie die Hinweise zu Leerzeichen auf den Seiten für min(), max(), minmax() und clamp()-Funktionen.)

Einige Legacy-Funktionsnotationen, wie die ältere Syntax für rgb(), rgba(), hsl(), und hsla(), verwendeten Kommata, aber im Allgemeinen werden Kommata nur verwendet, um Elemente in einer Liste zu trennen. Wenn ein Komma verwendet wird, um Argumente zu trennen, ist vor und nach dem Komma optional ein Leerzeichen.

• CSS Grundlegende Datentypen
• Einführung in CSS: Werte und Einheiten
• Trigonometrische Funktionen in CSS