CSS-Werte und Einheiten
Jede CSS-Deklaration besteht aus einem Paar aus 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 aus verschiedenen Elementen; einige Werte haben Einheiten, während andere keine haben. Jede Eigenschaft akzeptiert auch die CSS-weiten Werte. Das CSS-Werte- und Einheitenmodul definiert die Datentypen — Werte und Einheiten —, die CSS-Eigenschaften akzeptieren. Dieses Modul definiert außerdem die CSS-Wertedefinitionssyntax oder die 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()>inherit()log()max()min()mod()pow()rem()round()sign()sin()sqrt()tan()<url()>
Zusätzliche Funktionen, einschließlich calc-mix(), crossorigin(), first-valid(), if(), integrity(), progress(), random(), random-item(), referrerpolicy(), sibling-count(), sibling-index(), src(), type(), und toggle(), sind in den Spezifikationen definiert, aber noch nicht in Browsern implementiert.
Datentypen
<angle-percentage><angle><animation-timeline><attr-name><attr-type><attr-unit><calc-keyword>(e,pi,infinity, NaN)<calc-size-basis><calc-sum><custom-ident><dashed-ident><dimension><easing-function><first-valid()><frequency><frequency-percentage><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>
Einheiten
%(percentage)capchcmdegdpcmdpidppxdvbdvhdvidvmaxdvmindvwemexgradHzicinkHzleftlhlvblvhlvilvmaxlvminlvwmmmspcpiptpxQradrcaprchremrexricrlhssizesvbsvhsvisvmaxsvminsvwturnupvbvhvivmaxvminvwx
Flex-Einheiten (fr) und Container-Einheiten (cqb, cqh, cqi, cqmax, cqmin, cqw) sind im CSS-Grid-Layout und den CSS-Bedingungsregeln Modulen definiert.
Einheitsklassifikationen
- Absolute Längeinheiten (
cm,in,mm,pc,pt,px,Q) - Winkelmaßeinheiten (
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-Prozent-Einheiten (
lvb,lvh,lvi,lvmax,lvmin,lvw) - Lokal schriftenverwandte Längeneinheiten (
cap,ch,em,ex,ic,lh) - Physische 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-schriftenverwandte Längeneinheiten (
rcap,rch,rem,rex,ric,rlh) - Kleine Viewport-Prozent-Einheit (
svb,svh,svi,svmax,svmin,svw) - Zeiteinheiten (
ms,s) - Viewport-Einheiten (
dvh,dvw,lvh,lvw,svh,svw,vb,vh,vi,vmax,vmin,vw) - Visueller Winkelmaß (
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ätzen und Dimensionen sowie relativen und absoluten Dimensionen, Winkeln 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 aufrufen, um einen CSS-Wert für eine CSS-Eigenschaft zurückzugeben.
- Verwendung von CSS-Mathe-Funktionen
-
Die CSS-Mathe-Funktionen, die es ermöglichen, einen Eigenschaftswert als mathematischen Ausdruck zu schreiben.
- Wert-Definitionssyntax
-
Die formale Grammatik, die verwendet wird, um die Menge der gültigen Werte für CSS-Eigenschaften und -Funktionen zu definieren.
- Lernen: Werte und Einheiten
-
Ein Einblick in einige der am häufigsten verwendeten Werttypen, was sie sind und wie sie funktionieren.
Verwandt
-
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