CSS yksiköt
- Edellinen sivu CSS verkkosivustojen asettelu
- Seuraava sivu CSS erityisyys
CSS yksiköt
CSS:ssä on useita erilaisia pituusyksiköitä.
Monet CSS-ominaisuudet hyväksyvät "pituus"-arvon, kuten width,margin,padding,font-size jne.
Pituus on luku, joka seuraa pituusyksikköä, kuten 10px,2em jne.
Esimerkki
Aseta eri pituusarvot px (pikseli):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Luku ja yksikkö eivät saa olla välillä välilyöntiä. Mutta jos arvo on 0, yksikköä voidaan jättää pois.
Jotkut CSS-ominaisuudet sallivat negatiivisten pituuksien käytön.
Pituusyksiköillä on kaksi tyyppiä:Absoluuttiset yksikötjaSuhteelliset yksiköt.
Absoluuttinen pituus
Absoluuttiset pituusyksiköt ovat vakaita, ja minkä tahansa absoluuttisen pituuden edustama pituus näytetään täsmälleen tätä kokoa.
Ei suositella käytettäväksi näytöllä absoluuttisia pituusyksiköitä, koska näyttöjen koossa on suuria vaihteluja. Mutta jos tiedetään tulostusmedia, niitä voidaan käyttää, esimerkiksi tulostusasettelussa (print layout).
| Yksikkö | Kuvaus | TIY |
|---|---|---|
| cm | Senttimetri | Kokeile itse! |
| mm | Millimetri | Kokeile itse! |
| in | Tuumaa (1in = 96px = 2,54cm) | Kokeile itse! |
| px * | Pikseli (1px = 1/96 1in) | Kokeile itse! |
| pt | Piste (1pt = 1/72 1in) | Kokeile itse! |
| pc | Pika (1pc = 12 pt) | Kokeile itse! |
* Pikseli (px) on suhteessa tarkkailuasemaan. Alhaisen dpi:n laitteissa 1px on näytön yksi laitepikseli (piste). Tulostimissa ja korkearesoluutioisissa näytöissä 1px edustaa useita laitepikseleitä.
Suhteellinen pituus
Suhteelliset pituusyksiköt määrittelevät pituuden toista pituusominaisuutta suhteessa. Suhteelliset pituusyksiköt skaalautuvat paremmin eri renderöintimedioiden välillä.
| Yksikkö | Kuvaus | TIY |
|---|---|---|
| em | Suhteessa elementin kirjasinkokoon (font-size) (2em tarkoittaa nykyisen kirjasinkoon kaksinkertaista) | Kokeile itse! |
| ex | Suhteessa nykyisen kirjasimen x-height (harvoin käytetään) | Kokeile itse! |
| ch | Suhteessa "0" (nolla) leveys | Kokeile itse! |
| rem | Suhteessa juurielementin kirjasinkokoon (font-size) | Kokeile itse! |
| vw | Suhteessa näyttöikkunan* leveyteen 1% | Kokeile itse! |
| vh | Suhteessa näyttöikkunan* korkeuteen 1% | Kokeile itse! |
| vmin | Suhteessa näyttöikkunan* pieniin mittoihin 1% | Kokeile itse! |
| vmax | Suhteessa näkymän* suurempaan mittaan 1% | Kokeile itse! |
| % | Suhteessa isäelementtiin | Kokeile itse! |
Vinkki:Em ja rem-yksiköt voidaan käyttää täydellisten laajennettavien asettelujen luomiseen!
* Näkymä (Viewport) = selaimen ikkunan koko. Jos näkymä on 50 senttimetrin leveä, niin 1vw = 0.5 senttimetriä.
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee täyttä pituusyksikköä.
| Pituusyksiköt | |||||
|---|---|---|---|---|---|
| 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 |
- Edellinen sivu CSS verkkosivustojen asettelu
- Seuraava sivu CSS erityisyys
