CSS (kaskadne sheme stilova po našem :-) )Stilovi su usvojni od strane W3C u psoincu 1996 i predstavljaju novi način za kontrolu prikaza Web stranica. Nastao je sa ciljem proširivanja HTML-a bez dodavanja novih elemenata i atributa. Microsoft je prvi kreirao sheme,stilove nalik na stilove u tekst editoru Word, i omogućio razdvajanje sadržaja i prezentacije. Odmah potom W3C je usvojio CSS (Cascading Style Sheets) kao deo HTML standarda i omogućio jednostavno unapređivanje Web dokumenata. Sheme stilova su rešile veliki problem prezentacije informacija. Koristeći sheme definiramo dizajn cjelokupne Web prezentacije umjesto da svaku stranu pojedinačno mjenjamo. Promjena izgleda Web prezentacije je jednostvna pošto mjenjamo samo sheme stilova. Kaskadne sheme stilova CSS specifikacija se mora poštivati više nego HTML. Web čitači mogu da oproste ukoliko nepoštujete pravila vezana za hijerarhiju HTML-a dok u okviru CSS morate bolje rezumjeti logičku hijerarhiju elemenata na stranici. Npr. imamo sljedeći raspored elemenata i neka smo definirali izgled za svaki od njih: <body> <p> <i> pokušaj </i> pažljivo </p> da čitaš. </body> Elemenat "italic" (<i> tag) nasljeđuje sve definirane stilove od paragrafa (<p> tag) plus primjenjuje svoje. Ukoliko posjeduju iste definicije sa različitim vrijednostima, usvaja se zadnja. Paragraf (<p> tag) nasljeđuje sve od "body" (<body> tag) elementa. Znači i "italic" (<i> tag) element posjeduje definiciju stila od body (<body> tag) elementa. CSS i Web čitači CSS nije podržan u potpunosti od strane Web čitača, djelomice zbog kašnjenja specifikacije a djelomice zbog propusta u kreiranju Web čitača. Najpopularnije verzije Web čitača npr. Netscape Navigator 4.x i Internet Explorer 5.0 posjeduju lošu podršku za CSS dok novije verzije kao što su Netscape 6 i Internet Explorer6.0 Opera,FIREFOX posjeduju dobru podršku za CSS. Ova loša strana otežava kreiranje stilova za sve Web čitače, pošto u jednom isti CSS izgleda dobro u drugom loše. Neke Web stranice koriste JavaScript kako bi se servirao CSS za različite Web čitače, ali nije preporučljivo pošto negira sam razlog postojanja CSS-a. Stariji čitači ne podržavaju CSS, može se reći da treba kreirati stranice da se ne oslanjaju u potpunosti na stilove, ali opet dolazimo na sami početak. Ukoliko koristite starije Web čitače odmah preuzmite nove! Kako izgledaju sheme stilova? Sheme stilova su kreirane od pravila koja izgledaju kao npr: H3 { Svako pravilo počinje sa selektorom u prethodnom primjeru to je H3 . Selektor je jedan od HTML elemenata (tagova). Poslije selektora sljedi deklaracija osobina CSS koje manipuliraju stilovima sa vrijednostima. Deklaracija se navodi u okviru vitičastih zagrada { } a razdvajaju se sa ; točka-zarez. Nazive klasa pišite malim slovima. Npr. deklaracija "font-style: italic; se odnosi na osobinu "font-style" stil fonta koja posjeduje vrijednost "italic". Kompletna definicija prethodnog CSS pravila govori da se svaki <H3> HTML tag u okviru Web dokumenta posjeduje Arial iskošene (italic) fontove sa zelenom bojom. Mogu se koristi klase ( class ) kao selektori koji se ne odnose na HTML elemente, tj. prethodni primjer može da bude: .greenitalic { Naziv klase greenitalic ne znači ništa određeno, nazivi klasa sami definitate i nesmiju da posjeduju razmake (whitespace) i donje crtice _ ( underscores). Nazive treba birati prema funkciji a ne prema izgledu. Npr. ako kod prethodno definirane klase greenitalic promjeni izgled (stil) sa iskošenih slova na naglašena (bold) naziv gubi smisao. Trebao bi npr. da se naziva HTMLCODE ukoliko se odnosi na izgled sadržaja koji nosi kod HTML-a. Da bi se klasa primjenila na neki od HTML tagova, potrebno je da se koristi CLASS atribut u HTML-u npr. <H3 CLASS="greenitalic">Ovo je zeleno pa još iskošeno<H3> Primetite da se u okviru naziva klase koristi točka ispred dok u okviru HTML elementa koji se refencira na dati stil nema točke. Selektor može da ima više klasa, i pri tome se koristi taoka za razdvajanje kako bi se omogućilo da isti element posjeduje različite stilove. Npr. programski kod u okviru sadržaja Web dokumenta posjeduje različite boje u ovisnosti od jezika: code.html { color: #191970 } U prethodnom primjeru kreirali smo dvije klase za korišćenje sa HTML elementom CODE. Pomoću CLASS atribut korišćen u HTML-u navodimo koja se klasa se kada primjenjuje nad CODE elementom. Postoji i još jedan način navođenja stilova tj. individualno pridruživanje, koji ne preporučuvamo a referncira se preko ID atributa HTML elemenata, npr: #htmlcode { Prethodno pravilo se odnosi na sve elemente koji poseduje ID: htmlcode <p ID="htmlcode">Ovo je zeleno pa još iskošeno, a gdje je kod<p> Kontekst selektori su jedan ili više selektora razdovjenih razmakom, koji omogućavaju primjenu kaskadnog pravila: P STRONG { background: yellow } Ovo pravilo govori da svaki naglašeni tekst (STRONG) u okviru paragrafa (P) treba da posjeduje žutu boju kao boju pozadine. Ukoliko se STRONG element nalazi npr. u okviru naslova H3, dato pravilo se ne primjenjuje. Korištenje CSS-a Prvo pitanje koje se postvlja pri upotrebi CSS-a na Web stranicama: Gdje da postavimo stilove u okviru stranice? . Postoje tri osnovna rješenja koja omogućavaju veliku fleksibilnost:
STYLE atribut Najjednostavniji je prvi način, ali nije preporučljiv pošto opet dolazimo do onog starog FONT taga, prilikom promene sheme morate mjenjati opet sve strane. U okviru skoro svakog HTML elementa možete postaviti atribut STYLE i navoditi CSS pravila u okviru vrijednosti atributa: <p style="font-size: 16pt"> Možete postaviti više takvih pravila razdvajajući sa točka-zarez ; bez obzira na redoslijed. <p style="font-size: 16pt;color: #FF0000"> Korištenjem STYLE atributa kod HTML elemenata lišavate se prednosti razdvajanja sadržaja od prezentacije. STYLE Element Stilovi se mogu jednostavno ubaciti u Web dokument korištenjem STYLE elementa koji se nalazi u okviru HEAD elementa u HTML-u: <style type="text/css"> Po HTML4 specifikaciji ukjučen je i atribut MEDIA u okviru STYLE taga za određivanje medija na koji se stil primjenjuje. Atribut MEDIA ima slledeće vrijednosti:
Atribut MEDIA omogućava definiranje različitih stilova za različite medije, pogodni su priliko definiranja stranica koje su samo npr. za tiskanje itd. Pomoću atributa TYPE navodi se MIME tip za sheme stilova. Možete stilove definirati i u okviru SCRIPT elementa ako navedete MIME type. <script type="text/css"> Prethodni primjer je identičan sa <body style="font-size: 16pt"> ali se odmah uočava razlika u održavanju, pošto sve stilove možete definirati na vrhu strane. I ovaj način se ne preporučuje pošto se dati blokovi samo odnose na Web dokument koji ga sadrži. Preporuka je korištenje eksternih CSS dokumenta. Eksterni CSS dokumenti Treći pristup podrazumeva korištenje CSS u jednom ili više zasebnih dokumenata stilova koji primenjuju svoja pravila na stranice koja ih referencira tj. uključuje. Jedan Web dokument može da poseduje više referenci na različite dokumente. <link type="text/css" href="http://mojWeb/stylesheet.css"> Dokument stilova je identičan sa blokovima stilova i sadrži jedan ili više definiranih blokova npr. stylesheet.css može da izgleda: body { font-size: 16pt } .htmlcode { Prednosti ovog načina uključivanja stilova u Web dokument je velika, zamislite samo da sve stranice referenciraju datu eksternu shemu stilova i da promjenom veličine fonta u toj shemi mjenjate izgled kompletne Web prezentaciji za manje od minut. Div i span Kako bi se omogućila veća fleksibilnost izrade dizajna Web stranica u okviru xHTML specifikacije dodana su dva nova taga DIV i SPAN, za rad sa stilovima. Razlika između DIV i SPAN elementa ako se može primjetiti u okviru prethodnog primjera se nalazi u tome da se DIV koristi kod primjene stilova na HTML blokove više redova sa prekidima a element SPAN koristi za "inline" HTML tj. u slučaju kada je potrebno primjeniti stil na jedan red(linije) ili manji dio reda. CSS komentari Komentari u CSS-u su po konvenciji koja se koristi u programaskom jeziku C, znači blok komentra izgleda: /* I naravno sa (//) je komentar u okviru jedne linije. // CSS Komentar u okviru jedne linije |
|