CSS

Published on January 2017 | Categories: Documents | Downloads: 77 | Comments: 0 | Views: 650
of 34
Download PDF   Embed   Report

Comments

Content

Stranica |1

Kaskadni uzorci stilova - CSS

1. Uvod u CSS
1.1 Što je CSS?
CSS je skradenica za „Cascading Style Sheets“. CSS je stilski jezik i koristi se kako bi se dodao neki stil HTML elementu. Kako se web razvijao, prvotno su u HTML ubacivani elementi za definiciju prezentacije (<font> tag itd.), ali je dovoljno brzo uviđena potreba za stilskim jezikom koji de HTML osloboditi potrebe prikazivanja sadržaja (što je prvenstvena namjena HTML-a) i njegovog oblikovanja (čemu nam danas služi CSS). Drugim riječima, stil definira kako prikazati HTML elemente. CSS-om se uređuje sam izgled i raspored stranice. Prednost CSS-a je što se može primjeniti na više stranica.

1.2 Povijest CSS-a
CSS je osmislio Hakon Wium Lie, 1994. godine, profesora na MITu u Sjedinjenim Američkim Državama. U svibnju 1998. godine objavljen je “CSS level 2”, odnosno CSS2. On je zadržao prethodne mogudnosti iz CSS1 i uključio mnoge druge kao što su apsolutno, relativno i fiksno pozicioniranje elemenata, z-index kao i nova svojstva za font kao što je sjena. Trenutni CSS standard preporučen od je od strane „World Wide Web Consortium-a“ i objavljen u prosincu 1996. godine. Taj prvobitni CSS naziva se „CSS level 1“, odnosno CSS1. Među mogudnostima CSS1 su: - oblikovanje za font, tip i velicina, boja teksta i pozadine. - atributi teksta kao što su razmaci između riječi, slova i linija u tekstu. - poravnanje teksta, slika, tablica i drugih elemenata. - margine, granice (eng. border), padding i pozicioniranje za mnoge elemente. strane W3C jeste „CSS level 2 revision 1“, odnosno CSS2.1, kojim su popravljene neke greške iz prethodne verzije. Trenutno je u razvoju CSS3 tehnologija koja zadržava postojeda svojstva iz prethodne verzije ali dodaje nove poput novih selektora, granica, pozadina, integracije korisnika, vertikalnog teksta, govora i drugih.

Stranica |2

2. Osnovna sintaksa XHTML-a i CSS-a
2.1 XHTML sintaksa
Potrebno je osnovno znanje XHTML sintakse kako bi se CSS uvezao sa elementima XHTML koda. Na primjer: <div class:“prvi“> Neki tekst </div> Dakle, elementu DIV dodan je atribut CLASS sa vrijednosti PRVI koja de oblikovati sve ono što se nalazi u DIV elementu.

2.2 CSS sintaksa
Sintaksa CSS-a bit de objašnjena na primjeru tipičnog CSS stila. Oblikujmo „p“ element koji je zadan u poglavlju 2.1. .prvi{color: #000; font-size: 12px;} „prvi“ se naziva selektor i on opisuje koji de elementi biti selektirani u dokumentu, koji de imati opisani stil. U ovom slučaju na sve p elemente odnosit de se navedena pravila stiliranja. „color“ i „font-size“ nazivaju se svojstva i opisuju aspekt prezentacije p taga. „#000“ i „12px“ vrijednosti su svojstava. Svojstva i vrijednosti uvijek se odvojeni dvotočkom. Na kraju se stavlja točka-zarez i takva forma naziva se deklaracija. Sve navedeno između vitičastih zagrada naziva se deklaracijski blok. Selektor skupa sa deklaracijskim blokom naziva se pravilo. Deklaracija

Svojstvo

Vrijednost Svojstvo

Vrijednost

.prvi { color: #000; font-size: 18px; }

Selektor

Deklaracijski blok

Pravilo

Stranica |3

Sada kad je definirano pravilo za CLASS prvi, sadržaj u okviru DIV elementa iz poglavlja 2.1 izgledat de ovako:

Neki tekst
3. Uvezivanje CSS-a i HTML-a
3.1 Umetnuti CSS
Umetnuti CSS onaj je CSS koji se piše unutar samog HTML dokumenta. Piše se unutar <style></style> tagova, točnije <style type=“text/css“></style>. TYPE atribut potreban je da bi se znalo o kakvom tipu stila se zapravo radi. Pa bi jedan HTML dokument sa umetnutim CSS stilom izgledao ovako. <html> <style type=“text/css“> prvi{color: #000; font-size: 12px;} </style> <body> <div class:“prvi“> Neki tekst </div> </body> </html> Još jedan način davanja CSS-a elementima jeste upotrebom „style“ atributa pa tako DIV-u možemo dodati stil na sljededi način <div style=“color:#000; font-size:12px;“> Neki tekst </div> Rezultat de biti isti kao u prethodnom primjeru.

3.2 Uvezivanje sa vanjskom CSS datotekom
CSS kod mogude je napisati i u odvojenoj CSS datoteci sa ekstenzijom „.css“ i istu uvezati sa HTML dokumentom. Takvo što postiže se dodavanjem <link> elementa u <head></head> tagu. Link element pravi link iz HTML dokumenta do neke druge lokacije, u ovom slučaju do CSS dokumenta. Link element ima i neke atribute potrebne da bi se odredio odnos, tip i izvor dokumenta na koji se veže. Ti atributi su REL (eng. relationship) i ono opisuje odnos HTML dokumenta i onoga na što se linka. Atribut TYPE određuje o kakvom tipu dokumenta se radi, dok atribut HREF pokazuje put do dokumenta na koji se linka. Primjerice nek se HTML i CSS dokumenti nalaze u istom direktoriju. Primjer HTML dokumenta uvezanog sa vanjskom CSS datotekom naziva „style.css“ izgledao bi ovako:

Stranica |4

<html> <head> <link rel=“sytlesheet“ type=“text/css“ href=“style.css“> </head> <body> <div class:“prvi“> Neki tekst </div> </body> </html> A sadržaj style.css datoteke bio bi sljededi: prvi{ color: #000; font-size: 12px; } Prednost ovakvog uvezivanja jeste što su sva CSS pravila za oblikovanje sadržana u jednoj datoteci a ne unutar HTML koda, što naknadne izmjene čini jednostavnijima. Naravno dodavanjem drugog i tredeg LINK elementa mogude je uvezati dvije, tri pa i više CSS datoteka na jedan HTML dokument. Ovakav način omogudava da jedan CSS dokument vodi računa o rasporedu HTML elemenata na stranici, a drugo se brine o fontu, listama i drugim elementima. Također je mogude kombinirati oba tipa uvezivanja, tako da neka CSS pravila budu sadržana u samom HTML dokumentu a druga pak u zasebnom CSS dokumentu.

3.3 Imported CSS ili „uvezeni“ CSS
Ovaj način uvezivanja HTML i CSS dokumenta vrlo je rijedak, a njegova sintaksa je sljededa: @import url(); URL ekvivalent je HREF atributu u LINK elementu. Navedena sintakda dodaje se unutar <style></style> taga pa bi HTML dokument izgledao ovako: <html> <head> <style type=“text/css“> @import url(syle.css); </style> </head>

Stranica |5

<body> <div class:“prvi“> Neki tekst </div> </body> </html> Pošto je ovo umetnuti CSS, pored @import url(); sintakse mogude je dodati i druga CSS pravila kao u poglavlju 3.1. Važno je da se @import sintaksa stavi prije svih drugih CSS pravila, jer bi neki web preglednici mogli zanemariti @import sintaksu. Rezultat sve tri vrste uvezivanja navedene u poglavlju 3 bit de isti.

4. Selektori i HTML i CSS elementi
4.1 Class selektori
Class selektori dopuštaju da se asocira neka klasa sa svojim svojstvima i HTML element. Ako se želi da samo neki paragrafi imaju, na primjer, plava slova korsitit de se CLASS selektor. To bi se učinilo na sljededi način. p.plavo{ color: blue; } a HTML za paragraf bi izgledao ovako <p class=“plavo“>Plavi tekst</p> Rezultat bi bio sljededi Plavi tekst Class selektor radi na taj način da nakon što se odabere tag doda se točka „.“ pa naziv klase. Važno je redi da je odabit taga proizvoljan, tj. moglo se napisati samo .plavo{ color: blue; } I s tim pravilom rezultat bi bio isti. Ovo pravilo napisano bez taga „p“ može se vezati uz svaki element dodavanjem class=“plavo“ atributa. No ako imamo neki tag vezan uz naziv klase, u ovom slučaju „p“ ta klasa važit de samo za „p“ tagove.

Stranica |6

4.2 ID selektori
ID selektori rade gotovo isto kao i CLASS selektori, ali mogu se koristiti na samo jednom elementu po stranici. Sintaksa se gotovo ista kao kod CLASS selektora samo umjeto točke, koriste se ljestve „#“. Na primjer ako imamo CSS pravilo p#plavo{ color: blue; } HTML kod de izgledati <p id=“plavo“>Plavi tekst</p> Rezultat de biti isti kao i kod CLASS selektora. Također kao i kod CLASS selektora ID selektor može se pisati i bez taga i dobit de se isti rezultat kao i da je on napisan. Isto ID pravilo može se koristiti više puta na istoj stranici, ali nije preporučeno. U tu svrhu bi se trebali koristiti samo CLASS selektori. ID selektori uobičajeno se koriste da bi opisali dijelove rasporeda stranice

4. “Potomak“ (descedant) selektori
Kod ovakvih selektora mogude je oblikovatineki tag koji se nalazi u drugom tagu. Drugim riječima ovakvi selektori naglašavaju da se pravilo koristi samo ako je element o kojem se radi potomak drugog elementa koji je naglašen. Na primjeru de se vidjeti kako to zapravo radi. Ako imamo HTML kod <p> neki tekst <em> drugi tekst </em> </p> I želimo oblikovati <em> tag tako da mu boja slova bude plava, descendant selektor nam to omogudava. CSS pravilo glasilo bi p em {color: blue;} a rezultat bi bio sljededi neki tekst drugi tekst Plava slova su ukošena jer <em> tag na taj način nagčašava sadržaj koji se u njemu nalazi. Ako se <em> tag doda nekom drugom elementu on de također biti naglašen, ali alova nede biti obojena u plavo jer u tom slučaju <em> tag nije potomek <p> taga. Ovakvi selektori vrlo su korisni kod izrade kompleksnijih stranica, tako ako je osoba dobro upoznata sa selektorima u CSS-u može si uvelike olakšati rad. Naprimjer može redi da sva slova u tablicama imaju žutu pozadinu, dok sva ostala na stranici nemaju.

Stranica |7

4.4 Grupiranje selektora
Ovo je vrlo korisna tehnika kod rada sa kompliciranim stranicama i omogudava grupiranje selektora, tako da se jedna deklaracija može koristiti na više elemenata na stranici. Na primjer želimo da h1, h2, h3 eleemnti budu poravtani lijevo i budu bold. Da ne bi morali pisati pravilo za svaki od njih, CSS omogudava da ih se grupira sve u jedno pravilo. h1, h2, h3 {text-align:left; font-weight:bold;} Sve što je potrebno jeste da se anzivi elemenata odvoje zarezom. Također je mogude grupirati ID i CLASS selektore u isto pravilo. h1#naslov, p.plavo{color:blue;} Ovime su opisani ID naslov u <h1> tagu i CLASS u <p> tagu i u oba slučaja slova su ispisana plavom bojom.

4.5 Tipovi HTML i CSS elemenata
Dvije su vrste HTML elemenata. To su „block“ elementi kao što je <div> i oni su poredani vertikalno i „inline“ elementi kao sto je <span> koji su poredani horizontalno. Da bi se još više pojednostavilo pisanje HTML koda CSS ima svojstvo pod nazivom „display“ koji može imati više vrijednosti, ali najvažnija dva su upravo „block“ i „inline“ koji sadržaj prikazuju vertikalno, odnosno horizontalno. Neke druge vrijednosti koje se često pojavljuju su „none“ i „inherit“. Dodavanjem „none“ vrijednosti elementu, on nede biti prikazan, a dodavanjem „inherit“ vrijednosti elementu on de nasljediti vrijednost roditelja ma koja ona bila.

4.5.1 DIV tag <div> tag način je davanja strukture HTML dokumentu. To je „block“ element i dodan sam po sebi nede uopde promjeniti izgled stranice. No dodavanjem CSS CLASS ili ID selektora može se utjecati na način na koji de se <div > ponašati. Pošto je „block“ element ne može se koristiti kao potomak nekog drugog elementa, ved mora biti sam za sebe. Mogude je oblikovati stranicu isključivo korištenjem <div> tagova i CSS pravila. Na taj način postiže se tzv. „tableless“ dizajn, tj. u samom HTML kodu ne koriste se tablice, kao što je bio slučaj prije i gašenjem CSS dokumenta svi elementi HTML koda bili bi vertikalno poredani jedno ispod drugog. Primjer: <div class=“plavo“>neki tekst</div> Naravno rezultat ovog koda uzevši u obzir CSS pravilo napisano u prethodnim poglavljima bio bi

Stranica |8

neki tekst

4.5.2 Span tag Isto kao i <div> tag, <span> tag način je dodavanja strukture HTML dokumentu, no za razliku od <div> taga <span> tag je „inline“ element, tj. ima horizontalno poravnanje i može se dodati unutar drugih elemenata, poput <p> taga da bi se dodalo CSS pravilo tekstu, slici, listi itd. Valja naglasiti da <span> tag kao i <div> sam po sebi ne mjenja izgled dokumenta, samo dodavanjam CSS pravila njime se može manipulirati. Primjer: <p>neki tekst <span class=“plavo“>opet tekst</span> i opet tekst</p> Rezultat ovog koda bio bi neki tekst opet neki tekst i opet neki tekst

5. Razmještaj (Layout)
5.1 CSS box model
Kada pravimo layout korištenjem css-a, prvo što trebamo znati jeste „Box model“. On nam govori koji dio stranice ide gdje.

Slika 5.1.1 CSS box model [1]

Stranica |9

U središtu slike nalazi se sadržaj, content. To može biti bilo koji element, tekst, slika, forma itd. Prostor između sadržaja i granice, border, naziva se „padding“, a prostor izvan granice koji odvaja sadržaj i granicu od ostalih elemenata na stranici naziva se „margin“. Margin i padding svojstva mogu se koristiti za dodavanja prostora elementima stranice.

5.2 Svojstva granica (borders)
Korištenjem css-a lako je manipulirati granicama elemenata. Tri su osnovne deklaracije za stiliranje granica, to su: border-width: <vrijednost> ; – određuje širinu granice. border-style: <vrijednost> ; – određuje stil granice, npr. puna linija, isprekidana ili točkasta itd. border-color: <vrijednost> ; – određuje boju granice.

Jednostavniji način je korištenje krače sintakse: border: <width> <style> <color> ;

5.3 Svojstva margina
Margine koristimo kako bismo odvojili elemente jedne od drugih, stvorili prostor između njih. Dekleracije za margine u css-u su: margin-top: <vrijednost> ; - dodaje razmak iznad elementa margin-right: <vrijednost> ; - dodaje razmak desno od elementa margin-bottom: <vrijednost> ; - dodaje razmak na dnu elementa margin-left: <vrijednost> ; - dodaje razmak lijevo od elementa

Skračena sintaksa glasi: ili margin: <top> <right> <bottom> <left> ; margin: <vrijednost> ;

U drugom slučaju dodana vrijednost de se odnositi na sve četiri strane elementa, dakle dodat de marginu na svaku stranu jednako. Kada definiramo margine preko css-a važno je znati da vertiklane margine između elemenata „propadaju“ jedna u drugu. Tako na primjer ako imamo element margine 20px iznad drugog elementa margine 10px, gornja margina de „propasti“ u drugu i razmak između elemenata biti de 20px, a ne 30px kako bismo očekivali.

S t r a n i c a | 10

5.4 Svojtva padding-a
Padding se koristi za dodavanja prostora između sadržaja i granice elementa u kojoj se sadržaj nalazi. Isto kao i kod margina može se deklarirati padding svojstvo za svaku od četiri strane elementa. Sintaksa je slična kao kod margin i glasi: padding-top: <vrijednost> ; padding-right: <vrijednost> ; padding-bottom: <vrijednost> ; padding-left: <vrijednost> ;

Skračena sintaksa glasi: padding: <top> <right> <bottom> <left> ;

5.5 Pozicioniranje elemenata
Css omogudava da specificiramo gdje de se točno pojaviti elementi na stranici. Sintaksa za pozicioniranje glasi: position: <static> <relative> <absolute> <fixed>

Slika 5.5.1 Pozicije elemenata [2]

S t r a n i c a | 11

Static je zadana vrijednost i ako se ne specificira neka druga vrijednost, tako de biti prikazana. Sa atributom static element se prikaže ondje gdje bi inače trebao biti prikazan. Relativno pozicioniranje definira poziciju relativnu od one gdje bi se inače nalazila. U slučaju iznad definira se offset, top:20px; koji pomiče element za 20px dolje u odnosu na static ili „normal position“. Absolute pozicioniranje odnosi se na položaj u „containeru“ u kojem se element nalazi. Tako u primjeru gore dodavanjam offseta left:200px; element je pomaknut na poziciju udaljenu 200px od lijeve granice. I ako se ne specificira drukčije taj razmak de uvijek iznositi 200px. Dakle kod absolute pozicioniranja korisnik određuje gdje de se točno element nalaziti, za razliku od relative koji gleda gdje je static element pozicioniran i u odnosu an tu poziciju premješta element u zavisnosti od definiranja offseta. Fixed pozicioniranje radi gotovo isto kao i absolute, samo što ono zadržava svoje mejsto i ne pomide se kad korinsik spušta (scroll) stranicu.

5.5.1 Offset
Svojstva offseta koriste se da bi se odredila udaljenost ruba elementa od nekog drugog elementa. No zapravo nam govori koliko je jedan element udaljen od drugog. Sintaksa glasi: top: <vrijednost>; right: <vrijednost>; bottom: <vrijednost>; left: <vrijednost>;

5.6 Float
Float svojstvo određuje gdje de elementi biti smješteni na stranici kao i način na koji su drugi elementi raspoređeni u odnosu na njega. Ovo svojstvo omogudava kreiranje takozvanih „tableless“ HTML dokumenata, odnosno HTML dokumenata bez upotrebe tablica za razmještaj elemenata na stranici. Sintaksa glasi: float: right; float: left; float:none;

S t r a n i c a | 12

Slika 5.6.1 Primjer bez float:none; svojstva [3]

Na slici iznad korišteno je svojstvo float:none; i kao što se vidi dokument izgleda onako kako bi i trebao. Korištenjem float:none; element zauzima sav potreban prostor i drugi elementi ga ne omoravaju.

Slika 5.6.2 Primjer float:right; svojstva [4]

S t r a n i c a | 13

Na ovoj slici koristi se svojstvo float:right; na slici. Korištenjem ovog svojstva slika je zauzela krajnju desnu poziciju, a svi ostali elementi, u ovom slučaju tekst, su omotani oko slike.

Slika 5.6.3 Primjer float:left; svojstva [5]

Na ovoj slici koristi se svojstvo float:left; na slici. Korištenjem ovog svojstva slika je zauzela krajnju lijevu poziciju, a svi ostali elementi, u ovom slučaju tekst, su omotani oko slike. Ako se dva float elementa nalaze jedan do drugoga sve je dobro dok ima dovoljno prostora između. No ako se stranica suzi elementi se nede preklapati, ved de onaj element koji je drugi u dokumentu spustiti se ispod onoga koji je bio prvi.

5.7 Clear svojstvo
Svojstvo clear kontrolira način na koji su elementi prikazani na stranici. Sintaksa glasi: clear: none; clear: left; clear: right; clear: both;

Standardno postavljano na „none“. Ako je postavljano na „left“ tada se taj element pomide ispod svih onih elemenata koji su pozicionirani lijevo. Isto tako ako je postavljeno na „right“ element se pomide

S t r a n i c a | 14

ispod svih onih elemenata koji su pozicionirani desno. A ako je postavljeno na „both“ element se pomide ispod svih elemenata na stranici.

5.8 Layered presentation (CSS razine elemenata)
CSS omogudava prezentaciju elemenata u više razina. Zapravo omogudava da neki elementi idu preko drugih po Z-osi. Tako su neki elementi „bliži“ korisniku od drugih. Ovakav način prezentacije elemenata radi se korištenjem z-index svojstva. Što z-index svojstvo ima vedu vriejdnost to je element „bliži“ korisniku.

Slika 5.8.1 z-index svojstvo [6]

5.9 Overflow svojstvo
Svojstvo overflow kontrolira način na koji se sadržaj ponaša ako se „prelije“ izvan granica u kojima je smješten. Sintaksa glasi: overflow: visible: overflow: hidden;

S t r a n i c a | 15

-

overflow: scroll; overflow: auto;

Slika 5.9.1 Primjer overflow:visible; svojstva [7]

Na slici se vidi što se dogodi ako se koristi overflow:visible; svojstvo za element koji je vedi od granica koje su mu dodjeljene. Tekst kao i slika izlaze van granica i ulaze u prostor drugih elemenata.

Slika 5.9.2 Primjer overflow:hidden; svojstva [8]

Kada se koristi overflow:hidden; sadržaj zadržava svoj izgled no nije prikazan izvan granica u kojima se nalazi element.

S t r a n i c a | 16

Slika 5.9.3 Primjer overflow:scroll; svojstva [9]

Svojstvo overflow:scroll; dodaje klizajudu traku (scroll bar) po vertikali i horizontali po potrebi.

Slika 5.9.4 Primjer overflow:auto; svojstva [10]

Overvlow:auto; kao i overflow:scroll; dodaje klizajudu traku ali samo onda ako ako za to ima potrebe.

S t r a n i c a | 17

5.10 Vidljivost (visibility)
Svojstvo visibility određuje da li de neki element biti vidljiv ili ne. Sintaksa: visibility: visible; visibility: hidden; visibility: collapse;

Standardno postavljeno na „visible“ svaki element je vidljiv, no ako se postavi na „hidden“, element nede biti vidljiv, ali de izgled stranice ostati nepromjenjen. Dkale element de zadržati visinu, širinu i poziciju koja mu je dodjeljena u CSS-u, ali nede biti vidljiv. Na mjestu tog elementa biti de praznina. Ovo svojstvo ne treba zamjeniti za svojstvom display! Jer ako je ono postavljeno na display:none; element nede biti prikazan a izgled stranice de se izmjeniti zbog nedostatka tog elementa.

6. Boje i pozadina
6.1 Dodavanje boje korištenjem HTML-a

<html> <head><title>Postavljanje boje pozadine korištenjem HTML koda</title></head> <body bgcolor=“#fff“:> <p>Ova stranica ima bijelu pozadinu</p> </body> </html>

U gornjem kodu dodana je bijela boja pozadini stranice. Način na koji je to urađeno korištenjem je aributa „bgcolor“. Ako se želi promjeniti boja u neku drugu, potrebno je izmjeniti vrijednost atributa „bgcolor“. <html> <head><title>Postavljanje boje sasdržaja korištenjem HTML koda</title></head> <body> <p><font color=“#ff0000“> Ovaj sadržaj obojen je u crveno! </font></p> </body> </html>

S t r a n i c a | 18

U ovom kodu dodjejena je boja sadržaju unutar „p“ taga koriptenjem taga „font“ i atributa „color“ koji se odnosi samo na slova. Ovakav način uređivanja sadržaja koristan je ako se radi o jednostavnijim stranicama sa malo sadržaja. No ako stranica ima mnogo sadržaja dodavanje boje svakom sadržaju odnosno elementu dokument bi učinilo velikim i težim za učitavanje korisnicima koji ga žele pregledati. Drugi razlog je i samo uređivanje dokumenta. Dokument de u tom slučaju biti pun „font“ tagova i nede biti nimalo jednostavan za uređivanje, želi li se promjeniti boja nekog elementa stranice. U tu svrhu koriste se vanjske css datoteke u kojima se samo jednom definira neko pravilo i ono se može koristiti na više elemenata, čineči stranicu manjom po veličini i lakšom za učitavanje.

6.2 Dodavanje boje korištenjem CSS-a

body{ background: yellow; }

Na ovakav način korištenjem CSS-a stranica dobija žutu boju, naravno ako se ovakav CSS kod uključi u stranicu. Očito je da je ovakav način definiranja puno lakši i za napisati u prvom redu, ali i za kasnije ako ga je porebno izmjeniti.

p{ color: blue; }

U CSS kodu iznad svi paragrafi HTML koda na koji se on odnosi obojeni su u plavo. Sintaksa „color“ svojstva glasi:

color: <naziv boje na engleskom> color: #rrggbb; color: rgb(rrr ggg bbb); color:rgb(rrr%ggg%bbb%); color:inherit;

Koristi se HTML hex notacija Koriste se vrijednosti 0-255 za svaki parametar Koristi se postotak svake rgb() Nasljeđuje se boja od roditelja

Rrr, ggg i bbb zapravo su mjesta na kojima se dodaju brojevne vrijednosti. Ono se odnosi na „red, green, blue“ miks bilo korištenjem vrijednosti 0-225 ili korištenjem postotaka da bi se dobila željena boja.

S t r a n i c a | 19

/* primjer heksadecimalne notacije */ p{ color:#0000ff; } /* kradi način zapisa */ p{ color:#00f; } /* primjer funkcionalne notacije */ p{ color:rgb(0 0 255); } p{ color:rgb(0% 0% 100%); }

U svim slučajevima paragraf je obojen u plavo, ali metoda dodjele je drugačija. Najčešde korištena medota je heksadecimalna. Dodavanje boje pozadini radi se na isti način kao i dodavanje za elemente korištenjem „backgroungcolor“ svojstva. Sintaksa glasi:

background-color: <naziv boje na engleskom> background-color: #rrggbb; background-color: rgb(rrr ggg bbb); background-color:rgb(rrr%ggg%bbb%); background-color:inherit;

Koristi se HTML hex notacija. Koriste se vrijednosti 0-255 za svaki parametar. Koristi se postotak svake rgb(). Nasljeđuje se boja od roditelja.

6.3 Pozadinske slike
Pozadinska slika može se dodati svakom elementu stranice, kao cijeloj stranici korištenjem „background-image“ svojstva. Sintagsa glasi:

background-image: url(˝<lokacija slike>˝); background-image: none; background-image:inherit;

Dodaje sliku kao pozadinu elementa. Ne dodaje pozadinu. Nasljeđuje pozadinu roditelja.

S t r a n i c a | 20

CSS je u ovom slučaju dodavanja pozadinske slike posebno koristan u odnosu na HTML jer se može odrediti kako de se pozadinska slika ponavljati. Takvo što određuje se svojstvom „backgroundrepeat“. Sintaksa glasi:

background-repeat: repeat; background-repeat:repeat-x; background-repeat:repeat-y; background-repeat:no-repeat; background-repeat:inherit;

Ponavljaj sliku. (Prvobitno postavljeno) Ponavljaj sliku po x-osi, horizontalno. Ponavljaj sliku po y-osi, vertikalno. Ne ponavljaj sliku. Nasljedi pravilo od roditelja.

Još jedna jako korisno korisno svojstvo CSS-a jeste „background-attachement“ koje kontrolira način na koji de se pozadina slizati u odnosu na stranicu. Sintaksa glasi:

background- attachement: scroll; background- attachement:fixed; background- attachement:inherit;

Pozadina klizi skupa sa stranicom. (Prvobitno postavljeno) Pozadina je fiksirana, ne pomiče se sa stranicom. Nasljeđuje pravilo od roditelja.

Korištenjem svojstva „background-positioning“ određuje se gdje se pozadina nalazi na stranici. Sintaksa glasi: background- positioning: <x> <y>; background- positioning: <top | center | bottom | left | right>; Određuje poziciju kao postotak dužine Određuje poziciju ovisno od navedenog svojstva.

Da bi se uštedilo u duljini CSS koda mogude je i krače definirati „background“ svojstvo. Sintaksa glasi:

background: <color> <image> <repeat> <attachement> <positioning>;

S t r a n i c a | 21

7. Tipografija
7.1 Font svojstva

font-family: arial; font-family: verdana, arial, sans-serif;

Primjer teksta u arial formatu Primjer teksta u verdana formatu

Svojstvo font-family dozvoljava odabir formata slova na koja se pravilo odnosi. U prvom redu definiran je format arial dok u drugom redu definiran je primarni format na verdana. No ako računar koji korisnik koristi nema instaliran verdana font, predi de na arial, a ako nema ni arial predi de na bilo koji generički font koji ima instaliran na svom računaru. Vrste generičkih fontova koje je mogude definirati putem CSS-a su:

Sans-serif Serif Cursive Fantasy Monospace

Lakši za čitanje na ekranu. Bolji za printanje. Slično italic fontu. Primarno fontovi za ukrašavanje. Fontovi fiksne širine.

Svojstvo font-style kontrolira da li je tekst „italic“, „oblique“ ili „normal“. Da bi neki tekst bio boldiran, koristi se svojstvo font-weight i njegova sintaksa glasi:

font-weight: normal: font-weight: bold; font-weight: bolder; font-weight: lighter; font-weight: <100-900>;

Vrijednost normal kaže da je tekst normalne „težine“, bolder da je malo „teži“ od svojstva bold, a lighter da je malo „lakši“ od normal. Također mogude je definirati „težinu“ i preko numeričke vrijednosto u rasponu od 100 do 900.

Veličina slova definira se svojstvom font-size. Sintaksa glasi:

S t r a n i c a | 22

font-size:10<pt><px>; font-size:<xx-small, x-small, small, smaller>; font-size:medium; font-size:normal; font-size:<large, x-large, xx-large>; font-size:60%;

Razlika između point veličine i pixel jeste u primjeni. Point se koristi ako se kreira stranica za printanje, a pixel ako se kreira stranica za web prezentaciju. Sve ostale vrijednosti umanjuju, odnosno povedavaju tekst u odnosu na njegovu prvobitnu veličinu. Postotci također, s time da je 100% normalna veličina teksta. CSS-om može se definirati visina prostora u kojem se piše tekst. To se radi korištenjem line-height svojstva. Tako na primjer definira se font-size:10px; i line-hight:14px;. Time se stvara vedi prored između redova teksta. Najčešde se koristi kradi zapis font svojstva. Sintaksa glasi:

font: <style> <weight> <size>/<line-height> <font-family>;

7.2 Upravljanje tekstom korištenjem CSS-a
CSS koristi par svojstava da bi konrtolirao izgled teksta. To su:

text-indent:<vrijednost>px/%

Pomiče prvi red teksta za određenu vrijednost u desno. Ili ako je vrijednost negativna u lijevo.

text-align:left; text-align:right; text-align:center; text-align:justify;

Pomiče tekst u lijevo. Pomiče tekst u desno, Centrira tekst. Tekst zauzima cijeli prostor unutar svojih granica.

S t r a n i c a | 23

text-align:none; text-align:underline; text-align:overline; text-align:sub; text-align:super; text-align:line-through;

Uklanja svaki „ukras“ sa teksta. Tekst podvučen (underline). Crta iznad teksta. Subscript. Superscript. Tekst prekrižen.

text-transformation:none; text-transformation:uppercase; text-transformation:lowercase; text-transformation:capitalize;

Nema transformacije (PrImJeR). Sva slova velika (PRIMJER). Sva slova mala (primjer). Obrnuta slova (pRiMjEr).

8. Linkovi
Korištenjem CSS-a može se oblikovati i izgled linkova korištenjem pseudo klasa. Može se odrediti izgled za običan, neposjeden link, posjeden link, aktivna link i kako se link ponaša kad se preko njega pređe mišem. Sintaksa glasi:

a:link: a:visited: a:hover: a:active: a:focus:

Određuje stil za neposjeden link. Određuje stil za posjeden link. Određuje kako se link ponaša kad se preko njega pređe mišom. Određuje stil aktivnog linka. Element ima fokus (Npr. pisanje u tekst boksu.)

Pseudo klase su zapravo način na koji CSS grupira sve iste elemente da se ne bi svakom zasebno morao definirati stil. Tako pseudo klasa :link pomaže da za svaki link na stranici vriejdi isti stil da se ne bi moralo svakom linku posebno definirati stil. Pseudo klase mogu se korsititi na svim elementima, bio to tekst ili slika.

S t r a n i c a | 24

9. CSS za print
Pored običnog CSS stila, može se definirati i kako de izgledati stranica za printanje. Dva su načina definiranja stila za print. Prvi je u samom CSS-u korištenjem @media svojstva. Postoji desetak definiranih media tipova za CSS, no najčešde korišteni su screen i print. U CSS-u ti izgledalo ovako.

@media print{ p{ font-size:10pt; font-family:“times new roman“, sans; } }

Ovakav kod kaže da ako se stranica printa font paragrafa se printa kao 10pt i kao times new roman ili ako taj nije podržan neki drugi sans font. Drugi način definiranja jeste kreiranje posebno CSS datoteke u kojoj je napisan stil za print stranicu i korištenjem <link> taga povezivanje sa HTML kodom na koji se odnosi. print.css @media print{ p{ font-size:10pt; font-family:“times new roman“, serif; } }

screen.css @media screen{ p{ font-size:10px; font-family:arial, verdana, sans-serif; } }

S t r a n i c a | 25

index.html <html> <head> ... <link href:“screen.css“ rel:“stylesheet“ media:“screen“ /> <link href:“print.css“ rel:“stylesheet“ media:“print“ /> </head> <body>...</body> </html>

Dodavanjem media atributa link tagu postigao se isti efekat kao i korištenjem @media u CSS-u. Glavnoj CSS datoteci, screen.css, vriejdnost media je screen a print CSS datoteci vrijednost je print. Ovo znači da de web preglednik, ako podržava, koristiti screen.css da bi prikazao stranicu, a print.css ako se ista koristi za printanje. 10. Stiliranje tablica korištenjem CSS-a Kao i svaki drugi element korištenjem CSS-a mogude je stilirati i tablice. U sljededem primjeru može se viditi na koji se ančin stilira tablica i kakav rezultat se dobije. HTML: <table class="stats" cellspacing="0"> <tr> <td class="hed" colspan="4">These stats here are good</td> </tr> <tr> <td>The thing</td> <td>10.0</td> <td>9.8</td> <td>6.7</td> </tr> <tr> <td>Other thing</td> <td>6.5</td> <td>8.9</td> <td>9.9</td> </tr> </table>

S t r a n i c a | 26

CSS: table.stats {text-align: center; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ; font-weight: normal; font-size: 11px; color: #fff; width: 280px; background-color: #666; border: 0px; border-collapse: collapse; border-spacing: 0px;} table.stats td {background-color: #CCC; color: #000; padding: 4px; text-align: left; border: 1px #fff solid;} table.stats td.hed {background-color: #666; color: #fff; padding: 4px; text-align: left; border-bottom: 2px #fff solid; font-size: 12px; font-weight: bold;}

Rezlutat ovog HTML i CSS koda je:

Slika 10.1 Primjer stiliranja tablice korištenjem CSS-a. [11]

S t r a n i c a | 27

11. CSS 3
Iako se ved godinama obedava standardizacija trede generacije CSS-a na njoj se još radi. Sredom web preglednici kao Opera i Safari, a sada i Firefox podržavaju nove CSS 3 standarde. No zaostatkom CSS 3 podrške za Internet Explorer korištenje novih CSS 3 pravila sigurno nede zaživiti u potpunosti u skorije vrijeme.

11.1 Zaobljeni rubovi korištenjem CSS 3 pravila
Prvo pravilo Web 2.0 jesu zaobljeni rubovi. Korištenjem iskljudivo CSS sada je mogude dati radius rubovima koji su prije bili pod kutom od 90 stupnjeva. Tako što dobije se na sljededi način. HTML

<p class="radius">Ovo NIJE slika!</p>

CSS

.radius { background-color: #666; color: #fff; line-height: 20px; width: 200px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }

Rezultat ovog koda je

Slika 11.1.1 Zaobljeni rubovi dobiveni korištenjem CSS 3 pravila. [12]

Kao što se vidi iz CSS koda pored standardnih CSS 2 pravila tu su i dva CSS 3 pravila. Proizvođadi web preglednika su prefiksima -- ili -moz- za Firefox, odnosno -webkit- za Safari omogudili korištenje CSS 3 pravila u svojim web preglednicima. Tkao je ovdje korišteno pravilo border-radius za zaobljenje rubova. Sintaksa ovog pravila glasi:

S t r a n i c a | 28

border-radius: TopLeft TopRight BottomRight BottomLeft; border-radius: TopLeft BottomLeft+TopRight BottomRight; border-radius: TopLeft+BottomRight TopRight+BottomLeft; border-radius: SviRubovi;

U gornjem slučaju pravilo je glasilo:

-webkit-border-bottom-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-topright: 10px;

11.2 CSS 3 granice
CSS 3 granicama daje nove mogudnosti kao što je korištenje gradiant granica. Na primjer:

#box { border: 8px solid #000; -moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc; -moz-border-top-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc; width:400px; }

Ako korisnik ne koristi Firefox dobit de ovo:

Slika 11.2.1 Primjer granice korištenjem CSS 3 pravila za gradient u pregledniku koji nije Firefox. [13]

Dok de ovo pravilo u Firefox-u izgledati ovako:

S t r a n i c a | 29

Slika 11.2.1 Primjer granice korištenjem CSS 3 pravila za gradient u pregledniku Firefox. [14]

Valja naglasiti da ovo pravilo podržava samo Firefox, no uskoro se može očekivati i podrška za Opera i Safari web preglednike.

11.3 Tekst sjena sa CSS 3
Iako nije novo pravilo dodavanje sjene korištenjem text-shadow svojstva postaje lakše.

<p style="text-shadow: 2px 2px 2px #000;"> If you have Safari 3, Opera 9.5, Firefox 3.1a, Konqueror or iCab this paragraph should have a gray drop-shadow.</p>

Slika 11.3.1 Primjer sjene teksta korištenjem CSS 3 pravila. [15]

Prva sva broja određuju offset, koji je u ovom sličaju 2px dolje i 2px desno. Posljednji broj određuje kolika je sjena, opet 2px u ovom slučaju. Ako se želi sjena iznad slova, koristi se negativna vrijednost za offset.

11.4 Manipulacija slikama u CSS 3
Od sada korištenjem CSS 3 svojstva mask može se transparentno maskirati slika, video ili bilo koji drugi element. Treba anglasiti da ovo svojstvo zasad podržava samo Safari. Sinaksa glasi:

-webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)

S t r a n i c a | 30

Ovdje su dvije slike. Prva slika je izvorna koju želimo maskirati, a druga je ona koja de biti korištena kao maska.

Slika 11.4.1 kate.png [16]

Slika 11.4.2 shadow.png [17]

Maska na sliku stavlja se jednostavnim kodom

<img src="kate.png" style="-webkit-mask-box-image: url(mask.png) 75 stretch;">

Rezultat ovog koda je:

Slika 11.4.3 Maskirana slika [18]

Isto tako mogude je slici dodati i gradient. To se čini na sljededi način.

S t r a n i c a | 31

<img src="kate.png" style="-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))">

Rezultat ovog koda bio bi:

Slika 11.4.4 Gradient na kate.png sliku [19]

Na sliku 11.4.4 mogude je primjeniti i border-radius svojstvo. Maska na border-radius svojstvo gleda kao objekt pa je mogude primjeniti oba svojstva na istu sliku. Kod bi glasio ovako:

<img src="kate.png" style="-webkit-border-radius: 10px; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))">

S t r a n i c a | 32

A rezultat koda je:

Slika 11.4.5 Gradient i border-shadow na kate.png [20]

Navedena CSS 3 svojstva su tek vrh ledenaka mogudnosti koje nam ono pruža. I sa razvojem web preglednika kao i standardizacijom CSS 3 mnoga druga svojstva biti de podržana. Tako ved sada, pored navedenih svojstava, podržana su svojstva za više pozadinskih slika, više kolona u jednom elementu, promjena veličine polja (box resizing) i mnoga druga.

S t r a n i c a | 33

12. Zaključak
CSS je najbolji jezik za oblikovanje web sadržaja i kao takav je nezamjenjiv. Iznenađujuda je lakoda sintakse, a mogudnosti su velike, posebno standardiziranjem CSS3 tehnologije, koja donosi još vede mogudnosti i fleksibilnost pri dizajnu web sadržaja. Oblikovanje slika i flash videa biti de mogude izravno putem CSS-a, bez potrebe njihova uređivanja u nekom od editora za tu namjenu. CSS je gotovo u potpunosti izbacio tablice kao strukturu za web prezentaciju i pravljenjem takozvanih „tableless“ web stranica elementima je mogude davati proizvoljne veličine, a i sam razmještaj elemenata postao je lakši jer ih se sada može premještati bez puno muke. Naravno najveda prednost CSS-a jeste što se sav kod za oblikovanje može smjestiti u zasebnu datoteku odvojenu od HTML koda, što izmjenu stila čini daleko lakšom i bržom nego da se taj stil nalazi u HTML dokumentu.

13 Literatura
[1] http://xhtml.com: Box model, s interneta, http://xhtml.com/en/css/reference/box-model/ 2008. [2] http:/q-5.nl: Understanding and fast crash-course CSS tutorial, s interneta, http://www.q-5.nl/blog/buitenlands/understanding-and-fast-crash-course-css-tutorial/ 13.2.2009. [3] http://xhtml.com: Float, s interneta, http://xhtml.com/en/css/reference/float/ 2008. [4] http://xhtml.com: Float, s interneta, http://xhtml.com/en/css/reference/float/ 2008. [5] http://xhtml.com: Float, s interneta, http://xhtml.com/en/css/reference/float/ 2008. [6] Clarke, A.: "Z's not dead baby, Z's not dead", s interneta, http://24ways.org/2005/zs-not-dead-baby-zs-not-dead 16.12.2005. [7] Coyier C.: The CSS Overflow Property, s interneta, http://css-tricks.com/the-css-overflow-property/ 27.5.2009. [8] Coyier C.: The CSS Overflow Property, s interneta, http://css-tricks.com/the-css-overflow-property/ 27.5.2009. [9] Coyier C.: The CSS Overflow Property, s interneta, http://css-tricks.com/the-css-overflow-property/ 27.5.2009. [10] Coyier C.: The CSS Overflow Property, s interneta, http://css-tricks.com/the-css-overflow-property/ 27.5.2009. [11] Denton R.: CSS tables, s interneta, http://robertdenton.org/reference/css-tables-tutorial.html 6. 2002

S t r a n i c a | 34

[12] http://webmonkey.com: Get started with CSS3, s interneta, http://www.webmonkey.com/tutorial/Get_Started_with_CSS_3 18.9.2008. [13] http://webmonkey.com: Get started with CSS3, s interneta, http://www.webmonkey.com/tutorial/Get_Started_with_CSS_3 18.9.2008. [14] http://webmonkey.com: Get started with CSS3, s interneta, http://www.webmonkey.com/tutorial/Get_Started_with_CSS_3 18.9.2008. [15] http://webmonkey.com: Get started with CSS3, s interneta, http://www.webmonkey.com/tutorial/Get_Started_with_CSS_3 18.9.2008. [16] Hyatt D.: CSS masks, s interneta, http://webkit.org/blog/181/css-masks/ 24.4.2008 [17] Hyatt D.: CSS masks, s interneta, http://webkit.org/blog/181/css-masks/ 24.4.2008 [18] Hyatt D.: CSS masks, s interneta, http://webkit.org/blog/181/css-masks/ 24.4.2008 [19] Hyatt D.: CSS masks, s interneta, http://webkit.org/blog/181/css-masks/ 24.4.2008 [20] Hyatt D.: CSS masks, s interneta, http://webkit.org/blog/181/css-masks/ 24.4.2008 Ostali izvori: - Deutsch C.: CSS2 essential training, s interneta, http://www.lynda.com/home/DisplayCourse.aspx?lpk2=47 8.4.2003. - Meyer E.: CSS web site design, s niterneta, http://www.lynda.com/home/DisplayCourse.aspx?lpk2=279 12.9.2006.

Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close