Klase i ID-jevi (id, class)

Da bi nastavili sa izlaganjem vezanim za selektore, osvrnućemo se na pojmove klasa i ID-jeva.

Klasa i kada ćemo je primeniti?

Klasa označava grupisanje elemenata na koje će se primeniti odredjena CSS pravila. Klase kao selektore koriste i drugi programski jezici kao sto su Java Script (jQuery) pa je njihova važnost i van okvira primene u CSS-u.

Kao ilustraciju potrebe za klasama, zamislite da na web strani imate desetine h1 i p elemenata i želite da svi ti elementi imaju tekst u crvenoj boji. CSS kod kojim ćete to postići izgleda ovako:

p, h1 {color:red;}

Sada zamislite drugi scenario. Želite da samo neki od tih p i h1 elemenata budu u crvenoj boji a da na preostale primenite default pravilo za boju (u HTML-u bi to bila crna boja). Tada prethodno napisani kod ne bi mogao da reši problem. U toj situaciji, elementima na koje želite da primenite ovo pravilo, dodali bi klasu. Dodavanje klase znači da u okviru elemenata na koje želite da primenite pravilo dodate kod class=”ime_klase” Ovde ime_klase može da bude bilo koja reč. Poželjno je smislena radi lakšeg snalaženja (na primer, klasu nazovete boja). Tada bi html kod tih elemenata sadržao i deo koda class=”boja” , tačnije:

<p class=”boja”>neki tekst</p>

<h1 class=”boja”>neki naslov</h1>

Sa druge strane, elementima na koje ne želite da budu primenjena ova pravila ne bi dodelili klasu.

Preostaje još samo da vidimo kako u tom slučaju izgleda CSS kod primenjen na klasu boja:

p.boja, h1.boja {color:red;}

Vidite da nakon imena taga ( u ovom slučaju p i h1) stavljate tačku pa odmah zatim, bez razmaka, ime klase. Tačka govori pretraživaču da ovo pravilo primeni na sve elemente tipa h1 i p koji u svom imenu sadrže klasu boja, tj. kod napisan kao class=”boja”.

NAPOMENA: Obavezno zapamtite da se asocijacija HTML i CSS klase radi na taj način što se u okviru otvarajućeg taga elementa napiše class=”boja” dok u okviru CSS-a to zapišete kao .boja{}

Ako ste pažljivo pratili, možete da se zapitate zašto smo to radili umesto da unutar svakog taga gde želimo da promenimo tekst u crveno stavimo style=”color:red” i izbegnemo definisanje klase boja.

Postoji nekoliko razloga za to. Prvo, za slučaj da se kasnije predomislite po pitanju boje, u svakom elementu bi morali to svojstvo da promenite. Ovako, to radite samo na jednom mestu, u okviru prethodno prikazanog reda:

p.boja, h1.boja {color:red;}

pa ćete reč red zamenićete nekom drugom reči koja definiše neku drugu boju, na primer blue. Tako svi elementi sa klasom boja automatski menjaju boju u plavu. Drugi razlog je što se ovako kod učitava mnogostruko više puta, tj. onoliko puta koliko ima elemenata, a u drugom samo jednom, pri učitavanju CSS-a.

Treći razlog je što klasu elementa koristimo i u druge svrhe a ne samo za potrebe CSS-a.

I konačno, kod je mnogo jednostavniji i čitljiviji.

Ako pogledamo prethodni primer, videćemo da klasa nije čvrsto vezana za tip html taga, tj. primenjena je i na h1 tag kao i na p tag. Postoji opštiji slučaj korišćenja klase kada se ona samostalno navodi, bez navodjenja html taga. Izgled tako napisanog CSS koda je ispod:

.boja {color:red;}

Ovo automatski znači da će pravilo biti primenjeno na sve h1 i p elemente koji imaju pridruženu klasu boja ali i na sve druge kojima kasnije odlučite da dodelite definisanu klasu boja

<span class=”boja”>

Kada smo već kod klasa, treba napomenuti da neki HTML element može sadržati i nekoliko klasa, ne samo jednu. Na primer, klase crvena i plava.

HTML kod bi izgledao ovako:

<p class=”crvena plava”>…Sadržaj…</p>

dok bi CSS koji bi ciljao p elemente koji sadrže obe klase izgledao ovako

p.plava.crvena {color:red; background-color:blue;}

Znači, ako neki element ima više pridruženih klasa, u okviru class=” ” izraza, imena klasa pišemo sa razmakom, dok u css pravilima “nižemo” klase razdvojene tačkom, bez razmaka

p.crvena.plava {…}

Ovim završavamo objašnjavanje klasa a kasnije ćemo ih dosta koristiti.

ID i kada ćemo ga primeniti?

ID je sličan parametar klasama. Pored sintakse gde umesto class pišemo id, razlika u odnosu na klase je i u tome što se id može primeniti samo jednom! unutar web strane. Namerno napominjem unutar web strane, jer unutar web sajta to nije slučaj, tj. svaka strana koja sačinjava web sajt može imati po jedan element kome je pridružen jedinstveni id.

Ima puno situacija u kojima je definisanje ID-ja najelegantnije rešenje za potrebe modifikacije svojstava nekog HTML elementa. Neki od njih su izvan CSS-a. Kao i u slučaju klasa, id elementa se puno koristi kao selector u JavaScript-u, jQuery-ju itd.

Sintaksa dodeljivanja id-ja nekom html elementu izgleda ovako:

<ime_taga id=”jedini”>…Sadržaj…</ime_taga>

CSS sintaksa kojom ga selektujemo je

#jedini {…}

Kao što vidite, razlika je u tome što se u html kodu ID označava službenom rečju id iza koje sledi znak jednakosti i ime dok je u CSS kodu ID označen znakom hash – # . Bitno je ponoviti da id u html kodu jedne web strane može biti pomenut samo na jednom mestu, znači ne sme se desiti da dva ili više elemenata imaju id sa istim imenom. Za te potrebe koristimo klase!

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn