Uvod u web dizajn - 2. deo - Klasa - Id - Interni i linijski CSS

Uvod

Prethodni članak završili smo uvodom u CSS i pokazali smo kako se preko selektora može uticati na prikaz HTML elemenata, međutim, selektori koje smo koristili, utiču na sve elemente (tj. tagove) određene kategorije - odjednom - bez mogućnosti pristupa pojedinačnom elementu (ili grupi elemenata), kao i bez mogućnosti izuzimanja pojedinačnih elemenata i podgrupa elemenata (na primer "p" selektor utiče na sve pasuse, "h2" selektor na sve podnaslove i sl).

Navedeni pristup je i te kako koristan (sam po sebi), ali, često je potrebno da budemo precizniji pri obraćanju različitim elementima i (takođe), u svemu dobro dođu i dodatne mogućnosti (za koje smo još u prvom članku najavili da postoje).

Ukoliko selektor treba da se obrati određenom podskupu elemenata (ili pojedinačnom elementu) - potrebno je definisati odgovarajuću klasu ili id (sa čime ćemo se upoznati direktno u nastavku), a nakon što se upoznamo sa id selektorima i selektorima za klase, upoznaćemo se i sa mogućnostima za kombinovanje selektora.

Klasa i id - opšte osobine

Upotreba klasa i id-ova podrazumeva: kreiranje CSS selektora sa određenim nazivom i označavanje elemenata u HTML-u istim nazivom, a svrha takvog pristupa je - obraćanje pojedinačnim elementima ili grupama elemenata preko CSS-a.

Nazivi klasa i id-ova mogu počinjati samo slovima i ne smeju sadržati razmake i specijalne znakove, ali, na svim pozicijama posle prvog znaka, mogu se naći i cifre, kao i crtice i podvučene crte.

Osim pravila koje smo prethodno naveli, ne postoje druga ograničenja, što znači da se klasama i id-ovima mogu davati proizvoljna imena, ali, svakako je preporučljivo da imena id-ova i klasa budu deskriptivna (to jest, preporučljivo je da se po nazivu jasno može prepoznati namena klase ili id-a).

Klasa - obrazac za pristup grupi elemenata

Klasa u CSS-u predstavlja selektor preko koga se (tipično) * definišu zajedničke osobine grupe HTML elemenata.

U CSS kodu, nazivu klase prethodi tačka:

		
.zelena_slova {
	color:     #0044ee;
	font-size: 13pt;
}
		
	

CSS klasa povezuje se sa HTML elementima navođenjem atributa class u odgovarajućem tagu, pri čemu je vrednost atributa class - naziv klase (koji se piše bez tačke):

		
<p class='zelena_slova'>
	Slova ovog pasusa biće obojena zeleno.
</p>
		
	

Ako proširimo i dopunimo prethodni HTML kod:

		
<p class='zelena_slova'>Slova ovog pasusa obojena su zeleno</p>
<p class='zelena_slova'>Slova ovog pasusa obojena su zeleno</p>
<p class='zelena_slova'>Slova ovog pasusa obojena su zeleno</p>
<p>Slova ovog pasusa obojena su zeleno</p>
<p>Slova ovog pasusa obojena su zeleno</p>
		
	

.... u browseru ćemo dobiti sledeći ispis:

(Napomena: slova poslednja dva pasusa nisu obojena zeleno!)

Id - obrazac za pristup specifičnom elementu

U CSS-u, id selektor sadrži atribute preko kojih se definiše stil pojedinačnog objekta.

Umesto tačke, nazivu id selektora prethodi znak "#" ("taraba", odnosno, "hešteg").

		
#crveni_pasus {
	color:     #ee0044;
	font-size: 11pt;
}
		
	

Povezivanje sa HTML tagovima obavlja se na gotovo isti način kao i u (prethodnom) slučaju povezivanja CSS klasa sa HTML tagovima (ali, naravno, atribut koji se ovoga puta koristi, je: id).

		
<p id='crveni_pasus'>
	Slova ovog pasusa biće obojena crveno.
</p>
		
	

Primer koji smo koristili u prethodnom odeljku, ponešto ćemo izmeniti:

		
<p class='zelena_slova'>Slova ovog pasusa obojena su zeleno</p>
<p class='zelena_slova'>Slova ovog pasusa obojena su zeleno</p>
<p class='zelena_slova'>Slova ovog pasusa obojena su zeleno</p>
<p id='crvena_slova'>Slova ovog pasusa obojena su crveno</p>
<p>Ja se i dalje pravim da sam obojen zeleno</p>
		
	

.... a rezultat možemo videti na donjoj slici:

Dodatna pojašnjenja

Spomenuli smo već da je moguće (ne samo moguće, već najčešće, više nego preporučljivo), podesiti da se više HTML datoteka istog sajta poziva na jednu CSS datoteku, i takav pristup je posebno od značaja kada su u pitanju tipski elementi koji se pojavljuju (odnosno ponavljaju), na svakoj od stranica - pri čemu se koristi isti id (na primer, na sajtu na kome se trenutno nalazite, logotip stranice uvek ima id "logo_nav_slika").

Navedeni pristup nudi sledeće pogodnosti:

• u kontekstu jedne stranice, element je jedinstven (i po svom id-u prepoznatljiv u odnosu na ostale elemente)
• u kontekstu celog sajta, budući da se isti element ponavlja na više stranica, ne mora se pisati onoliko CSS selektora koliko ima stranica, već samo jedan selektor (koji je dostupan svim stranicama)

Ako neki od elemenata koji se ponavlja na svim stranicama, treba izdvojiti od ostalih (na primer, ako početna stranica treba da ima veći h1 naslov u odnosu na ostale stranice), potrebno je definisati zaseban selektor (jer inače će pri otvaranju početne stranice biti aktiviran univerzalni h1 selektor).

Do sada smo videli da je preko CSS-a moguće obratiti se:

• HTML tagovima
• grupi elemenata (preko klase)
• specifičnom elementu (preko id-a)

.... ali, to nije sve, budući da se selektori mogu i kombinovati ....

Kombinovanje selektora

CSS omogućava da se u određenim situacijama selektori dodatno uopšte (i uproste), što, ionako fleksibilan sistem CSS selektora koji smo već videli, čini još fleksibilnijim.

Grupisanje selektora

Ukoliko primetimo da grupa postojećih selektora ima jedno ili više zajedničkih svojstava (ili još bolje, ukoliko unapred zaključimo da će biti tako, dok još nismo utrošili vreme na pisanje selektora), moguće je definisati poseban (zajednički) selektor koji sadrži zajedničke atribute:

		
#navigaciona_traka, .linkovi_stranica  {
	color:       #404040;
	font-size:   13pt;
	font-weight: bold;
}
		
	

.... a zasebni atributi se potom mogu navesti preko zasebnih selektora:

		
#navigaciona_traka {
	font-family: 'Times New Roman', serif;
}

.linkovi_stranica  {
	font-family: 'Arial', sans-serif;
}
		
	

.... čime se svakako povećava preglednost CSS kodova.

Vezivanje selektora

Za razliku od grupisanja selektora (što praktično podrazumeva da se nekoliko selektora samo "stavlja u isti koš"), postoji i način kombinovanja koji podrazumeva da je aktiviranje selektora uslovljeno međusobnim odnosima HTML elemenata, klasa i id-ova.

U praktičnom smislu, mogu se definisati selektori koji utiču (na primer): na opšte elemente (p, a, img .... ), samo ako im je pripisana određena klasa, zatim, na elemente sa pripisanom klasom - samo ako element ima i određeni id, na elemente koji (u HTML hijerarhiji) zauzimaju poziciju unutar drugih elemenata (a svakako ima i raznih drugih kombinacija).

Za primer možemo uzeti sledeći HTML kod ....

		
<p id='prvi_pasus' class='plava_slova'>
	Ovo je prvi pasus.
</p>

<a class='plava_slova' href='stranica2.html'>Link: Stranica 2</a>
<a class='plava_slova' href='stranica3.html'>Link: Stranica 3</a>
<a class='plava_slova' href='stranica4.html'>Link: Stranica 4</a>

<p class='plava_slova'>
	Ovaj pasus nije prvi, ali jeste plav.
</p>

<p>
	Ovaj pasus nije ni prvi, ni plav.
</p>

<p>
	Ovaj pasus nije ni prvi, ni plav.
</p>
		
	

.... koji se povezuje sa sledećim CSS selektorima:

		
.plava_slova {
	color:       0044bb;
	font-weight: normal;
}

p.plava_slova {
	font-weight: bold;
}

a.plava_slova {
	font-size: 8pt;
}

#prvi_pasus.plava_slova {
	font-size: 20pt;
}

/*
	Nije posebno naglašeno, ali,
	pretpostavka je da veličina fonta
	za "neselektovane" elemente
	iznosi 12pt.
*/
		
	

.... pri čemu se dobija sledeći rezultat:

Kao što vidimo:

• svi elementi kojima je pripisana klasa "plava_slova" (prvih pet elemenata), obojeni su plavo
• oba pasusa sa klasom "plava_slova", imaju podebljan tekst (p.plava_slova)
• tekst u prvom pasusu je veći od ostatka teksta (#prvi_pasus.plava_slova)
• tekst linkova je ispisan manjim slovima u odnosu na ostatak teksta (a.plava_slova)

Selektori za unutrašnje elemente

Ukoliko je potrebno preko CSS-a pristupiti elementu koji se nalazi unutar drugog elementa, zadatak se može rešiti na sledeći način (za primer ćemo uzeti sliku unutar paragrafa):

		
p img {
	width:  150px;
	height: auto;
}
		
	

Praktično, u nazivu selektora opisuje se hijerarhija elemenata, a prikazani selektor utiče na img elemente, ali - samo one koji se nalaze unutar paragrafa.

(Ostali img tagovi se zanemaruju i, takođe, selektor nema nikakvog direktnog uticaja na paragrafe.)

Ukoliko se prethodni selektor prepravi dodavanjem znaka >:

		
p > img {
	width:  150px;
	height: auto;
}
		
	

.... rezultat je selektor koji (i dalje) utiče na "slike unutar paragrafa", ali - isključivo one slike koje su (u smislu hijerarhije), direktni potomci paragrafa.

Da pojasnimo u čemu je razlika.

Ako na sledeći HTML kod primenimo prvi selektor (p img) ....

		
<p>
	<img src='slika_1.jpg'/>
</p>

<p>
	<a href='#'><img src='slika_2.jpg'/></a>
</p>

<img src='slika_3.jpg'/>
		
	

.... navedeni selektor će uticati na prve dve slike, dok će drugi selektor (p > img), imati uticaj samo na prvu sliku, budući da je samo prva slika smeštena direktno unutar p tagova (dok je direktni hijerarhijski "predak" druge slike, tag a).

Interni i linijski (inline) CSS

Zapisivanje CSS koda u zasebne datoteke (i pozivanje takvih datoteka u HTML-u), predstavlja svojevrstan standard (sa kojim smo se već upoznali u uvodnom članku), međutim, CSS se po potrebi može zapisati i unutar same HTML datoteke, preko tagova <style>, ili, direktno preko atributa style (za određeni HTML element).

Interni CSS

Interni CSS, je CSS koji se zapisuje unutar HTML dokumenta; tačnije - unutar tagova <style> (koji se tipično, ali ne i obavezno, pišu unutar <head> tagova).

		
<head>
	<!-- ostali tagovi (title, meta ....) -->
	<style>
		#selektor1 {
			font-family:     Arial, sans-serif;
			font-weight:     bold;
			color:           #303030;
			text-decoration: none;
		}
	</style>
</head>
		
	

Sve ostalo što smo do sada naveli za eksterni CSS (osim, naravno, toga da je zapisan u zasebnoj datoteci :)), važi i za interni CSS.

Zapisivanje CSS koda unutar HTML datoteke, lako može (pre svega) učiniti samu HTML datoteku prilično 'zakrčenom' i nepreglednom (u prevodu: veoma nepreglednom), a u slučaju da sajt koristi više stranica na kojima se delovi CSS koda ponavljaju, javlja se još veći problem - u situacijama kada određeni deo CSS koda treba izmeniti (ako kod nije na jednom mestu, pri kopiranju - ili još gore, ako se izmene obavljaju ručno - lako može doći do grešaka ili nedoslednosti).

Sa druge strane, za sajtove koji se sastoje iz samo jedne HTML datoteke (sa većom količinom tekstualnog sadržaja, i ne mnogo CSS-a), zapis CSS-a unutar HTML datoteke, predstavlja korisnu i krajnje prihvatljivu opciju.

Linijski (inline) CSS

Linijski CSS (eng. "inline CSS"), zapisuje se preko atributa style, direktno unutar elementa koji je potrebno stilizovati, pri čemu takav kod nije (naravno) univerzalan, već se odnosi isključivo na element kome je pripisan:

		
<p style='font-weight: bold; color: #0040b0;'>
	Linijski CSS
</p>
		
	

Inline CSS - pretpostavljamo da je očigledno - izrazito je neprikladan način za zapisivanje iole većih količina CSS koda (i, u praksi, sve osim vrlo sporadičnih zahvata preko linijskog CSS-a, najčešće samo umanjuje preglednost).

Dalji koraci ....

Iako nismo prikazali sve opcije za pristup elementima preko selektora, prikazali smo one opcije koje se najčešće koriste, a ostalima ćemo posvetiti više pažnje u narednim člancima.

U sledećem nastavku: Web dizajn - 3. deo, detaljno ćemo analizirati način funkcionisanja modela CSS box.