Internet programiranje Nastavni materijali

Elektrotehniki fakultet Osijek Kneza Trpimira 2b 31000 Osijek

www.etfos.hr

1. UVOD
Da bismo shvatili zato je HTML postao ono to je danas, moramo nakratko zaviriti u ne tako davnu prolost. Razvijen kao strukturni jezik, prvenstveno je bio namijenjen strukturiranom prikazu podataka. Njegova jednostavnost i primjenjivost dovele su do toga da ga je vrlo brzo prihvatio velik broj korisnika. U kratkoj povijesti raunalnih tehnologija nijedan drugi raunalni jezik nije u toliko kratkom vremenu stekao tako veliku popularnost. Usporedo s eksponencijalnim rastom broja web sjedita, rasla je i potreba web dizajnera da svoja sjedita uine ljepima i privlanijima. Uoene nedostatke tadanjeg HTML-a, kao to je, primjerice, izostanak oznaka koje su dokumente inile privlanijima korisnicima, komercijalne tvrtke koje su proizvodile web preglednike pokuale su nadoknaditi tako to su, pored ionako slabog utjecaja standardizacijskih organizacija, u jezik unosile svoje oznake. To je kulminiralo takozvanim "ratom preglednika" iz kojeg je Internet Explorer iziao kao pobjednik, tako to je zavladao s preko 95% trita. Napokon je 1995. godine W3C definirao standardiziranu specifikaciju HTML jezika koja je u sebi sadravala mnoge elemente koje su u jezik unijeli proizvoai preglednika. Ta kratka i burna prolost uzela je svoj danak. Neke se injenice nisu mogle sakriti. Nekompatibilnost preglednika kao posljedica samovolje proizvoaa u prolosti je, a u nekoj mjeri i danas, uzrokovala nemale probleme za veinu web dizajnera. Sloenost koda optereenog oznakama za prikaz podataka dovela je do toga da je u dokumentu bilo vie oznaka nego podataka. Nedostatak mogunosti s jedne strane, i neprestana potreba za privlanim dizajnom s druge strane, neprestano su tjerali web dizajnere da osmiljavaju nove naine i izmiljaju nove trikove kako web sjedite uiniti ljepim.

Izgled istog HTML koda s dizajnerskim dodacima. Jasno je vidljiva koliina oznaka u odnosu na podatke koji se prikazuju. Kako prilagoditi izgled stranice da ona bude jednakog prikaza u svim preglednicima? Kako formatirati dokument da elementi u njemu budu precizno smjeteni? Kako na web sjeditu od stotinu stranica odjednom promijeniti, primjerice, boju fonta na svim stranicama? Ovakva su se pitanja nizala uzdiui na povrinu frustracije s kojima su se susretali autori web stranica. Iako je ve 1990. Tim Berners-Lee - tvorac weba - izradio preglednik koji je u sebi imao elemente jezika za definiranje stilova, tek se 1993. i 1994. godine zahuktala rasprava o tome kako taj jezik mora izgledati. Hkon Wium Lee i Bert Bos autori su prve specifikacije CSS-a, predstavljene krajem 1994. godine. CSS (eng. Cascading Style Sheets), odnosno kaskadni stilovi, jednostavan su mehanizam za dodavanje stilova - fontova, boja itd. - web stranicama. Svojim dolaskom CSS je izazvao pravu revoluciju na webu i to zahvaljujui nizu prednosti od kojih moemo razmotriti samo neke osnovne: 1. Koritenjem CSS-a postalo je mogue odvojiti prezentaciju podataka i dizajn od same strukture podataka. To znai da su sada dizajneri mogli samostalnije osmiljavati web sjedita - praktiki neovisno o kreatorima HTML kda. 2. Sam HTML kd postaje neusporedivo itkiji i manji to znai da ga je bilo puno lake nadzirati. 3. Kaskadnim stilovima omogueno je upravljanje web sjeditem s jednog mjesta uz potivanje pojedinanih odstupanja od zadanog stila. Odjednom je postalo mogue jednostavnom promjenom nekoliko parametara, promijeniti izgled tisuama stranica.

4. Predloen i standardiziran pod okriljem W3 konzorcija otpoetka je relativno jednako implementiran kod razliitih proizvoaa web preglednika. To to nije u potpunosti jednako implementiran, lako se rjeavalo uporabom razliitih stilova za razliite preglednike. 5. CSS je donio itav niz naina za ureivanje prikaza podataka koji do tada nisu postojali u samom HTML-u. CSS je, kao uostalom i sve ostale web tehnologije, u stalnom razvoju. Trenutna predloena specifikacija je CSS verzije 2 - prva revizija. Taj i sve ostale standarde i preporuke moete pronai na CSS stranicama W3 konzorcija. Mnogi e rei da je za kreiranje CSS-a dovoljno imati jednostavan program za ureenje teksta (npr. Notepad). Iako, gledano s tehnike strane, taj stav u potpunosti stoji, u praksi je puno bolje pri izradi koristiti kvalitetan alat. U praksi se pokazalo da je jako teko otipkati desetak redaka istog teksta, a da vam se pri tipkanju ne potkrade pokoja greka. Zato treba koristiti prednosti specijaliziranih editora koji imaju ugraene efekte za koloriranje i automatsko dovravanje kljunih rijei, to izradu ini dosta lakom. Osim toga, uz njih obino dolaze i popisi kljunih rijei te razne druge reference, to e dodatno olakati izradu. Svi vodei WYSIWYG alati (Macromedia Dreamweaver, Microsoft FrontPage itd.) imaju ugraene kvalitetne CSS editore. Meutim, ti alati su komercijalni i nisu svima dostupni. Na tritu postoji itav niz lako dostupnih pa ak i besplatnih alata za izradu CSS-a, a popis veine moete pronai na stranicama W3 konzorcija. Popis CSS editora s kratkim opisima i linkovima na sjeditu W3 konzorcija. Iz popisa moemo izdvojiti jedan alat koji se svojom jednostavnou i kakvoom istie od ostalih. To je TopStyle, proizvod tvrtke Bradbury Software. Ovaj program dolazi u dvije inaice - "Pro" i "Lite". Iako je profesionalna inaica poneto kvalitetnija i nudi dosta dodatnih opcija, mi emo se zadovoljiti "Lite" inaicom koja je, iako besplatna, sasvim dovoljna za veinu poslova pri pisanju kaskadnog stila. Skinite jedan od alata s popisa i instalirajte ga na raunalo. Ukoliko iz nekog razloga niste u mogunosti instalirati program na raunalo, za pisanje CSS-a moete skinuti SciTE editor teksta, i to u inaici "single file executable called Sc1". Radi se o vrlo malom, ali monom programu za ureivanje teksta koji ima efekte za koloriranje kljunih rijei CSS-a, a kojeg, u navedenoj izvedbi, nije potrebno instalirati na raunalo.

2. ELEMENTI CSS-a 2.1. Pogled u CSS

Pogledajmo zajedno kako izgleda CSS. Kratak primjer usporedbe istog HTML koda i web stranice izraene CSS-om govori sam za sebe. Ako elimo da ispis koji vidi korisnik izgleda ovako, Lorem ipsum dolor sit amet, consectetur adipisicing elit ... moemo to uraditi sljedeim HTML kodom.
<p> <font face="Courier New, Courier, mono"> <font color="#CC0000" size="+2"> <b>Lorem</b></font> ipsum dolor sit amet,</font> </p> <p> <font face="Courier New, Courier, mono"> <font color="#CC0000" size="+2"> <b>consectetur</b></font> adipisicing elit ... </font> </p>

Ili moemo napisati nekoliko linija CSS-a,

p { font-family:"Courier New", Courier, mono; } .stil { color:#CC0000; font-size:24px; font-weight:bold; }

i tada e, za isti rezultat ispisa, HTML kd izgledati ovako:

<p> <span class="stil">Lorem</span> ipsum dolor sit amet ... </p> <p> <span class="stil">consectetur</span> adipisicing elit ... </p>

U drugom primjeru izvedenom CSS-om vrijedi primijetiti dvije vane stvari: 1. jednostavnost HTML koda, 2. oblik, veliina i boja znakova za obje linije kontrolira se s jednog mjesta Razmotrimo od ega se sastoji prethodni CSS. Ako taj kd ralanimo, pojedine elemente moemo razvrstati u tri glavne kategorije: 1. selektori - p, .stil - identificiraju pojedine elemente na HTML stranici; 2. svojstva - color, fontsize... - kljune rijei za opis pojedinog elementa stranice;
3.

vrijednosti - #CC0000, 24px... - vrijednost koju moe poprimiti pojedino svojstvo;

i etvrtu pomonu kategoriju: 4.

komentari - tekst napisan izmeu znakova /* i */.

2.2. to to tono CSS radi HTML-u?

Zamislimo ovakav sluaj. Napisali ste seminarski rad o jednom starom latinskom tekstu. Rad se sastoji od nekoliko stranica i eljeli biste ga objaviti na webu. Razmiljajui o nainu izrade, birate HTML. Ve ste se dobro upoznali s tim jezikom pa vam izrada nekolicine stranica nije nikakav problem. Dovrili ste stranice i gledate rezultat u pregledniku:

Lorem ipsum Lorem ipsum je tekst koji se sastoji od niza sluajnih rijei bez znaenja. Iako njegove rijei ne znae nita, pretpostavlja se da je nastao na temelju Ciceronovog djela "O krajnostima dobra i zla". Ovaj tekst se ve stotinama godina koristi za testiranje ispisa i punjenje prostora tekstom. "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat". Ve ste na prvi pogled uoili da vaem seminarskom radu neto nedostaje. Struktura i podaci su tu, ali prezentacija je za jedinicu. Vaa stranica je izraena istim HTML kodom koji izgleda ovako: <h1>Lorem ipsum</h1> <p>Lorem ipsum je tekst koji se sastoji od niza sluajnih rijei bez znaenja. Iako njegove rijei ne znae nita, pretpostavlja se da je nastao na temelju Ciceronovog djela... ... <p>&quot;Lorem ipsum dolor...

Poznavajui vrijednost lijepe prezentacije, elite va rad izdignuti iznad razine bezlinog, suhoparnog teksta. Izradite CSS stil - obinu tekstualnu datoteku - i poveete je s HTML dokumentima. U CSS-u redom stoji sljedee: h1 {

font-family:Verdana,Helvetica,sans-serif; font-weight:bold; font-size:14px; } p{

font-family:Verdana,Helvetica,sans-serif; font-size:12px; } p.citat { font-style:italic; font-size:12px; border:1px solid #000; padding:4px; background-color:#FFFFCC; } U HTML kodu dodate poneki atribut: <h1>Lorem ipsum</h1> <p>Lorem ipsum je tekst koji se sastoji od niza sluajnih rijei bez znaenja. Iako nema smisleno znaenje, pretpostavlja se da je nastao na temelju Ciceronovog djela... ... <p class="citat">&quot;Lorem ipsum dolor... I kao rezultat ove intervencije, u konanom prikazu dobijete sljedee:

Promotrimo to se tono dogodilo s vaim ispisom. Kreiranjem stila CSS-om i njegovim povezivanjem s dokumentom, dogodila se promjena koja se oituje pri uitavanju dokumenta u preglednik. Preglednik pri uitavanju detektira da postoji CSS, proita ga i prepozna kljune rijei, a zatim pokua prikazati dokument onako kako mu to sugerira CSS. Primjerice, u CSS-u stoji da tekst koji se nalazi unutar oznake <h1> poprima sljedee parametre:

tekst je napisan fontom Verdana ili Helvetica ili sans- -serif, i to redom kako je font dostupan pregledniku tekst e biti podebljan visina znakova bit e 14 piksela.

Ukoliko je CSS tono definiran i ukoliko preglednik podrava navedena svojstva, rezultat e biti prikaz kakav nalae CSS. Da bi definiran CSS stil imao funkciju, potrebno ga je povezati s HTML dokumentom. To je mogue izvesti na etiri naina:

povezivanjem na vanjski dokument uvoenjem vanjskog dokumenta umetanjem u zaglavlje dokumenta dodavanjem u liniji atributom style.

U prva dva sluaja pretpostavljamo da postoji zaseban dokument - datoteka pohranjena pod imenom "stil.css", a u kojoj se nalazi navedeni CSS stil, i to bez ikakvih dodatnih oznaka: p{ font-family:"Courier New", Courier, mono; } .stil { color:#CC0000; font-size:24px; font-weight:bold; }

Povezivanje na vanjski dokument Povezivanje na vanjski dokument izvodi se oznakom <link> koja se dodaje u zaglavlje HTML dokumenta - izmeu oznaka <head> i </head>. Oznaka <link> sastavni je dio HTML standarda i slui povezivanju s vanjskim dokumentima. Zavrna oznaka </link> ne postoji. Uz oznaku <link> postoji vie atributa od kojih su nam najbitnija sljedea tri:

rel - definira odnos izmeu oznake i odredinog dokumenta. Moe poprimiti nekoliko vrijednosti, a kad slui za povezivanje CSS-a, poprima vrijednost "stylesheet"; type - definira tip odredinog dokumenta. U ovom sluaju tip dokumenta je "text/css"; href - URI dokumenta koji se povezuje.

Dakle, na dokument povezao bi se sljedeim kodom: <head> ... <link rel="stylesheet" type="text/css" href="stil.css"> ... </head>

Podsjetimo se: URI - Uniform Resource Identifier. Kod atributa href doputena je upotreba apsolutne i relativne putanje. Npr: href="http://www.example.com/css/stil.css" ili href="/css/stil.css" .

Uvoenje vanjskog dokumenta Uvoenje CSS-a obavlja se putem kljune rijei @import. Ona se upisuje u zaglavlju dokumenta i to unutar <style> oznake. U oznaci <style> obavezno se postavlja atribut tipa, i to: type="text/css". <head> ... <style type="text/css"> <!-@import url("/css/stil.css"); @import "/css/stil1.css"; @import "http://www.example.com/css/stil2.css"; --> </style> ... </head>

Oznake <!-- i --> su HTML komentar. Nisu obavezne kod ovakvog naina definiranja CSS-a, a slue da stariji preglednici, koji nisu imali mogunost prikaza CSS-a, ne bi prikazivali CSS kao tekst. Danas je takve preglednike gotovo nemogue pronai u uporabi.

Pri ovakvom nainu povezivanja CSS-a bitno je pripaziti na redoslijed uvezenih stilova. Ukoliko su na vie mjesta definirane razliite vrijednosti svojstava istog selektora, zbog kaskadnih svojstava CSS-a nadvladava posljednja definicija. Umetanje CSS-a u zaglavlje dokumenta CSS se moe definirati u zaglavlju dokumenta u oznaci <style>, uz uporabu atributa type="text/css". <head> ... <style type="text/css"> p{ font-family:"Courier New", Courier, mono; } .stil { color:#CC0000; font-size:24px; font-weight:bold; } </style> ... </head>

Primjeujete da je navedeni nain umetanja jako slian opisanom uvozu CSS-a. Ustvari, mogue ih je i kombinirati, tako da se, ispod linija za uvoz CSS-a, nadopiu lokalne definicije CSS-a. <head> ... <style> @import "/css/stil.css"; p{ font-family:"Courier New", Courier, mono; } </style> ... </head>

Dodavanje CSS-a u liniji s pomou atributa style Stilovi za pojedinanu HTML oznaku u dokumentu mogu biti definirani atributom style. Ovaj atribut moe se definirati za gotovo sve HTML oznake - izuzetak su oznake <script>, <basefont> i jo neke. <p style="font-size:10px">...tekst...</p> Ovako definiran stil vrijedi samo za oznaku unutar koje je definiran.

2.3. Selektori
Nauili smo kako povezati CSS stil s HTML dokumentom. Slijedi nam prouiti kako implementirati pojedini stil na dio ili na cijelu HTML stranicu. Vidjeli smo da se pojedini stil definira kao: selektor {svojstvo:vrijednost} . Selektor identificira element ili dio HTML stranice na koji se primjenjuje navedeni stil. Postoji itav niz selektora pa potpuno upoznavanje primjene svakog od njih nije nimalo banalan zadatak. Ovdje emo detaljnije obraditi nekoliko osnovnih, najee koritenih tipova:

jednostavni selektori klasni selektori ID selektori kontekstni selektori pseudoklase.

Prije samog upoznavanja selektora, nekoliko rijei o strukturi HTML dokumenta. itavi HTML dokument moemo prikazati kao stablo prema sljedeoj slici:

Prikaz - HTML hijerarhijsko stablo.

Vidljivo je da elementi unutar stabla imaju svoje podreene i nadreene elemente. Primjerice, <tr> sadran je u oznaci <table>, a <table> sadran je u oznaci <body>. S pomou selektora moemo precizno identificirati bilo koji od elemenata stabla.

Jednostavni selektori
Jednostavni selektori (eng. type selectors) najjednostavniji su od svih. Odgovaraju imenu html oznake i primjenjuju se na svaku istovrsnu oznaku u dokumentu. Primjerice, razmotrimo sljedei stil: p{ font-family:Verdana, Helvetica, sans-serif; } h1 { color:#CC0000; font-size:24px; font-weight:bold; } Ovakav stil povezan s HTML dokumentom sugerira web pregledniku da tekst u svim paragrafima na stranici prikae ispisan prvim raspoloivim od navedenih fontova te da sav tekst unutar <h1> oznaka u dokumentu prikae podebljan, crvene boje i veliine 24px. Prednost koritenja ovakvog tipa selektora je u tome to, osim samog povezivanja stila s dokumentom, ne zahtijeva intervencije u html kd. Primjerice, ako elimo definirati tip i veliinu fonta za sve stranice, dovoljno je to napraviti ovim selektorom: body { font-family:Verdana, Helvetica, sans-serif; font-size:12px; } Zbog toga to je selektor body u samom vrhu hijerarhije vidljivog dijela HTML dokumenta - svi elementi koji se hijerarhijski nalaze nie od njega, poprimit e navedena svojstva.

Nedostatak primjene CSS-a putem jednostavnih selektora je u tome to se definirani stil primjenjuje na sve HTML elemente bez izuzetaka. Ne moemo postii da se, primjerice, paragrafi u tablici prikazuju razliito od paragrafa izvan tablice, to nam mogu omoguiti selektori koje emo upoznati u sljedeoj lekciji.

Klasni selektori
Kao to smo ve rekli, dobra strana jednostavnih selektora - primjena na sve oznake istog tipa - ujedno moe biti i njihov velik nedostatak. Pretpostavimo da elite izraditi stranicu s prijevodima latinskih izreka tako da u jednom paragrafu navedete izreku, u sljedeem prijevod, i tako naizmjence. Da bi posjetitelji lake razlikovali prijevod od izvornika, eljeli biste da tekst u paragrafima bude razliito formatiran. Mogue je definirati ovakav stil: .izreka { font-weight:bold; font-size:11px; } .prijevod { font-style:italic;

font-size:12px; } te uz primjenu sljedeeg koda: <p class="izreka">Navigare necesse est, vivere non est necesse.</p> <p class="prijevod">Ploviti je nuno, ivjeti nije nuno.</p> dobiti ovakav rezultat: Navigare necesse est, vivere non est necesse. Ploviti je nuno, ivjeti nije nuno. Primjeujete kako se pri definiranju selektora pie .naziv, a pri primjeni selektora na paragraf samo naziv. Drugi nain definiranja je oznaka.naziv. Razlika je to se ovako definirani selektori mogu primijeniti samo na oznake istog tipa. Primjerice: p.izreka { font-weight:bold; font-size:11px; } p.prijevod { font-style:italic; font-size:12px; } Ovako definirani selektori primjenjuju se jednako kao i prethodni - <p class="naziv"> ali za razliku od prethodnih, koji se mogu primijeniti na razliitim oznakama, ovakvi se mogu primijeniti samo na paragrafe.

Na ovakav nain definirali smo klasne selektore i identificirali pojedine paragrafe kao pripadnike jedne, odnosno druge klase.

ID selektori
Na prvi pogled, ovaj se tip selektora razlikuje od klasnih selektora samo u dvije stvari. Prvo, umjesto toke, definira se oznakom "#": #izreka { font-weight:bold; font-size:11px; } #prijevod { font-style:italic; font-size:12px; } i drugo, umjesto atributom class primjenjuje se atributom id: <p id="izreka">Navigare necesse est, vivere non est necesse.</p> <p id="prijevod">Ploviti je nuno, ivjeti nije nuno.</p> Rezultat je jednak prethodnom: Navigare necesse est, vivere non est necesse. Ploviti je nuno, ivjeti nije nuno. Vjerojatno se pitate u emu je onda razlika izmeu klasnog i id selektora. U jednom HTML dokumentu svi id atributi trebali bi biti razliiti. Oni su namijenjeni referenciranju na odreeni element. Primjerice, u dokumentu smije biti samo jedan paragraf s atributom id ="izreka". Id selektor primjenjuje se kada se eli pridodati stil za jedan jedinstven element na stranici. Ovdje je id atribut primijenjen na paragraf. U stvarnosti, jedan dokument obino se sastoji od mnotva istih paragrafa. Kako se id selektor primjenjuje na jedinstven element stranice, rijetko e biti primijenjen na

paragraf. Stvarniji primjer bila bi primjena na <h1> element, jer uobiajeno, na stranici postoji samo jedan glavni naslov.

Pseudoklase
Pseudoklase su gradivo koje zasigurno moemo smjestiti u napredno koritenje CSS-a. Meutim, postoje etiri pseudoklase koje se susreu na gotovo svakoj stranici izraenoj CSS-om. Suprotstavljajui sloenost problematike i masovnost uporabe, u ovom poglavlju ponueno vam je "instant" rjeenje za uljepavanje linkova, bez prevelikog ulaenja u detalje, ali u praksi sasvim uporabljivo. Pseudoklase :link, :visited Osnovni prikaz linkova u HTML-u prilino je suhoparan, a definiranje boje linkova u oznaci <body> ne daje puno bolje rezultate. CSS nudi rjeenje dvjema pseudoklasama. Izgled neposjeenog linka definira se pseudoklasom a:link, a izgled posjeenog linka pseudoklasom a:visited. a:link { text-decoration:none; color:#CC0000; } a:visited { text-decoration:line-through; color:#0000CC; } <a href="http://www.carnet.hr/">CARNet</a>

Dinamike pseudoklase :hover, :active Dodatna atraktivnost linkova moe se postii dinamikim efektima, koji se aktiviraju pri nekakvoj radnji korisnika. Primjerice, u ovom sluaju, prelaskom pokazivaa preko linka aktivira se prikaz selektora a:hover, dok se od trenutka pritiska tipke mia, pa do otputanja tipke, aktivira prikaz selektora a:active. a:hover { background-color:#000; color:#fff; } a:active { background-color:#ffff00; color:#cc0000; } <a href="http://www.carnet.hr/">CARNet</a>

Da biste dobili eljen rezultat, zbog odreenih specifinosti CSS-a, ije prouavanje izlazi iz okvira ovog predavanja, ove pseudoklase pri definiranju uvijek morate navesti sljedeim redoslijedom: a:link{} a:visited{} a:hover{} a:active{} .

Vie istovremenih linkova razliitih svojstava Definirane pseudoklase vrijede za sve linkove u dokumentu. Ukoliko u jednom dokumentu postoji potreba za vie razliitih vrsta linkova, koristi se kombinacija klasnih selektora i pseudoklasa.

a.vrsta1:link {

text-decoration:none; color:#CC0000;
} a.vrsta1:visited {

text-decoration:line-through; color:#0000CC;
} a.vrsta1:hover {

background-color:#000; color:#fff;
} a.vrsta1:active {

background-color:#ffff00; color:#cc0000;
} a.vrsta2:link {

text-decoration:underline; color:#000;
} a.vrsta2:visited {

text-decoration:line-through; color:#CC0000;
} a.vrsta2:hover {

background-color:#cc0000; color:#ffff00;
} a.vrsta2:active {

background-color:#fff; color:#000;
}

Grupiranje selektora
Kada nekoliko selektora dijeli odreena svojstva, postoji mogunost njihova grupiranja u popis odvojen zarezima. To se uobiajeno primjenjuje radi preglednosti zapisa i jednostavnosti manipulacije svojstvima. Razmotrimo sljedei primjer: Namjera nam je definirati oznake naslova <h1>, <h2> i <h3>, veliinom i tipom fonta. Svi naslovi imaju isti tip fonta, ali su razliite veliine. h1 { font-family:sans-serif; font-size:16px; } h2 { font-family:sans-serif; font-size:14px; } h3 { font-family:sans-serif; font-size:12px; } Ako kod ovakvog zapisa elimo promijeniti tip fonta definiranog za naslove, to je potrebno napraviti na tri mjesta. Jedna od uloga CSS-a je i da promjene svojstava uini to jednostavnijim, upravo zato je predviena mogunost grupiranja selektora. U ovom sluaju to biste napravili sljedeom definicijom:

h1, h2, h3 { font-family:sans-serif; } h1 { font-size:16px; } h2 { font-size:14px; } h3 { font-size:12px; } U praksi se selektori koji dijele ista svojstva redovito grupiraju.

2.4. Nasljeivanje

Podsjetimo se - HTML hijerarhijsko stablo.

Slikom HTML hijerarhijskog stabla moemo sagledati nasljeivanje, jo jedno vano svojstvo CSS-a. Elementi koji su nie u stablu - tzv. potomci - nasljeuju svojstva od svojih roditeljskih elemenata. Ukoliko po primjeru sa slike imamo definiran sljedei selektor: td { color:red; } tada e cjelokupni tekst unutar stupca tablice biti crvene boje, bez obzira bio on unutar paragrafa ili elementa popisa. Naravno, ako je na nekom od elemenata - potomstva primijenjen neki drugi stil, taj stil ima prioritet pri prikazivanju. Razmotrimo jo jedan tipian primjer koritenja nasljeivanja: body { font-size:10pt } h1 { font-size:120% } Budui da je <h1> unutar oznake <body>, veliina znakova unutar oznake <h1> bit e 12pt.

2.5. Kaskade
Vidjeli smo kako CSS moemo na razliite naine povezati s dokumentom. U odreenim uvjetima moe se dogoditi da vie selektora s istim atributima, ali razliitim svojstvima, identificiraju isti element na stranici. Koje od pravila e se tada primjenjivati definirano je kaskadnim svojstvima CSS-a. Iako postoji egzaktan nain izrauna koji selektor u kojoj situaciji prevladava, njegova sloenost izlazi iz okvira ovog predavanja. Meutim, moemo postaviti prioritetni redni popis, koji u veini sluajeva daje eljen rezultat. Na prvom mjestu su selektori s najveim prioritetom: 1. stilovi pridijeljeni atributom style 2. id selektori 3. klasni selektori i pseudoklase
4.

kontekstni, pa jednostavni selektori.

Na sljedeem primjeru prikazan je prioritet selektora: h1 { color:blue; } #naslov { color:red; } .plavo { color:blue; } <h1 id="naslov">Lorem ipsum</h1> <p class="plavo" style="color:red">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Kod oznake naslova tekst je crven jer je id selektor #naslov veeg prioriteta od jednostavnog selektora h1. Kako je u paragrafu tekst definiran atributom style, koji je veeg prioriteta od klasnog selektora .plavo, tekst je takoer crvene boje.

2.6. CSS model kutije

Elemente na stranici CSS tretira kao posloene kutije - pravokutnike - koji se na stranici slau jedan iza drugog ili jedan ispod drugog. Izgled kutije i njezina svojstva definirani su sljedeim prikazom:

CSS model kutije. Iako na prvi pogled razmatranje, primjerice, paragrafa kao kutije ne izgleda logino, vrlo brzo se mogu uoiti prednosti takvog naina predoavanja sadraja. Naime, bez CSS-a nismo u mogunosti na jednostavan nain formatirati prikaz sadraja paragrafa. Primjerice, kako prostor izmeu dva paragrafa uiniti veim? Bez CSS-a to bismo mogli napraviti dodavanjem nekakvih razmaknica. U te svrhe su se esto koristile prozirne sliice poznatije pod imenom spacer.gif. CSS model koji paragraf tretira kao kutiju nudi puno jednostavnije rjeenje - definiranje gornje i donje margine.

p{ margin-top:5px; margin-bottom:20px; padding-left:30px; } Kao ishod moete vidjeti prikaz na sljedeoj slici. Bijeli okvir je sadraj paragrafa, a utom su prikazane margine i odmaci.

Prikaz paragrafa.

2.7. CSS elementi

Elemente u CSS-u moemo podijeliti na tri grupe. To su:

blok elementi (eng. block level elements) linijski elementi (eng. inline elements) popisi (eng. lists).

Blok elementi To su elementi koji su u dokumentu odvojeni od ostalih elemenata to ih okruuju. Predefinirano se ponaaju tako da sljedei element zapoinje u novoj liniji. Tipian primjer ovog tipa elemenata su <p> i <h1>, koje ste esto susretali u prethodnim lekcijama.

Predefinirano ponaanje blok elementa - paragrafi se uvijek prikazuju sloeni jedan ispod drugoga.

Linijski elementi Za razliku od blok elemenata, linijski elementi dolaze u nizu, jedan za drugim. Tipian primjer su elementi <a> i <img>.

Predefinirano ponaanje linijskih elementa - linkovi se uvijek prikazuju u nizu s okolnim tekstom.

Popisi Popisi su blok elementi, koji, osim blok svojstava, imaju i grafiku ili brojanu oznaku ispred teksta.

2.8. Generiki kontejneri SPAN i DIV

Oznaka span Element <span> je linijski generiki kontejner. Smisao generikih kontejnera je strukturirano obuhvaanje i formatiranje raznih elemenata koje mogu sadravati. Za razliku od oznaka koje su predefinirane - <p>, <h1>, ... - definiranje zadae generikih kontejnera preputeno je dizajneru. Tipian primjer <span> kontejnera je formatiranje nekolicine rijei u tekstu. p{ font-size:11px; } .istaknuto { font-size:18px; font-weight:bold; border:1px solid #000; } <p>Lorem <span class="istaknuto">ipsum dolor</span>, sit amet.</p>

Lorem ipsum dolor sit amet...

Oznaka div Element <div> je blok generiki kontejner. Najee slui za obuhvaanje vie blok ili linijskih elemenata unutar jedne strukture koja dijeli zajedniko formatiranje. Primjer uporabe ovog elementa su prikazi CSS i HTML koda. /*ovaj kod je prikazan u kontejneru definiranim sljedeim stilom*/ .csskod { padding:5px; margin:0; width:380px;

color:#CC0000; background-color:#FFFFCC; font-family:courier, mono; text-align:left; border-width:1px; border-style:dashed; border-color:#455372; }

Zbog jednostavnosti uporabe i velike fleksibilnosti kod formatiranja raznog sadraja, pri izradi stranica generiki kontejneri se esto koriste i tamo gdje to nije potrebno. Nemojte pretjerati s uporabom. Primjerice, ukoliko elite formatirati tekst s okvirom, nemojte postavljati tekst u <span> ili <div> kontejner kojem ste dodali okvir - sjetite se da se okvir moe definirati i u paragrafu, koji je ve ionako predvien za formatiranje teksta.

3. CSS SVOJSTVA
Podsjetimo se kako radi CSS. Svaki stil se sastoji od selektora i njima pridruenih parova svojstva i vrijednosti: p { /* p je selektor */ font-family:"Courier New", Courier, mono; } .stil { color:#CC0000; /* color je svojstvo */ font-size:24px; /* 24px je vrijednost */ font-weight:bold; } Specifikacija CSS-a definira itav niz svojstava i njihovih vrijednosti. Svojstva se po svom djelovanju mogu grupirati u cjeline. Detaljnije emo razmotriti sljedee kategorije:

svojstva fonta svojstva teksta svojstva boja i pozadina svojstva CSS kutije svojstva popisa pozicioniranje (smjetanje).

3.1. Svojstva fonta

Ovo su, vjerojatno, najee koritena svojstva, jer bez obzira na dizajn i namjenu stranice, tekst se zasigurno nalazi na veini od njih. font-family Ovo svojstvo sugerira pregledniku kojim fontom e se prikazivati tekst u dokumentu. Problem nastaje ako korisnik na raunalu nema instaliran potreban font. CSS definira pet generikih porodica fontova - serif, sans-serif, cursive, monospace i fantasy. Pri definiranju moemo koristiti neke od njih: body { font-family:monospace; } ili, to je preporuljivo, moemo koristiti stvarna imena fontova: body { font-family:"Courier New", Courier, mono; } U ovom sluaju preglednik e prvo pokuati prikazati tekst fontom Courier New, a ako njega nema, onda fontom Courier i tek onda, ako prva dva fonta nisu instalirana, prikazati e tekst fontom iz obitelji mono. font-weight Svojstvo koje definira debljinu znakova. Moe poprimiti sljedee vrijednosti: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Vrijednost bolder je jedan stupanj deblja vrijednost od vrijednosti postavljene za taj element. Slino, vrijednost lighter je jedan stupanj tanja od inae postavljene vrijednosti. Najee se koriste vrijednosti normal i bold. Bolder, lighter i brojane definicije debljine fonta nisu sigurne za koritenje jer ih preglednici razliito prikazuju - najee do 500 za normalne, a 600, 700, 800 i 900 za deblje fontove.

font-size Definira veliinu fonta. Moe poprimiti bilo koju definiranu vrijednost veliine (12px, 10pt, 2em...) ili neku od kljunih rijei (xx-small, x-small, small, medium, large, x-large, xx-large). Budui da se svojstvo nasljeuje, moemo pisati sljedee: body { font-size:10pt; } p{ font-size:150%; } U ovom primjeru paragraf nasljeuje veliinu definiranu selektorom body, pa bi tekst u paragrafu bio prikazan fontom veliine 15pt. font-style Sugerira pregledniku da prikae tekst kao normal ili kao italic. Postoji jo i vrijednost oblique, ali nju preglednici prikazuju isto kao italic. font-variant Moe poprimiti vrijednosti normal ili small-caps. Koritenjem small-caps dobije se efekt teksta pisanog velikim slovima, ali fontovima razliitih veliina. Primjerice, u sljedeoj reenici prva slova svih rijei pisana su velikim slovima: p{ font-variant:small-caps; } <p>Lorem Ipsum Dolor Sit Amet</p>

LOREM IPSUM DOLOR SIT AMET

Skraeni selektor Sva ova svojstva mogu se navesti preko skraenog selektora font, na sljedei nain: p{ font:italic small-caps 12px Verdana, Helvetica, sans-serif; }

3.2. Svojstva teksta

Ova svojstva definiraju razmjetaj teksta u dokumentu. letter-spacing Ovo svojstvo definira razmak izmeu pojedinih znakova u tekstu. p{ letter-spacing:0.5em; } <p>Lorem ipsum dolor sit amet</p>

L o r e m

i p s u m

d o l o r

s i t

a m e t

line-height Definira razmak izmeu dvije crte teksta (eng. baseline). p{ font-size:9pt; line-height:26pt; }

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

text-decoration Opisuje dekoracije koje se dodaju tekstu. Moe poprimiti vrijednosti: none, underline, overline, line-through i blink. Boje dekoracija pojavljuju se u boji teksta. text-transform Pretvara slova iz koda u velika ili mala, ovisno o izabranoj vrijednosti svojstva. Mogue vrijednosti su capitalize, uppercase, lowercase. Capitalize postavlja poetno slovo u svakoj rijei u veliko slovo. Uppercase postavlja sva slova u velika, a lowercase u mala, bez obzira na izvorno slovo u kodu. p{ text-transform:capitalize; } <p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

text-align Vodoravno poravnanje teksta. Moe se primijeniti samo na blok elemente, a mogue vrijednosti su: left, right, center i justify. p{ text-align:center; }

<p>Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit,<br> sed do eiusmod tempor incididunt<br> ut labore et dolore magna aliqua.</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

text-indent Prvi redak paragrafa je obino uvuen za odreenu vrijednost. Ovo svojstvo poprima vrijednosti duine. p{ text-indent:45px; } <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

3.3. Svojstva boja i pozadina

Pravi izbor boja i pozadine je neto to e, zasigurno, svako web sjedite uiniti atraktivnijim. Dok je sam izbor navedenih elemenata pri izradi web sjedita preputen vaem osobnom odabiru, ovdje emo vam pokazati kako postupak izbora uiniti lakim. Naime, postavljanje ovih parametara u CSS datoteku daje vam mogunost da s jednog mjesta, gotovo trenutno, promijenite izgled itavog web sjedita. color Postavlja boju teksta u zadanom elementu. Moe oznaavati i boju elementa - primjerice kod oznake <hr>. p{ color:green; } <p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

background-color Definira boju pozadine za zadani element. Boja pozadine se protee do granice elementa - bez obzira na odmak. div.primjer { background-color:#3C6; color:#000; padding:3px; border:1px solid #000; } <div class="primjer">Lorem ipsum dolor sit amet</div> Lorem ipsum dolor sit amet

background-image Postavlja pozadinsku sliku u element. Ukoliko se primjenjuje s nie navedenim svojstvima, moe se definirati fiksni poloaj pozadinske slike ili ponavljanje po jednom od pravila. background-repeat Ponavljanje pozadinske slike. Moe poprimiti sljedee vrijednosti: repeat - ponavlja sliku; no-repeat - ne ponavlja sliku; repeat-x - ponavlja sliku po vodoravnoj osi; repeat-y - ponavlja sliku po okomitoj osi. div.pozadina { background-image:url("css.gif"); background-repeat:repeat-x; border:1px solid #000; height:150px; color:#c00; } <div class="pozadina">Lorem ipsum dolor sit amet</div> Lorem ipsum dolor sit amet

background-attachment Ovo svojstvo definira pomie li se pozadinska slika s elementom ili ne. Moe poprimiti vrijednost scroll - pomie se, ili fixed - ne pomie se. Primjerice, ukoliko elimo u tijelu dokumenta postaviti fiksnu pozadinu, moemo to napraviti sljedeim kodom: body { background-image:url("css.gif"); background-repeat:no-repeat; background-attachment:fixed; }

background-position Pozadinska slika predefinirano se postavlja u gornji lijevi kut dokumenta. Backgroundposition je svojstvo koje omoguava postavljanje poetnog poloaja od kojeg e se postaviti slika. Moe poprimiti vrijednosti top, center, bottom, right, center, left ili postotke, odnosno udaljenost od gornjeg lijevog kuta. background Skraeno svojstvo. Mogue je navesti sva navedena svojstva bez obzira na redoslijed navoenja: body { background:url("css.gif") no-repeat fixed; }

3.4. Svojstva CSS kutije

3.4.1. Margine Margine (rubnice) odreuju udaljenost CSS kutije, odnosno elementa, od ostalih elemenata na stranici. Ova svojstva poprimaju vrijednosti duina koje mogu biti izraene u bilo kojoj doputenoj mjernoj jedinici. Margine se mogu definirati ili sa sve etiri strane pojedinano, ili skraenim svojstvom. margin-top Gornja margina - udaljenost od gornjeg elementa. margin-right Desna margina - udaljenost od desnog elementa. margin-bottom Donja margina - udaljenost od donjeg elementa.

margin-left Lijeva margina - udaljenost od lijevog elementa. Ukoliko, primjerice, imamo jedan element <div>, koji elimo prikazati odmaknutim od rubova dokumenta, moemo to napraviti koristei ve navedena svojstva: div { margin-top:15px; margin-right:70px; margin-bottom:5px; margin-left:40px; border:1px solid #000; background-color:#99CCFF; } <div>Lorem ipsum dolor sit amet</div> Lorem ipsum dolor sit amet

margin etiri pojedinane margine mogu se zamijeniti skraenim svojstvom, koje bi se tada, za prethodni sluaj, definiralo na sljedei nain. div { margin:15px 70px 5px 40px; } Ukoliko elimo jednaku marginu za sve strane elementa, moemo pisati: div { margin:5px; }

3.4.2. Odmaci Odmak je udaljenost od granice CSS kutije do sadraja. Slino kao i kod margina, postoje etiri odmaka i skraeno svojstvo. Ukoliko nije eksplicitno definirana, predefinirana vrijednost odmaka je 0. padding-top Odmak od gornje granice. padding-right Odmak od desne granice. padding-bottom Odmak od donje granice. padding-left Odmak od lijeve granice. Razmotrimo opet element div iz prethodne lekcije, pa mu uz postojee margine dodajmo i odmak: div { padding-top:15px; padding-right:65px; padding-bottom:35px; padding-left:65px; margin-top:15px; margin-right:70px; margin-bottom:5px;

margin-left:40px; border:1px solid #000; background-color:#99CCFF; } <div>Lorem ipsum dolor sit amet</div>

Lorem ipsum dolor sit amet

Vidljivo je kako tekst, zbog odmaka, prelazi u nov red, ali se boja pozadine, bez obzira na odmak, protee do granice elementa. padding Kao i kod margina, i ovdje je mogue definirati odmak na drugi nain: div { padding:5px 10px 15px 20px; } Odnosno, ukoliko je odmak sa svih strana jednak: div { padding:5px; }

3.4.3. Granice CSS standard definira niz svojstava kojima je mogue opisati granicu elementa. Mogue ih je podijeliti u etiri grupe: irina granice, boja granice, izgled granice i skraena svojstva. Svojstva irine granice Slino kao i kod prethodnih svojstava, i ovo se svojstvo dijeli na etiri poloaja - gore, desno, dolje i lijevo. div { border-top-width:2px; border-right-width:4px; border-bottom-width:6px; border-left-width:8px; border-style:solid; border-color:#000; background-color:#99CCFF; } <div>Lorem ipsum dolor sit amet</div>

Lorem ipsum dolor sit amet Ili za jednaku irinu svih etiriju granica: div { border-width:2px; }

Svojstva boje granice Boja granice takoer se moe definirati zasebno za svaku od etiri granice. div { border-top-color:red; border-right-color:green; border-bottom-color:blue; border-left-color:yellow; border-width:6px; border-style:solid; background-color:#99CCFF; }

<div>Lorem ipsum dolor sit amet</div>

Lorem ipsum dolor sit amet Ili za istu boju svih etiriju granica: div { border-color:red; }

Svojstva izgleda granice Svojstvo izgleda granice moe poprimiti sljedee vrijednosti: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. Ponovno imamo mogunost definicije za svaku od granica zasebno: div { border-top-style:hidden; border-right-style:dotted; border-bottom-style:dashed; border-left-style:solid; border-width:6px; border-color:#000; background-color:#99CCFF; }

<div>Lorem ipsum dolor sit amet</div>

Lorem ipsum dolor sit amet Ili zajedniko svojstvo za sve etiri granice: div { border-style:dotted; }

Skraena svojstva granice Sva navedena svojstva moemo postaviti skraeno za pojedinanu granicu: div { border-top: 2px solid #000; border-right:4px dotted red; border-bottom:6px dashed #fc0; border-left:6px groove #0c0; }

<div>Lorem ipsum dolor sit amet</div>

Lorem ipsum dolor sit amet Ili za sve etiri granice u jednoj definiciji: div { border:2px dotted #000; }

3.4.4. Dimenzije Dimenzije CSS kutije definirane su irinom i visinom sadraja: width Definira irinu sadraja. height Definira visinu sadraja. irina i visina sadraja moe biti postavljena na bilo koji blok element, bez obzira na dimenzije koje bi taj element inae zauzeo. Primjerice, u sluaju CSS ikonice: img.ikona { height:165px; width:120px; } <img src="css.gif"> <img src="css.gif" class="ikona">

3.5. Svojstva popisa

Ukoliko uz oznaku <div> moemo navesti jo poneku HTML oznaku kojoj se dolaskom CSS-a znatno poveala uporaba, onda su to sigurno popisi. Mogunost formatiranja koje je donio CSS omoguile su da se popisi, od obinog elementa za nizanje teksta, pretvore u moan alat. Popisi se sastoje od <ul>, odnosno <ol> oznake, koje ustvari ine blok element, te od jedne ili vie <li> oznaka koje predstavljaju oznaavaju elemente popisa. Svaku od ovih oznaka moemo zasebno formatirati. list-style-type Definira tip grafikih oznaka koji e biti prikazan ispred pojedinog elementa popisa. Moe poprimiti sljedee vrijednosti: disc, circle, square, decimal, lower-roman, upperroman, lower-alpha, upper-alpha, none. ul { list-style-type:square; } <ul> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>sed do eiusmod tempor incididunt</li> <li>ut labore et dolore magna aliqua.</li> </ul>

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

list-style-image Ovo svojstvo nam omoguava da popisu umjesto uobiajene grafike oznake dodamo sliku. Primjerice: ul { list-style-image:url(arrows.gif); } li { padding:4px; } <ul> <li>Lorem ipsum dolor sit amet</li> <li>consectetur adipisicing elit</li> <li>sed do eiusmod tempor incididunt</li> <li>ut labore et dolore magna aliqua.</li> </ul>

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

list-style-position Definira uvlaenje elemenata popisa. Moe poprimiti vrijednosti inside ili outside. Pretpostavljena vrijednost je outside. list-style Skraeno svojstvo za istovremen prikaz svih svojstava popisa. U ovom primjeru, ukoliko je slika nedostupna, prikazuje se circle:

ul { list-style:circle url(arrows.gif) outside; }

3.6. Svojstva pozicioniranja (smjetanja)

Pri koritenju apsolutnog, relativnog ili fiksnog pozicioniranja (smjetanja), moemo koristiti nie navedena svojstva. left Udaljenost od lijeve referentne toke - elementa ili prozora preglednika. Moe poprimiti vrijednost duine ili postotka duine ili vrijednost auto. top Udaljenost od gornje referentne toke - elementa ili prozora preglednika. Moe poprimiti vrijednost duine ili postotka duine ili vrijednost auto. div { position:relative; top:20px; left:50px; border:1px solid #000; }

<div>Lorem ipsum dolor sit amet</div>

z-index Ukoliko se dva elementa prekrivaju, vrijednost ovog svojstva definira koji e element biti iznad, a koji ispod. Element s veom vrijednou uvijek se nalazi iznad. Svojstva ije vrijednosti poprimaju jedinice duina esto doputaju i negativne vrijednosti. Primjerice, left:-10px moe znaiti da se element prikae 10 piksela lijevo od mjesta na kojem bi se inae prikazao.

3.7. Ostala svojstva

Od niza svojstava CSS-a, ovdje smo napravili izbor jo nekolicine atraktivnih i ee koritenih: cursor Definira vrstu pokazivaa kada se on nae iznad elementa. Moe poprimiti vrijednosti: auto, crosshair, default, help, move, pointer, text, wait... div { cursor:crosshair; }

overflow Definira kako e se prikazati sadraj koji je vei od CSS kutije. Moe poprimiti vrijednosti: visible, hidden, scroll i auto. Primjerice, oznaka <div> definirane visine, ali s vikom teksta, kao u sljedeem primjeru, bit e prikazana s trakom za pomicanje. div { width:180px; height:50px; overflow:auto; border:1px solid #000; }

<div> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>

visibility Definira vidljivost elementa. Moe poprimiti vrijednosti visible - vidljiv, ili hidden skriven. Ako se moda pitate zato biste skrivali element na stranici, odgovor lei u JavaScriptu - skriptnom jeziku koji u kombinaciji s CSS-om nudi neizmjerne mogunosti uljepavanja stranica dinamikim efektima.

display Svojstvo koje omoguava promjenu predefiniranog naina prikaza razliitih tipova elemenata. Moe poprimiti vrijednosti block, inline, list-item i none. Koristi se kad elimo, primjerice, blok element prikazati kao linijski. Ovdje je primjer kako elemente popisa prikazati u liniji: li { display:inline; } <ul> <li>Lorem</li> <li>ipsum</li> <li>dolor</li> <li>sit</li> <li>amet</li> </ul>

4. CSS IZBORNIK
Izrada izbornika web sjedita HTML kodom obino zahtijeva na desetke linija koda, formatiranje s pomou tablice i dodavanje raznih efekata koritenjem JavaScript-a. Ovdje smo za vas pripremili jednostavan CSS izbornik koji ukljuuje razne efekte, od mijenjanja boja do formatiranja podizbornika, i to sve bez navedenih elemenata. Izbornik je sastavljen od nekoliko linkova tipinih za male tvrtke. Sastavni dio izbornika je podizbornik, ovdje prikazan samo za jedan nadreen link. Konaan izgled koji elimo postii dan je sljedeim prikazom:

4.1. Definiranje popisa linkova

Prvi korak do cilja je definiranje popisa linkova. Popisi se zbog svojih CSS svojstava redovito koriste za kreiranje izbornika. Popis glavnog izbornika sastoji se od etiri linka: <ul> <li><a href="#">Naslovnica</a></li> <li><a href="#">Proizvodi</a></li> <li><a href="#">O nama</a></li> <li><a href="#">Kontakt</a></li> </ul>

Naslovnica Proizvodi O nama Kontakt

Kako se podizbornik razlikuje od izbornika, linkove podizbornika dodajemo kao jo jedan popis. <ul> <li><a href="#">Naslovnica</a></li> <li><a href="#">Proizvodi</a> <ul> <li><a href="#">Proizvod 1</a></li> <li><a href="#">Proizvod 2</a></li> <li><a href="#">Proizvod 3</a></li> </ul> </li> <li><a href="#">O nama</a></li> <li><a href="#">Kontakt</a></li> </ul>

Sada imamo definiran popis i slijedi njegovo formatiranje. Ovim smo i zavrili izmjene HTML koda, jer emo potpuno daljnje formatiranje izvriti CSS-om.

4.2. Formatiranje popisa linkova

Popis formatiramo jednostavnim (ul i li) i kontekstnim selektorima (ul li a i ul ul li a). Primjeujete da ovaj posljednji identificira samo one linkove koji su u <li> elementu dvostrukog popisa (ul ul). Na oba popisa postavljamo sljedea svojstva:

display:block - prikaz linkova jedan ispod drugog text-decoration - skidamo podcrtane linkove margin - marginom razdvajamo linkove padding - udaljavamo linkove width - definira irinu linka.

ul, li { list-style:none; /* skida grafiku oznaku */ margin:0px; padding: 0px; } ul li a, ul li a:visited { display:block; text-decoration:none; margin:1px; padding:2px 0px 2px 5px; width:120px; } ul ul li a, ul ul li a:visited { display:block; text-decoration:none; margin:1px 1px 1px 15px; padding:2px 0px 2px 5px; width:108px; }

Sada imamo formatiran popis i slijedi dodavanje boje i biranje efekta uz linkove.

4.3. Stiliziranje popisa linkova

Pored samog razmjetanja elemenata na stranici, izbor boja i dodavanje ukrasa iskljuivo pripada poslu web dizajnera. Ovdje se moe vidjeti snaga CSS-a, jer web dizajner, bez obzira na napisan kd, mijenjanjem CSS-a u potpunosti moe promijeniti izgled popisa. Popis emo obojiti modrom bojom, znakove emo podebljati, a kao ukras i podlogu za dinamiki efekt, koristit emo lijevu granicu linka. Postavit emo je na debljinu od 6 piksela za linkove glavnog izbornika, odnosno 4 piksela za linkove podizbornika, definirati liniju (vrijednost solid) i postaviti joj boju koju smo dodijelili slovima. ul, li { list-style:none; margin:0px; padding: 0px; } ul li a, ul li a:visited { display:block; text-decoration:none; margin:1px; padding:2px 0px 2px 5px; width:120px; color:#336; /* boja linkova */ font-weight:bold; /* podebljana slova */ border-left:6px solid #336; /* granica */

} ul ul li a, ul ul li a:visited { display:block; text-decoration:none; margin:1px 1px 1px 15px; padding:2px 0px 2px 5px; width:108px; color:#336; /* boja linkova */ font-weight:bold; /* podebljana slova */ border-left:4px solid #336; /*granica*/ } Predefinirana vrijednost irine granice linka je 0 piksela, tako da nam je ovdje potrebno samo postaviti debljinu lijeve granice. Ovim smo dobili sljedei prikaz:

Oblikovani popis je tu. Ono to nam slijedi je zavravanje dodavanjem dinamikog efekta.

4.4. Dodavanje dinamikog efekta

Iako su linkovi gotovi i funkcionalni, nedostaje im neto to u dananje vrijeme uobiajeno susreemo kod veine izbornika. Pomicanjem pokazivaa mia, korisnici su navikli da im nekakav efekt oznai iznad kojeg linka se nalazi pokaziva. Takvi efekti, osim uljepavanja, imaju i ulogu lake orijentacije i snalaenja meu linkovima. Dinamike efekte postiemo dodavanjem pseudoklasa u stil. Upotrijebit emo pseudoklasu hover, a mijenjat emo boju lijeve granice elementa. ul, li { list-style:none; margin:0px; padding: 0px; } ul li a, ul li a:visited { display:block; text-decoration:none; margin:1px; padding:2px 0px 2px 5px; width:120px; color:#336; font-weight:bold; border-left:6px solid #336; } /* dinamiki efekt za izbornik */ ul li a:hover { text-decoration:none; margin:1px; border-left:6px solid #ccf; } ul ul li a, ul ul li a:visited { display:block; text-decoration:none;

margin:1px 1px 1px 15px; padding:2px 0px 2px 5px; width:108px; color:#336; font-weight:bold; border-left:4px solid #336; } /* dinamiki efekt za podizbornik */ ul ul li a:hover { text-decoration:none; margin:1px; border-left:4px solid #ccf; } Dodavanjem ovih klasa dobili smo konaan prikaz u kojem se linkovi mijenjaju kako prelazimo miem preko njih.

5. CSS TABOVI
U ovoj e lekciji biti zorno prikazan i potanko objanjen jednostavan nain izrade navigacijskih elemenata koji bi kao jedinstvena navigacijska cjelina ili sustav trebali podsjeati na jahae, odnosno "tabove", kako im je danas uvrijeeno ime, uvezeno iz suvremenog internetskog jezika. Krajnji cilj je doi do sljedeeg sustava za navigaciju. Jahai su ve due vrijeme jedno od eih rjeenja internetske navigacije. Iako se danas, dakako, moe pronai cijeli niz sloenih rjeenja njihove izrade, meu kojima su naroito popularna ona koja kombiniraju CSS i grafike elemente, u ovoj je lekciji prikazana uporaba iskljuivo CSS-a. Valja posebno napomenuti da je ovakav pristup izabran ne samo zbog jednostavnosti ve i radi potpuno jednakog prikaza u web preglednicima koji podravaju CSS, to se esto ne postie kod primjene sloenih rjeenja.

5.1. Prvi korak

Osnovu naeg rjeenja ini nesortiran popis linkova - koriste se <ul> i <li> tagovi <ul> <li><a href="1korak.html">1. korak</a></li> <li><a href="2korak.html">2. korak</a></li> <li><a href="3korak.html">3. korak</a></li> <li><a href="4korak.html">4. korak</a></li> <li><a href="5korak.html">5. korak</a></li> </ul> koja u prikazu daje linkove nanizane jedan ispod drugog.

1. korak 2. korak 3. korak 4. korak 5. korak

Da bi se linkovi prikazali jedan do drugog, uvodi se novi selektor:

#jahaci li { display:inline; /*postavlja popis u redak*/ } koji se dodaje na nesortiran popis: <ul id="jahaci"> <li><a href="1korak.html">1. korak</a></li> <li><a href="2korak.html">2. korak</a></li> <li><a href="3korak.html">3. korak</a></li> <li><a href="4korak.html">4. korak</a></li> <li><a href="5korak.html">5. korak</a></li> </ul> ime se u prikazu dobije eljeni raspored linkova.

5.2. Drugi korak

U ovom koraku linkovima se dodaje pozicioniranje (smjetanje), boja znakova te crta koja se koristi za razgranienje od sadraja. Smjetanje se uspostavlja marginama i odmacima, a kao crta irine 2 piksela upotrebljava se donja granica nesortiranog popisa. #jahaci { color:#000; /* linija razgranienja od sadraja */ border-bottom:2px solid #455372; margin-top:50px; margin-right:0px; margin-bottom:0px; margin-left:0px;

padding:1px; padding-left:30px; } U samom kodu popisa i dalje nije potrebno vriti bilo kakve promjene jer je cijela uputa definirana implicitno putem id-a nesortiranog popisa: <ul id="jahaci"> <li><a href="1korak.html">1. korak</a></li> <li><a href="2korak.html">2. korak</a></li> <li><a href="3korak.html">3. korak</a></li> <li><a href="4korak.html">4. korak</a></li> <li><a href="5korak.html">5. korak</a></li> </ul> ime se u prikazu dobije linija s linkovima poredanim jedan do drugog.

5.3. Trei korak

Izgled pojedinog jahaa uspostavlja se CSS uputom izvedenom grupiranjem. Jedan jaha prikazuje jedan link, a izgled se moe prilagoditi uporabom #jahaci li a selektora. #jahaci li a { color:#000; background:#d9dbe1; /*okvir jahaa*/ border:2px solid #455372; padding:3px 5px 1px 5px; margin:0px;

/*bez podcrtavanja*/ text-decoration:none; } Ovako definirana CSS uputa rezultira konanim izgledom jahaa. U sljedeem koraku preostaje dodati dinamiku promjene izgleda linka CSS uputi i zavriti sustav.

5.4. etvrti korak

Dinamika promjene izgleda linka pripada kategoriji kojoj je vano posvetiti posebnu pozornost. Naime, osim same atraktivnosti kojoj se obino tei, promjena izgleda ima i funkcionalan znaaj jer korisniku olakava izbor mjesta na koje se moe kliknuti. Primjenu dinamikih elemenata na linkovima, kao i u prethodnom primjeru, postiemo upotrebom pseudoklasa active i hover - kako bismo promijenili izgled linka bilo klikom, bilo prelaskom mia preko linka. #jahaci li a:hover { border-bottom:2px solid white; background-color:#eee; color:#455372; } #jahaci li a:active { color:#c00; } Rezultat primjene pseudoklase vidljiv je ako miem prelazimo preko linkova.

5.5. Peti korak

Za kraj je potrebno dodati efekt koji boju pozadine na aktivnom jahau ini jednakom boji stranice. To se postie upotrebom jo jedne CSS klase: #jahaci li a.aktivni { color:#000; background:#fff; border-bottom:2px solid white; } Ova klasa se dodaje na link koji pokazuje na trenutnu stranicu (u naem primjeru na peti korak). <ul id="jahaci"> <li><a href="1korak.html">1. korak</a></li> <li><a href="2korak.html">2. korak</a></li> <li><a href="3korak.html">3. korak</a></li> <li><a href="4korak.html">4. korak</a></li> <li><a class="aktivni" href="5korak.html"> 5. korak</a></li> </ul> Konaan izgled navigacije:

Cjelokupna CSS uputa:

#jahaci { color:#000; border-bottom:2px solid #455372; margin-top:50px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding:1px; padding-left:30px; } #jahaci li { display:inline; } #jahaci li a { color:#000; background:#d9dbe1; border:2px solid #455372; padding:3px 5px 1px 5px; margin:0px; text-decoration:none; } #jahaci li a:hover { border-bottom:2px solid white; background-color:#eee; color:#455372; } #jahaci li a:active { color:#c00; } #jahaci li a.aktivni { color:#000; background:#fff; border-bottom:2px solid white; }

6. OKOMITI GRAFOVI
Koristei slian nain prikaza popisa kao to je onaj prezentiran u prethodnoj lekciji, moemo postii prezentaciju okomitih grafova. Prvo emo definirati okvir za prikaz grafa. Graf prikazujemo u sloju koji je definiran sljedeim stilom:
#graf { color:#fff; background:url(images/graph_back.gif); background-position:bottom; width:330px; height:180px; border:1px solid #000; padding:0px; margin:0px; margin-left:40px; position:relative; }

Pozadina sloja definirana je sliicom veliine 1x10 piksela. Na vrhu sliice, inae svijetlo sive boje, nalazi se jedan piksel tamne boje. Koristei ovakvu sliicu za pozadinu, nizanjem dobijemo izgled linija udaljenih 10 piksela. Ovdje je ta prikazana sliica uveana etiri puta:

Izgled okvira za graf moete vidjeti na sljedeem prikazu:

Trake grafa definiramo kao popis s vrijednostima. Popis je definiran sljedeim CSS-om:
#graf ul { width:330px; height:180px; padding:0px; margin:0px; } #graf ul li { position:absolute; text-align:center; background-color:#333366; padding:0px; margin:0px; width:30px; height:100px; list-style-type:none; bottom:0px; }

Primjeujete sljedee:

elementi popisa #graf ul li definirani su apsolutnim poloajem. Tako smo postigli fleksibilnost pomicanja, jer svakom pojedinom elementu popisa moemo odrediti zaseban poloaj. text-align ima vrijednost center, tako da se brojke nau na sredini trake. background-color postavlja boju trake. margin definira poloaj - u ovom sluaju odmak ulijevo. bottom - pozicionira (smjeta) trake na dno okvira u kojem se nalazi popis.

Osim dodavanja samog popisa u HTML kd, potrebno je postaviti poloaj, te definirati visinu pojedine trake. To radimo sljedeim kodom:

<ul id="graf"> <li style="left:30px;height:100px">100</li> <li style="left:90px;height:80px">80</li> <li style="left:150px;height:60px">60</li> <li style="left:210px;height:120px">120</li> <li style="left:270px;height:90px">90</li> </ul>

U linijskom stilu dodano je svojstvo left, ime se postavlja pomak od lijeve granice sloja, i svojstvo height, kojim se definira visina pojedine trake. Visina u pikselima odgovara njenoj vrijednosti. Konaan izgled grafa je: