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/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 (sam po sebi), i te kako koristan, ali, često je potrebno da budemo precizniji, pa ukoliko želimo da se selektor obrati određenom podskupu elemenata (ili pojedinačnom elementu), potrebno je da definišemo odgovarajuću klasu ili id.

Klasa i id - opšte osobine

Upotreba klasa i id-ova podrazumeva kreiranje selektora sa određenim nazivom u CSS kodu 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 se na svim pozicijama posle prvog znaka mogu naći i cifre, kao i crtice i podvučene crte.

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

Klasa - obrazac za pristup grupi elemenata

Klasa u CSS-u predstavlja kod sa atributima koji se tipično vezuje za grupu HTML elemenata kojima želimo da pripišemo zajedničke osobine.

U CSS kodu, nazivu klase prethodi tačka:

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

Klasa se sa HTML elementima povezuje 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 predstavlja kod sa atributima koji definišu stil jednog objekta.

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

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

Id se u HTML-u poziva na isti način kao klasa (naravno, atribut koji koristimo je ovoga puta 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 vidimo na donjoj slici:

Dodatna pojašnjenja

Spomenuli smo već da je moguće (i ne samo moguće, već najčešće i 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 našem sajtu, 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 moramo pisati onoliko CSS selektora koliko ima stranica, već samo jedan selektor (koji je dostupan svim stranicama)

Ako je potrebno da se neki od elemenata koji se ponavlja na svim stranicama, izdvoji od ostalih (na primer, ako želimo da početna stranica ima veći h1 naslov u odnosu na ostale stranice), moramo definisati zaseban selektor (jer će se inače pri otvaranju početne stranice aktivirati 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), možemo definisati poseban (zajednički) selektor koji sadrži zajedničke atribute:

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

.... a zasebne atribute možemo potom navesti preko zasebnih selektora:

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

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

.... čime kod svakako postaje pregledniji.

Vezivanje selektora

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

U tom smislu, možemo definisati selektore koji utiču (na primer): na opšte elemente (p, a, img .... ) samo ako im je pripisana određena klasa, na elemente sa pripisanom klasom - samo ako element ima i određen id, na elemente koji se (u HTML hijerarhiji) nalaze unutar drugih elemenata (a ima i drugih kombinacija).

Za primer, uzmimo 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 ćemo povezati sa sledećim CSS kodom:

		
.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;
}

/*
	Ne naglašavamo posebno, ali, računamo
	da je standardna veličina fonta 12pt
*/
		
	

.... pri čemu kao rezultat dobijamo:

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 od ostatka teksta (a.plava_slova)

Selektori za unutrašnje elemente

Ukoliko je potrebno preko CSS-a pristupiti elementu koji se nalazi unutar drugog elementa, možemo to izvesti na sledeći način:

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

Prikazani selektor utiče na img elemente, ali - samo one koji se nalaze unutar pasusa.

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

Ukoliko prethodni selektor prepravimo dodavanjem znaka >:

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

.... dobijamo 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'/>
		
	

.... selektor će uticati na prve dve slike, dok će drugi selektor (p > img), uticati 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).

(Na treću sliku ne utiče nijedan selektor, jer se slika uopšte ne nalazi unutar pasusa.)

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 direktno u HTML datoteci, 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 (inline) CSS zapisuje se preko atributa style, direktno unutar elementa koji je potrebno stilizovati, a sam kod (naravno) nije univerzalan već se odnosi isključivo na element kome je pripisan:

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

Inline zapis je (pretpostavljamo da je očigledno), izrazito 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 koje se najčešće koriste, dok ćemo ostalima posvetiti više pažnje u narednim člancima.

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