CSS-Werte und -Einheiten

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

Textdatentypen sind entweder <string>, eine in Anführungszeichen stehende Zeichenserie, oder ein <ident>, ein "CSS Identifier", der eine nicht in Anführungszeichen stehende Zeichenfolge ist. Eine <string> muss entweder mit einfachen oder doppelten Anführungszeichen eingeschlossen werden. CSS-Identifikatoren, im Regelwerk als <ident> oder <custom-ident> aufgelistet, dürfen nicht in Anführungszeichen stehen.

Im CSS-Regelwerk werden Werte, die vom Webentwickler definiert werden können, wie Keyframe-Animationen, Schriftfamiliennamen oder Rasterbereiche als <custom-ident>, <string>, oder beides aufgelistet.

Wenn sowohl zitierte als auch nicht zitierte benutzerdefinierte Textwerte erlaubt sind, wird die Spezifikation <custom-ident> | <string> auflisten, was bedeutet, dass Anführungszeichen optional sind, wie es bei Animationsnamen der Fall ist:

@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, daher würden wir, wenn wir einen Rasterbereich namens content hätten, diesen ohne Anführungszeichen verwenden:

.item {
  grid-area: content;
}

Im Vergleich dazu muss ein Datentyp, der ein <string> ist, wie ein Zeichenkettenwert der content-Eigenschaft, zitiert werden:

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

Während Sie im Allgemeinen jeden gewünschten Namen erstellen können, einschließlich Emojis, darf der Identifikator nicht none, unset, initial oder inherit sein, nicht mit einer Ziffer oder zwei Bindestrichen beginnen, und im Allgemeinen sollten Sie vermeiden, dass es ein anderes vordefiniertes CSS-Schlüsselwort ist. Weitere Informationen finden Sie auf den Referenzseiten zu <custom-ident> und <string>.

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

Wenn Sie die CSS-Eigenschaftswertsyntax in einer CSS-Spezifikation oder auf der MDN-Eigenschaftsseite betrachten, werden die zulässigen Schlüsselwörter in der folgenden Form aufgelistet. 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 für eine Eigenschaft sind, akzeptieren alle CSS-Eigenschaften die CSS-weiten Eigenschaftswerte initial, inherit, unset, revert und revert-layer, die explizit Rücksetzverhalten angeben.

initial

Repräsentiert den Wert, der als anfänglicher Wert der Eigenschaft festgelegt wurde.

inherit

Repräsentiert den berechneten Wert der Eigenschaft des Elternelements des Elements, vorausgesetzt, dass es geerbt wird.

unset

Wirkt wie inherit oder initial, abhängig davon, ob die Eigenschaft geerbt wird oder nicht.

revert

Setzt die Eigenschaft auf ihren geerbten Wert zurück, wenn sie diesen vom Elternelement erbt, oder auf den Standardwert, der durch das Stylesheet des Benutzer-Agents (oder, falls vorhanden, durch Benutzerstile) festgelegt wurde.

revert-layer

Rollt den Wert einer Eigenschaft in einem Kaskadenschicht zu dem 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 keine Regeln für das Zielobjekt in der aktuellen Kaskadenschicht festgelegt wären.

Ein <url>-Typ verwendet funktionale Notation, die eine <string> akzeptiert, die eine URL ist. Dies kann eine absolute oder relative URL sein. Wenn Sie beispielsweise ein Hintergrundbild einfügen möchten, könnten Sie eine 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 oder nicht in Anführungszeichen stehen. Wenn nicht zitiert, wird es als <url-token> analysiert, der zusätzliche Anforderungen wie das Escapen bestimmter Zeichen hat. Weitere Informationen finden Sie in <url>.

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

Eine Ganzzahl ist ein oder mehrere Dezimalziffern, 0 bis 9, wie 1024 oder -55. Eine Ganzzahl kann von einem + oder - Symbol flankiert sein, ohne Leerzeichen zwischen dem Symbol und der Ganzzahl.

Ein <number> repräsentiert eine reelle Zahl, die einen Dezimalpunkt mit einer Bruchkomponente haben kann oder nicht, beispielsweise 0.255, 128 oder -1.2. Zahlen können auch von einem + oder - Symbol flankiert sein.

Ein <dimension> ist ein <number> mit einer daran angehängten Einheit, zum Beispiel 45deg, 100ms oder 10px. Der angehängte Einheit-Identifier ist nicht empfindlich für Groß- und Kleinschreibung. Es gibt niemals ein Leerzeichen oder andere Zeichen zwischen der Zahl und dem Einheiten-Identifier: d. h. 1 cm ist nicht gültig.

CSS verwendet Dimensionen zur Spezifizierung von:

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

Diese sind alle in den untenstehenden Unterabschnitten behandelt.

Distanzeinheiten

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

Es gibt zwei Arten relativer Längen: schriftbezogene Längen und Längen in Prozent des Sichtbereichs. Diese kommen beide in zwei Arten. Schriftbezogene Längeneinheiten sind entweder lokal schriftbezogen oder wurzelschriftbezogen. Längen in Prozent des Sichtbereichs sind entweder relativ zur Höhe oder Breite des Sichtbereichs 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 einer Funktion des Elements selbst oder relativ zum vererbten Wert des Elements im Falle einer Zirkelreferenz, wie der em-Wert für eine font-size-Eigenschaft oder ein lh-Wert für eine line-height-Eigenschaft. Beispielsweise ist em relativ zur Schriftgröße des Elements und ex relativ zur x-Höhe der Schrift des Elements.

Wurzelschriftbezogene Längen

Wurzelschriftbezogene Längen spezifizieren eine Länge im Verhältnis zum Wurzelelement-Vorfahr des Elements, wie <html> oder <SVG>. Zum Beispiel ist rem relativ zur Schriftgröße des Wurzelelements und rex die x-Höhe der Schrift des Wurzelelements.

Sichtbereichseinheiten

Längeneinheiten des Sichtbereichs geben eine Länge relativ zu den Abmessungen des Sichtbereichs an. Zum Beispiel ist vw relativ zur Breite des Sichtbereichs und vh relativ zur Höhe des Sichtbereichs.

Container-Einheiten

Längeneinheiten für Container-Abfragen geben eine Länge relativ zu den Abmessungen eines Abfragecontainers an. Zum Beispiel ist cqw relativ zur Breite des Abfragecontainers und cqh relativ zur Höhe des Abfragecontainers.

Absolute Längeneinheiten

Absolute Längeneinheiten sind an eine physikalische 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. beim Drucken. Zum Beispiel ist mm ein physischer Millimeter, 1/10 eines Zentimeters.

Wenn ein Längenwert enthalten ist, ist, wenn die Länge 0 ist, der Einheit-Identifikator nicht erforderlich. Andernfalls wird der Einheit-Identifikator benötigt, ist nicht empfindlich für Groß- und Kleinschreibung und muss unmittelbar nach dem numerischen Teil des Wertes erfolgen, ohne Leerzeichen dazwischen.

Winkeleinheiten

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

Zeiteinheiten

Zeitwerte werden durch den Typ <time> dargestellt. Wenn ein Zeitwert enthalten ist, ist der Einheiten-Identifikator — das s oder ms — erforderlich. Er akzeptiert die folgenden Werte.

Frequenzeinheiten

Frequenzwerte werden durch den Typ <frequency> dargestellt. Er akzeptiert die folgenden Werte.

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

Flex-Einheiten

Flex-Einheiten werden durch den Typ <flex> dargestellt. Er akzeptiert 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, wie einem Bildschirm, indem sie angeben, wie viele dieser Punkte in einen CSS-Zoll, Zentimeter oder Pixel passen. Sie akzeptieren die folgenden Werte:

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 zulässt, definiert auch die Größe, auf die sich der Prozentsatz bezieht. Diese Größe kann ein Wert einer anderen Eigenschaft desselben Elements sein, der Wert einer Eigenschaft eines Vorfahren-Elements, eine Messung eines enthaltenen Blocks oder etwas anderes.

Als Beispiel, wenn Sie die width einer Box als Prozentsatz angeben, bezieht sich dieser auf den Prozentsatz der berechneten Breite des übergeordneten Elements der Box:

.box {
  width: 50%;
}

Einige Eigenschaften akzeptieren eine Dimensionsangabe, die entweder eine von zwei Typen sein könnte, zum Beispiel eine <length> oder ein <percentage>. In diesem Fall wird der zulässige Wert in der Spezifikation als Kombinationseinheit, z. B. <length-percentage>, angegeben. Andere mögliche Kombinationen sind wie folgt:

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

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

Farbe

Der <color>-Wert gibt die Farbe eines Elementmerkmals an (z. B. dessen Hintergrundfarbe) und wird im CSS Color Module definiert.

Bild

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

Position

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

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

Funktionale Notation ist eine Art von Wert, die komplexere Typen darstellen oder spezielle Verarbeitung durch CSS anfordern kann. Die Syntax beginnt mit dem Namen der Funktion, gefolgt von einer linken Klammer (, gefolgt von dem/den Argument(en) der Notation, gefolgt von einer rechten Klammer ). Funktionen können mehrere Argumente haben, die ähnlich wie ein CSS-Eigenschaftswert formatiert sind.

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

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

• CSS Grundlegende Datentypen
• Lernen: Werte und Einheiten
• Trigonometrische Funktionen in CSS