CSS-Werte und -Einheiten

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

Textdatentypen sind entweder <string>, eine in Anführungszeichen gesetzte Zeichenkette, oder ein <ident>, ein "CSS Identifier", welches eine nicht in Anführungszeichen gesetzte Zeichenkette ist. Ein <string> muss mit entweder einfachen oder doppelten Anführungszeichen eingeschlossen werden. CSS Identifier, in den Spezifikationen als <ident> oder <custom-ident> gelistet, müssen ohne Anführungszeichen sein.

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

Wenn sowohl eingeklammerte als auch nicht eingeklammerte 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 ungültig, wenn sie in Anführungszeichen gesetzt sind. Zum Beispiel kann der Wert von grid-area ein <custom-ident> sein, also wenn wir einen Gitterbereich content benennen würden, 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, eingeklammerte werden:

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

Obwohl Sie im Allgemeinen jeden gewünschten Namen erstellen können, 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 sollten Sie ihn nicht als eines der vordefinierten CSS-Schlüsselwörter verwenden. Siehe die <custom-ident> und <string> Referenzseiten für weitere Details.

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.

Bei der Betrachtung der CSS-Eigenschaftswertsyntax in einer CSS-Spezifikation oder auf der MDN-Eigenschaftsseite werden die zulässigen Schlüsselwörter in folgender 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 das Standardverhalten festlegen.

initial

Repräsentiert den Wert, der als Anfangswert der Eigenschaft angegeben ist.

inherit

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

unset

Fungiert als entweder 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 vererbt wird oder auf den Standardwert, der von den Stilen des Benutzeragenten (oder, falls vorhanden, von Benutzerstilen) festgelegt wird.

revert-layer

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

Ein <url>-Typ verwendet eine funktionale Notation, die einen <string> akzeptiert, der eine URL ist. Diese kann eine absolute URL oder eine relative URL sein. Wenn Sie beispielsweise ein Hintergrundbild einfügen möchten, können 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 eingeklammerte oder nicht eingeklammerte sein. Wenn nicht eingeklammerte, wird er als <url-token> geparst, der zusätzliche Anforderungen hat, einschließlich des Entweichens bestimmter Zeichen. Siehe <url> für weitere Informationen.

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

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

Ein <number> repräsentiert eine reelle Zahl, die möglicherweise einen Dezimalpunkt mit einem Bruchteil aufweist, wie zum Beispiel 0.255, 128 oder -1.2. Zahlen können ebenfalls durch ein +- oder --Symbol vorangestellt werden.

Ein <dimension> ist eine <number> mit einer angehängten Einheit, zum Beispiel 45deg, 100ms oder 10px. Der angehängte Einheitenidentifikator ist nicht fallunterscheidend. Zwischen der Zahl und dem Einheitenidentifikator darf niemals ein Leerzeichen oder andere Zeichen sein: d.h. 1 cm ist nicht gültig.

CSS verwendet Dimensionen zur Spezifikation von:

• <length> (Abstandseinheiten)
• <angle>
• <time>
• <frequency>
• <flex>
• <resolution>

Diese werden alle in den folgenden Unterpunkten behandelt.

Abstandseinheiten

Wenn eine Abstandseinheit, auch als Länge bekannt, als Wert für eine Eigenschaft erlaubt ist, wird dies als der <length> Typ beschrieben. Es gibt zwei Arten von Längen in CSS: 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: Schrift-relative Längen und Ansichtsfenster-Prozent-Längen. Diese kommen beide in zwei Typen. Schrift-relative Längeneinheiten sind entweder lokal schrift-relativ oder Wurzel schrift-relativ. Ansichtsfenster-Prozent-Längen sind entweder relativ zur Ansichtsfensterhöhe oder -breite oder, wie im CSS Containment-Modul definiert, relativ zu einem Container.

Lokale schrift-relative Längen

Lokale schrift-relative Längen sind relativ zur "lokalen" Schriftgröße oder Zeilenhöhe und spezifizieren eine Länge im Verhältnis zur berechneten Größe eines Merkmals des Elements selbst, oder relativ zum geerbten Wert des Elements im Fall einer zirkulären Bezugnahme, wie beispielsweise der em-Wert für eine font-size-Eigenschaft oder ein lh-Wert für eine line-height-Eigenschaft. Zum Beispiel ist em relativ zur Schriftgröße am Element und ex relativ zur x-Höhe der Schrift des Elements.

Wurzel schrift-relative Längen

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

Ansichtsfenster-Einheiten

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

Container-Einheiten

Längeneinheiten der Containeranfrage geben eine Länge relativ zu den Abmessungen eines Abfragecontainers an. Zum Beispiel 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 ist, wie z.B. Druck. Ein Beispiel: mm ist ein physischer Millimeter, 1/10 eines Zentimeters.

Bei Einfügung eines Längenwerts, wenn die Länge 0 ist, ist der Einheitenidentifikator nicht erforderlich. Andernfalls ist der Einheitenidentifikator erforderlich, ist nicht fallunterscheidend, und muss unmittelbar nach dem numerischen Teil des Wertes kommen, ohne Leerzeichen dazwischen.

Winkeleinheiten

Winkelwerte werden durch den Typ <angle> repräsentiert und akzeptieren die folgenden Werte:

Zeiteinheiten

Zeitwerte werden durch den Typ <time> repräsentiert. Bei Einfügung eines Zeitwerts ist der Einheitenidentifikator — das s oder ms — erforderlich. Es akzeptiert die folgenden Werte.

Frequenzeinheiten

Frequenzwerte werden durch den Typ <frequency> repräsentiert. 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> repräsentiert. Er akzeptiert den folgenden Wert.

Auflösungseinheiten

Auflösungseinheiten werden durch den Typ <resolution> repräsentiert. 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. Er akzeptiert die folgenden Werte:

Prozentsätze

Ein <percentage> ist ein Typ, der einen Bruchteil eines anderen Wertes repräsentiert.

Prozentwerte sind immer relativ zu einer anderen Menge, zum Beispiel einer Länge. Jede Eigenschaft, die Prozentsätze erlaubt, definiert auch die Menge, auf die sich der Prozentsatz bezieht. Diese Menge kann ein Wert einer anderen Eigenschaft desselben Elements sein, der Wert einer Eigenschaft eines Vorfahrenelements, eine Messung eines umgebenden Blocks oder etwas anderes.

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

.box {
  width: 50%;
}

Einige Eigenschaften akzeptieren eine Dimension, die entweder eine von zwei Typen sein kann, zum Beispiel ein <length> oder ein <percentage>. In diesem Fall wird der zulässige Wert in der Spezifikation als Kombinationsenheit 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 eines Merkmals eines Elements an (z.B. dessen Hintergrundfarbe) und ist im CSS Color Module definiert.

Bild

Der <image> Wert gibt alle verschiedenen Arten von Bildern an, 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 ein Hintergrundbild 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 eine Art von Wert, der komplexere Typen darstellen oder spezielle Verarbeitung durch CSS auslösen 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 annehmen, die ähnlich wie ein CSS-Eigenschaftswert formatiert sind.

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

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

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