WEBnSTUDY.com
CSS

CSS merne jedinice

Veliki broj atributa CSS-a, kao vrednost prihvata numeričku vrednost koju nazivamo metrika (length). Obično su to atributi kojima se zadaju neke dimenzije, pozicije i sl. Ove vrednosti moraju imati zadatu i mernu jedinicu.

Jedinice mere mogu biti apsolutne (tačno zadate vrednosti) i relativne (u odnosu na nešto). Takođe, razlikujemo ih po mediju za koji su prevashodno namenjene (ekran ili papir).

Inače metričke vrednosti mogu biti celi ili decimalni brojevi. Za neke atribute su definisane čak i negativne vrednosti.

Apsolutne merne jedinice

px piksel (pixel), označava tačkicu na ekranu, dok je u štampi (i na ekranima veoma visoke rezolucije) 1px = 1/96 inča
pt point najčešće se koristi za zadavanje veličina slova (ovo je jedinica mere koja odgovara veličini slova u Word-u). Inače, 1pt = 1/72 inča.
pc pika (pica), jedinica mere koja, kao i point, potiče iz tipografije. Ređe se koristi, a nama je bitno da znamo da je 1pc = 12pt.
mm milimetar, retko se zadaju za stilove koji se prikazuju na ekranu, ali su korisni kada se dokument priprema za štampanje
cm centimetar - za njih važi isto što i za milimetre. Kao što znamo 1cm = 10mm.
in inč - još jedna jedinica mere namenjena štampi - 1in = 2.54cm. Uobičajena rezolucija ekrana je 72dpi, što bi značilo da je 1 inč na ekranu u stvari 72px

Apsolutne merne jedinice znače da će zadate veličine biti prikazane tačno kako je navedeno, a ne "u odnosu na nešto". Obično i polazimo od ovakvih jedinica za neke osnovne elemente, a kasnije "gradimo" druge veličine relativno u odnosu na njih.

Primeri za apsolutne merne jedinice


  font-size: 18pt;    /* veličina slova od 18 pointa */
  font-size: 1pc;     /* 1 pika je veličina slova od 12pt */

  margin-top: 15mm;   /* gornja margina od 15mm */
  margin: 2.5cm;      /* sve margine postavljene na 2 i po cm */
  
  left: -30px;        /* leva ivica bloka pomerena ulevo */

Relativne merne jedinice

em element - veličina u odnosu na veličinu fonta elementa. Ako je font veličine 12pt, onda će 2em predstavljati veličinu od 24pt.
rem osnovni element (root element) - relativna mera u odnosu na veličinu fonta koja važi za osnovni element, odnosno <body>.
ex x visina, još jedna relativna mera u odnosu na veličinu slova. 1ex je jednak visini malog slova "x" (što je otprilike polovina veličine fonta).
ch 0 širina, i ovo je relativna mera u odnosu na veličinu fonta, 1ch je jednak širini znaka "0" (nula) u trenutnom fontu, što bi bila prosečna širina slova.
vw širina prozora (viewport width) - veličina u odnosu na širinu prozora/ekrana korisnika, 1vw = 1% širine prozora.
vh visina prozora (viewport height) - veličina u odnosu na visinu prozora korisnika, 1vh = 1% visine prozora.
vmin manja dimenzija (viewport minimum) - veličina u odnosu na manju dimenziju ekrana korisnika, 1vmin = 1% širine ili visine ekrana, zavisno šta je manje.
vmax veća dimenzija (viewport maximum) - veličina u odnosu na veću dimenziju ekrana korisnika, 1vmax = 1% širine ili visine ekrana, zavisno šta je veće.

Relativne merne jedinice su izuzetno korisne kod kreiranja responzivnog dizajna (responsive design), odnosno stranica koje se lako prilagođavaju svim rezolucijama i ekranima. Ovo je "vruća tema" još od trenutka kada mobilni telefoni postaju uređaji kojim se može komforno koristiti internet.

Ovde naročito ističemo em i rem jedinice, kao preporučljive za postavljanje dimenzija teksta, ali i drugih elemenata. Na taj način se cela stranica automatski "skalira" prema potrebi.

Jedinice koje su relativne u odnosu na prozor (viewport) mogu da nam budu posebno korisne ako nam treba stroga kontrola dimenzija elemenata, posebno kada kreiramo web aplikacije. Na primer kvadrat veličine 100vmin (100% manje dimenzije prozora) će se raširiti koliko god može u prozoru web čitača, ali tako da uvek bude vidljiv u celini, nebitno da li se ekran rotira u uspravan ili vodoravan položaj.

Procenti

Posebna relativna jedinica mere koja se može zadati u većini slučajeva je procenat:

% procenti - ne spadaju zaista u jedinice mere, ali mogu se koristiti skoro svuda gde se zadaje neka metrika.

Kada se zada npr. veličina nekog bloka u procentima, njegova veličina će biti podešena kao procenat nadređenog bloka (ili stranice).

Primeri za relativne merne jedinice


  font-size: 2em;     /* duplo veća slova od trenutnih */
  font-size: 0.5em;   /* polovina trenutne veličine slova */
  font-size: 1.2em;   /* malo veća slova (20% veća) */
  font-size: 0.9em;   /* malo manja slova (10% manja) */
  
  font-size: 1.5rem;   /* 50% veća slova od veličine slova za body element */
  
  width: 50%;       /* polovina širine nadređenog bloka */
  width: 50vw;      /* polovina širine prozora */
  width: 90vmin;    /* 90% od manje dimenzije prozora */

  width: 5ch;    /* širina 5 prosečnih slova u fontu */
  height: 3ex;   /* visina 3 prosečna mala slova u fontu */

Specijalne merne jedinice

s sekunde - za tranzicije koje traju neko određeno vreme.
ms milisekunde - za preciznije određivanje trajanja - 1s = 1000ms.
deg stepeni (degree) ova jedinica se koristi kada se vrši rotacija. Pun krug ima 360deg.
Pozitivne vrednosti predstavljaju rotaciju u smeru kazaljke na satu, a negativne u suprotnom.

Postoje i specijalne jedinice mere, koje se koriste u posebne svrhe i zadaju se samo za određene atribute:

Primeri za specijalne merne jedinice


  transition-duration: 2s;      /* tranzicija traje dve sekunde */
  transition-duration: 0.5s;    /* tranzicija traje pola sekunde */
  transition-duration: 1500ms;  /* tranzicija traje sekundu i po */

  transform: rotate(90deg);     /* rotacija od 90 stepeni */

Ako ne navedemo mernu jedinicu, web browser će ignorisati vrednost atributa (u smislu "ok, treba da bude pedeset, ali čega?").

Ispravno navođenje metrike

Naveli smo dva neispravna i jedan ispravan primer zadavanja veličine.


  .neispravno { 
  	width: 300;
  }

  .neispravno {
  	width: 300 px;
  }

  .ispravno {
  	width: 300px;
  	margin: 0;
  }

Kao što vidimo, za atribut width kojim se određuje širina HTML elementa, navodi se neka veličina. Znači da numerička vrednost mora imati uz sebe i jedinicu mere, i kao što vidimo, jedinica mora da se navede uz sam broj, bez razmaka.

Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.