Do sada smo se u ovoj seriji lekcija bavili isključivo HTML-om. U prethodnoj lekciji odradili smo neke sekcije našeg web sajta u HTML-u i pre nego što nastavimo sa izradom ostalih sekcija (unikatnih delova svake stranice) osvrnućemo se na stajling onoga što smo do sada odradili. Za stajling HTML elemenata zadužen je jezik koji se skraćeno naziva CSS. U ovoj lekciji napravićemo kratak uvod u CSS a od sledeće lekcije nadalje koristićemo paralelno HTML i CSS.
Šta je CSS?
CSS je engleska skraćenica od "Cascade Style Sheet" i predstavlja jezik za formatiranje HTML elemenata. Kao i HTML, CSS nije programski jezik već skup instrukcija koje idu uz HTML i definišu izgled nekog HTML elementa.
CSS sintaksa
CSS instrukcije se pišu tako što se prvo navede naziv elemenata a zatim se u velikim zagradama pišu CSS atributi sa svojim vrednostima na sledeći način:
HTML element { atribut: vrednost atributa; }
Ovde treba naglasiti da CSS atribut nije isto što i HTML atrubut. Takođe jedna instrukcija može da sadrži više atibuta koji se mogu pisati u istom redu ili u novim redovima. Zbog preglednosti CSS koda dobra praksa je da se instrukcije pišu na sledeći način:
HTML element {
atribut1: vrednost atributa;
atribut2: vrednost atributa;
}
Da bi vam sve bilo jasnije pokazaćemo ovo na jednom primeru. Recimo da imamo jedan <div> element kome želimo da promenimo boju pozadine u crnu i želimo da centriramo tekst u njemu:
div {
background-color: #000000;
text-align: center;
}
Ovakva instrukcija obojiće sve <div> elemente na stranici u crno i sav tekst koji se nalazi u njima biće centriran. Ukoliko ne želimo da menjamo sve div elemente već imamo jedan imenovani element <div id="header"> instrukcija se piše na sledeći način:
div#header {
background-color: #000000;
text-align: center;
}
ili samo
#header {
background-color: #000000;
text-align: center;
}
Razlika je u tome što ako se napiše div#header instrukcija važi samo za div elemente sa datim imenom, a ako se napiše samo #header instrukcija važi za sve elemente sa datim imenom. Pošto smo već rekli da id atribut treba da bude unikatan za jedan element potpuno je svejedno koji ćemo način pisanja koristiti.
Ako imamo klasu elemenata na koje želimo da primenimo CSS instrukciju, na primer <div class="klasa1"> pišemo na sledeći način:
div.klasa1 {
background-color: #000000;
text-align: center;
}
ili
.klasa1 {
background-color: #000000;
text-align: center;
}
Razlika je ista kao i kod id atributa. Ukoliko nemamo klasu ili naziv elemenata a ipak želimo da formatiramo samo određene elemente možemo da ispred elementa koji želimo da formatiramo napišemo i naziv njegovog "parent" elementa. Svaki element se nalazi unutar nekog drugog elementa - parent (ili u prevodu roditelj) elemenat. Na primer želimo da formatiram linkove naše "nav" sekcije, kucaćemo:
#nav a { ... }
Ovakva instrukcija formatiraće samo linkove iz "nav" sekcije, dok će ostali linkovi na stranici ostati nepromenjeni. Dakle <div id="nav"> je parent element linkovima koji se nalaze u njemu.
Jedna CSS instrukcija može da sadrži više HTML elemenata odvojenih zarezom. Na primer:
#header, #footer { ... }
Ovakva instrukcija će imati efekta na <div id="header"> i <div id="footer"> elemente.
HTML element { atribut: vrednost atributa; }
Ovde treba naglasiti da CSS atribut nije isto što i HTML atrubut. Takođe jedna instrukcija može da sadrži više atibuta koji se mogu pisati u istom redu ili u novim redovima. Zbog preglednosti CSS koda dobra praksa je da se instrukcije pišu na sledeći način:
HTML element {
atribut1: vrednost atributa;
atribut2: vrednost atributa;
}
Da bi vam sve bilo jasnije pokazaćemo ovo na jednom primeru. Recimo da imamo jedan <div> element kome želimo da promenimo boju pozadine u crnu i želimo da centriramo tekst u njemu:
div {
background-color: #000000;
text-align: center;
}
Ovakva instrukcija obojiće sve <div> elemente na stranici u crno i sav tekst koji se nalazi u njima biće centriran. Ukoliko ne želimo da menjamo sve div elemente već imamo jedan imenovani element <div id="header"> instrukcija se piše na sledeći način:
div#header {
background-color: #000000;
text-align: center;
}
ili samo
#header {
background-color: #000000;
text-align: center;
}
Razlika je u tome što ako se napiše div#header instrukcija važi samo za div elemente sa datim imenom, a ako se napiše samo #header instrukcija važi za sve elemente sa datim imenom. Pošto smo već rekli da id atribut treba da bude unikatan za jedan element potpuno je svejedno koji ćemo način pisanja koristiti.
Ako imamo klasu elemenata na koje želimo da primenimo CSS instrukciju, na primer <div class="klasa1"> pišemo na sledeći način:
div.klasa1 {
background-color: #000000;
text-align: center;
}
ili
.klasa1 {
background-color: #000000;
text-align: center;
}
Razlika je ista kao i kod id atributa. Ukoliko nemamo klasu ili naziv elemenata a ipak želimo da formatiramo samo određene elemente možemo da ispred elementa koji želimo da formatiramo napišemo i naziv njegovog "parent" elementa. Svaki element se nalazi unutar nekog drugog elementa - parent (ili u prevodu roditelj) elemenat. Na primer želimo da formatiram linkove naše "nav" sekcije, kucaćemo:
#nav a { ... }
Ovakva instrukcija formatiraće samo linkove iz "nav" sekcije, dok će ostali linkovi na stranici ostati nepromenjeni. Dakle <div id="nav"> je parent element linkovima koji se nalaze u njemu.
Jedna CSS instrukcija može da sadrži više HTML elemenata odvojenih zarezom. Na primer:
#header, #footer { ... }
Ovakva instrukcija će imati efekta na <div id="header"> i <div id="footer"> elemente.
HTML i CSS
Pošto ste već naučili neka osnovna pravila pisanja CSS-a verovatno postavljate pitanje "A gde da pišem CSS?". Dobro pitanje. Da bi CSS kod imao uticaj na HTML dokument mora biti adekvatno povezan sa njim. Postoje tri načina povezivanja HTML-a sa CSS-om, od kojih prva dva načina podrazumevaju kucanje CSS-a u samom HTML dokumentu, i treći, najkorišćeniji a mogu slobodno da kažemi i najbolji način, kod kojeg se CSS kuca u odvojenom .css fajlu.
Kod prvog načina CSS se kuca u otvarajućem tagu elementa koji želimo da formatiramo unutar "style" atributa. Uzećemo klasičan primer menjanja pozadine tela dokumenta:
Unutar style atributa kuca se samo deo CSS-a koji se normalno nalazi u velikim zagradam.
Kod drugog načina CSS se kuca u između <style>...</style> tagova u "glavi" HTML dokumenta.
<head>
<style type="text/css">
body { background-color: #000000; }
</style>
</head>
Unutar style taga primetili ste "type" atribut. Ovaj atribut govori pretraživaču da se radi o CSS-u. U većini slučajeva ovaj atribut može i da se izostavi jer CSS još uvek nema adekvatnu alternativu, ali nije na odmet da se napiše.
Treći način (način koji ćemo mi da koristimo, i koji se koristi u 90% slučajeva) jeste pisanje CSS-a u odvojenom .css fajlu.
Recimo ako napravimo fajl style.css (ili ga nazovite kako god želite) u istom folderu u kome se nalazi HTMl fajl koji želimo da formatiramo. CSS fajl mora na neki način da bude povezan sa HTML fajlom da bi imao uticaj na njega. Ta veza se postiže unošenjem sledećeg reda u "glavu" HTML dokumenta.
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Tag <link> služi za povezivanje HTML dokumenta sa spoljnim fajlom. Atribut "rel" definiše tip veze (kakav uticaj spoljni fajl ima na HTML dokument). U ovom slučaju vrednost je "stylesheet" što znači da spoljni fajl sadrži stilove (oblkkovanja, formatiranje) za HTML dokument. Atribut "type" ima istu funkciju kao kod drugog načina, i "href" atribut govori gde se spoljni fajl nalazi (funkcioniše isto kao kod linkova). Postoje i neki drugi opcioni atributi o kojima ćemo kasnije.
Nakon što smo povezali dva fajla sada jednostavno u CSS fajlu pišemo instrukcije jednu ispod druge.
U ovoj lekciji naučili smo osnove pisanja CSS-a i kako se sve CSS može povezati sa HTML-om. Možda nismo uradili ništa konkretno na našem sajtu ali će nam ova lekcija poslužiti kao uvod u ono što ćemo raditi već u narednoj lekciji. Ukoliko ima bilo čega nejasnog možete da ostavite komentar.
Treći način (način koji ćemo mi da koristimo, i koji se koristi u 90% slučajeva) jeste pisanje CSS-a u odvojenom .css fajlu.
Recimo ako napravimo fajl style.css (ili ga nazovite kako god želite) u istom folderu u kome se nalazi HTMl fajl koji želimo da formatiramo. CSS fajl mora na neki način da bude povezan sa HTML fajlom da bi imao uticaj na njega. Ta veza se postiže unošenjem sledećeg reda u "glavu" HTML dokumenta.
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Tag <link> služi za povezivanje HTML dokumenta sa spoljnim fajlom. Atribut "rel" definiše tip veze (kakav uticaj spoljni fajl ima na HTML dokument). U ovom slučaju vrednost je "stylesheet" što znači da spoljni fajl sadrži stilove (oblkkovanja, formatiranje) za HTML dokument. Atribut "type" ima istu funkciju kao kod drugog načina, i "href" atribut govori gde se spoljni fajl nalazi (funkcioniše isto kao kod linkova). Postoje i neki drugi opcioni atributi o kojima ćemo kasnije.
Nakon što smo povezali dva fajla sada jednostavno u CSS fajlu pišemo instrukcije jednu ispod druge.
U ovoj lekciji naučili smo osnove pisanja CSS-a i kako se sve CSS može povezati sa HTML-om. Možda nismo uradili ništa konkretno na našem sajtu ali će nam ova lekcija poslužiti kao uvod u ono što ćemo raditi već u narednoj lekciji. Ukoliko ima bilo čega nejasnog možete da ostavite komentar.
No comments:
Post a Comment