Uvod u web dizajn - 3. deo - CSS Box i pseudoklase

Uvod

U praktičnom smislu, može se reći da je suština modela CSS box sadržana u sledećem zadatku: kako od običnog linka ....

.... napraviti dugme:

Elementi deluju različito (gornji element deluje kao običan tekstualni link a donji kao pravo dugme), međutim, u smislu HTML strukture, oba elementa su definisana na identičan način (kao linkovi, preko <a> tagova).

Podešavanjem CSS svojstava, običan tekstualni element lako može poprimiti spoljni oblik osenčenog polja tabele, dugmeta ili nekog drugog jednostavnog grafičkog elementa ....

Šta je CSS box

U web dizajnu, termin "CSS box" označava (teoretski i praktični) model, koji - uz upotrebu određenih atributa (i odgovarajućih vrednosti), omogućava da od (skoro) svakog HTML elementa nastane grafički objekat sa definisanim dimenzijama, obojenom pozadinom, ispunom, bordurom i zaobljenim ćoškovima, tako da svaki od navedenih detalja (po želji i u skladu sa potrebama), može - ali i ne mora - biti prisutan.

Pored prethodno navedenih svojstava, box model podrazumeva i margine, koje zapravo ne pripadaju unutrašnjosti objekta (niti se vide), već primiču ili odmiču objekat od drugih objekata (a prisutno je i nekoliko dodatnih ukrasa manjeg praktičnog značaja kojima nećemo posvećivati pažnju, već ćemo pustiti čitaoce da ih sami otkriju).

Pogledajmo delove box modela redom ....

Sadržaj

U središnjem delu box modela, nalazi se sadržaj, koji može biti tekstualnog ili grafičkog tipa (videti sliku #1).

Dimenzije centralnog dela mogu se zadati preko atributa width i height, ali, moramo obratiti pažnju: ukoliko je element koji treba stilizovati neki od inline elemenata (kao što je slučaj sa <a> tagovima), dimenzije neće biti prihvaćene (dok će ostali parametri: boje, oblik i veličina slova i sl - biti prihvaćeni).

Takozvani DOM model (u najpraktičnijem smislu: stablo koje nastaje preko podataka iz HTML i CSS datoteka, i predstavlja strukturu web stranice), ne dozvoljava zadavanje dimenzija inline elementima, već samo blok elementima.

Pošto je naša namera da od tekstualnog linka napravimo 'dugme', tekstualni link se prvo mora proglasiti za blok element (a definisaćemo i druge relevantne atribute).

		
.dugme {
	display:          block;
	width:            150px;
	height:           50px;
	text-align:       center;
	text-decoration:  none;
	background-color: #0044bb;
	color:            #ffffff;
	font-weight:      bold;
}
		
	

Kao što vidimo, element više ne liči na običan tekstualni link, ali - ne izgleda baš ni kao dugme (zapravo mu samo fali vertikalno centriranje i, po želji, zaobljavanje ćoškova).

Međutim, neposredno vertikalno centriranje (u situaciji kada je visina zadata direktno), nije podržano, i stoga ćemo isključiti zadavanje visine ....

.... i koristićemo drugi pristup: umesto upisivanja visine, definisaćemo ispunu sa unutrašnje strane.

Padding (ispuna)

Padding (tj. 'ispuna'), predstavlja unutrašnji prostor elementa, između sadržaja i ivice (tj. okvira ili 'bordure').

Ispuna o kojoj govorimo pripada elementu, ali, sadržaj se ne nalazi u ispuni (već ispuna uokviruje sadržaj).

Podešavanja se mogu zapisati na dva načina (uz određene varijacije, na koje ćemo se dodatno osvrnuti u nastavku).

Prvi način je "školski" i podrazumeva navođenje visine ispune sa gornje i donje strane, kao i širine ispune, sa desne strane i leve - preko zasebnih atributa:

		
.dugme {
	display:          block;
	text-align:       center;
	text-decoration:  none;
	background-color: #0044bb;
	color:            #ffffff;
	font-weight:      bold;

	padding-top:      4px;
	padding-right:    12px;
	padding-bottom:   4px;
	padding-left:     12px;
}
		
	

Drugi način (mnogo praktičniji), podrazumeva da se svi parametri navedu u jednoj kodnoj liniji (pri čemu se redom navode: gornji, desni, donji i levi padding, u smeru kretanja kazaljke na satu).

		
.dugme {
	padding: 4px 12px 4px 12px;
}
		
	

U situaciji kada je visina ispune sa gornje i donje strane identična, kao i širina ispune, sa leve i desne strane (a takve situacije su vrlo tipične), zapis sa gornje slike može se dodatno uprostiti:

		
.dugme {
	padding: 4px 12px;
}
		
	

Prva vrednost predstavlja visinu ispune (gore i dole), a druga, širinu (levo i desno).

U svakom slučaju, link je sada znatno dopadljiviji:

.... i već skoro u potpunosti ima odlike pravog dugmeta.

Box-sizing

U prethodnom odeljku ideja je bila: napraviti dugme sa ispunom određene širine i visine (bez zadavanje dimenzija elementa) - i time praktično centrirati tekst na dugmetu (što je pristup koji se koristi često).

Međutim, ukoliko je potrebno da element ima precizno zadate dimenzije - a da se pri tome koristi i padding - stvari se "komplikuju".

Zarad preglednosti, u primerima ćemo se usmeriti samo na širinu ....

Ukoliko definišemo širinu i padding:

		
.element {
	width:   120px;
	padding: 5px 15px;
	// u praktičnom smislu,
	// širina je 150px
	// (tj. nije 120px)
}
		
	

.... ukupna širina elementa biće:

width + padding-left + padding-right = 150px.

Jedno od rešenja (u konkretnom primeru), može biti zadavanje širine od 90px:

		
.element {
	width:   90px;
	padding: 5px 15px;
	// u praktičnom smislu,
	// širina je 120px
}
		
	

.... u kom slučaju se tražena širina (120px), praktično dobija preko sledećeg obrasca:

upisana_širina = tražena_širina - (padding-left + padding-right).

Drugo rešenje podrazumeva aktiviranje atributa box-sizing:

		
.element {
	box-sizing: border-box;
	width:      120px;
	padding:    5px 15px;
}
		
	

Ovoga puta, širina će biti (ukupno) 120px, a leva i desna margina 15px.

Dimenzije su sada u redu (i zadaju se na intuitivan način), ali, pošto ste se sve vreme verovatno pitali (sasvim opravdano), zašto smo za primer koristili širinu (a ne visinu), red je da 'razrešimo misteriju'?!

Razlog za izbor koji smo napravili je to što se preko parametra box-sizing - i dalje - ne može rešiti problem vertikalnog centriranja sa kojim smo se na početku sreli (već se samo može rešiti problem nedvosmislenog zadavanja dimenzija).

Border (ivica)

Ukoliko je oko elementa potrebno iscrtati ivicu (tj. okvir ili 'borduru'), osobine ivice kao što su: tip linije, debljina, boja i sl, navode se preko atributa (mn.) sa prefiksom border.

		
.dugme {
	border-style:     solid;   // tip linije:
	                           // solid  = puna linija
	                           // dashed = isprekidana linija
	                           // double = 'duplirana' puna linija
	                           // .... a ima i drugih opcija

	border-thickness: 2px;     // debljina bordure

	border-color:     #ee7700; // boja bordure
}
		
	

Baš kao što je bio slučaj sa padding-om, CSS i ovoga puta dozvoljava uprošćavanje zapisa, što znači da se sva tri parametra mogu definisati u jednom redu (s tim da je, za razliku od padding-a, u ovom slučaju redosled parametara proizvoljan), a preko parametra border-radius mogu se zaobliti ćoškovi.

		
.dugme {
	border:        solid 2px #ee7700;
	border-radius: 12px;
}
		
	

Borduru ćemo u nastavku ipak isključiti (naravno, u vašim samostalnim isprobavanjima, možete je i ostaviti).

Margine (margin)

Pošto smo definisali sve unutrašnje odlike, ostaje samo da definišemo horizontalno i vertikalno odstojanje elementa u odnosu na okolne elemente.

Ako pogledamo dva linka koji su (preko HTML-a) naizgled definisani jedan ispod drugog, * videćemo da su "slepljeni", to jest, videćemo da između dva navedena elemenata nema vertikalnog odstojanja.

Margine, baš kao i ispuna, mogu se definisati na dva načina: na "komplikovaniji" način ....

		
.dugme {
	margin-top:    0;
	margin-right:  4px;
	margin-bottom: 16px;
	margin-left:   0;
}
		
	

.... uz zadavanje svake margine zasebno, ili, na način koji je (reklo bi se) mnogo praktičniji:

		
.dugme {
	margin: 0 4px 16px 0;
}
		
	

.... uz zapisivanje parametara u jednoj liniji.

Ukoliko sve margine imaju istu vrednost, zapis se može dodatno 'skratiti':

		
.dugme {
	margin: 16px;
}
		
	

Što se tiče dugmića ....

.... oni više nisu "slepljeni".

Dodatna pojašnjenja vezana za margine i padding

Pretpostavićemo na ovom mestu da čitaoci do sada nisu imali problema sa razumevanjem pojmova koje smo izneli u vezi sa box modelom, ali, pošto iskustvo ukazuje na to da razlikovanje margina i padding-a ipak ume da 'namuči' web dizajnere na početku (bar pomalo :)), prodiskutovaćemo dodatno o dva navedena pojma.

Šta (recimo) treba koristiti da dugmiće, koji se nalaze sa unutrašnje strane određenog elementa, odmaknemo od ivica elementa?

U CSS-u se najčešće zadaje padding za noseći element (što je u većini situacija praktičnije u odnosu na zadavanje margina unutrašnjim elementima).

		
.plavi_okvir{
	padding: 20px;
}
		
	

U svakom slučaju, bitno je da ne zadamo margine spoljnjem/nosećem elementu (u školskim sveskama, margine odmiču sadržaj, od ivica - prema unutra, ali, u box modelu se za isti zadatak koristi atribut padding).

Takođe, kada su u pitanju različiti načini zadavanja margina ili paddinga, deluje (pri prvom susretu) da postoji "previše opcija", međutim, svaka od opcija "ima smisla".

Na primer, ako su za određeni element definisane sve margine odjednom, preko klase:

		
.klasa_1 {
	margin: 0 12px 8px 0;
}
		
	

.... i potom se elementu pripiše i id selektor * sa sledećim svojstvima:

		
#id_1 {
	margin-left: 20px;
}
		
	

.... id selektor će prepraviti samo levu marginu, dok bi u suprotnom bilo potrebno ponovo navoditi sve četiri vrednosti (čak i onda "kada to ne želimo" :)).

Pseudoklase :hover i :active - završna podešavanja

Bez previše udubljivanja u ovaj pomalo čudni termin, najjednostavnije se može reći da "pseudoklasa" u CSS-u označava selektor kome su dodate rezervisane reči kao što su "hover" ili "active" - u cilju definisanja posebnih stanja elementa u toku interakcije korisnika sa datim elementom.

Da pojasnimo (preko primera): selektor za dugme koji smo pisali do sada, uredno definiše sva svojstva koja smo navodili, međutim, ni na koji način ne dozvoljava ("još uvek"), da se svojstva menjaju shodno interakciji korisnika sa dugmetom, odnosno (drugim rečima), dugme 'za sada' izgleda isto u svim sledećim slučajevima:

• kursor je 'izvan' dugmeta
• kursor je nad dugmetom (ali korisnik nije kliknuo)
• korisnik je kliknuo na dugme

Pseudoklase :hover i :active koriste se za definisanje selektora koji opisuju stanje elementa (u ovom slučaju, dugmeta):

• kada je kursor nad elementom, ali - bez klika (hover - eng. "lebdenje")
• kada je kursor nad elementom - i pri tom je levi taster pritisnut (active).

Da sve bude 'još bolje', pri definisanju pseudoklasa, potrebno je samo navesti parametre koji se razlikuju od osnovnog stanja elementa (u slučaju dugmeta koje definišemo, to će biti samo različite boje).

Redosled navođenja selektora pri definisanju pseudoklasa je veoma bitan!

Prvo se navodi osnovni selektor, zatim, pseudoklasa hover i, na kraju, pseudoklasa active.

		
.dugme:hover {
	background: #1054cb;
	color:      #ffffff;
}

.dugme:active {
	background: #aaaaaa;
	color:      #ffffff;
}
		
	

Dugme je sada 'kompletirano' i spremno je za upotrebu.

Sledeći koraci ....

Kao što vidimo, nije bilo teško - uz malo truda i uz praćenje jednostavnih uputstava - prepraviti običan link tako da 'postane dugme'.

U sledećem nastavku: Web dizajn - 4. deo, upoznaćemo se sa tehnikama koje omogućavaju podelu stranice (što ćemo nadalje koristiti i u ostalim člancima).