CSS-Längen und -Größen können mit unterschiedlichen Units/Einheiten
festgelegt werden.
Dies betrifft Eigenschaften, wie z.B.: width, margin, paddin, font-size,
border-width, ect.
Die Units/Einheiten können als feste oder relative Größen angegeben
werden:
| Einheiten | Beschreibung | Werte | Beispiel | Werte | Beispiel |
|---|---|---|---|---|---|
| 1cm | Zentimeter | 3cm |
I am 3cm wide
|
1,5cm |
I am 1cm
|
| mm | Millimeter | 10mm |
I am 10mm wide
|
4mm |
I am 4mm
|
| Q | Viertelmillimeter | 50Q |
I am 50Q wide
|
8Q |
I am 8Q
|
| in | inches (1in= 96px= 2.54cm) | 2in |
I am 2in wide
|
3in |
I am 3in
|
| px | pixels (1px= 1/96 von 1in) | 200px |
I am 200px wide
|
40px |
I am 40px
|
| pt | points (1pt= 1/72 von 1in) | 200pt |
I am 200pt wide
|
10pt |
I am 10pt
|
| pc | picas (1pc= 12pt) | 20pc |
I am 20pc wide
|
5pc |
I am 5pc
|
| Einheiten | Beschreibung | Werte | Beispiel | Werte | Beispiel |
|---|---|---|---|---|---|
| 1 em | relativ zur font-size des parent-elements (2em= 2* fontsize) | 5em |
I am 5em wide
|
1,7em |
I am 1,7em
|
| rem | relativ zur fontsize des root-elements | 10rem |
I am 10rem wide
|
0,5rem |
I am 0,5rem
|
| % | prozentual zum parent-element | 20% |
I am 20% wide
|
45% |
I am 45%
|
| vw | relativ zu 1% der width des viewport (Browserfenster) | 15vw |
I am 15vw wide
|
2,4vw |
I am 2,4vw
|
| vh | relativ zu 1% der width des viewport | 20vh |
I am 20vh wide
|
3vh |
I am 3vh
|
| vmin | relativ zu 1% des kleineren/größeren viewports | 15vmin |
I am 15vmin wide
|
1,5vmin |
I am 1,5vmin
|
| vmax | relativ zu 1% des kleineren/größeren viewports | 12vmax |
I am 12vmax wide
|
0,6vmax |
I am 0,6vmax
|
| ex | relativ zu best. fontmaßen (x-höje/-breite von "0") | 10ex |
I am 10ex wide
|
6ex |
I am 6ex
|
| ch | relativ zu best. fontmaßen (x-höje/-breite von "0") | 5ch |
I am 5ch wide
|
4ch |
I am 4ch
|
| Einheiten | Wert | Beispiel |
|---|---|---|
| hex (Hexadezimalwerte) | #ff6600 |
#ff6600
|
| RGB | rgb(102,0,120) |
#660078
|
| RGBA | rgba(255,255,0,0.7) |
yellow
|
| HSL | hsl(100, 100%, 70%) |
#99ff66
|
| HSLA | hsla(120,60%,70%, 0.4) |
aqua
|
| verdefiniertet Browser-Farbwert | aliceblue | aliceblue |