CSS3 - Jedinice (Units)


Razumijevanje CSS jedinica (Units)

Jedinice u kojima se mjeri dužina mogu biti apsolutne kao što su: pixels, points i tako dalje ili relativne kao procenti (%) i em jedinice. Navođenje CSS jedinica je obavezno za vrijednosti koje nisu nula, jer ne postoji zadana jedinica. Nedostatak ili ignorisanje jedinice tretiralo bi se kao greška. Međutim, ako je vrijednost 0, jedinica se može izostaviti (uostalom, 0px je isto mjerenje kao nula inča).



Jedinice relativne dužine (Relative Length Units)

Jedinice relativne dužine navode dužinu u odnosu na drugo svojstvo dužine (length). Relativne jedinice su:

Jedinica (Unit) Opis
em Trenutna veličina fonta (font-size)
ex Visina-x (x-height) trenutnog fonta

Jedinice em i ex zavise od veličini fonta koja se primjenjuje na element.



Korištenje em jedinice

Mjerenje 1em jednako je izračunatoj vrijednosti svojstva font-size elementa na kojem se koristi. Može se koristiti za vertikalno ili horizontalno mjerenje. Na primjer, ako je font-size elementa postavljena na 16px, a line-height postavljena na 2.5em, tada je izračunata vrijednost line-height u pikselu 2.5 x 16px = 40px.

p {
    font-size: 16px;
    line-height: 2.5em;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Primjer CSS jedinica (units)</title>
  <style>
    P {
        font-size:16px;
        line-height:2.5em;
    }
  </style>
</head>
<body>
  <p>
    Visina reda ovoga paragrafa 2,5 je puta veća od trenutne veličine fonta.
    Visina reda ovoga paragrafa 2,5 je puta veća od trenutne veličine fonta.
    Visina reda ovoga paragrafa 2,5 je puta veća od trenutne veličine fonta.
    Visina reda ovoga paragrafa 2,5 je puta veća od trenutne veličine fonta.
  </p>
</body>
</html> 

Izuzetak se javlja kada je em naveden u vrijednosti samog svojstva font-size, u tom slučaju se odnosi na veličinu fonta nadređenog elementa. Dakle, kada specifikujemo font-size u em, 1em je jednak naslijeđenoj veličini fonta. Veličina fonta: 1.2em; čini tekst 1,2 puta većim od teksta nadređenog elementa.

body {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
}
p {
    font-size: 1.6em;
}
p:firt-letter {
    font-size: 3em;
    font-weight: bold;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Primjer CSS jedinica (units)</title>
  <style>
    body {
        font-size:62.5%;
        font-family:Arial, Helvetica, sans-serif;
    }
    p {
        font-size:1.6em;
    }
    p:first-letter {
        font-size:3em;
        font-weight:bold;
    }
  </style>
</head>
<body>
  <p>IT TUTORIJALI.</p>
</body>
</html> 

Pogedajmo detaljnije o čemu se radi u ovom kodu. Zadana veličina fontova u svim modernim pretraživačima je 16px. Naš prvi korak je smanjiti ovu veličinu za čitav dokument postavljanjem veličine fonta na 62,5%, što resetuje veličinu fonta na 10px (62,5% od 16px). Ovo je za zaokruživanje zadane veličine fonta za jednostavno pretvaranje px u em.



Korištenje ex jedinice

Jedinica ex jednaka je x-height trenutnog fonta. Svojstvo x-height je često jednako visini malog slova 'x', kao što je prikazano u nastavku. Međutim, ex je definisan čak i za fontove koji ne sadrže 'x'.






Jedinice apsolutne dužine

Jedinice apsolutne dužine su fiksne jedna u odnosu na drugu. One su u velikoj mjeri zavisne o izlaznom medijumu, pa su uglavnom korisne kada je izlazno okruženje poznato. Apsolutne jedinice sastoje se od fizičkih jedinica (in, cm, mm, pt, pc) i px jedinice.

Jedinica (Unit) Opis
in inča - 1in jednako je 2,54 cm.
cm centimetara.
mm milimetara.
pt (points) tačke - U CSS-u jedna je točka definirana kao 1/72 inča (0,353 mm).
pc picas - 1kom je jednako 12pt.
px jedinice piksela - 1px je jednako 0,75pt.

Apsolutne fizičke jedinice poput in, cm, mm itd. treba koristiti za medije za štampu i slične uređaje visoke rezolucije. Dok se za prikaz na ekranu, kao što su radna površina i uređaji niže rezolucije, preporučuje upotreba px ili em jedinica.

h1 { margin: 0.5in; }       /* inča  */
h2 { line-height: 3cm; }    /* centimetar */
h3 { word-spacing: 4mm; }   /* milimetar */
h4 { font-size: 12pt; }     /* points */
h5 { font-size: 1pc; }      /* picas */
h6 { font-size: 12px; }     /* piksel */
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Primjer CSS jedinica (units)</title>
  <style>    
    h1 { margin: 0.5in; }       /* inča */
    h2 { line-height: 3cm; }    /* centimeter */
    h3 { word-spacing: 4mm; }   /* millimetar */
    h4 { font-size: 12pt; }     /* points */
    h5 { font-size: 1pc; }      /* picas */
    h6 { font-size: 12px; }     /* piksel */
  </style>
</head>
<body>
    <h1>Heading nivo 1</h1>
    <h2>Heading nivo 2</h2>
    <h3>Heading nivo 3</h3>
    <h4>Heading nivo 4</h4>
    <h5>Heading nivo 5</h5>
    <h6>Heading nivo 6</h6>
</body>
</html>