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 kao običan tekstualni link, 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 grafičkog elementa.

Šta je CSS box

U web dizajnu, termin "CSS box" označava model koji omogućava da se - prostim podešavanjem odgovarajućih atributa - od (skoro) svakog HTML elementa napravi 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 želimo da stilizujemo 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 slično - 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 prvo moramo 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, pa ćemo isključiti zadavanje visine ....

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

Padding (ispuna)

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

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

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

Prvi način je "školski" i podrazumeva da se, preko zasebnih atributa, navede visina ispune sa gornje i donje strane, kao i širina sa desne i leve:

		
.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 (u primerima ćemo se usmeriti samo na širinu) * - a da se pri tome koristi i padding, stvari se "komplikuju" ....

Ukoliko definišemo širinu i padding:

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

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

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

Jedno moguće rešenje je da zadamo širinu od 90px:

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

.... u kom slučaju smo traženu širinu (120px), praktično dobili preko sledećeg obrasca:

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

Drugo rešenje je da aktiviramo atribut box-sizing:

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

.... i 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 preko parametra box-sizing - i dalje - ne možemo rešiti problem vertikalnog centriranja sa kojim smo se na početku sreli (već samo možemo rešiti problem nedvosmislenog zadavanja dimenzija).

Border (ivica)

Ukoliko je oko elementa potrebno prikazati ivicu (to jest 'borduru'), možemo koristiti atribute 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, pa sva tri parametra možemo definisati u jednom redu (za razliku od padding-a, u ovom slučaju je redosled parametara proizvoljan), a preko parametra border-radius možemo zaobliti ćoškove.

		
.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, da između dva navedena elemenata nema vertikalnog odstojanja.

Margine, baš kao i ispunu, možemo definisati na dva načina: na "komplikovaniji" način ....

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

.... zadajući svaku marginu 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 znamo da razlikovanje margina i padding-a ume (bar malo), da namuči web dizajnere na početku, 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 ćemo najverovatnije zadati padding za noseći element (što je u većini situacija praktičnije nego da zadajemo margine za unutrašnje elemente).

		
.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/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 bismo u suprotnom ponovo morali da navodimo 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 (bar ne još uvek), da se svojstva menjaju shodno interakciji korisnika sa dugmetom.

Dugme izgleda isto:

• i kada je kursor daleko od dugmeta
• i kada je kursor nad dugmetom (ali nismo kliknuli)
• i kada kliknemo na dugme.

Pseudoklase :hover i :active koriste se za definisanje selektora koji opisuju stanje dugmeta:

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

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

Za "hover" ćemo samo izabrati svetliju nijansu osnovne boje koju koristimo za dugme, a razlika između dve nijanse treba da informiše posmatrača da "se nešto desilo" (to jest, da je dugme spremno na reakciju), ali i da ne skreće previše pažnje na sebe (jer još uvek nismo kliknuli), dok ćemo za klik (pseudoklasa active), izabrati sivu boju.

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 završeno i spremno za upotrebu.

Sledeći koraci ....

Kao što vidite, nije bilo teško da - uz malo truda i uz praćenje jednostavnih uputstava - od običnog linka napravimo 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).