font-variant 24alas.matf.bg.ac.rs/~mi13120/DrugaGodina/Literatura/02_CSS skripta.pdfe-mail: strana 1 font-variant ..... 24 SADRŽAJ 1. UVOD ..... 5

strana 1

SADRŽAJ

1. UVOD .......................................................................................................... 5

2. ELEMENTI CSS-A ............................................................................................. 7

2.1. Pogled u CSS ............................................................................................. 7

2.2. Šta to tačno CSS radi HTML-u? ........................................................................ 8

Uvoženje spoljnjeg dokumenta ......................................................................... 10

Umetanje CSS-a u zaglavlje dokumenta .............................................................. 11

Dodavanje CSS-a u liniji pomoću atributa style ..................................................... 11

2.3. Selektori ................................................................................................. 12

Pseudoklase ................................................................................................... 15

Pseudoklase :link, :visited ............................................................................... 15

Dinamičke pseudoklase :hover, :active ............................................................... 16

Više istovremenih linkova različitih svojstava ....................................................... 16

2.4. Nasleđivanje ............................................................................................ 18

2.5. Kaskade .................................................................................................. 19

2.6. CSS model kutije ....................................................................................... 20

2.7. CSS elementi ............................................................................................ 21

Blok elementi .............................................................................................. 21

Linijski elementi .......................................................................................... 21

Popisi ........................................................................................................ 21

2.8. Generički kontejneri SPAN i DIV ..................................................................... 22

Oznaka span ................................................................................................ 22

Oznaka div.................................................................................................. 22

3. CSS SVOJSTVA .............................................................................................. 23

3.1. Svojstva fonta .......................................................................................... 23

font-family ................................................................................................. 23

font-weight ................................................................................................ 24

font-size .................................................................................................... 24

font-style ................................................................................................... 24

Hadži-Đerina 2 tel.011/244-77-81 Cvijićeva 98 tel. 011/275-42-23

www.systempro.rs e-mail: [email protected]

strana 2

font-variant ................................................................................................ 24

Skraćeni selektor .......................................................................................... 24

3.2. Svojstva teksta ......................................................................................... 25

letter-spacing .............................................................................................. 25

line-height ................................................................................................. 25

text-decoration ............................................................................................ 25

text-transform ............................................................................................ 25

text-align ................................................................................................... 26

text-indent ................................................................................................. 26

3.3. Svojstva boja i pozadina .............................................................................. 27

color ......................................................................................................... 27

background-color .......................................................................................... 27

background-image ........................................................................................ 27

background-repeat ........................................................................................ 27

background-attachment ................................................................................. 28

background-position ...................................................................................... 28

background ................................................................................................. 28

3.4. Svojstva CSS kutije .................................................................................... 28

margin-top ................................................................................................. 28

margin-right ............................................................................................... 28

margin-bottom ............................................................................................ 29

margin-left ................................................................................................. 29

margin ...................................................................................................... 29

padding-top ................................................................................................ 30

padding-right .............................................................................................. 30

padding-bottom ........................................................................................... 30

padding-left ................................................................................................ 30

padding ..................................................................................................... 30

border-width ............................................................................................... 31

border-color ............................................................................................... 31

border-style ................................................................................................ 32

border ....................................................................................................... 32

width ........................................................................................................ 33

height ....................................................................................................... 33

3.5. Liste i njihova svojstva ................................................................................ 34

list-style-type ............................................................................................. 34

strana 3

list-style-image ............................................................................................ 34

list-style-position ......................................................................................... 35

list-style .................................................................................................... 35

3.6. Svojstva pozicioniranja (smeštanja) ................................................................ 35

Position vs Float ........................................................................................... 35

Relativno pozicioniranje ................................................................................. 35

Apsolutno pozicioniranje ................................................................................ 36

Kombinovanje relativnog i apsolutnog pozicioniranja .............................................. 36

Fiksno pozicioniranje ..................................................................................... 36

left .......................................................................................................... 37

top ........................................................................................................... 37

z-index ...................................................................................................... 37

3.7. Ostala svojstva ......................................................................................... 38

cursor ....................................................................................................... 38

overflow .................................................................................................... 38

visibility .................................................................................................... 38

display ...................................................................................................... 39

4.OGRANIČENJA I NEDOSTACI CSS-A ...................................................................... 40

4.1 Nedoslednost browsera ................................................................................ 40

4.2 Složenost ................................................................................................. 40

4.3 Ograničeno nasleđivanje ............................................................................... 40

4.4 Problemi pri vertikalnoj orijentaciji elemenata ................................................... 40

4.5 Nedostatak aritmetičkih operacija ................................................................... 40

4.6 Nepostojanje promenljivih ............................................................................ 41

4.7 Neslaganje pojedinačnih opisa........................................................................ 41

5. NOVITETI U CSS3 ........................................................................................... 42

6. CSS MENI ..................................................................................................... 43

6.1. Definisanje liste linkova .............................................................................. 43

6.2. Formatiranje liste linkova ............................................................................ 44

6.3. Stilizovanje liste linkova .............................................................................. 45

6.4. Dodavanje dinamičkog efekta ....................................................................... 46



strana 4

7. CSS TABOVI .................................................................................................. 47

7.1. Prvi korak ............................................................................................... 47

7.2. Drugi korak .............................................................................................. 48

7.3. Treći korak .............................................................................................. 48

7.4. Četvrti korak ............................................................................................ 49

strana 5

1. UVOD

Da bismo shvatili zašto je HTML postao ono što je danas, moramo nakratko da zavirimo u ne tako davnu prošlost. Razvijen kao strukturni jezik, HTML je prvenstveno bio namenjen struktuiranom prikazu podataka. Njegova jednostavnost i primenljivost dovele su do toga da ga je vrlo brzo prihvatio velik broj korisnika. U kratkoj istoriji računarskih tehnologija nijedan drugi programski jezik nije u toliko kratkom vremenu stekao tako veliku popularnost.

Uporedo s eksponencijalnim rastom broja web sajtova, rasla je i potreba web dizajnera da svoje stranice učine lepšim i privlačnijim. Uočene nedostatke tadašnjeg HTML-a, kao što je, npr. nedostatak opcija koje bi dokumente činile privlačnijim za korisnike, komercijalne firme koje su proizvodile web čitače (browsere) pokušavale su da nadoknade tako što su, pored ionako slabog uticaja standardizacijskih organizacija, u jezik unosile svoje tagove i atribute. To je kulminiralo takozvanim "ratom browsera" iz kojeg je Internet Explorer izašao kao pobednik nad Netscape Navigatorom tako što je zavladao sa preko 95% tržišta.

Napokon je 1995. godine W3C definisao standardizovanu specifikaciju HTML jezika koja je u sebi sadržala mnoge elemente koje su u međuvremenu u jezik uneli proizvođači browsera.

Ta kratka i burna prošlost uzela je svoj danak. Nekompatibilnost browsera kao posledica samovolje proizvođača u prošlosti je, a u nekoj meri i danas, uzrokovala nemale probleme za većinu web dizajnera. Složenost koda opterećenog oznakama za prikaz podataka dovela je do toga da je u dokumentu bilo više tagova i atributa nego samih podataka. Nedostatak mogućnosti s jedne strane, i stalna potreba za privlačnim dizajnom s druge strane, neprestano su terali web dizajnere da smišljaju nove načine i trikove kako da web sajt učine lepšim.

Izgled čistog HTML koda s dizajnerskim dodacima. Jasno je vidljiva količina oznaka u odnosu na podatke koji se prikazuju.

Kako prilagoditi izgled stranice tako da se ona identično prikazuje u svim browserima? Kako formatirati dokument da elementi u njemu budu precizno smešteni? Kako na web sajtu od stotinak stranica odjednom promeniti, npr. boju ili veličinu fonta na svim stranicama? Ovakva pitanja su se nizala uzdižući na površinu frustracije s kojima su se sretali autori web stranica.



strana 6

Iako je već 1990. Tim Berners-Lee - pronalazač weba - napravio browser koji je u sebi imao elemente jezika za definisanje stilova, tek se 1993. i 1994. godine zahuktala rasprava o tome kako bi taj jezik morao da izgleda.

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 zahvaljujući nizu prednosti od kojih ćrmo pomenuti samo neke osnovne:

1) Korišćenjem CSS-a postalo je moguće odvojiti prezentaciju podataka i dizajn stranice od same strukture podataka. To znači da su sada dizajneri mogli samostalnije da osmišljavaju web sajtove - praktički nezavisno od kreatora HTML kôda.

2) Sam HTML kôd postaje neuporedivo čitkiji i kraći što znači da ga je mnogo lakše kontrolisati.

3) Kaskadnim stilovima omogućeno je upravljanje web sajtom s jednog mesta uz poštovanje pojedinačnih odstupanja od zadatog stila. Jednostavnom promenom nekoliko parametara moguće je odjednom promeniti izgled neograničenom broju stranica.

4) Predložen i standardizovan pod okriljem W3 konzorcijuma, od početka je relativno jednako implementiran kod različitih proizvođača web browsera. To što nije u potpunosti jednako implementiran, lako se rešava upotrebom različitih stilova za različite browsere.

5) CSS omogućava čitav niz načina za uređivanje prikaza podataka koji do tada nisu postojali u samom HTML-u.

CSS je, kao uostalom i sve ostale web tehnologije, u stalnom razvoju. Trenutna predložena specifikacija je CSS3. Taj i sve ostale standarde i preporuke možete pronaći na CSS stranicama W3 konzorcijuma: http://www.w3.org/style/css .

Mnogi će reći da je za kreiranje CSS-a dovoljno imati jednostavan program za uređivanje teksta (npr. Notepad). Iako je sa tehničke strane ovo tačno, u praksi je bolje pri izradi koristiti kvalitetniji alat. U praksi se pokazalo da je jako teško otkucati desetak redova čistog teksta, a da vam se pri kucanju ne potkrade poneka greška. Zato treba koristiti prednosti specijalizovanih editora koji imaju ugrađene efekte za bojenje koda i automatsko dovršavanje ključnih reči, što izradu čini dosta lakšom. Osim toga, uz njih obično dolaze i popisi ključnih reči kao i razne druge reference, što će dodatno olakšati izradu.

Svi vodeći WYSIWYG alati (Macromedia Dreamweaver, Microsoft FrontPage itd.) imaju ugrađene kvalitetne CSS editore. Međutim, ti alati su komercijalni i nisu svima dostupni. Na tržištu postoji čitav niz lako dostupnih pa čak i besplatnih alata za izradu CSS-a, a spisak većine njih možete pronaći na stranicama W3 konzorcijuma.

strana 7

2. ELEMENTI CSS-a

2.1. Pogled u CSS

Pogledajmo zajedno kako izgleda CSS. Kratak primer upoređivanja čistog HTML koda i web stranice izrađene CSS-om govori sam za sebe.

Ako želimo da ispis koji vidi korisnik izgleda ovako:

Lorem ipsum dolor sit amet, consectetur adipisicing elit ...

možemo to uraditi sledećim HTML kodom.

<p> <font face="Courier New, Courier, mono"> <u><b>Lorem</b></u></font> ipsum dolor sit amet, </p> <p> <font face="Courier New, Courier, mono"> <u><b>consectetur</b></u> adipisicing elit ... </font> </p>

Ili možemo napisati nekoliko linija CSS-a,

p { font-family:"Courier New", Courier, mono; } .stil { text-decoration:underline; font-size:24px; font-weight:bold; }

i tada će, za isti rezultat ispisa, HTML kôd izgledati ovako:

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

U drugom primeru izvedenom CSS-om vredi primetiti dve važne stvari:

1. jednostavnost HTML koda, 2. oblik, veličina i boja znakova za obe linije kontroliše se s jednog mesta



strana 8

Razmotrimo od čega se sastoji prethodni CSS. Ako taj kôd raščlanimo, pojedine elemente možemo razvrstati u tri glavne kategorije:

1. selektori - p, .stil - identifikuju pojedine elemente na HTML stranici; 2. svojstva - color, fontsize... - ključne reči za opis pojedinog elementa stranice; 3. vrednosti - #CC0000, 24px... - vrednost koju može poprimiti pojedino svojstvo;

i četvrtu pomoćnu kategoriju:

4. komentari - tekst napisan između znakova /* i */.

2.2. Šta to tačno CSS radi HTML-u?

Zamislimo ovakav slučaj. Napisali ste seminarski rad o jednom starom latinskom tekstu. Rad se sastoji od nekoliko stranica i želeli biste da ga objavite na webu. Razmišljajući o načinu izrade, birate HTML. Već ste se dobro upoznali s tim jezikom pa vam izrada nekolicine stranica nije nikakav problem. Dovršili ste stranice i gledate rezultat u browseru:

Lorem ipsum

Lorem ipsum je tekst koji se sastoji od niza slučajnih reči bez značenja. Iako njegove reči ne znače ništa,

pretpostavlja se da je nastao na osnovu Ciceronovog dela "O krajnostima dobra i zla". Ovaj tekst se standardno

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 uočili da vašem seminarskom radu nešto nedostaje. Struktura i podaci su tu, ali prezentacija je za jedinicu. Vaša stranica je izrađena čistim HTML kodom koji izgleda ovako:

<h1>Lorem ipsum</h1> <p>Lorem ipsum je tekst koji se sastoji od niza slučajnih reči bez značenja. Iako njegove reči ne znače ništa, pretpostavlja se da je nastao na osnovu Ciceronovog dela... ... <p>"Lorem ipsum dolor...

Poznavajući vrednost lepe prezentacije, želite vaš rad izdignuti iznad nivoa bezličnog, suvoparnog teksta. Izradite CSS stil - običnu tekstualnu datoteku - i povežete je s HTML dokumentima. U CSS-u redom stoji sledeće:

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

strana 9

} 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 slučajnih reči bez značenja. Iako nema smisleno značenje, pretpostavlja se da je nastao na temelju Ciceronovog dela... ... <p class="citat">"Lorem ipsum dolor...

i to je sve.

Posmatrajmo šta se tačno dogodilo s vašim ispisom. Kreiranjem stila CSS-om i njegovim povezivanjem s dokumentom, dogodila se promena koja se ogleda pri učitavanju dokumenta u browser. Browser pri učitavanju detektuje da postoji CSS, pročita ga i prepozna ključne reči, a zatim pokuša da prikaže dokument onako kako mu to sugeriše CSS.

Npr, u CSS-u stoji da tekst koji se nalazi unutar oznake <h1> poprima sledeće parametre:

• tekst je napisan fontom Verdana ili Helvetica ili sans-serif, i to redom kako je font dostupan browseru

• tekst će biti podebljan • visina znakova biće 14 piksela.

Ukoliko je CSS tačno definisan i ukoliko browser podržava navedena svojstva, rezultat će biti prikaz kakav nalaže CSS.

Da bi definisan CSS stil imao funkciju, potrebno ga je povezati s HTML dokumentom. To je moguće izvesti na četiri načina:

• povezivanjem na spoljni dokument • uvoženjem spoljnjeg dokumenta • umetanjem u zaglavlje dokumenta • dodavanjem u liniji atributom style.

U prva dva slučaja pretpostavljamo da postoji zaseban dokument – fajl snimljen 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;



strana 10

font-weight:bold; } Povezivanje na spoljni dokument

Povezivanje na spoljni dokument izvodi se oznakom <link> koja se dodaje u zaglavlje HTML dokumenta - između oznaka <head> i </head>.

Oznaka <link> sastavni je deo HTML standarda i služi povezivanju s spoljnim dokumentima. Završna oznaka </link> ne postoji.

Uz oznaku <link> postoji više atributa od kojih su nam najbitnija sledeća tri:

• rel – definiše odnos između oznake i odredišnog dokumenta. Može poprimiti nekoliko vrednosti, a kad služi za povezivanje CSS-a, poprima vrednost "stylesheet";

• type - definiše tip odredišnog dokumenta. U ovom slučaju tip dokumenta je "text/css"; • href - URI dokumenta koji se povezuje.

Dakle, naš dokument povezao bi se sledećim kodom:

<head> ... <link rel="stylesheet" type="text/css" href="stil.css"> ... </head>

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

Uvoženje spoljnjeg dokumenta

Uvoženje CSS-a obavlja se putem ključne reči @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">  </style> ... </head>

Oznake  su HTML komentar. Nisu obavezne kod ovakvog načina definisanja CSS-a, a služe da stariji browseri, koji nisu imali mogućnost prikaza CSS-a, ne bi prikazivali CSS kao tekst. Danas je takve browsere gotovo nemoguće pronaći u upotrebi.

strana 11

Pri ovakvom načinu povezivanja CSS-a bitno je pripaziti na redosled uvezenih stilova. Ukoliko su na više mesta definisane različite vrednosti svojstava istog selektora, zbog kaskadnih svojstava CSS-a nadvladava poslednja definicija.

Umetanje CSS-a u zaglavlje dokumenta

CSS se može definisati u zaglavlju dokumenta u oznaci <style>, uz upotrebu 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>

Primećujete da je navedeni način umetanja jako sličan opisanom uvozu CSS-a. Ustvari, moguće ih je i kombinovati, tako da se, ispod linija za uvoz CSS-a, dopišu lokalne definicije CSS-a.

<head> ... <style> @import "/css/stil.css"; p { font-family:"Courier New", Courier, mono; } </style> ... </head>

Dodavanje CSS-a u liniji pomoću atributa style

Stilovi za pojedinačnu HTML oznaku u dokumentu mogu biti definisani atributom style. Ovaj atribut može se definisati za gotovo sve HTML oznake - izuzetak su oznake <script>, <basefont> i još neke.

<p style="font-size:10px">...tekst...</p>

Ovako definisan stil vredi samo za oznaku unutar koje je definisan.



strana 12

2.3. Selektori

Naučili smo kako da povežemo CSS stil s HTML dokumentom. Sledi nam da proučimo kako da implementiramo pojedini stil na deo ili na celu HTML stranicu.

Videli smo da se pojedini stil definiše kao:

selektor {svojstvo:vrednost} .

Selektor identifikuje element ili deo HTML stranice na koji se primenjuje navedeni stil. Postoji čitav niz selektora pa potpuno upoznavanje primene svakog od njih nije nimalo banalan zadatak. Ovde ćemo detaljnije obraditi nekoliko osnovnih, najčešće korišćenih tipova:

• jednostavni (HTML) selektori • klasni selektori • ID selektori • kontekstni selektori • pseudoklase.

Pre samog upoznavanja selektora, nekoliko reči o strukturi HTML dokumenta. Neki HTML dokument možemo prikazati kao stablo prema sledećoj slici:

Prikaz - HTML hijerarhijsko stablo.

Vidljivo je da elementi unutar stabla imaju svoje podređene i nadređene elemente. Npr <tr> sadržan je u oznaci <table>, a <table> sadržan je u oznaci <body>. Pomoću selektora možemo precizno identifikovati bilo koji od elemenata stabla.

Jednostavni (HTML) selektori

Jednostavni selektori (eng. type selectors) najjednostavniji su od svih. Odgovaraju imenu html oznake i primenjuju se na svaku istovrsnu oznaku u dokumentu.

strana 13

Npr razmotrimo sledeći stil:

p { font-family:Verdana, Helvetica, sans-serif; } h1 { color:#CC0000; font-size:24px; font-weight:bold; }

Ovakav stil povezan s HTML dokumentom sugeriše web browseru da tekst u svim paragrafima na stranici prikaže ispisan prvim raspoloživim od navedenih fontova te da sav tekst unutar <h1> oznaka u dokumentu prikaže podebljan, crvene boje i veličine 24px.

Prednost korišćenja ovakvog tipa selektora je u tome što, osim samog povezivanja stila sa dokumentom, ne zahteva intervencije u html kôd. Npr ako želimo definisati tip i veličinu 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 niže od njega, poprimiće navedena svojstva.

Nedostatak primene CSS-a putem jednostavnih selektora je u tome što se definisani stil primenjuje na sve HTML elemente bez izuzetaka. Ne možemo postići da se npr. paragrafi u tablici prikazuju različito od paragrafa izvan tablice, što nam mogu omogućiti selektori koje ćemo upoznati u sledećoj lekciji.

Klasni selektori

Kao što smo već rekli, dobra strana jednostavnih selektora - primena na sve oznake istog tipa - ujedno može biti i njihov veliki nedostatak. Pretpostavimo da želite izraditi stranicu s prevodima latinskih izreka tako da u jednom paragrafu navedete izreku, u sledećem prevod, i tako naizmenično. Da bi posetioci lakše razlikovali prevod od originala, želeli biste da tekst u paragrafima bude različito formatiran.

Moguće je definisati ovakav stil:

.izreka { font-weight:bold; font-size:11px; } .prevod { font-style:italic; font-size:12px; }



strana 14

a uz primenu sledećeg koda:

<p class="izreka">Navigare necesse est, vivere non est necesse.</p> <p class="prevod">Ploviti je nužno, živeti nije nužno.</p>

dobiti ovakav rezultat:

Navigare necesse est, vivere non est necesse.

Ploviti je nužno, živeti nije nužno.

Primećujete kako se pri definisanju selektora piše .naziv, a pri primeni selektora na paragraf

samo naziv.

Drugi način definisanja je oznaka.naziv. Razlika je u tome što se ovako definisani selektori mogu primeniti samo na oznake istog tipa. Npr:

p.izreka { font-weight:bold; font-size:11px; } p.prevod { font-style:italic; font-size:12px; }

Ovako definisani selektori primenjuju se isto kao i prethodni - <p class="naziv"> - ali za razliku od prethodnih, koji se mogu primeniti na različitim oznakama, ovakvi se mogu primeniti samo na paragrafe.

Na ovakav način definisali smo klasne selektore i identifikovali pojedine paragrafe kao pripadnike jedne, odnosno druge klase.

ID selektori

Na prvi pogled, ovaj se tip selektora razlikuje od klasnih selektora samo u dve stvari. Prvo, umesto tačke, definiše se oznakom "#":

#izreka { font-weight:bold; font-size:11px; } #prevod { font-style:italic; font-size:12px; }

i drugo, umesto atributom class primenjuje se pomoću atributa id:

strana 15

<p id="izreka">Navigare necesse est, vivere non est necesse.</p> <p id="prevod">Ploviti je nužno, živeti nije nužno.</p>

Rezultat je jednak prethodnom:

Navigare necesse est, vivere non est necesse.

Ploviti je nužno, živeti nije nužno.

Verovatno se pitate u čemu je onda razlika između klasnog i id selektora. U jednom HTML dokumentu svi id atributi trebali bi biti različiti. Oni su namenjeni referenciranju na određeni element. Npr u dokumentu sme postojati samo jedan paragraf s atributom id ="izreka". Id selektor primenjuje se kada se želi pridodati stil za jedan jedinstveni element na stranici. Ovde je id atribut primenjen na paragraf. U stvarnosti, jedan dokument obično se sastoji od mnoštva istih paragrafa. Kako se id selektor primenjuje na jedinstven element stranice, retko će biti primenjen na paragraf. Stvarniji primer bila bi primena na <h1> element, jer uobičajeno, na stranici postoji samo jedan glavni naslov.

Pseudoklase

Pseudoklase su gradivo koje zasigurno možemo smestiti u napredno korišćenje CSS-a. Međutim, postoje četiri pseudoklase koje se susreću na gotovo svakoj stranici izrađenoj CSS-om. Suprotstavljajući složenost problematike i masovnost upotrebe, u ovom poglavlju ponuđeno vam je "instant" rešenje za ulepšavanje linkova, bez prevelikog ulaženja u detalje, ali u praksi sasvim upotrebljivo.

Pseudoklase :link, :visited

Osnovni prikaz linkova u HTML-u prilično je suvoparan, a definisanje boje linkova u oznaci <body> ne daje puno bolje rezultate. CSS nudi rešenje dvema pseudoklasama. Izgled neposećenog linka definiše se pseudoklasom a:link, a izgled posećenog linka pseudoklasom a:visited.

a:link { text-decoration:none; color:#CC0000; } a:visited { text-decoration:underline; color:#0000CC; } <a href="http://www.systempro.rs/">SystemPro</a>

Rezultat:

SystemPro



strana 16

Dinamičke pseudoklase :hover, :active

Dodatna atraktivnost linkova može se postići dinamičkim efektima, koji se aktiviraju pri nekakvoj radnji korisnika. Npr, u ovom slučaju, prelaskom pokazivača preko linka aktivira se prikaz selektora a:hover, dok se od trenutka pritiska tastera miša, pa do otpuštanja tastera, aktivira prikaz selektora a:active.

a:hover { background-color:#000; color:#fff; } a:active { background-color:#ffff00; color:#cc0000; } <a href="http://www.systempro.rs/">SystemPo</a>

SystemPro

Da biste dobili željeni rezultat, zbog određenih specifičnosti CSS-a, čije proučavanje izlazi iz okvira ovog predavanja, ove pseudoklase pri definisanju uvek morate navesti sledećim redosledom: a:link{} a:visited{} a:hover{} a:active{}

Više istovremenih linkova različitih svojstava

Definisane pseudoklase vrede za sve linkove u dokumentu. Ukoliko u jednom dokumentu postoji potreba za više različitih 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;

strana 17

color:#CC0000; } a.vrsta2:hover { background-color:#cc0000; color:#ffff00; } a.vrsta2:active { background-color:#fff; color:#000; }

< a class=”vrsta1” href=http://www.systempro.rs“>SystemPro</a> < a class=”vrsta2” href=http://www.w3.org“>SystemPro</a>

Grupisanje selektora

Kada nekoliko selektora deli određena svojstva, postoji mogućnost njihovog grupisanja u popis odvojen zarezima. To se uobičajeno primenjuje radi preglednosti zapisa i jednostavnosti manipulacije svojstvima. Razmotrimo sledeći primer:

Namera nam je da definišemo oznake naslova <h1>, <h2> i <h3>, veličinom i tipom fonta. Svi naslovi imaju isti tip fonta, ali su različite veličine.

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 promeniti tip fonta definisanog za naslove, to je potrebno napraviti na tri mesta. Jedna od uloga CSS-a je i da promene svojstava učini što jednostavnijim, upravo zato je predviđena mogućnost grupisanja selektora. U ovom slučaju to biste napravili sledećom 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 dele ista svojstva redovno grupišu.



strana 18

2.4. Nasleđivanje

Podsetimo se - HTML hijerarhijsko stablo.

Slikom HTML hijerarhijskog stabla možemo sagledati nasleđivanje, još jedno važno svojstvo CSS-a. Elementi koji su niže u stablu - tzv. potomci - nasleđuju svojstva od svojih roditeljskih elemenata.

Ukoliko po primeru sa slike imamo definisan sledeći selektor:

td { color:red;}

tada će celokupni tekst unutar stupca tablice biti crvene boje, bez obzira bio on unutar paragrafa ili elementa popisa. Naravno, ako je na nekom od elemenata - potomstva primenjen neki drugi stil, taj stil ima prioritet pri prikazivanju.

Razmotrimo još jedan tipičan primer korišćenja nasleđivanja:

body { font-size:10pt } h1 { font-size:120% }

Budući da je <h1> unutar oznake <body>, veličina znakova unutar oznake <h1> biće 12pt.

strana 19

2.5. Kaskade

Videli smo kako CSS možemo na različite načine povezati s dokumentom. Pod određenim uslovima može se dogoditi da više selektora s istim atributima, ali različitim svojstvima, identifikuju isti element na stranici. Koje od pravila će se tada primenjivati definisano je kaskadnim svojstvima CSS-a. Iako postoji egzaktan način izračunavanja koji selektor u kojoj situaciji prevladava, njegova složenost izlazi iz okvira ovog predavanja. Međutim, možemo postaviti prioritetni redni popis, koji u većini slučajeva daje željen rezultat. Na prvom mestu su selektori s najvećim prioritetom:

1. stilovi dodeljeni atributom style 2. id selektori 3. klasni selektori i pseudoklase 4. kontekstni, pa HTML selektori.

Na sledećem primeru prikazan je prioritet selektora:

h1 { font-weight:bold; } #naslov { font-weight:normal; } .uvod { font-weight:bold;} <h1 id="naslov">Lorem ipsum</h1> <p class="uvod" style=" font-weight:normal;">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 nije boldovan jer je id selektor #naslov većeg prioriteta od HTML selektora h1. Kako je u paragrafu tekst definisan atributom style, koji je većeg prioriteta od klasnog selektora .uvod, tekst takođe nije boldovan.



strana 20

2.6. CSS model kutije

Elemente na stranici CSS tretira kao naslagane kutije - pravougaonike - koji se na stranici slažu jedan iza drugog ili jedan ispod drugog. Izgled kutije i njena svojstva definisani su sledećom slikom:

Iako na prvi pogled razmatranje, npr. paragrafa kao kutije ne izgleda logično, vrlo brzo se mogu uočiti prednosti takvog načina predstavljanja sadržaja. Naime, bez CSS-a nismo u mogućnosti na jednostavan način formatirati prikaz sadržaja paragrafa.

Npr. kako prostor između dva paragrafa učiniti većim? Bez CSS-a to bismo mogli napraviti dodavanjem nekakvih razmaka.

U te svrhe su se često koristile providne sličice poznatije pod imenom spacer.gif.

CSS model koji paragraf tretira kao kutiju nudi puno jednostavnije rešenje - definisanje gornje i donje margine.

p { margin-top:5px; margin-bottom:20px; padding-left:30px; }

Kao ishod možete videti prikaz na sledećoj slici. Beli okvir je sadržaj paragrafa, a žutom su prikazane margine i odmaci.

strana 21

2.7. CSS elementi

Elemente u CSS-u možemo podeliti 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 koji ih okružuju. Predefinisano se ponašaju tako da sledeći element započinje u novoj liniji. Tipičan primer ovog tipa elemenata su <p> i <h1>, koje ste često sretali u prethodnim lekcijama.

Predefinisano ponašanje blok elementa - paragrafi se uvek prikazuju složeni jedan ispod drugoga.

Linijski elementi

Za razliku od blok elemenata, linijski elementi dolaze u nizu, jedan za drugim. Tipičan primer su elementi <a> i <img>.

Predefinisano ponašanje linijskih elementa - linkovi se uvek prikazuju u nizu s okolnim tekstom.

Popisi

Popisi su blok elementi, koji, osim blok svojstava, imaju i grafičku ili brojčanu oznaku ispred teksta.



strana 22

2.8. Generički kontejneri SPAN i DIV

Oznaka span

Element <span> je linijski generički kontejner. Smisao generičkih kontejnera je strukturirano obuhvatanje i formatiranje raznih elemenata koje mogu sadržati. Za razliku od oznaka koje su predefinisane - <p>, <h1>, ... - definisanje uloge generičkih kontejnera prepušteno je dizajneru.

Tipičan primer <span> kontejnera je formatiranje nekoliko reči 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 generički kontejner. Najčešće služi za obuhvatanje više blok ili linijskih elemenata unutar jedne strukture koja deli zajedničko formatiranje. Primer upotrebe ovog elementa su prikazi CSS i HTML koda.

/*ovaj kod je prikazan u kontejneru definisanim sledećim 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 upotrebe i velike fleksibilnosti kod formatiranja raznog sadržaja, pri izradi stranica generički kontejneri se često koriste i tamo gde to nije potrebno. Nemojte preterati sa upotrebom. Npr. ukoliko želite da formatirate tekst sa okvirom, nemojte postavljati tekst u <span> ili <div> kontejner kojem ste dodali okvir - setite se da se okvir može definisati i u paragrafu, koji je već ionako predviđen za formatiranje teksta.

strana 23

3. CSS SVOJSTVA

Podsetimo se kako radi CSS. Svaki stil se sastoji od selektora i njima pridruženih parova svojstva i vrednosti:

p { /* p je selektor */ font-family:"Courier New", Courier, mono; } .stil { color:#CC0000; /* color je svojstvo */ font-size:24px; /* 24px je vrednost */ font-weight:bold; }

Specifikacija CSS-a definiše čitav niz svojstava i njihovih vrednosti. Svojstva se po svom delovanju mogu grupisati u celine. Detaljnije ćemo razmotriti sledeće kategorije:

• svojstva fonta • svojstva teksta • svojstva boja i pozadina • svojstva CSS kutije • svojstva popisa • pozicioniranje (smeštanje).

3.1. Svojstva fonta

Ovo su, verovatno, najčešće korištena svojstva, jer bez obzira na dizajn i namenu stranice, tekst se zasigurno nalazi na većini od njih.

font-family

Ovo svojstvo sugeriše browseru kojim fontom će se prikazivati tekst u dokumentu. Problem nastaje ako korisnik na računaru nema instaliran potreban font. CSS definiše pet generičkih porodica fontova - serif, sans-serif, cursive, monospace i fantasy. Pri definisanju možemo koristiti neke od njih:

body { font-family:monospace; }

ili, što je preporučljivo, možemo koristiti stvarna imena fontova:

body { font-family:"Courier New", Courier, mono; }

U ovom slučaju browser će prvo pokušati da prikaže tekst fontom Courier New, a ako njega nema, onda fontom Courier i tek onda, ako prva dva fonta nisu instalirana, prikazaće tekst fontom iz porodice mono.



strana 24

font-weight

Svojstvo koje definiše debljinu znakova. Može poprimiti sledeće vrednosti: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Vrednost bolder je jedan stepen deblja vrednost od vrednosti postavljene za taj element. Slično, vrednost lighter je jedan stepen tanja od inače postavljene vrednosti. Najčešće se koriste vrednosti normal i bold. Bolder, lighter i brojčane definicije debljine fonta nisu sigurne za korišćenje jer ih browseri različito prikazuju - najčešće do 500 za normalne, a 600, 700, 800 i 900 za deblje fontove.

font-size

Definiše veličinu fonta. Može poprimiti bilo koju definisanu vrednost veličine (12px, 10pt, 2em...) ili neku od ključnih reči (xx-small, x-small, small, medium, large, x-large, xx-large). Budući da se svojstvo nasleđuje, možemo pisati sledeće:

body { font-size:10pt; } p { font-size:150%; }

U ovom primeru paragraf nasleđuje veličinu definisanu selektorom body, pa bi tekst u paragrafu bio prikazan fontom veličine 15pt.

font-style

Sugeriše browseru da prikaže tekst kao normal ili kao italic. Postoji još i vrednost oblique, ali nju browseri prikazuju isto kao italic.

font-variant

Može poprimiti vrednosti normal ili small-caps. Korištenjem small-caps dobije se efekt teksta pisanog velikim slovima, ali fontovima različitih veličina. Npr, u sledećoj rečenici prva slova svih reči pisana su velikim slovima:

p {font-variant:small-caps; } <p>Lorem Ipsum Dolor Sit Amet</p>

LOREM IPSUM DOLOR SIT AMET

Skraćeni selektor

Sva ova svojstva mogu se navesti preko skraćenog selektora font, na sledeći način:

p { font:italic small-caps 12px Verdana, Helvetica, sans-serif; }

strana 25

3.2. Svojstva teksta

Ova svojstva definišu razmeštaj teksta u dokumentu.

letter-spacing

Ovo svojstvo definiše razmak između 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

Definiše razmak između dve linije teksta (eng. baseline).

p { font-size:9pt; line-height:16pt; } <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. Može poprimiti vrednosti: none, underline, overline, line-through i blink. Boje dekoracija pojavljuju se u boji teksta.

text-transform

Pretvara slova iz koda u velika ili mala, zavisno od izabrane vrednosti svojstva. Moguće vrednosti su capitalize, uppercase, lowercase. Capitalize postavlja početno slovo u svakoj reči 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



strana 26

text-align

Vodoravno poravnanje teksta. Može se primeniti samo na blok elemente, a moguće vrednosti 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 obično uvučen za određenu vrednost. Ovo svojstvo poprima vrednosti dužine.

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.

strana 27

3.3. Svojstva boja i pozadina

Pravi izbor boja i pozadine je nešto što će, zasigurno, svaki web sajt učiniti atraktivnijim. Dok je sam izbor navedenih elemenata pri izradi web sajta prepušten vašem ličnom izboru, ovde ćemo vam pokazati kako postupak izbora učiniti lakšim. Naime, postavljanje ovih parametara u CSS datoteku daje vam mogućnost da sa jednog mesta promenite izgled čitavog web sajta.

color

Postavlja boju teksta u zadatom elementu. Može označavati i boju elementa - npr. za <hr>.

p { color:green;} <p>Lorem ipsum dolor sit amet</p>

background-color

Definiše boju pozadine za zadati element. Boja pozadine se proteže do granice elementa - bez obzira na odmak (padding).

div.primer { background-color:#3C6; color:#000; padding:3px; border:1px solid #000; } <div class="primer">Lorem ipsum dolor sit amet</div>

background-image

Postavlja pozadinsku sliku u element. Ukoliko se primenjuje s niže navedenim svojstvima, može se definisati fiksni položaj pozadinske slike ili ponavljanje po jednom od pravila.

background-repeat

Ponavljanje pozadinske slike. Može imati sledeće vrednosti: repeat - ponavlja; no-repeat - ne ponavlja sliku; repeat-x - ponavlja po vodoravnoj osi; repeat-y - ponavlja sliku po uspravnoj 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>



strana 28

background-attachment

Ovo svojstvo definiše pomera li se pozadinska slika sa elementom ili ne. Može dobiti vrednost scroll - pomera se, ili fixed - ne pomera se. Npr, ukoliko želimo da u telu dokumenta postavimo fiksnu pozadinu, možemo to napraviti sledećim kodom:

body { background-image:url("css.gif"); background-repeat:no-repeat; background-attachment:fixed; }

background-position

Pozadinska slika predefinisano se postavlja u gornji levi ugao dokumenta. Background-position je svojstvo koje omogućava postavljanje početnog položaja od kojeg će se postaviti slika. Može imati vrednost top, center, bottom, right, center, left ili procente, odnosno udaljenost od gornjeg levog ugla.

background

Skraćeno svojstvo. Moguće je navesti sva navedena svojstva bez obzira na redosled navođenja:

body { background:url("css.gif") no-repeat fixed;}

3.4. Svojstva CSS kutije

3.4.1. Margine

Margine određuju udaljenost CSS kutije, odnosno elementa, od susednih elemenata na stranici. Ova svojstva dobijaju vrednosti dužina koje mogu biti izražene u bilo kojoj dopuštenoj mernoj jedinici. Margine se mogu definisati ili sa sve četiri strane pojedinačno, ili skraćenim svojstvom.

margin-top

Gornja margina - udaljenost od gornjeg elementa.

margin-right

Desna margina - udaljenost od desnog elementa.

strana 29

margin-bottom

Donja margina - udaljenost od donjeg elementa.

margin-left

Leva margina - udaljenost od levog elementa.

Ukoliko, npr., imamo jedan element <div>, koji želimo prikazati odmaknutim od ivica dokumenta, možemo to uraditi koristeći 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 pojedinačne margine mogu se zameniti skraćenim svojstvom, koje bi se tada, za prethodni slučaj, definisale na sledeći način.

div { margin:15px 70px 5px 40px; }

Ukoliko želimo jednaku marginu za sve strane elementa, možemo pisati:

div { margin:5px;}

Ukoliko želimo simetrične margine po horizontali i vertikali za sve strane elementa, možemo pisati:

div { margin: 10px 5px;} 3.4.2. Odmaci

Odmak je udaljenost od granice CSS kutije do sadržaja. Slično kao i kod margina, postoje četiri odmaka i skraćeno svojstvo. Ukoliko nije eksplicitno definisana, predefinisana vrednost odmaka je 0.



strana 30

padding-top

Odmak od gornje granice.

padding-right

Odmak od desne granice.

padding-bottom

Odmak od donje granice.

padding-left

Odmak od leve granice.

Razmotrimo opet element div iz prethodne lekcije, pa mu 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>


Vidljivo je kako tekst, zbog odmaka, prelazi u nov red, ali se boja pozadine, bez obzira na odmak, proteže do granice elementa.

padding

Kao i kod margina, i ovde je moguće definisati odmak na više načina:

div {padding:5px 10px 15px 20px;} div {padding:5px;}

div {padding: 10px 5px;}

strana 31

3.4.3. Granice

CSS standard definiše niz svojstava kojima je moguće opisati granicu elementa. Moguće ih je podeliti u četiri grupe: širina granice, boja granice, izgled granice i skraćena svojstva.

border-width

Slično kao i kod prethodnih svojstava, i ovo se svojstvo deli na četiri položaja - gore, desno, dole i levo.

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>


Ili za jednaku širinu sve četiri granice:

div {border-width:2px;}

border-color

Boja granice takođe se može definisati 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>



strana 32


Ili za istu boju svih četiri granice:

div { border-color:red;}

border-style

Svojstvo izgleda granice može poprimiti sljedeće vrednosti: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. Ponovno imamo mogućnost 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; }



Ili zajedničko svojstvo za sve četiri granice:

div { border-style:dotted;}

border

Sva navedena svojstva možemo postaviti skraćeno za pojedinačnu granicu:

div { border-top: 2px solid #000; border-right:4px dotted red; border-bottom:6px dashed #fc0; border-left:6px groove #0c0; }


strana 33


Ili za sve četiri granice u jednoj definiciji:

div { border:2px dotted #000;} 3.4.4. Dimenzije

Dimenzije CSS kutije definisane su širinom i visinom sadržaja:

width

Definiše širinu sadržaja.

height

Definiše visinu sadržaja.

Širina i visina sadržaja može biti postavljena na bilo koji blok element, bez obzira na dimenzije koje bi taj element inače zauzeo. Npr, u slučaju CSS ikonice:

img.ikona { height:165px; width:120px; } <img src="css.gif"> <img src="css.gif" class="ikona">



strana 34

3.5. Liste i njihova svojstva

Ukoliko uz oznaku <div> možemo navesti još poneku HTML oznaku kojoj se dolaskom CSS-a znatno povećala upotreba, onda su to sigurno liste. Mogućnost formatiranja koje je doneo CSS omogućile su da se liste, od običnog elementa za nizanje teksta, pretvore u moćan alat.

Liste se sastoje od <ul>, odnosno <ol> oznake, koje ustvari čine blok element, te od jedne ili više <li> oznaka koje predstavljaju elemente liste. Svaku od ovih oznaka možemo posebno formatirati.

list-style-type

Definiše tip grafičkih oznaka koji će biti prikazan ispred pojedinog elementa list. Može poprimiti sledeće vrednosti: disc, circle, square, decimal, lower-roman, upper-roman, 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 omogućava da listi umesto uobičajene grafičke oznake dodamo sliku. Npr:

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.

strana 35

list-style-position

Definiše uvlačenje elemenata liste. Može imati vrednost inside ili outside. Pretpostavljena vrednost je outside.

list-style

Skraćeno svojstvo za istovremen prikaz svih svojstava liste. U ovom primeru, ukoliko je slika nedostupna, prikazuje se circle:

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

3.6. Svojstva pozicioniranja (smeštanja)

Ovo je veoma važna lekcija i kada ovo savladate napokon ćete moći od svega što ste do sad naučili napraviti celinu i izraditi web sajt onakav kakav želite. Takođe, samo pozicioniranje je ono što većini koji uče CSS obično predstavlja najveći problem da savladaju, samim tim što je obično i veoma loše objašnjeno.

Postoje više potpuno različitih metoda za pozicioniranje sadržaja na stranici, to su: relativno, apsolutno i fiksno pozicioniranje, kao i pozicioniranje sadržaja float metodom što se smatra za potpuno izdvojenu tehniku u odnosu na tri prvonavedena.

Position vs Float

Prvo ćemo da biste tehnike pozicioniranja što lakše shvatili , pre nego što svaku detaljno objasnimo ponaosob, utvrditi generalnu razliku između relativnog, apsolutnog i fiksnog pozicioniranja sa jedne strane i pozioniranja float metodom sa druge strane. Dakle, dok prve tri metode (positioning) koriste x i y koordinate za precizno pozicioniranje elemenata na stranici mereno u pikselima, float metod je pozicioniranje gde se određenom sadržaju "naređuje" da se prilepi krajnje levo ili krajnje desno koliko god može do susednog elementa i na ovaj način elementi se "lepe" jedan do drugog i na taj način postavljaju na stranici. Svaka od ovih metoda ima neke svoje prednosti i ne možete se osloniti na korišćenje samo jedne metode, već ćete ih koristiti sve zavisno od slučaja do slučaja.

Relativno pozicioniranje

Kada kažemo relativno pozicioniranje, obično ćete se odmah upitati "relativno u odnosu na šta?". Odgovor: relativno u odnosu na uobičajeni položaj elementa koji je normalan po defaultu, tj položaj koji element ima pre bilo kakvog određivanja novog položaja.

Zamislite da ste ukucali tri reda teksta u okviru body dela stranice, a nakon toga postavili ispod ta tri reda na stranicu neku sliku. Dakle podrazumevani položaj ove slike je položaj



strana 36

ispod teksta. To je položaj koji je određen samim tokom dokumenta i ovaj položaj se smatra nultom tačkom kada govorimo o relativnom pozicioniranju.

Dakle ukoliko sada ovu sliku želimo da pomerimo dvadeset piksela udesno u odnosu na njenu već postojeću poziciju uslovljnu samim tokom dokumenta, koristićemo sledeći CSS kod:

img{ position:relative; left:20px }

Apsolutno pozicioniranje

Dok se kod relativnog pozicioniranja novi položaj elementa određuje u odnosu na njegov samim tokom u dokumentu određeni položaj, kod apsolutnog pozicioniranja novi položaj elementa određuje se u odnosu na element u kome se nalazi. Dakle, primer od malopre ali ovog puta sa apsolutnim pozicioniranjem

img{ position:absolute; left:20px }

Kod će u ovom slučaju postaviti sliku da ona bude udaljena 20 piksela, ali ne u odnosu na podrazumevani položaj slike kao u prvom primeru, već u odnosu na krajnji levi ugao vašeg browsera zato što se nalazi uokviru body taga.

Kombinovanje relativnog i apsolutnog pozicioniranja

Ukoliko bi se ova slika nalazila u okviru nekog drugog elementa koji nije body onda bi se pozicija merila u odnosu na taj element. Međutim, da bi ovo ispravno funkcionisalo element u kome se slika nalazi mora biti relativno pozicioniran. Ovo je veoma bitno da zapamtite jer ćete to veoma često koristiti.

Fiksno pozicioniranje

Kod ove vrste pozicioniranja elementu zadajete koordinate na stranici gde se položaj elementa neće menjati ni ukoliko npr skrolujete celu stranicu. Ovo je veoma zanimljiva mogućnost jer je možete recimo koristiti kako biste napravili meni za vaš web sajt koji uvek stoji u istoj poziciji (recimo sam vrh ili sam levi ugao) nezavisno od ostatka sajta koji se nezavisno od ovog elementa sasvim normalno skroluje. Takođe ovako možete fiksirati polozaj i bilo kog drugog elementa, recimo slike:

img{ position:fixed; left:20px }

strana 37

...čime ova slika ima vrednost left:20px bez obzira da li će stranica biti skrolovana ili ne.

Pri korišćenju apsolutnog, relativnog ili fiksnog pozicioniranja (smeštanja), možemo koristiti niže navedena svojstva.

left

Udaljenost od leve referentne tačke - elementa ili prozora browsera. Može dobiti vrednost dužine ili procenta dužine ili vrednost auto.

top

Udaljenost od gornje referentne tačke - elementa ili prozora browsera. Može imati vrednost dužine ili procenta dužine ili vrednost auto.

div {position:relative; top:20px; left:50px; border:1px solid #000; }


z-index

Ukoliko se dva elementa prekrivaju, vrednost ovog svojstva definiše koji će element biti iznad, a koji ispod. Element s većom vrednošću uvek se nalazi iznad.

Svojstva čije vrednosti dobijaju jedinice dužina često dopuštaju i negativne vrednosti. Npr, left:-10px može značiti da se element prikaže 10 piksela levo od mesta na kojem bi se inače prikazao.



strana 38

3.7. Ostala svojstva

Od niza svojstava CSS-a, ovde smo napravili izbor još nekoliko atraktivnih i češće korišćenih:

cursor

Definiše vrstu pokazivača kada se on nađe iznad elementa. Može imati vrednosti: auto, crosshair, default, help, move, pointer, text, wait...

div { cursor:crosshair;}

overflow

Definiše kako će se prikazati sadržaj koji je veći od CSS kutije. Može imati vrednosti: visible, hidden, scroll i auto. Npr, oznaka <div> definisane visine, ali s viškom teksta, kao u sledećem primeru, biće prikazana sa trakom za skrolovanje.

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

Definiše vidljivost elementa. Može poprimiti vrednosti visible - vidljiv, ili hidden - skriven. Ako se možda pitate zašto biste skrivali element na stranici, odgovor leži u JavaScriptu - skriptnom jeziku koji u kombinaciji s CSS-om nudi neizmerne mogućnosti ulepšavanja stranica dinamičkim efektima.

strana 39

display

Atribut display određuje na koji način je određeni element prikazan na stranici, odnosno da li će se uopšte prikazati na stranci i ako hoće na koji. Ovo nam omogućava promenu predefinisanog načina prikaza različitih tipova elemenata, kad želimo npr. blok element da prikažemo kao linijski.

Na primer, ukoliko upišete display:none, element kome ste tu vrednost pridodali neće biti vidljiv na stranci iako će postojati u samom kodu. Postoje mnoge vrednosti atributa display, a evo nekih:

• display:none - element nije vidljiv na stranici, • display:inline - podrazumevana vrednost, sadrzaj se prikazuje uokviru iste linije, • display:block - element se prikazuje kao blok-element, • display:list-item - element ce biti prikazan kao lista, • display:run-in - element ce biti prikazan ili kao inline ili kao blok-element, zavisno od

sadržaja, • display:compact - opet, element ce biti prikazan ili kao inline ili kao blok-element,

zavisno od sadržaja, • display:table - element ce biti prikazan u vidu tabele kao blok-element, • display:inline-table - element ce biti prikazan u vidu tabele, kao inline element.

Postoje još i sledeće vrednosti: table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption i marker. Verovatno ćete od svih ovih vrednosti u najčešćem broju slučajeva koristiti samo: none, inline, block i list-item, ali naravno nije na odmet da malo eksperimetišete i shvatite značenje svih vrednosti, jer ćete display atribut najlakše razumeti kroz primere.

Evo i jednog sa kojim možete početi, koji jednostavno čini svaki paragraf nevidljiv na stranici:

p {display: none}

Ovde je primer 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>



strana 40

4.OGRANIČENJA I NEDOSTACI CSS-a Pored svih navedenih prednosti korišćenja CSS-a, treba pomenuti i niz mana koje ova tehnika sa sobom nosi, od kojih će neke verovatno biti ispravljene ili bar ublažene u narednim verzijama browsera ili samog CSS-a.

4.1 Nedoslednost browsera

Različiti browseri će interpretirati CSS kŏd na različite načine zbog svojih bagova ili zbog nepodržavanja određenih mogućnosti CSS CSS-a. Na primer, IE, čija ranija izdanja nisu podržavala mnoge mogućnosti CSS-a 2.1, je pogrešno interpretirao veliki broj bitnih opisa objekata, uključujući širinu, visinu i plutanje. Da bi se postigla doslednost prikaza u brojnim popularnim browserima, moraju se koristiti raznorazne veštine i podešavanja. U praksi, najviše problema stvara Internet Explorer čije različite verzije koje su u upotrebi (6,7, 8 i 9) čak i međusobno drugačije interpretiraju pojedine CSS definicije. Mozilla Firefox, Google Chrome i Opera se generalno ponašaju isto u svim aktuelnim verzijama, dok su neznatne razlike u odnosu na njih primetne kod Safari-ja.

4.2 Složenost

Veliki sajtovi imaju problem veličine CSS dokumenata, koji vremenom postaju toliko složeni i dugački da održavanje i dodavanje novih svojstava postaje izuzetno težak posao. Rešenje može biti u podeli na nekoliko manjih fajlova, u kojima su stilovi grupisani po nekom kriterijumu (npr “tabele”, “tekst”, “meni” itd.)

4.3 Ograničeno nasleđivanje

Opisi elemenata se ne mogu bazirati na drugim objektima. CSS ne podržava nasleđivanje u pravom smislu - ne postoji način da se izabere opis nekog drugog elementa na kojem bi se bazirao trenutni element (npr. neka ova Nasleđivanje postoji, ali se bazira na unapred utvrđenom pravilu da se opisi nasleđuju od elementa u kojem se dotični element nalazi, tj. od roditeljskog elementa.

4.4 Problemi pri vertikalnoj orijentaciji elemenata

Iako je prilično lako postići horizontalno pozicioniranje elemenata, vertikalni tok je prilično teško, i ponekad nemoguće postići na željeni način. Primeri za ovo su centriranje objekta po vertikali nekog drugog elementa ili prikaz podnožja dokumenta na samom dnu vidljivog dela prozora. Ponekad je najlakše upotrebiti skriptni jezik poput Javascripta, koji na osnovu tekućeg stanja klijenta prikazuje element na odgovarajućoj poziciji, međutim time se gubi na kompatibilnosti jer određeni korisnici ne žele da koriste Javascript.

4.5 Nedostatak aritmetičkih operacija

Dosadašnje verzije CSS -a nisu podržavale ni najjednostavnije aritmetičke operacije (npr. margin-left: 10% 10%-10px;). Delimični napredak je ostvaren uvođenjem izraza calc(), a

strana 41

Internet Explorer od verzije 5.0 podržava izraz expression, sa sličnim mogućnostima. CSS3 je donekle poboljšao mogućnosti po ovom pitanju, ali je sve to i dalje daleko od mogućnosti koje bi nam intuitivno pale na pamet.

4.6 Nepostojanje promenljivih

CSS ne podržava promenljive ni u kakvom obliku. Promenljive bi poslužile za centralizovani opis određene boje, veličine ili čitavog skupa osobina, što bi obezbedilo lakše održavanje i menjanje, ali i manje CSS fajlove. Sa trenutnim verzijama, pristupa se grupnom opisivanju nekoliko različitih klasa razdvojenim zarezom, da bi se umanjio problem nepostojanja promenljivih.

4.7 Neslaganje pojedinačnih opisa

Određena svojstva imaju sličnu svrhu, i često se preklapaju i ne slažu u potpunosti. Npr. svojstva position, float i display određuju lokaciju prikaza elementa i njihovo kombinovanje često prouzrokuje neočekivane rezultate a određene kombinacije su po pravilu zabranjene.

Na primer, ako određenom elementu dodelimo svojstvo display: table table-cell, onda mu ne možemo dodeliti svojstvo float niti position: relative.



strana 42

5. NOVITETI U CSS3

Pre nego što krenete sa korišćenjem CSS3, morate znati da korisnici Internet Explorera 8 i starijih verzija neće videti njegove mogućnosti. Dalje, za prilagođavanje naprednih CSS3 mogućnosti internet browseru, onda morate upisati sledeće prefikse:

• ms - za Internet explorer, • webkit - za Safari i Chrome, • moz - za Mozillu.

Noviteti u CSS3:

• zaobljene ivice raznih elementa, • senke slova i elemenata, • providnost (od 0 do 100%) • gradijent boja (pozadine, teksta, bordera itd) • animacija elemenata (npr promena pozicije, boje pozadine, veličine) • definisanje pozadine elemenata pomoću više slika odjednom (moguće podešavanje

pozicije i veličine svake od slika) • korišćenje fontova koji nisu standardno prisutni kod korisnika, ali se daljinski učitavaju

sa neke lokacije na internetu (pogledati npr Google Fonts) • rotacija elemenata (od 0 do 360 stepeni) i njihovo izobličavanje (npr. iz standardnog

pravougaonika u romb)

Npr. da bi određeni div element imao zaobljene (chamfered) uglove i blagu senku okolo, koristimo sledeći CSS stil

div#zaobljeno{ -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; box-shadow: -4px 6px 9px rgba(0, 0, 0, 0.30); -moz-box-shadow: -4px 6px 9px rgba(0, 0, 0, 0.30); -webkit-box-shadow: -4px 6px 9px rgba(0, 0, 0, 0.30); }

Da bi div element imao 3 različite slike u svojoj pozadini, koristimo sledeći stil:

div#slike{ background: url(image1.png) right bottom, url(image2.png) center, url(image3.png); }

Gradijent pozadinske boje (navodi se ugao pod kojim je gradijent primenjen, pa zatim redom boje sa svojim iznosom):

div#prelaz{ background: linear-gradient (225deg, red, green 20%, yellow 70%, 5 white); }

strana 43

6. CSS MENI

Izrada menija web sajta HTML kodom obično zahteva na desetine linija koda, formatiranje pomoću tabele i dodavanje raznih efekata korišćenjem JavaScript-a. Ovde smo za vas pripremili jednostavan CSS meni koji uključuje razne efekte, od menjanja boja do formatiranja podmenija, i to sve bez navedenih elemenata.

Meni je sastavljen od nekoliko linkova tipičnih za manje sajtove. Sastavni deo menija je podmeni, ovde prikazan samo za jedan nadređen link. Konačan izgled koji želimo postići dat je na slici:

6.1. Definisanje liste linkova

Prvi korak do cilja je definisanje lista linkova. Liste se zbog svojih CSS svojstava redovno koriste za kreiranje menija. Lista glavnog menija sastoji se od četiri linka:

<ul> <li><a href="#">Naslovna</a></li> <li><a href="#">Proizvodi</a></li> <li><a href="#">O nama</a></li> <li><a href="#">Kontakt</a></li> </ul>

• Naslovna • Proizvodi • O nama • Kontakt

Kako se podmeni razlikuje od menija, linkove menija dodajemo kao još jednu listu. <ul> <li><a href="#">Naslovna</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>



strana 44

Sada imamo definisanu listu i sledi njeno formatiranje. Ovim smo i završili izmene HTML koda, jer ćemo dalje formatiranje potpuno obaviti CSS-om.

6.2. Formatiranje liste linkova

Popis formatiramo jednostavnim (ul i li) i kontekstnim selektorima (ul li a i ul ul li a). Primećujete da ovaj poslednji identifikuje samo one linkove koji su u <li> elementu dvostrukog popisa (ul ul).

Na oba popisa postavljamo sledeća svojstva:

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

ul, li { list-style:none; /* skida grafičku 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 formatiranu listu i sledi dodavanje boje i biranje efekta uz linkove.

strana 45

6.3. Stilizovanje liste linkova

Pored samog razmeštanja elemenata na stranici, izbor boja i dodavanje ukrasa isključivo pripada poslu web dizajnera. Ovde se može videti snaga CSS-a, jer web dizajner, bez obzira na napisan kôd, menjanjem CSS-a u potpunosti može promeniti izgled liste.

Popis ćemo obojiti plavom bojom, znakove ćemo podebljati, a kao ukras i podlogu za dinamički efekt, koristićemo levu granicu linka. Postavićemo je na debljinu od 6 piksela za linkove glavnog menija, odnosno 4 piksela za linkove podmenija, definisati liniju (vrednost solid) i postaviti joj boju koju smo dodelili 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*/ }

Predefinisana vrednost širine granice linka je 0 piksela, tako da nam je ovde potrebno samo postaviti debljinu leve granice. Ovim smo dobili sledeći prikaz, a ono što nam sledi je završavanje dodavanjem dinamičkog efekta:



strana 46

6.4. Dodavanje dinamičkog efekta

Iako su linkovi gotovi i funkcionalni, nedostaje im nešto što u današnje vreme uobičajeno srećemo kod većine menija. Pomeranjem kursora miša, korisnici su navikli da im nekakav efekt označi iznad kog linka se nalazi kursor. Takvi efekti, osim ulepšavanja, imaju i ulogu lakše orijentacije i snalaženja među linkovima.

Ovaj dinamički efekat ćemo postići dodavanjem pseudoklasa u stil. Upotrebićemo pseudoklasu hover, a menjaćemo boju leve 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; } ul li a:hover { /* dinamički efekt za meni */ 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; } ul ul li a:hover { /* dinamički efekt za podmeni */ text-decoration:none; margin:1px; border-left:4px solid #ccf; }

strana 47

7. CSS TABOVI

U ovoj će lekciji biti prikazan i detaljno objašnjen jednostavan način izrade navigacionih elemenata koji bi kao jedinstvena navigaciona celina trebalo da podsećaju na "tabove".

Tabovi su već duže vreme jedno od češćih rešenja internet navigacije. Iako se danas na internet može pronaći celi niz složenih rešenja za njihovu izradu, među kojima su naročito popularna ona koja kombinuju CSS i grafičke elemente, u ovoj je lekciji prikazana upotreba isključivo CSS-a. Valja posebno napomenuti da je ovakav pristup izabran ne samo zbog jednostavnosti već i radi potpuno jednakog prikaza u web browserima koji podržavaju CSS, što se često ne postiže kod primene složenih rešenja.

7.1. Prvi korak

Osnovu našeg rešenja č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:

#tabovi li { display:inline; /*postavlja listu u horizontalni red*/ }

koji se dodaje na nesortiranu listu:

<ul id="tabovi"> <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.



strana 48

7.2. Drugi korak

U ovom koraku linkovima se dodaje pozicioniranje, boja znakova kao i crta koja se koristi za razgraničenje od sadržaja. Smeštanje se uspostavlja marginama i odmacima, a kao crta širine 2 piksela upotrebljava se donja granica nesortiranog popisa.

#jahaci { color:#000; /* linija razgraničenja od sadržaja */ 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 vršiti bilo kakve promene jer je cela definicija navedena implicitno putem id-a nesortiranog popisa:

<ul id="tabovi"> <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 poređanim jedan do drugog.

7.3. Treći korak

Izgled pojedinog taba uspostavlja se CSS uputom izvedenom grupisanjem. Jedan tab prikazuje jedan link, a izgled se može prilagoditi upotrebom #tabovi li a selektora.

#tabovi li a { color:#000; background:#d9dbe1; /*okvir jahača*/ border:2px solid #455372; padding:3px 5px 1px 5px;

strana 49

margin:0px; /*bez podvlacenja*/ text-decoration:none; }

Ovako definisani CSS rezultira konačnim izgledom tabova. U sledećem koraku preostaje još samo dodavanje dinamike promene izgleda linka u CSS-u.

7.4. Četvrti korak

Dinamika promene izgleda linka pripada kategoriji kojoj je važno posvetiti posebnu pažnju. Naime, osim same atraktivnosti kojoj se obično teži, promena izgleda ima i funkcionalan značaj jer korisniku olakšava izbor mesta na koje se može kliknuti.

Primenu dinamičkih elemenata na linkovima, kao i u prethodnom primeru, postižemo upotrebom pseudoklasa active i hover - kako bismo promenili izgled linka bilo klikom, bilo prelaskom miša preko linka.

#tabovi li a:hover { border-bottom:2px solid white; background-color:#eee; color:#455372; } #tabovi li a:active { color:#c00; }

Rezultat primene pseudoklase vidljiv je ako mišem prelazimo preko linkova.

7.5. Peti korak

Za kraj je potrebno dodati efekt koji boju pozadine na aktivnom tabu čini jednakom boji stranice. To se postiže upotrebom još jedne CSS klase:

#tabovi li a.aktivni { color:#000; background:#fff; border-bottom:2px solid white; }



strana 50

Ova klasa se dodaje na link koji pokazuje na trenutnu stranicu (u našem primeru 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>

Konačan izgled navigacije:

Celokupan CSS kod:

#tabovi { 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; }

Documents

font-variant 24alas.matf.bg.ac.rs/~mi13120/DrugaGodina/Literatura/02_CSS skripta.pdfe-mail: strana 1 font-variant ..... 24 SADRŽAJ 1. UVOD ..... 5