CSS- eenhede
CSS-eenhede
CSS het verskeie verskillende eenhede om 'n lengte uit te druk.
Baie CSS-eienskappe neem "lengte" waardes, soos width, margin, padding,
font-size, ens.
Lengte is 'n getal gevolg deur 'n lengte-eenheid, soos 10px,
2em, ens.
Voorbeeld
Stel verskillende lengtewaardes deur px (pixels) te gebruik:
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Let wel: 'n Witspasie kan nie tussen die nommer en die eenheid verskyn nie. As die waarde egter is
0, kan die eenheid weggelaat word.
Vir sommige CSS-eienskappe word negatiewe lengtes toegelaat.
Daar is twee tipes lengte-eenhede: absoluut en relatief .
Absolute lengtes
Die absolute lengte-eenhede is vas en 'n lengte uitgedruk in enige van hierdie sal as presies daardie grootte verskyn.
Absolute lengte-eenhede word nie aanbeveel vir gebruik op die skerm nie, want skermgroottes verskil so baie. Hulle kan egter gebruik word as die uitsetmedium bekend is, soos vir drukuitleg.
| Unit | Description |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
* Pixels (px) is relatief tot die kyktoestel. Vir lae-dpi-toestelle is 1px een toestelpixel (kol) van die skerm. Vir drukkers en hoë resolusie skerms impliseer 1px veelvuldige toestelpiksels.
Relatiewe lengtes
Relatiewe lengte-eenhede spesifiseer 'n lengte relatief tot 'n ander lengte-eienskap. Relatiewe lengte-eenhede skaal beter tussen verskillende leweringsmediums.
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to width of the "0" (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport's* smaller dimension | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Relative to the parent element |
Wenk: Die em- en rem-eenhede is prakties om perfek skaalbare uitleg te skep!
* Viewport = die grootte van die blaaiervenster. As die uitsigpoort 50cm breed is, 1vw = 0.5cm.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die lengte-eenheid ten volle ondersteun.
| Length Unit | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |