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-weiten Werte. Das Modul für CSS-Werte 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 gültiger 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)cap
ch
cm
deg
dpcm
dpi
dppx
dvb
dvh
dvi
dvmax
dvmin
dvw
em
ex
grad
Hz
ic
in
kHz
left
lh
lvb
lvh
lvi
lvmax
lvmin
lvw
mm
ms
pc
pi
pt
px
Q
rad
rcap
rch
rem
rex
ric
rlh
s
size
svb
svh
svi
svmax
svmin
svw
turn
up
vb
vh
vi
vmax
vmin
vw
x
Flex-Einheiten (fr
) und Container-Einheiten (cqb
,cqh
,cqi
,cqmax
,cqmin
,cqw
) sind in den Modulen für CSS-Flexible-Box-Layout und CSS-Bedingte Regeln definiert.
Einheitskategorien
- Absolute Längeneinheiten (
cm
,in
,mm
,pc
,pt
,px
,Q
) - Winkeleinheiten (
deg
,grad
,rad
,turn
) - Standardeinheiten des Anzeigebereichs (
vb
,vh
,vi
,vmax
,vmin
,vw
) - Dynamische Anzeigebereichseinheiten (
dvb
,dvh
,dvi
,dvmax
,dvmin
,dvw
) - Frequenzeinheiten (
Hz
,kHz
) - Große Einheiten in Prozent des Anzeigebereichs (
lvb
,lvh
,lvi
,lvmax
,lvmin
,lvw
) - Lokale schriftgrößenabhängige 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-schriftgrößenabhängige Längeneinheiten (
rcap
,rch
,rem
,rex
,ric
,rlh
) - Kleine Einheiten in Prozent des Anzeigebereichs (
svb
,svh
,svi
,svmax
,svmin
,svw
) - Zeiteinheiten (
ms
,s
) - Einheiten des Anzeigebereichs (
dvh
,dvw
,lvh
,lvw
,svh
,svw
,vb
,vh
,vi
,vmax
,vmin
,vw
) - Visuelle 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üsselwertwerte und URLs.
- CSS-Wertfunktionen
-
Überblick über die CSS-Aussagen, die spezielle Datenverarbeitung oder Berechnungen veranlassen, um einen CSS-Wert für eine CSS-Eigenschaft zurückzugeben.
- 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 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.
Verwandt
-
CSS-Flexible-Box-Layout Modul
<flex>
- Flex-Einheiten (
fr
)
-
CSS-Bedingte Regeln 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