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 ein einzelner Integer, ein Schlüsselwort, eine Funktion oder eine Kombination verschiedener Elemente; einige Werte haben Einheiten, während andere keine haben. Jede Eigenschaft akzeptiert auch die CSS-weiten Werte. Das Modul zu CSS-Werten und -Einheiten definiert die Datentypen – Werte und Einheiten –, die CSS-Eigenschaften akzeptieren. Dieses Modul definiert auch die CSS-Wertedefinitionssyntax oder formale Grammatik, die verwendet wird, um die Menge der gültigen Werte für jede CSS-Eigenschaft und Funktion zu definieren.
Referenz
Eigenschaften
Funktionen
abs()acos()asin()atan()atan2()attr()calc()calc-size()clamp()cos()exp()hypot()<ident()>if()inherit()log()max()min()mod()pow()progress()rem()round()sibling-count()sibling-index()sign()sin()sqrt()tan()url()
Das CSS-Werte- und Einheitenmodul führt auch die Funktionen calc-mix(), crossorigin(), first-valid(), integrity(), random(), random-item(), referrerpolicy(), src(), type() und toggle() 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 Einheitenmodul führt auch die Datentypen <frequency> und <frequency-percentage> ein. Derzeit unterstützen keine Browser diese Funktionen.
Einheiten
%(Prozent)capchcmdegdpcmdpidppxdvbdvhdvidvmaxdvmindvwemexgradHzicinkHzlhlvblvhlvilvmaxlvminlvwmmmspcptpxQradrcaprchremrexricrlhssvbsvhsvisvmaxsvminsvwturnvbvhvivmaxvminvwx
Flex-Einheiten (fr) und Container-Einheiten (cqb, cqh, cqi, cqmax, cqmin, cqw) sind in den Modulen CSS-Grid-Layout und CSS-Bedingungsregeln definiert.
Einheitskategorisierungen
- Absolute Längeneinheiten (
cm,in,mm,pc,pt,px,Q) - Winkeleinheiten (
deg,grad,rad,turn) - Standard-Viewporteinheiten (
vb,vh,vi,vmax,vmin,vw) - Dynamische Viewporteinheiten (
dvb,dvh,dvi,dvmax,dvmin,dvw) - Frequenzeinheiten (
Hz,kHz) - Große Viewport-Prozenteinheiten (
lvb,lvh,lvi,lvmax,lvmin,lvw) - Lokal schriftverwandte 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) - Auflösungseinheiten (
dpcm,dpi,dppx,x) - Wurzel schriftverwandte Längeneinheiten (
rcap,rch,rem,rex,ric,rlh) - Kleine Viewport-Prozenteinheiten (
svb,svh,svi,svmax,svmin,svw) - Zeiteinheiten (
ms,s) - Viewporteinheiten (
dvh,dvw,lvh,lvw,svh,svw,vb,vh,vi,vmax,vmin,vw) - Visueller Winkeleinheit (
px)
Schlüsselkonzepte
Leitfäden
- CSS-Datentypen
-
Einführung in die 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-Befehle, die spezielle Datenverarbeitung oder Berechnungen aufrufen, um einen CSS-Wert für eine CSS-Eigenschaft zu erhalten.
- Verwendung von CSS-Mathematikfunktionen
-
Die CSS-Mathematikfunktionen, die es ermöglichen, einen Eigenschaftswert als mathematischen Ausdruck zu schreiben.
- Wertedefinitionssyntax
-
Die formale Grammatik, die verwendet wird, um die Menge der gültigen Werte für CSS-Eigenschaften und -Funktionen zu definieren.
- Verwendung von CSS-typisierter Arithmetik
-
Eine Erklärung des Verhaltens der CSS-typisierten Arithmetik und der durch sie ermöglichten Anwendungsfälle.
- Lernen: Werte und Einheiten
-
Ein Überblick über einige der am häufigsten verwendeten Wertetypen, was sie sind und wie sie funktionieren.
Verwandte Themen
-
CSS-Grid-Layout Modul
<flex>- Flex-Einheiten (
fr)
-
CSS-Bedingungsregeln Modul
- Container-Einheiten (
cqb,cqh,cqi,cqmax,cqmin,cqw)
- Container-Einheiten (
-
CSS-Farben Modul
-
CSS-Bilder Modul
Spezifikationen
| Specification |
|---|
| CSS Values and Units Module Level 3 |
| CSS Values and Units Module Level 4 |
| CSS Values and Units Module Level 5 |
Siehe auch
- CSS-Syntax Modul
- CSS-Selektoren Modul