U proslim tutorijalima sam Vam pisala o HTML-u i osnovnim elementima i strukturi. Ovaj tutorijal tiče se osnova stilizovanja tih html stranica, tj posebnoj vrsti jezika nazvanog Cascading Style Sheet ili CSS. Koristi se za definisanje izgleda stranica – položaj i veličina elemenata, boja elemenata itd. U ovom tutorijalu ću ukratko objasniti osnovne stvari za korišćenje CSS-a i samo cu navesti neke od elemenata koji se najčešće koriste.
Šta je to CSS
CSS ili Cascading Style Sheets se može posmatrati kao jedna vrsta skript jezika kojim se određuju stilovi HTML elemenata, tj njihova forma i izgled. CSS je uveden kada se shvatilo da se običnim HTML-om ne mogu postići određeni zahtevi koji je web zahtevao. Tačnije sam HTML nije podrazumevao formatiranje dokumenta koji se prikazivao na WEB-u već samo njegov jednostavni prikaz. Kada su uvedeni novi elementi u HTML 4.0, <font> tag na primer, web developeri su se susretali sa velikim problemima. Naime pri pravljenju web stranica i njihovom uređivanju developeri su dobijali suviše velike stranice, kod je bio težak i obiman, pa su se stranice teško učitavale i teško radile. Vać tada se postavljaju mogućnosti za uvodjenje novog načina koji će omogućiti ispunjenje odredđenih zahteva.
U tom trenutku se pojavljuje i preuzima veliku ulogu CSS jezik (razvoj i prihvatanje CSS jezika i standarda je trajao nekih 10tak godina ali o tome nećemo pričati). Zahvaljujući CSS stilovima, web developerima je omogućeno da u posebnom dokumentu, *.css, definišu stilove za HTML elemente i tako dokument povežu sa svojim HTML stranicama. Kod je automtski postao lakši i brži za čitanje a u isto vreme web developerima i dizajnerima su otvorene velike mogućnosti.
CSS sintaksa
Osnovna sintaksa bilo kog stila sastoji se iz dve osnovne stvari: selektora i definicije stila. Definicija stila predstavljaju sva ona svojstva u CSS-u koja definišu izgled nekog html elementa – kakva mu je pozadina, koje je velicine, širina, visina, margine… Definicija stila dolazi u okviru vitičastih zagrada, nakon selektora. Definicija stila se sastoji od svojstava koji se pišu u obliki ključ:vrednost. Na primer definicija stila boje slova se sastoji od ključa color i definicije boje u hex zapisu:
color:#336699;
Selektor predstavlja element na koji se ova definicija stila odnosi. Imamo nekoliko vrste selektora koje ću vam ovde kroz primere objasniti:
1. Ime taga – elementa
Samo ime html elementa (<p>,<div>…) može biti selektor za stil. Obratite pažnju da kad na ovakav način navodite stil on će se odnositi na sve elemente na toj stranici sa tim nazivom taga. Recimo na primer da želimo da svi paragrafi budu crvene pozadine i da je veličina slova 13px. To možete napisati na sledeći način:
p
{
background-color:red;
font-size:13px;
}
Ovako imate da će svi paragrafi na toj stranici imati ovakav izgled.
2. Navođenjem ID elementa
Možete svakom html elementu dati jedinstveno ime ili ID, korišćenjem atributa id, a zatim to iskoristiti za dodeljivanje stila. Način na koji se to radi je da se za selektor koristi vrednost id atributa sa znakom taraba (#) ispred nje. Ovakvo navođenje stila odnosiće se samo na elemenat koji ima taj id. Primer:
#mojID
{
width:300px;
font-size:13px;
}
3. Navođenjem klase elementa
Svakom elementu možete dodeliti određenu klasu korišćenjem atributa class. Ovaj atribut se i najčešće odnosi na CSS stil. Dodeljivanjem klase nekom html elementu želite da kažete kako će on dobiti određeni css stil. Korišćenje klase kao selektora u CSS stilu postiže se navođenjem naziva klase sa znakom tačka (.) ispred. Ovaj način definisanja stila je ponavljajući, što označava da više elemenata na stranici može imati istu klasu. Shodno tome, ponavljaće se i upotreba stila navedenog za tu klasu.
Na primer, recimo da imamo klasu mojaKlasa u kojoj definišemo da je veličina slova 12px i donja ivica (border-bottom) veličine 1px da je ravna linija i da je crne boje:
.mojaKlasa
{
font-size:13px;
border-bottom:1px solid #000000;
}
Gde CSS ide na stranici
CSS stilovi se mogu “uključiti” u html stranicu na tri načina:
1. U okviru samog html elementa
Html elementi imaju atribut style. U okviru ovog atributa mozete slobodno ukucati stil za taj elementa. Napominjam da ako ste slučajno ovom elementu dali stil i na neki drugi način (preko ID, klase ili naziva taga), način stilizovanja preko style atributa će nadjačati i pregaziti ona svojstva koja su navedena u njemu. Primer ovakve stilizacije
<div style="background:#445566; margin:10px;">Html elementa sa stilom</div>
2. U okviru html stranice u style tagu
Stil za elemente na stranici se može navesti na samoj stranici. Stilove definišete na načine na koje sam vam opisala, ali ih sve smeštate u okviru tagova style. Primer:
<style>
p
{font-size:12px;}
.komentar
{font-size:11px;}
#naslov
{margin:10px; font-size:18px;}
</style>
Do sada se kod pisanja style tagova definisao i tip, tj type atribut u obliku type=”text/css”. U novije vreme podrazumeva se da se odnosi na css pa se ovaj atribut ne navodi.
3. U okviru novog css dokument koji se zatim poziva na html stranicu
Ovo je najčešći način koji ćete koristiti u radu. Naime stilovi se navode u novi *.css dokumenat, a zatim se na stranici taj dokument poziva na sledeći način: recimo da imate dokument stil.css. U okviru head taga navodite sledeće:
<link href="stil.css" rel="stylesheet">
Napomene u pisanju nekoh stilova
U ovom tekstu neću pisati o pojedinačnim svojstvima u CSS-u, to možete pogledati na nekim od sajtova gde su objašnjena sva svojsta . Ovde želim da Vam napomenem kako se neka od svojstava pišu. Najčešći primer za to su stilovi koji određuju margine ili stil za ivicu nekog elementa.
Najvervatnije ste već videli nešto ovako napisano:
margin:10px 2px 5px 4px;
Ali opet sa druge strane i nešto ovako
margin-bottom:5px;
Nemojte da Vas ovo zbuni. I jedan i drugi način su tačni i koristićete oba u pisanju. Prvi način je sveobuhvatan, tj na ovaj način u jednoj liniji dajete definiciju za marginu sa svih strana, tako što za svaku stranu dajete neku vrednost. Strane idu redom, u smeru kazaljki na satu: top, right, bottom, left. Ukoliko želite da sve strane imaju istu vrednost onda možete samo staviti jednu vrednost:
margin:10px; /* sve strane imaće marginu od 10px */
ili ukoliko želite da leva i desna strana imaju jednake vrednosti, a vrh i dno drugu:
margin:10px 5px; /* top i bottom 10px, right i left 4px */
Naravno sve to možete napisati i pojedinačno na sledeći način:
margin-top:10px; margin-bottom:5px; margin-left:2px; margin-right:3px;
U prethodnom slučaju morate paziti na redosled pisanja vrednosti, on mora biti top, right, bottom, left. Ako koristiti drugi način nije bitno koje ćete svojstvo prvo navesti.
Veliki broj CSS svojstava ima ovaj način pisanja. Namerno sam navela margine jer želim da vam otkrijem i jednu caku u pozicioniranju elemenata. Ovo se najčešće tiče cele stranice.
Ukoliko želite da vaš sajt uvek bude centriran na stranici, tj da bude podjednako udaljen od leve i desne strane pretraživača, nezavisno od veličine monitora, to možete postići marginama i to na sledeći način: dajete vrednost za top i bottom margine, a za left i right stavljata vrednost auto, čime govorite da ove dve strane podjednako podele prostor koji je ostao:
margin:10px auto;
Ako želite da budu različite vrednosti za top i bottom onda jednostavno napišite:
margin:10px auto 5px auto ;
I to je to.
Sve ovo što sam Vam napisala ovde se podjednako koristi u CSS-u, na Vama je da odlučite koji način Vam najviše odgovara.
SuperCica haja ja!
Ovde sam ukratko objasnila šta je to CSS, kako da pišete svoje stilove i gde možete sve postaviti stil za neki element ili elemente. Nisam pisala o pojedinim svostvima CSS-a, zato što ih ima mnogo i bilo bi previše da ih bude u jednom tekstu, zato vam preporučujem da pogledate neke od referenci za CSS:
http://www.w3schools.com/cssref/default.asp
http://www.javascriptkit.com/dhtmltutors/cssreference.shtml
Toliko za sada. Dalje kada budem pisala o CSS-u biće o određenim stvarima koje možete uraditi pomoću CSS-a, neke cake i trikove.
Pišite ako imate pitanja, ostavite komentar, predlog, kritiku … Do sledećeg puta SuperCica haj aj zdravo!
