CSS Werte und Einheiten

Jede CSS-Deklaration besteht aus einem Paar von Eigenschaft und Wert. Der Wert kann je nach Eigenschaft verschiedene Formen annehmen, wie z. B. eine einzelne Ganzzahl, ein Schlüsselwort, eine Funktion oder eine Kombination verschiedener Elemente; einige Werte haben Einheiten, andere nicht. Jede Eigenschaft akzeptiert auch die CSS-weit gültigen Werte. Das CSS-Modul für Werte und Einheiten definiert die Datentypen — Werte und Einheiten —, die CSS-Eigenschaften akzeptieren. Dieses Modul definiert auch die CSS-Wertdefinition-Syntax oder formale Grammatik, die verwendet wird, um die Menge gültiger Werte für jede CSS-Eigenschaft und Funktion zu definieren.

Das CSS-Werte und -Einheiten-Modul führt auch die calc-mix(), crossorigin(), first-valid(), integrity(), random(), random-item(), referrerpolicy(), src(), type() und toggle() Funktionen ein. Derzeit unterstützen keine Browser diese Funktionen.

Datentypen

<angle-percentage>
<angle>
<animation-timeline>
<attr-name>
<attr-type>
<calc-keyword> (e, pi, infinity, NaN)
<calc-size-basis>
<calc-sum>
<custom-ident>
<dashed-ident>
<dimension>
<easing-function>
<first-valid()>
<ident>
<integer>
<length-percentage>
<length>
<number>
<percentage>
<position>
<ratio>
<resolution>
<rounding-strategy> (down, up, to-zero)
<string>
<syntax>
<time-percentage>
<time>
<url>
<url-modifier>
<view-timeline-name>

Das CSS-Werte und -Einheiten-Modul führt auch die <frequency> und <frequency-percentage> Datentypen ein. Derzeit unterstützen keine Browser diese Funktionen.

Einheiten

Flex-Einheiten (fr) und Container-Einheiten (cqb, cqh, cqi, cqmax, cqmin, cqw) werden in den Modulen CSS-Grid-Layout und CSS-Bedingungsregeln definiert.

Einheitskategorisierung

Absolute Längeneinheiten (cm, in, mm, pc, pt, px, Q)
Winkeleinheiten (deg, grad, rad, turn)
Standard-Viewport-Einheiten (vb, vh, vi, vmax, vmin, vw)
Dynamische Viewport-Einheiten (dvb, dvh, dvi, dvmax, dvmin, dvw)
Frequenzeinheiten (Hz, kHz)
Große Viewport-Prozentsatzeinheiten (lvb, lvh, lvi, lvmax, lvmin, lvw)
Lokale schriftbild-relative Längeneinheiten (cap, ch, em, ex, ic, lh)
Physikalische Einheiten (cm, in, mm, pc, pt, Q)
Relative Längeneinheiten (cap, ch, em, ex, ic, lh, rem, rlh, vb, vh, vi, vmax, vmin, vw)
Resolutionseinheiten (dpcm, dpi, dppx, x)
Schriftbild-relative Längeneinheiten (rcap, rch, rem, rex, ric, rlh)
Kleine Viewport-Prozentsatzeinheiten (svb, svh, svi, svmax, svmin, svw)
Zeiteinheiten (ms, s)
Viewport-Einheiten (dvh, dvw, lvh, lvw, svh, svw, vb, vh, vi, vmax, vmin, vw)
Visuelle Winkeleinheit (px)

Schlüsselkonzepte

Leitfäden

CSS-Datentypen: Einführung in CSS-Datentypen, die typische Werte definieren, die von CSS-Eigenschaften und -Funktionen akzeptiert werden.
Numerische Datentypen: Überblick über die numerischen Datentypen, einschließlich Ganzzahlen, Zahlen, Prozentsätze und Dimensionen, sowie relative und absolute Dimensionen, Winkel und Zeiteinheiten.
Textuelle Datentypen: Überblick über die textuellen Datentypen, einschließlich vordefinierter Schlüsselwortwerte, globaler CSS-Schlüsselwortwerte und URLs.
CSS-Wertfunktionen: Überblick über die CSS-Anweisungen, die spezielle Datenverarbeitung oder Berechnungen ausführen, um einen CSS-Wert für eine CSS-Eigenschaft zurückzugeben.
Verwendung von CSS-Mathematikfunktionen: Die CSS-Mathematikfunktionen, die es ermöglichen, dass ein Eigenschaftswert als mathematischer Ausdruck geschrieben wird.
Wertedefinitions-Syntax: Die formale Grammatik, die verwendet wird, um die Menge gültiger Werte für CSS-Eigenschaften und -Funktionen zu definieren.
Lernen: Werte und Einheiten: Ein Blick auf einige der am häufigsten verwendeten Wertetypen, was sie sind und wie sie funktionieren.