nav_dugme codeBlog codeBlog
  • početna Početna stranica
  • Sačuvani članci Sačuvani članci
  • Članci
  • Kontakt

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

Facebook LinkedIn Twitter Viber WhatsApp E-mail
zoom_plus zoom_minus bookmark

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.

Id koji je pripisan elementu u HTML kodu, ima bitnu ulogu i u JavaScript-u, ali, to je tema za jedan od budućih članaka (pošto završimo uvodni serijal o HTML-u i CSS-u).

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).

Nazivi kao što su plavi_okvir i zeleno_dugme, svakako su mnogo bolji i primereniji od naziva id_1 i klasa_2 (a nazivi nalik na navigaciona-traka__linkovi i kontakt-stranica__slika-srednja - još bolji).

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.

Ali, klase se ponekad (nije redak slučaj), vezuju i za samo jedan element (više o tome na kraju odeljka).

U CSS kodu, nazivu klase prethodi tačka:

		
.zelena_slova {
	color:     #0044ee;
	font-size: 13pt;
}
		
	
Slika 1. Klase se u CSS-u prepoznaju po znaku "." na početku.

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>
		
	
Slika 2. - Klasu koju smo prethodno definisali u CSS-u, sada možemo pozivati u HTML datoteci.

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>
		
	
Slika 3. - Primer korišćenja klase.

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

Slova ovog pasusa obojena su zeleno

Slova ovog pasusa obojena su zeleno

Slova ovog pasusa obojena su zeleno

Slova ovog pasusa obojena su zeleno

Slova ovog pasusa obojena su zeleno

Slika 4. - Prikaz HTML bloka koji je definisan na prethodnoj slici.

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

Kod za paragrafe smo pisali u jednoj liniji (isključivo) zarad preglednosti. Za sve ostale situacije preporučujemo (i praktikujemo), da otvarajući i zatvarajući tagovi blok elemenata budu u zasebnim redovima.

Takođe, kao što smo prethodno naveli, klase se najčešće pripisuju grupama elemenata, međutim, sasvim često se pripisuju i pojedinačnim elementima.

Na primer: različite HTML datoteke mogu se pozivati na istu CSS datoteku, pa tako selektor koji smo prvobitno definisali za grupu elemenata u jednoj HTML datoteci, možda sadrži (baš) sva svojstva koja želimo da pripišemo pojedinačnom elementu u drugoj (novoj) HTML datoteci (na primer, u prvoj datoteci je bilo deset "plavih dugmića", a u drugoj postoji samo jedno - i ne moramo pisati id selektor, već možemo iskoristiti već definisani selektor za klasu.

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;
}
		
	
Slika 5. - Id selektor se u CSS-u prepoznaje po znaku "#".

Id (slikovito) možemo shvatiti kao svojevrstan "JMBG" objekta (koji, kao što smo prethodno naveli, poseban značaj ima onda kada je objektu potrebno pristupiti preko jezika JavaScript).

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>
		
	
Slika 6. - Id sa prethodne slike poziva se u HTML dokumentu po istom principu po kome smo ranije pozivali klase.

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>
		
	
Slika 7. - Primer korišćenja id-a za samo jedan element.

.... a rezultat vidimo na donjoj slici:

Slova ovog pasusa obojena su zeleno

Slova ovog pasusa obojena su zeleno

Slova ovog pasusa obojena su zeleno

Slova ovog pasusa obojena su crveno

Ja se i dalje pravim da sam obojen zeleno

Slika 8. - Prikaz HTML bloka koji je definisan na prethodnoj 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;
}
		
	
Slika 9. - Grupisanje selektora (čime izbegavamo da isti kod pišemo više puta).

.... 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;
}
		
	
Slika 10. - Pojedinačni selektori preko kojih se selektorima koji su u prethodnom koraku bili definisani grupno, dodaju i zasebna svojstva.

.... č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>
		
	
Slika 11. - Primer HTML koda koji ćemo koristiti u ovom odeljku.

.... 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
*/
		
	
Slika 12. - CSS kod koji se povezuje sa HTML kodom sa prethodne slike.

.... pri čemu kao rezultat dobijamo:

Ovo je prvi pasus

Link: Stranica 2 Link: Stranica 3 Link: Stranica 4

Ovaj pasus nije prvi, ali jeste plav.

Ovaj pasus nije ni prvi, ni plav.

Ovaj pasus nije ni prvi, ni plav.

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;
}
		
	
Slika 13. - Selektor koji utiče na sve img elemente unutar paragrafa.

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.)

Obratite pažnju: ukoliko dodamo samo jedan zarez između "p" i "img", dobijamo sasvim drugačiji selektor (kao u primeru iz odeljka o grupisanju selektora), i takav selektor utiče na "pasuse i slike", a ne, na "slike unutar pasusa".

Ukoliko prethodni selektor prepravimo dodavanjem znaka >:

		
p > img {
	width:  150px;
	height: auto;
}
		
	
Slika 14. - Selektor koji utiče samo na img elemente koji su (u hijerarhijskom smislu), direktni potomci paragrafa.

.... 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'/>
		
	
Slika 15. - Primer HTML strukture preko koje možemo bolje razumeti različite načine vezivanja CSS selektora.

.... 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>
		
	
Slika 16. CSS selektore možemo pisati i unutar HTML dokumenata, ali to najčešće nije najoptimalniji izbor.

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>
		
	
Slika 17. - Linijski CSS dobro dođe, ali - samo za poneki sitniji zahvat.

Napomenimo takođe da linijski CSS kod ima prioritet u odnosu na interni i eksterni CSS.

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.

Autor članka Nikola Vukićević Za web portal www.codeblog.rs
Napomena: Tekstovi, slike, web aplikacije i svi ostali sadržaji na sajtu www.codeblog.rs (osim u slučajevima gde je drugačije navedeno) predstavljaju intelektualnu svojinu autora sajta www.codeblog.rs i zabranjeno je njihovo korišćenje na drugim sajtovima i štampanim medijima, kao i bilo kakvo drugo korišćenje u komercijalne svrhe, bez eksplicitnog pismenog odobrenja autora.
© 2020-2023. Sva prava zadržana.
Facebook LinkedIn Twitter Viber WhatsApp E-mail
početna Početna > Članci > Uvod u web dizajn - 2. deo - Klasa - Id - Interni i linijski CSS

Info & povezani članci Info o članku - dugme

Info

trejler_sat Datum objave: 29.09.2020.

trejler_dokument Jezici: HTML,
CSS

trejler_teg_narandzasti Težina: 3/10

Povezani članci

Povezani članci

Svi članci
Perl – The only language that looks the same before and after RSA encryption.
Keith Bostic
codeBlog codeBlog
Sajt posvećen popularizaciji kulture i veštine programiranja.
Napomena: Tekstovi i slike na sajtu www.codeblog.rs (osim u slučajevima, gde je drugačije navedeno) predstavljaju intelektualnu svojinu autora sajta www.codeblog.rs i zabranjeno je njihovo korišćenje na drugim sajtovima i štampanim medijima, kao i bilo kakvo drugo korišćenje u komercijalne svrhe, bez eksplicitnog odobrenja autora.
© 2020-2023. Sva prava zadržana.
Facebook - logo
Instagram - logo
LinkedIn - logo
Twitter - logo
E-mail
Naslovna
   •
Uslovi korišćenja
   •
Obaveštenja
   •
FAQ
   •
Kontakt