CSS-yksiköt


Sisällysluettelo

    Näytä sisällysluettelo


CSS-yksiköt

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

Esimerkki

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 pituudet

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 pituudet

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.



Selaimen tuki

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