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 definisana su 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 je potrebno 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 (koji se definiše preko HTML-a i CSS-a), ne dozvoljava zadavanje dimenzija inline elementima, već samo blok elementima.

Pošto je naša želja i 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. 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 mnogo 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 mogućih rešenja, je - zadati širinu 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 prikazati ivicu (to jest 'borduru'), mogu se koristiti atributi sa prefiksom border.

		
.dugme {
	border-style:     solid;
	border-thickness: 2px;
	border-color:     #ee7700;
}
		
	

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 (za razliku od padding-a, u ovom slučaju je 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 (vi je, u vašim isprobavanjima, naravno možete 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' (naravno, sličan zapis je moguće koristiti i za padding):

		
.dugme {
	margin: 16px;
}
		
	

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

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

Dodatna pojašnjenja vezana za margine i padding

Pretpostavljamo da niste do sada 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 ume da 'namuči' web dizajnere na početku (bar malo :)), 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 nego da se za unutrašnje elemente zadaju margine).

		
.plavi_okvir{
	padding: 20px;
}
		
	

Međutim, bitno je da ne zadamo margine spoljnjem/nosećem elementu (u svesci, margine odmiču sadržaj, od ivica - prema unutra, dok se u box modelu za isti zadatak koristi atribut padding).

Takođe, kada su u pitanju različiti načini zadavanja margina ili paddinga, reklo bi se da postoji "previše opcija", međutim - svaka od opcija "ima smisla".

Možda deluje da pored načina za zadavanje margina i/ili paddinga, uzastopnim navođenjem četiri vrednosti (i uprošćenim varijantama takvog pristupa), atributi kao što su margin-left, padding-bottom i sl. gube (pravi) smisao, ali, povremeno - veoma dobro dođu.

Ako (na primer), za određeni element definišemo sve margine odjednom, preko klase:

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

.... i potom elementu pripišemo 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, možemo reći da u CSS-u "pseudoklasa" označava selektor kome su dodate rezervisane reči kao što su "hover" ili "active", u cilju definisanja posebnih stanja elementa.

Da pojasnimo: 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.

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 levi taster je 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 - veoma je 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 vidite, nije bilo teško - uz malo truda i uz praćenje jednostavnih uputstava - od običnog linka napraviti dopadljivo 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).