CSS:ssä on useita eri yksiköitä pituuden ilmaisemiseksi.
Monet CSS-ominaisuudet ottavat "length"-arvot, kuten:
width, margin, padding, font-size
Pituus on numero, jota seuraa pituusyksikkö, kuten:
10px, 2em
Aseta eri pituusarvot käyttämällä px (pikseliä):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Huomaa: numeron ja yksikön välissä ei voi olla välilyöntiä. Kuitenkin, jos arvo on 0
, yksikkö voidaan jättää pois.
Joissakin CSS-ominaisuuksissa negatiiviset pituudet ovat sallittuja.
Pituusyksiköitä on kahdenlaisia: absoluuttinen ja suhteellinen.
Absoluuttiset pituusyksiköt ovat kiinteitä, ja millä tahansa näistä ilmaistu pituus näkyy täsmälleen saman kokoisena.
Absoluuttisen pituusyksiköitä ei suositella käytettäväksi näytöllä, koska näytön koot vaihtelevat niin paljon. Niitä voidaan kuitenkin käyttää, jos tulostusväline tunnetaan, esim mitä tulee tulostusasetteluun.
cm
Kuvaus: senttimetriä
Kokeile
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1.5cm;}
h2 {font-size: 1cm;}
p {
font-size: 0.5cm;
line-height: 1cm;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
mm
Kuvaus: millimetriä
Kokeile
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 15mm;}
h2 {font-size: 10mm;}
p {
font-size: 5mm;
line-height: 10mm;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
in
Kuvaus: tuumaa (1 tuuma=96 kuvapistettä=2,54 cm)
Kokeile
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 1in;}
h2 {font-size: 0.5in;}
p {
font-size: 0.2in;
line-height: 0.5in;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
px *
Kuvaus: pikseliä (1px=1/96/1 tuumaa)
Kokeile
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50px;}
h2 {font-size: 30px;}
p {
font-size: 15px;
line-height: 20px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
pt
Kuvaus: pisteet (1pt=1/72/1 tuumaa)
Kokeile
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 50pt;}
h2 {font-size: 25pt;}
p {
font-size: 15pt;
line-height: 25pt;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
pc
Kuvaus: picas (1 kpl=12 pt)
Kokeile
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size: 4.5pc;}
h2 {font-size: 3pc;}
p {
font-size: 1.5pc;
line-height: 3pc;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
* Pikselit (px) ovat suhteessa katselulaitteeseen. Matala dpi:n laitteissa 1px on yksi näytön laitepikseli (piste). Tulostimille ja korkealle resoluutiolle näytöt 1px tarkoittaa useita laitepikseleitä.
Suhteelliset pituusyksiköt määrittävät pituuden suhteessa toiseen pituusominaisuuteen. Suhteelliset pituusyksiköt skaalautuvat paremmin eri renderöintivälineiden välillä.
em
Kuvaus: Elementin kirjasinkokoon nähden (2em tarkoittaa 2 kertaa nykyisen fontin kokoa)
Kokeile
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 16px;
line-height: 2em;
}
div {
font-size: 30px;
border: 1px solid black;
}
span {
font-size: 0.5em;
}
</style>
</head>
<body>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 0.5em, which equals to 0.5x30 = 15px</span>.</div>
</body>
</html>
ex
Kuvaus: Suhteessa nykyisen fontin x-korkeuteen (harvoin käytetty)
Kokeile
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 30px;
border: 1px solid black;
}
span {
font-size: 1ex;
}
</style>
</head>
<body>
<div>The font-size of the div element is set to 30px. <span>The span element inside the div element has a font-size of 1ex</span>.</div>
</body>
</html>
ch
Kuvaus: Suhteessa "0" (nolla) leveyteen
Kokeile
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:16px;
}
div {
font-size: 3ch;
border: 1px solid black;
}
</style>
</head>
<body>
<p>The font-size of this document is 16px.</p>
<div>The font-size of this div element is 3ch.</div>
<p>The ch unit sets the font-size relative to the width of the character "0".</p>
</body>
</html>
rem
Kuvaus: Suhteessa juurielementin kirjasinkokoon
Kokeile
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:16px;
}
div {
font-size: 2rem;
border: 1px solid black;
}
</style>
</head>
<body>
<p>The font-size of this document is 16px.</p>
<div>The font-size of this div element is 2rem.</div>
<p>The rem unit sets the font-size relative to the browsers base font-size, and will not inherit from its parents.</p>
</body>
</html>
vw
Kuvaus: Suhteessa 1 prosenttiin näkymän leveydestä*
Kokeile
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 20vw;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the width of the browser window to see how the font-size of h1 changes.</p>
<p>1vw = 1% of viewport width.</p>
</body>
</html>
vh
Kuvaus: Suhteessa 1 %:iin katseluportin korkeudesta*
Kokeile
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 20vh;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the height of the browser window to see how the font-size of h1 changes.</p>
<p>1vh = 1% of viewport height.</p>
</body>
</html>
vmin
Kuvaus: Suhteessa 1 %:iin näkymän* pienemmästä mittasuhteesta
Kokeile
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 15vmin;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmin = 1vw or 1vh, whichever is smaller.</p>
</body>
</html>
vmax
Kuvaus: Suhteessa 1 %:iin näkymän* suuremmasta mittasuhteesta
Kokeile
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 15vmax;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
<p>1vmax = 1vw or 1vh, whichever is larger.</p>
<p>The vmax unit is not supported in Internet Explorer or Safari 6.1 and earlier versions.</p>
</body>
</html>
%
Kuvaus: Suhteessa pääelementtiin
Kokeile
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:16px;
}
div {
font-size: 150%;
border: 1px solid black;
}
</style>
</head>
<body>
<p>The font-size of this document is 16px.</p>
<div>The font-size of this div element is 150%.</div>
<p>The % unit sets the font-size relative to the current font-size.</p>
</body>
</html>
Vinkki: em- ja rem-yksiköt ovat käytännöllisiä luomaan täydellisesti skaalautuva asettelu!
* Viewport=selainikkunan koko. Jos näkymä on 50 cm leveä, 1vw=0,5 cm.
Taulukon numerot ilmaisevat ensimmäisen selainversion, joka tukee täysin pituusyksikkö.
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 |