KASKADNI STILOVI (CSS)

Cascading Style Sheets

CSSomoguava razdvajanje izgleda web stranice od njenog sadrajapomou CSS-a odreujemo kako e se prikazivati pojedini element straniceomoguava dizajniranje itavog site-a i znatnu utedu vremena potrebnog za odravanje sitea.

pojavili su se 1996. g. (CSS1), a druga inaica 1998. g. (CSS2)objavio ih je W3C - konzorcij koji se bavi standardizacijom Internet tehnologijaW3C engl. World Wide Web Consortiummoe se dogoditi da koji preglednik ne podrava sva CSS svojstva (provjera!)

SPREMANJE CSS-aizvan HTML dokumenta (external style sheets) To nam omoguuje da promjenom stila na jednom jedinom mjestu promijenimo prikaz po cijelom siteu! Ovom metodom sve stilove spremamo u zaseban CSS dokument obinu tekst datoteku s .css nastavkom koju snimamo npr. u root direktorij u kojem se nalazi i na homepage (index.html).U njoj emo definirati sva CSS pravila koja nam trebaju na siteu i nazvati file npr. mojstil.css

Eksterni .css file treba povezati s HTML dokumentom. To se radi uglavnom pomou taga u sekciji: Naslov stranice

unutar taga HTML dokumenta (embedded, document-level style sheets) - CSS definiramo unutar specijalnog taga: Naslov stranice P { font-size: large; color: red }

unutar samog HTML taga (inline styles) Stilove moemo umetati u gotovo svaki HTML tag pomou atributa style i direktnog specificiranja stila na sljedei nain: Neki tekst odlomka prikazan velikim slovima i crvenom bojom

Sintaksa CSS-aOsnovna CSS sintaksa: selektor {stil: vrijednost }selektor { ime-stila1: vrijednost1; ime-stila2: vrijednost1 vrijednost2 } Selektor definira kojem HTML tagu elite dodati CSS stil i u vitiastoj zagradi odreujete kako e taj stil izgledati. Stil odreujete tako da naznaite ime stila i dodijelite mu vrijednost (stil i njegovu vrijednost odvajate dvotokom).

sintaksa CSS-aAko definirate vie stilova, odvajate ih toka-zarezom. Toka-zarez ne pie se iza posljednjeg navedenog stila. Jednom stilu moete dodijeliti vie vrijednosti i tada ih samo navodite bez interpunkcija.TABLE { background-color: white; border: 2px solid gray }

Nizanje selektora Jedan te isti stil moemo primijeniti na nekoliko selektora pri emu selektore odvajamo zarezom (HTML tagove) : H1, H2, H3 { color: blue; text-align: center } Svi naslovi sadrani u tagovima H1, H2 i H3 bit e plavi i centrirani. Svaki put kad isti skup stilova elite primijeniti na nekoliko razliitih tagova, koristite nizanje selektora.

Kontekstualni selektori CSS omoguuje da odreene stilove primijenite samo kad se neki HTML tag nalazi u odreenom kontekstu, tj. u odreenoj okolini Zamislite da elite sadraj u italic tagu obojan zelenom bojom, ali samo u naslovima. Tada biste napisali sljedei stil: H1 I { color: green } (nema zareza izmeu!)

Kontekstualne selektore moete kombinirati s nizanjem: H1 I, H2 I, H3 I { color: green; font-weight: bold } Svaki italic tekst unutar H1, H2 i H3 naslova bit e zelen i podebljan.

CSS klaseKlasa predstavlja skup CSS pravila klasu u HTML dokumentu pozivamo pomou class atributa.

Generike klase nije vezana za pojedini HTML tag i moe se upotrebljavati na neogranienom broju lokacija unutar HTML dokumenta. Definiramo je proizvoljnim imenom kojemu prethodi toka: .zeleno { color: green } Generiku klasu pozivate pomou class atributa: Ovo je primjer linka

Klase specifine za pojedine HTML tagove Odreenu klasu moemo vezati uz pojedini HTML tag. U tom sluaju ispred toke navodimo tag na koji e se klasa primjenjivati: P.zeleno { color: green } Ovime smo definirali klasu zeleno i dodijelili klasu HTML tagu . Svaki put kad elite neki odlomak obojati zeleno, trebat emo unutar HTML dokumenta pozvati klasu na sljedei nain: Zeleni tekst paragrafa

Pseudo-klasePseudo-klase vam omoguuju da definirate izgled pojedinih HTML tagova u odreenim stanjima. Pseudo-klase se (umjesto tokom) od HTML taga odvajaju dvotokom. Pseudo-klase su zasad definirane samo za i tagove (prva linija i prvo slovo odl.): A:link - odreuje izgled neposjeenog linkaA:active - odreuje izgled aktivnog linkaA:visited - odreuje izgled linka kojeg smo ve posjetili

Najkoritenije pseudo-klase su one za tag. Tako moemo odrediti da link ne bude podcrtan i da bude crvene boje:

A:link { text-decoration: none; color: red }

Koritenje ID oznaka kao klasa One se koriste (ID) da bi se odreenom elementu dodijelio specifian stil koji nee imati nijedan drugi element u HTML dokumentu. #crno { color: black } ID oznaku pozivate pomou ID atributa unutar raznih HTML tagova: Ovo je naslov crne boje.

Vrijednosti za CSS stiloveNumerike vrijednostiNumerike vrijednosti zadajemo pomou brojeva koje kombiniramo s razliitim mjernim jedinicama: pixel (px) - point (pt) - pica (pc) - Em (em) - Ex (ex) - Inches (in) millimeters (mm) - centimeters (cm) - percentage (%)Primjer: TABLE { border: 2px }

BojaBoju zadajemo pomou RGB vrijednosti (npr. #000000) ili navoenjem imena boje. Imena poput blue ili green dodijeljena su samo osnovnom setu od 16 boja.

TABLE { background-color: white } daje tablici bijelu pozadinu isto kao i TABLE { background-color: #FFFFFF }

URL URL se zadaje drukije nego u HTML standardu. Primjer: .pozadina { background-image: url(poz.gif) }

STILOVIPostoji nekoliko desetaka razliitih stilova koji kontroliraju prikaz HTML dokumenta. Sve stilove grupiramo prema tome kakav prikaz kontroliraju: fontovi, tekst i boje pozadina box i stilovi rubova (borders) liste pozicioniranje

Fontovi, tekst i bojeTekst se moe uljepati nekim novim efektima kao to je visina reda teksta, razmak izmeu slova, rijei i redova, poravnavanje i uvlaenje teksta, te efekti poput podcrtavanja, precrtavanja itd. Primjer definiranja stila teksta unutar jednog taga: P.sirokitext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; font-weight: bold; color: #000000; letter-spacing: 4px }

PozadinaMoemo odrediti boju, pozadinsku sliku, nain prikaza pozadine (fiksirana ili pokretna slika, ponavljanje samo po x- ili y-osi) te ak poziciju pozadine. Primjer klase koja definira sliku kao fiksiranu pozadinu: .pozadina { background-image: url(poz.gif); background-repeat: no-repeat; background-attachment: fixed } Ovako definiranu klasu jednostavno pozovite iz taga li nekog drugog taga: ...

ListeListe su u CSS-u dobile nove efekte, poput mogunosti odreivanja neke gif sliice koja e se prikazivati umjesto bulleta. Primjer liste koja umjesto toke koristi neku sliku: UL { list-style-image: url(bullet1.gif) }

PozicioniranjePadding je razmak izmeu elementa i ruba (bordera). Margin je vrijednost koja odreuje razmak izmeu elemenata u HTML dokumentu. Kad nekom elementu odredite marginu, vi zapravo poveavate prostor koji taj element zauzima i dodajete mu nevidljivi rub (na slici je taj nevidljivi rub izraen veim iscrtkanim pravokutnikom).

Rubovi (borders)Do sada smo u standardnom HTML-u kod rubova (borders) mogli odrediti samo irinu i boju. CSS nam omoguuje da svaki rub (lijevo, desno, gore i dolje) ima vlastita svojstva poput boje, irine i efekta. Posebno su zanimljivi efekti rubova: osim pune crte, sad moemo imati tokasti, isprekidani, dvostruki rub, te jo neke zgodne efekte.Primjer dodavanja zelene pozadine, iscrtkanog ruba i paddinga tekstu: .txtpozadina { background-color: green; padding: 5px; border: 2px dashed }

PRIMJERI STILOVANepodcrtani linkSljedei stil redefinira tag:A { text-decoration: none } Efekt kod prelaska miem preko linkaelite li da vam link dobije npr. crtu i postane zelen, koristite pseudo-klasu: A:hover { text-decoration: underline; color: green }

Tekst s obojanom pozadinomelimo odreenom tekstu dati zelenu pozadinu i proiriti tu pozadinu za 5 pixela. Kreirat emo neku klasu (ovdje je to klasa s imenom .txtpozadina) i pomou taga primijeniti taj stil na odreeni tekst: .txtpozadina { background-color: green; padding: 5px; } Tekst sa zelenom pozadinom irokom 5 pixela!Evo kako ubaciti ovaj predefinirani stil u HTML: Tekst sa zelenom pozadinom irokom 5 pixela!