Kako napraviti web sajt - 3. deo - CSS Box i pseudoklase

Uvod

U praktičnom smislu, nije preterano reći da je suština CSS box modela sadržana u sledećem problemu:

Kako od običnog linka ....

.... napraviti dugme ...

Gornji element deluje kao link, a donji kao dugme, međutim, u smislu svoje HTML strutkture, oba elementa su definisana kao linkovi (preko "a" tagova).

Razlika (i rešenje) je, pogađate - u upotrebi box modela.

Šta je CSS box

CSS box je model koji nam dopušta da od svakog HTML elementa (po želji i u skladu sa potrebom) napravimo "kutiju" (poslednji put upotrebljavamo ovaj ne previše adekvatan prevod, obećavamo!) - grafički objekat sa definisanim dimenzijama, obojenom pozadinom i (po želji) bordurom i zaobljenim ćoškovima.

Box model podrazumeva definisanje parametara za sadržaj, ispunu i borduru, kao i margine, koje, u slučaju box modela, zapravo ne pripadaju unutrašnjosti objekta, već primiču ili odmiču objekat od drugih objekata (postoji i nekoliko dodatnih ukrasa, ali, njima nećemo ovoga puta posvećivati pažnju, već ćemo vas pustiti da ih sami otkrijete).

Pogledajmo delove box modela redom ....

Sadržaj

U središnjem delu box modela, nalazi se sadržaj, koji može biti bilo tekstualnog, bilo grafičkog tipa (slike). Ovom sadržaju možemo zadati dimenzije upotrebom atributa width i height, ali, postoji jedna začkoljica. 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).

HTML i CSS ne dozvoljavaju zadavanje dimenzija inline elementima, već samo blok elemetima, te je stoga neophodno da link prograsimo za blok element.

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

Kao što vidimo, naš link više ne liči na običan link, ali, ne izgleda baš ni kao dugme (zapravo, fali mu samo vertikalno centriranje i, po želji, zaobljavanje ćoškova, međutim, kada je u pitanju vertikalno centriranje u okviru box modela, CSS je zapravo pomalo problematičan), pa ćemo isključiti zadavanje dimenzija.

Ali, hajde da probamo drugi pristup, da umesto zadavanja dimenzija, ispunimo dugme sa unutrašnje strane.

Padding (ispuna)

Padding (ispuna) predstavlja unutrašnji prostor elementa, koji se nalazi između sadržaja i ivice (bordure). Ispuna o kojoj govorimo pripada elementu, ali se sadržaj ne nalazi u njoj (padding uokviruje sadržaj).

Padding možemo definisati na dva načina. Prvi je "školski" i podrazumeva da se, preko zasebnih parametara, 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 ćemo sve parametre navesti u jednom redu, pri čemu se redom navode gornji, desni, donji i levi padding (u smeru kretanja kazaljke na satu).

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

	padding:          4px 12px 4px 12px;
}
									
								

Naše dugme je sada mnogo dopadljivije i već skroz podseća na pravo dugme:

Border (ivica)

Ukoliko je potrebno prikazati ivicu (borduru) oko elementa, koristićemo atribut border.

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

Naravno, i ovoga puta CSS nam dozvoljava da sva tri parametra zapišemo u jednom redu (za razliku od padding-a, ovde je redosled parametara proizvoljan). Takođe, 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)

Sada smo skroz izašli iz unutrašnjeg prostora elementa i ostaje nam samo da definišemo njegov odnos sa okolnim elementima (pri čemu naravno mislimo na horizontalno i vertikalno odstojanje).

Ako pogledamo dva dugmeta koja su u HTML kodu definisana jedno ispod drugog (ali, što se tiče prikaza, da nismo dugme definisali kao blok element, ova dva elementa bi u browser-u bila prikazana jedan pored drugog), videćemo da su "slepljeni", to jest, da između njih nema vertikalnog odstojanja.

Margine možemo definisati na dva načina, na komplikovaniji način ....

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

.... ili na mnogo praktičniji način:

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

Međutim, postoje i još "skraćeniji" načini da zapišemo margine ....

									
.dugme {
	margin: 16px;
}

.dugme {
	margin: 16px 20px;
}
									
								

U prvom slučaju, zadajemo sve četiri margine odjednom, dok u drugom slučaju zadajemo preko prve vrednosti gornju i donju marginu, a preko druge, levu i desnu.

Kao što vidimo, dugmići više nisu "slepljeni".

Dodatna pojašnjenja razlike između margina i padding-a

Pretpostavljamo da niste do sada imali problema sa razumevanjem pojmova koje smo izneli u vezi sa box modelom, ali postoji jedna stvar za koju iz iskustva znamo da zbunjuje početnike, a to je razlika između margina i padding-a. Šta ćete recimo koristiti da dugmiće, koji se nalaze sa unutrašnje strane nekog elementa, odmaknete od ivica tog elementa. U svesci, margine odmiču sadržaj, od ivica, prema unutra.

Međutim - u CSS-u je to zapravo padding (ako pišemo selektor za pomenuti element koji "nosi" dugmiće)!

									
.plavi_okvir{
	padding: 20px;
}
									
								

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

Bez previše udubljivanja u ovaj malo čudni termin, pseudoklase su selektori kojima se dodaju određene rezervisane reči CSS jezika, u cilju definisanja posebnih stanja elementa.

Da pojasnimo: selektor za dugme, koji smo pisali do sada, uredno definiše svojstva koja smo naveli, međutim, ni na koji način nam ne dozvoljava (još uvek), da ta svojstva menjamo shodno našoj interakciji sa dugmetom. Dugme izgleda isto: i kada je kursor daleko od njega - i kada je kursor nad dugmetom (ali nismo kliknuli) - i kada kliknemo na dugme.

Pseudoklase hover i active će nam pomoći da definišemo selektore koji opisuju stanje dugmeta kada je kursor nad njim, ali bez klika (hover - engl. "lebdenje") i kada kliknemo na dugme (active). Da sve bude još bolje, potrebno je samo da navedemo parametre koji se razlikuju od osnovnog stanja dugmeta.

U praksi, to će u našem slučaju biti samo različite boje. Za "hover" ćemo samo izabrati svetliju nijansu osnovne boje koju koristimo za dugme(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, da ne skreće previše pažnje na sebe, jer još uvek nismo kliknuli), dok ćemo za klik (active) izabrati sivu.

Napomena, redosled navođenja selektora kod definisanja pseudoklasa je jako bitan. Prvo se navodi osnovni selektor, pa onda pseudoklasa hover i posle nje, pseudoklasa active.

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

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

Sada je dugme završeno i spremno za upotrebu.

Zaključak

Kao što vidite, nije bilo teško da, uz malo truda i 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 stranice (što ćemo nadalje koristiti i u ostalim nastavcima).