P. 1
css-vezbe

css-vezbe

|Views: 15|Likes:
Published by Nikola Nojic
CSS
CSS

More info:

Categories:Types, Presentations
Published by: Nikola Nojic on Oct 08, 2013
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PPT, PDF, TXT or read online from Scribd
See more
See less

10/23/2015

pdf

text

original

Sections

CSS - Cascading Style Sheets

Programiranje internet aplikacija dr Nenad Jovanovid Dragan Stankovid FTN K.Mitrovica, 2012.

© N. Jovanovid, D.Stankovid, 2012

1

Cascading Style Sheets
• HTML definiše strukturu tj. sadržaj • CSS se koristi za podešavanje izgleda tog HTML-om definisanog sadržaja
• Npr. promena pozadine, boja, vrsta i veličina slova, izgled tabele, poravnanje, veličina, ... • Sve ove osobine stranica se mogu čuvati u posebnom dokumentu, pa se promenom jednog parametra na jednom mestu menja izgled svih stranica
© N. Jovanovid, D.Stankovid, 2012 2

Sintaksa
• CSS sintaksa se sastoji od tri dela:
– Selektora; to je HTML elemenat koga želimo da definišemo – Svojstava; to je atribut koji želimo da promenimo – Vrednosti; vrednost atributa

selector {property:value}

Npr.
h1 {color:blue} p {color:red;text-align:center} p { color:red; text-align:center }
© N.Jovanovid, 2010 3

Gde se ubacuju (definišu) ove CSS linije?
• CSS elementi se mogu definisati kao:
– Unutrašnji (Interni) – Spoljnji (Eksterni) – U liniji (In line)

© N.Jovanovid, 2010

4

Interni CSS
• Da bi se definisali u okviru stranice koristi se tag <style>, u head sekciji HTML stranice, i njegov atribut type sa vrednošdu "text/css" • U okviru ovog taga se definišu pojedinačni CSS elementi.

© N.Jovanovid, 2010

5

Primer1
<html> <head> <style type="text/css"> h1 {background-color: blue} p {color:red;text-align:center} body {color:white;background-image:url(“sl1.gif")} </style> </head> <body> <h1>Prvi naslov</h1> <h1>Drugi naslov</h1> <p>Tekst paragrafa</p> </body> </html>

© N.Jovanovid, 2010

6

Selektori
selector { property:value; property:value; property:value; }
<html><body> <h1>Prvi naslov</h1><h2>Drugi naslov</h2> <p>Tekst paragrafa</p> <p>Tekst paragrafa 2</p> <div> <div> <ul> <li> Gornja 1 </li> <li> Gornja 2 </li> </ul> </div> </div> <div> <ul> <li> Donja 1 </li> <li> Donja 2 </li> </ul> </div> </body></html>
© N. Jovanovid, D.Stankovid, 2012 7

Selektori
selector { property:value; property:value; property:value; } Želimo da im postavimo:
background-color:red;
<html><body> <h1>Prvi naslov</h1><h2>Drugi naslov</h2> <p>Tekst paragrafa</p> <p>Tekst paragrafa 2</p> <div> <div> <ul> <li> Gornja 1 </li> <li> Gornja 2 </li> </ul> </div> </div> <div> <ul> <li> Donja 1 </li> <li> Donja 2 </li> </ul> </div> </body></html>
© N. Jovanovid, D.Stankovid, 2012 8

Selektori
selector { property:value; property:value; property:value; } Želimo da im postavimo:
background-color:red;
<html><body> <h1>Prvi naslov</h1><h2>Drugi naslov</h2> <p>Tekst paragrafa</p> <p>Tekst paragrafa 2</p> <div> <div> <ul> <li> Gornja 1 </li> <li> Gornja 2 </li> </ul> </div> </div> <div> <ul> <li> Donja 1 </li> <li> Donja 2 </li> </ul> </div> </body></html>
© N. Jovanovid, D.Stankovid, 2012 9

Selektori
selector { property:value; property:value; property:value; } Želimo da im postavimo:
background-color:red;
<html><body> <h1>Prvi naslov</h1><h2>Drugi naslov</h2> <p>Tekst paragrafa</p> <p>Tekst paragrafa 2</p> <div> <div> <ul> <li> Gornja 1 </li> <li> Gornja 2 </li> </ul> </div> </div> <div> <ul> <li> Donja 1 </li> <li> Donja 2 </li> </ul> </div> </body></html>
© N. Jovanovid, D.Stankovid, 2012 10

Selektori
selector { property:value; property:value; property:value; } Želimo da im postavimo:
background-color:red;
<html><body> <h1>Prvi naslov</h1><h2>Drugi naslov</h2> <p>Tekst paragrafa</p> <p>Tekst paragrafa 2</p> <div> <div> <ul> <li> Gornja 1 </li> <li> Gornja 2 </li> </ul> </div> </div> <div> <ul> <li> Donja 1 </li> <li> Donja 2 </li> </ul> </div> </body></html>
© N. Jovanovid, D.Stankovid, 2012 11

(samo unutrašnji div – koristiti hijerarhiju)

Selektori
selector { property:value; property:value; property:value; } Želimo da im postavimo:
background-color:red;
<html><body> <h1>Prvi naslov</h1><h2>Drugi naslov</h2> <p>Tekst paragrafa</p> <p>Tekst paragrafa 2</p> <div> <div> <ul> <li> Gornja 1 </li> <li> Gornja 2 </li> </ul> </div> </div> <div> <ul> <li> Donja 1 </li> <li> Donja 2 </li> </ul> </div> </body></html>
© N. Jovanovid, D.Stankovid, 2012 12

(samo gornja li – koristiti hijerarhiju)

Selektori
selector { property:value; property:value; property:value; } Želimo da im postavimo:
background-color:red;
<html><body> <h1>Prvi naslov</h1><h2>Drugi naslov</h2> <p>Tekst paragrafa</p> <p>Tekst paragrafa 2</p> <div> <div> <ul> <li> Gornja 1 </li> <li> Gornja 2 </li> </ul> </div> </div> <div> <ul> <li> Donja 1 </li> <li> Donja 2 </li> </ul> </div> </body></html>
© N. Jovanovid, D.Stankovid, 2012 13

(kako sad???)

Klase i identifikatori
• Atributi tagova: class, id
– Šta su atributi tagova i kakav oblik imaju?

• Pomažu u dodeljivanju stilova pojedinim elementima • Slobodni smo da sami dodamo te atribute u zavisnosti od naše potrebe da samo određenim elementima promenimo prikaz • Potrebno je da vrednost id atributa bude jedinstvena na nivou stranice

© N. Jovanovid, D.Stankovid, 2012

14

Primer
• <p class=“ime”> … </p> • <div id=“ime”> … </div> • <div id=“imeId” class=“imeKlase”> … </div> p.ime { … } div#ime { … } div#imeId {…} ili div.imeKlase {…}
© N. Jovanovid, D.Stankovid, 2012 15

Selektori
selector { property:value; property:value; property:value; } Želimo da im postavimo:
background-color:red;
<html><body> <h1>Prvi naslov</h1><h2>Drugi naslov</h2> <p>Tekst paragrafa</p> <p>Tekst paragrafa 2</p> <div> <div> <ul> <li> Gornja 1 </li> <li> Gornja 2 </li> </ul> </div> </div> <div> <ul> <li> Donja 1 </li> <li> Donja 2 </li> </ul> </div> </body></html>
© N. Jovanovid, D.Stankovid, 2012 16

(sad vi...)

Selektori
selector { property:value; property:value; property:value; } Želimo da im postavimo:
background-color:red;
<html><body> <h1>Prvi naslov</h1><h2>Drugi naslov</h2> <p>Tekst paragrafa</p> <p>Tekst paragrafa 2</p> <div> <div> <ul> <li> Gornja 1 </li> <li> Gornja 2 </li> </ul> </div> </div> <div> <ul> <li> Donja 1 </li> <li> Donja 2 </li> </ul> </div> </body></html>
© N. Jovanovid, D.Stankovid, 2012 17

(samo gornja li – pomodu id i klase)

Eksterni CSS
• Eksterni CSS se koristi kada se želi primeniti jedan stil na više stranica • Pomodu eksternog CSS-a mogude je promeniti izgled celog web sajta promenom samo jednog fajla, koji definiše stil • U okviru svake stranice, umesto dosadašnjih CSS elemenata, treba definisati referencu na novi dokument.
© N.Jovanovid, 2010 18

Eksterni CSS
• Referenca na CSS fajl se postiže pomodu taga <link>, u okviru taga <head> , sa definisanom putanjom i imenom CSS dokumenta
<head> <link rel="stylesheet" type="text/css" href=“mojstil.css" /> </head>

© N.Jovanovid, 2010

19

Eksterni CSS
• Fajl sa definisanim SCC stilom može se definisati u bilo kom tekst editoru • Fajl ne treba da sadrži nijedan html tag • Treba ga snimiti sa ekstenzijom “.css”

© N.Jovanovid, 2010

20

Primer 2
<html> <head> <link rel="stylesheet" type="text/css" href="mojstil.css" /> <title>Moja strana sa stilom</title> </head> <body> <h1>Moja prva strana sa EKSTERNIM CSS-om</h1> <Dobro dosli! <p>I nije neki sadrzaj, ali bar ima stil. <p>Ovde traba da bude jos toga... </body> </html>

© N.Jovanovid, 2010

21

mojstil.css
h1 {background-color: #00ff00} p {color:red;text-align:center}

© N.Jovanovid, 2010

22

In line CSS
• In line CSS gubi mnoge prednosti zato što kombinuje sadržaj sa prezentacijom • U ovom slučaju atributi stila se koriste u relavantnom tagu
<p style="color:sienna;margin-left:20px">Ovo je paragraf.</p

© N.Jovanovid, 2010

23

Primer 3
<html> <body style =“background-image:url(‘sl1a.gif’)”> <h1 style =“background-color: #00ff00”>Prvi naslov</h1> <h2 style =“background-color: red”>Drugi naslov</h2> <p style =“color:red;text-align:center” >Tekst paragrafa</p> </body > </html>

© N.Jovanovid, 2010

24

• U slučaju da se definišu različiti stilovi, interni i eksterni, vrednost de biti nasleđena od specifičnijeg stila

© N.Jovanovid, 2010

25

Primer
• Eksterni h3 { color:red; text-align:left; font-size:8pt } • Interni • Osobine h3 de biti h3 { color:red; text-align:right; text-align:right; font-size:20pt font-size:20pt }

Boja se nasleđuje od eksternog stila, a format teksta iz internog

© N.Jovanovid, 2010

26

• Profesor...

© N. Jovanovid, D.Stankovid, 2012

27

• U okviru jednog objekta može da se navede više parova atribut-vrednost. U tom slučaju parovi se odvajaju pomodu znaka “;”
p {font-size:8pt;color:red}

ili
p { font-size:8pt; color: red; }
© N.Jovanovid, 2010

28

• Više objekata mogu da dele iste atribute sa istim vrednostima. Na primer:
h1,h2,h3,h4 { color: red }

© N.Jovanovid, 2010

29

CSS klase
• Nekada je potrebno da određeni CSS objekat može da ima više vrednosti za isti atribut i da su te različite vrednosti potrebne na različitim mestima u html stranici. • Na primer, stranica se sastoji od dvadeset paragrafa, i potrebno je da kod osamnaest paragrafa tekst bude poravnat uz desnu marginu, a kod dva da bude centriran • U okviru CSS objekta, klasa se definiše navođenjem simbola “.” i imena klase. p.desno {text-align: right} p.centrirano {text-align: center}

© N.Jovanovid, 2010

30

CSS klase
• Klasu određenog objekta pozivamo tako što u željenom tagu navodimo kod class=imeKlase. Tako de na našoj primer stranici paragrafi koje želimo da poravnamo uz desnu marginu imati strukturu:
<p class="desno"> Tekst koji treba da bude uz desnu marginu </p>

• a paragrafi čiji tekst treba da bude centriran imati strukturu
<p class="centrirano"> Tekst koji treba da bude centriran </p>

© N.Jovanovid, 2010

31

Primer4
<html> <head> <link rel="stylesheet" type="text/css" href="mojstil.css" /> <title>Primer 4</title> </head> <body> <h1>Naslov stranice</h1> <p class="desno"> Tekst koji treba da bude uz desnu marginu </p> <p class="centrirano"> Tekst koji treba da bude centriran </p> </body> </html>

© N.Jovanovid, 2010

32

mojstil.css
h1 {background-color: ##00ff00} p.desno {text-align: right} p.centrirano {text-align: center}

© N.Jovanovid, 2010

33

Pozadina
• Boja pozadine body {background-color:#b0c4de} • Boja se može specificirati
– Imenom (“red”) – RGB ("rgb(255,0,0)") – Heksadecimalnom vrednošdu ("#ff0000")

© N.Jovanovid, 2010

34

Pozadina
• Slika u pozadini body {background-image:url(‘slika.gif')} • background-repeat – koristi se ako želimo da se slika ponavlja:
body { background-image:url(‘sl.gif'); background-repeat:repeat-x; }

© N.Jovanovid, 2010

35

Slika u pozadini
• Ako ne želimo da se slika ponavlja
body { background-image:url(‘sl.gif’); background-repeat:no-repeat; background-position:top right; }

© N.Jovanovid, 2010

36

Specificiranje pozicije slike
body { background-position:top right; }
background-position top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos inherit

© N.Jovanovid, 2010

37

CSS Tekst
• Boja teksta
body {color:blue} h1 {color:#00ff00} h2 {color:rgb(255,0,0)}

© N.Jovanovid, 2010

38

CSS Tekst
• Poravnanje h1 {text-align:center} p.date {text-align:right} p.main {text-align:justify}

© N.Jovanovid, 2010

39

CSS Tekst
• text-decoration - Koristi se da bi se definisali dodatni efekti teksta u izabranom elementu. h1 {text-decoration:overline} h2 {text-decoration:line-through} h3 {text-decoration:underline} h4 {text-decoration:blink}

© N.Jovanovid, 2010

40

CSS Tekst
• Način prikaza teksta p.uppercase {text-transform:uppercase} p.lowercase {text-transform:lowercase} p.capitalize {text-transform:capitalize}

© N.Jovanovid, 2010

41

CSS Tekst
• Koristi se da bi se definisala razlika između prvog reda i ostatka teksta u izabranom elementu. p {text-indent:50px}

© N.Jovanovid, 2010

42

Međuredni razmak
• Razmak između redova je podrazumevano oko 120% veličine fonta. Dodavanje malo vedeg razmaka poboljšava čitkost, posebno ako su redovi dugi. • Da bi promenili razmak između redova, možemo koristiti relativnu (% ili ems) ili apsolutnu (px) opciju. • U slededem primeru, postavljena je visina reda (line height), tj. visinu slova plus dodatni prostor iznad na 180% od veličine fonta (small) za celu stranicu.

Prvi red Drugi red
© N.Jovanovid, 2010

Visina reda

43

Primer
<STYLE title=mystyles type=text/css media=all> BODY { FONT-SIZE: small; MARGIN: 50px; COLOR: #5d665b; LINE-HEIGHT: 180%; FONT-FAMILY: Verdana, Geneva, Arial, sans-serif; BACKGROUND-COLOR: #e8eae8 } </STYLE>

© N.Jovanovid, 2010

44

primer5
<HTML><HEAD><TITLE>My page</TITLE> <STYLE type=text/css media=all> BODY { FONT-SIZE: small; MARGIN: 50px; COLOR:red; LINE-HEIGHT: 190%; FONT-FAMILY: Verdana, Geneva, Arial, sans-serif; BACKGROUND-COLOR: #e8eae8 } </STYLE> </HEAD> <BODY> Kada je kapetan podigao pogled, zakrivljena stona svetiljka ocrtala je njegovo lice po brezuljkastim lancima tame i goletnim vrhovima. Vrata na brodu bila su otvorena prema tudinskoj letnjoj noci. "Pa?" upita on. "Imam prevod, gospodine", odgovori sociotehnicar. "Dugo je potrajalo, jer sam morao sam da ekstrapolujem unazad iz savremenih jezika. Tokom rada, medutim, dovoljno sam naucio da mogu da razgovaram s ovim... stvorenjima." "Dobro", progunda kapetan. "Sada cemo mocda moci da otkrijemo o cemu je ovde uopcte rec. Trista mu gromova! Bio sam spreman na sve, ali ovo...!" "Znam kako vam je, gospodine. Cak i uz sve fizicke dokaze pred ocima, tesko mi je da poverujem u prvobitno objasnjenje." </BODY> </HTML>

© N.Jovanovid, 2010

45

Fontovi
• CSS razlikuje dva tipa familija fontova
– Generička familija – Familija fontova

p{font-family:"Times New Roman", Georgia, Serif}
Generic family Font family Serif Times New Roman Georgia Arial Verdana Courier New Lucida Console Description Imaju male linije na krajevima karaktera Bez malih linija na krajevima karaktera Svi karakteri imaju istu širinu

Sans-serif
Monospace

© N.Jovanovid, 2010

46

• Font stil p.normal {font-style:normal} p.italic {font-style:italic} p.oblique {font-style:oblique}

© N.Jovanovid, 2010

47

Fontovi
• Veličina fonta h1 {font-size:40px} h2 {font-size:30px} p {font-size:14px}
Em jedinica za veličinu je preporuka W3C (1 em = 16px)
h1 {font-size:2.5em} /* 40px/16=2.5em */ h2 {font-size:1.875em} /* 30px/16=1.875em */ p {font-size:0.875em} /* 14px/16=0.875em */

© N.Jovanovid, 2010

48

Primer 6
<html> <head> <title> Svojstva fonta i pasusa </title> <style type="text/css"> h1{color:gray; font-family:Arial Black; letter-spacing:10px} p {margin-bottom:2em; font-family:Courier New; color:red; font-size:12pt;text-indent:1cm} b {font-size:1.5em; color:blue; word-spacing:5px} i {font-size:20px; color:black} </style> </head> <body> <h1> Naslov </h1> <p>Prvi pasus. Prva linija prvog pasusa <br> Prvi pasus. Druga linija prvog pasusa. </p <p><b>Drugi pasus. Prva linija drugog pasusa.</b><br> Drugi pasus. Druga linija drugog <i>pasusa.</i> </p> </body></html>

© N.Jovanovid, 2010

49

Primer 7 - Stilizacija teksta – Zaglavlja
<HTML><HEAD><TITLE>My page</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE title=mystyles type=text/css media=all> BODY { FONT-SIZE: small; COLOR: #5d665b; LINE-HEIGHT: 180%; FONT-FAMILY: Verdana, Geneva, Arial, sans-serif; BACKGROUND-COLOR: #e8eae8 } P {COLOR: red; TEXT-INDENT: 3em} H3 {COLOR: #966b72; FONT-FAMILY: Georgia, "Time New Roman", Times, serif} </STYLE> </HEAD> <BODY> <H3>Kada je kapetan podigao pogled,</H3> zakrivljena stona svetiljka ocrtala je njegovo lice po brezuljkastim lancima tame i goletnim vrhovima. Vrata na brodu bila su otvorena prema tudinskoj letnjoj noci. "Pa?" upita on. "Imam prevod, gospodine", odgovori sociotehnicar. <p>"Dugo je potrajalo, jer sam morao sam da ekstrapolujem unazad iz savremenih jezika. Tokom rada, medutim, dovoljno sam naucio da mogu da razgovaram s ovim... stvorenjima."</p> <H3>"Dobro", progunda kapetan. </H3>"Sada cemo mocda moci da otkrijemo o cemu je ovde uopcte rec. Trista mu gromova! Bio sam spreman na sve, ali ovo...!" "Znam kako vam je, gospodine. Cak i uz sve fizicke dokaze pred ocima, tesko mi je da poverujem u prvobitno objasnjenje.“ </BODY> </HTML> © N.Jovanovid, 2010 50

Stilizacija teksta - Podešavanje margina
• U body definiciji margina je po default-u 50 piksela (sve četiri margine iste). Međutim, možemo definisati različite vrednosti za svaku od margina (left, right, top i bottom): margin-top: 70px; margin-left: 120px; margin-right: 50px; margin-bottom: 70px; • Ovime dobijamo izgled koji podražava štampanu stranu sa nešto vedom levom marginom. • U slededem primeru je nekoliko reči formatirano bold (strong) i italic (em).
© N.Jovanovid, 2010 51

Primer 8
<HTML><HEAD><TITLE>My page</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE title=mystyles type=text/css media=all> BODY { FONT-SIZE: small; MARGIN: 50px; COLOR: #5d665b; LINE-HEIGHT: 180%; FONT-FAMILY: Verdana, Geneva, Arial, sans-serif; BACKGROUND-COLOR: #e8eae8; margin-top: 70px;margin-left: 120px;margin-right: 50px;margin-bottom: 70px; } P { COLOR: red; TEXT-INDENT: 3em} H3 { COLOR: #966b72; FONT-FAMILY: Georgia, "Time New Roman", Times, serif} </STYLE> </HEAD> <BODY> <H3>Kada je kapetan podigao pogled,</H3> zakrivljena stona svetiljka ocrtala je njegovo lice po brezuljkastim lancima tame i goletnim vrhovima. Vrata na brodu bila su otvorena prema tudinskoj letnjoj noci. "Pa?" upita on. <STRONG>"Imam prevod, gospodine"</STRONG>, odgovori sociotehnicar. <p>"Dugo je potrajalo, jer sam morao sam da ekstrapolujem unazad iz savremenih jezika. Tokom rada, medutim, dovoljno sam naucio da mogu da razgovaram s ovim... stvorenjima."</p> <H3>"Dobro", progunda kapetan. </H3>"Sada cemo mocda moci da otkrijemo o cemu je ovde uopcte rec. Trista mu gromova! Bio sam spreman na sve, ali ovo...!“ "Znam kako vam je, <em> gospodine</em> . Cak i uz sve fizicke dokaze pred ocima, <STRONG>tesko mi je</STRONG> da poverujem u prvobitno objasnjenje.“ </BODY> </HTML> © N.Jovanovid, 2010 52

CSS boks
• CSS boks se sastoji od:
– Margina – transparentna je i nema boju pozadine – Okvira – ima pozadinsku boju – dopune – sadržaja – sadržaj boksa, slika ili tekst...

© N.Jovanovid, 2010

53

• Zamislite svaki element ili objekat unutar veb stranice kao nevidljivu kutiju sa nevidljivom bordurom. • Oblast neposredno izvan nevidljive kutije je margina elementa (objekta). Margina odvaja element od drugih elemenata. • Oblast neposredno unutar nevidljive kutije ali pre sadržaja elementa je padding elementa. Padding odvaja element od njegove bordure i margine. • Bordura je između paddinga i margine. Sam objekat je okružen sa padding, border i margin i to u tom redosledu.

© N.Jovanovid, 2010

54

CSS boks
• width:250px; padding:10px; border:5px solid gray; margin:10px;

© N.Jovanovid, 2010

55

• Morate biti pažljivi kod korišdenja paddinga zato što on funkcioniše potpuno drugačije u Microsoft Internet Exploreru nego kod drugih čitača. • Za razliku od prikazane slike, IE stavlja padding unutar okvira, tako da njena visina i širina ostaju iste. Svi drugi čitači stavljaju paddding izvan okvira, dodajudi ga na visinu i širinu. Prema tome, veličina kutije de se menjati u zavisnosti od toga koji se čitač koristi za pregledanje stranice i to može stvoriti potpuno nepredviđene rezultate ako vaš layout zavisi od preciznih pikselskih mera.

© N.Jovanovid, 2010

56

Apsolutno pozicioniranje
• Pored visine i širine, CSS okviri se mogu postaviti na bilo koje mesto na stranici specificiranjem parametra position: absolute; • Apsolutno pozicioniranje je lako razumeti, jer po tom principu funkcionišu i stvari u realnom životu. Vaša kuda može biti na 50 m od centra grada a kilometar od železničke stanice, na primer. • Češdi je slučaj da se položaj kutije definiše slededim tipom specifikacije top:50px; left:100px to ne znači da mora da budu parametri top i left, to mogu biti i top i right, bottom i left ili bottom i right.

© N.Jovanovid, 2010

57

Primer 9
<html> <head><title> Apsolutno pozicioniranje</title></head> <body> <img style="position:absolute; top:100px; left:100px" width="164" height="110" src="sl1.gif"> <img style="position:absolute; top:300px; left:200px" width="164" height="110" src="sl2.jpg"> </body> </html>

© N.Jovanovid, 2010

58

Relativno pozicioniranje
• Relativno pozicioniranje podrazumeva da su CSS okviri jedan do drugog. • Prvi okvir je na vrhu, slededi je ispod i tako redom.

© N.Jovanovid, 2010

59

Primer 10
<html> <head><title> Relativno pozicioniranje </title></head> <body> <img width="164" height="110" src="sl1.gif"> <img style="position:relative; left:200px" width="164" height="110" src="sl2.jpg"> </body> </html>
© N.Jovanovid, 2010 60

Stil okvira

© N.Jovanovid, 2010

61

Širina okvira
p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; }

© N.Jovanovid, 2010

62

Boja okvira
p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; }

© N.Jovanovid, 2010

63

Stil okvira
p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }

© N.Jovanovid, 2010

64

Stil okvira
• border-style:dotted solid double dashed; – top border is dotted – right border is solid – bottom border is double – left border is dashed • border-style:dotted solid double; – top border is dotted – right and left borders are solid – bottom border is double • border-style:dotted solid; – top and bottom borders are dotted – right and left borders are solid • border-style:dotted; © N.Jovanovid, 2010 – all four borders are dotted

65

Margine
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;

© N.Jovanovid, 2010

66

Padding
padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;

© N.Jovanovid, 2010

67

Primer 11 – crtanje linije oko elementa
<html> <head> <style type="text/css"> p { border:red solid thin; outline:#00ff00 dotted thick; } </style> </head> <body> <p><b>UPOZORENJE:</b> Ovo je primer crtanja linije oko elementa.</p> </body> </html>

© N.Jovanovid, 2010

68

Primer 12
<html> <head> <style type="text/css"> p {border: red solid thin; outline: blue} p.dotted {outline-style:dotted} p.dashed {outline-style:dashed} p.solid {outline-style:solid} p.double {outline-style:double} p.groove {outline-style:groove} p.ridge {outline-style:ridge} p.inset {outline-style:inset} p.outset {outline-style:outset} </style> </head> <body> <p class="dotted">A dotted outline</p> <p class="dashed">A dashed outline</p> <p class="solid">A solid outline</p> <p class="double">A double outline</p> <p class="groove">A groove outline</p> <p class="ridge">A ridge outline</p> <p class="inset">An inset outline</p> <p class="outset">An outset outline</p> </body> </html>

© N.Jovanovid, 2010

69

CSS liste
• Vrlo korisna tehnika formatiranja koja se često koristi u dokumentima je lista. One su slične pasusima, ali zahtevaju još malo doterivanja. • HTML obezbeđuje osnovne liste koje ili imaju predznake (bullets; nenumerisane liste) <ul>...</ul> ili numerisane (ordered lists) <ol>...</ol> a svaka stavka liste je obuhvadena tagovima <li>...</li>. Svaki tip ima par opcija koje mogu biti specificirane iz HTML-a <li type="square">...</li> daje kvadratne predznake, <li type="i">...</li> daje kurentne rimske brojeve.

© N.Jovanovid, 2010

70

CSS liste
• CSS svojstvo list-style-type koristi se za zadavanje izgleda oznaka elemenata liste • CSS svojstvo list-style-position koristi se za određivanje mesta oznake elementa liste u odnosu na tekst elementa liste. Ovo svojstvo može imati jednu od dve vrednosti: – Outside – čitač postavlja oznaku liste izvan teksta elementa liste

– Inside – čitač prikazuje oznaku elementa liste kao deo teksta elementa
© N.Jovanovid, 2010 71

CSS liste
• • CSS daje dodatne opcije i kontrolu – dodajmo definicije za ol ili ul u stilove. ol {list-style-type: lower-roman; margin: 1em 0 1em 40px } Ovo radi isti posao kao da ste to dodali svakoj stavci liste u HTML-u i daje vam kontrolu nad marginama oko kompletne liste. Četiri vrednosti 1em 0 1em 40px odnose se na top, right, bottom, left i mogu se izraziti u ems, procentima ili pikselima. Ako želite dodatnu kontrolu nad pojedinim stavkama liste, možete i za njih specificirati margine, na primer ... ol li { margin: .5em 0 .5em 0 } dodaje međuredni razmak od pola em iznad i ispod svake stavke liste u numerisanoj listi. Kod nenumerisane liste treba stavitI druge tagove, tj. ul li.

© N.Jovanovid, 2010

72

CSS Liste
• Pored toga, možemo koristiti svoju grafiku za predznake (bullets). ul { list-style-image: url sl1.gif) } ul li { margin: 1em 0 1em 0}

© N.Jovanovid, 2010

73

Primer 13
<html> <head> <title> Primer uređene liste </title> </head> <body> <h2> Program Load </h2> <ol style="list-style-type:lower-roman; list-style-position:outside"> <li> Insert CD into Computer </li> <li> Click the Start Icon </li> <li> Load the Program </li> <li> Play the Game </li> </ol> </body> </html>

© N.Jovanovid, 2010

74

Liste - Vrednosti svojstva list-style-type
Vrednost
disk circle square decimal decimalleading-zero lower roman upperroman lower-greek lower-alpha lower-latin upper-alpha

Opis
Pun crn krug Nepopunjen crn krug Pun crn kvadrat 1, 2, 3, 4, 5, itd. 01, 02, ...98, 99 ili 001, 002, .., 099, 100, itd. i, ii, iii, iv, v, itd. I, II, III, IV, V, itd. Tradicionalno grčko numerisanje (alfa, beta, itd.) a, b, c, d, itd. a, b, c, d, itd. A, B, C, D, itd.

Vrednost
upper-latin hebrew armenian georgian cjkideographic hirgana katana hiraganairoha katakanairoha none inherit

Opis
A, B, C, D, itd. Tradicionalno hebrejsko numerisanje Tradicionalno jermensko numerisanje Gruzijsko numerisanje Obični ideografski brojevi a, i, u, e, o, ka, ki, itd. A, I, U, E, O, KA, KI, itd. i, ro, ha, ni, ho, he, to, itd I, RO, HA, NI, HO, HE, TO, itd Bez oznake, samo razmak Koristi stil liste roditeljskog elementa

© N.Jovanovid, 2010

75

Primer 14 - CSS liste
<html> <ul class="square"> <head> <li>Coffee</li> <style type="text/css"> <li>Tea</li> ul.circle {list-style-type:circle} <li>Coca Cola</li> ul.square {list-style-type:square} </ul> <p>Type upper-roman:</p> ol.upper-roman {list-style-type:upper-roman} <ol class="upper-roman"> ol.lower-alpha {list-style-type:lower-alpha} <li>Coffee</li> </style> <li>Tea</li> </head> <li>Coca Cola</li> <body> </ol> <p>Type lower-alpha:</p> <p>Type circle:</p> <ol class="lower-alpha"> <ul class="circle"> <li>Coffee</li> <li>Coffee</li> <li>Tea</li> <li>Tea</li> <li>Coca Cola</li> <li>Coca Cola</li> </ol> </ul> </body> © N.Jovanovid, 2010 <p>Type square:</p> </html>

76

Linkovi
• Suština HTML-a je to što je hipertekstualan dokument. Linkovi (veze) dodati na reči, fraze ili slike mogu se klikom miša aktivirati i prebaciti nas na neko drugo mesto. • Ta druga mesta se nazivaju ankeri (kotve, sidra; engl. anchors). • Svaka stranica ima bar jedan anker. Podrazumevani anker je upravo vrh stranice ali možete dodati još ankera na bilo koji deo stranice na koji želite da omogudite skok. <a href="http://www.moj_domen.com/index.htm">Ovo je link na home page</a>

© N.Jovanovid, 2010

77

• Dakle, imamo par tagova <a>...</a> plus dodatni href="..." deo uključen unutar prvog taga. To je hypertekstualna referentna adresa na koju želimo da skočimo. • Ako postavljamo anker na specifično mesto na stranici – to bi trebalo da bude neposredno iznad mesta gde želimo da „ateriramo” <a name="mojanker" title="mojanker"></a>

© N.Jovanovid, 2010

78

Prezentacija linkova
• Linkovi na stranici se vizuelno prikazuju drugačije od okolnog teksta. • Podrazumevana prezentacija hipertekst linkova u HTML-u ima tri različita stanja.
Neposećen (unvisited) link

Posećen (visited) link Aktivni (active) link

© N.Jovanovid, 2010

79

CSS linkovi
• CSS omogudava promenu izgleda linkova. Linkovi ne moraju biti podvučeni, ne moraju biti plavi. Sve što treba da uradimo je da postavimo definiciju za 'a' – anker. a:link {color: #696; text-decoration: none } • Boje linkova se mogu promeniti u neke druge koje nisu podrazumevane blue/purple. text-decoration:none Ovime se oslobađamo podvlačenja.

© N.Jovanovid, 2010

80

CSS linkovi
• Ako želite da posedeni (visited) link bude druge boje, to radite sa kodom ... a:visited { color: #699; text-decoration: none } • CSS omogudava i dodatno stanje koje se naziva hover. To stanje nastaje kada se pokazivačem miša prelazi preko teksta i tekst menja boju čime daje jasan signal da se radi o hipertekstualnom linku. a:hover { color: #c93; text-decoration: underline } • Tradicionalno podvlačenje je ponovo prisutno, ali samo dok je pokazivač iznad teksta.

© N.Jovanovid, 2010

81

CSS linkovi
• Aktivno (active) stanje linka je ono što vidite kada kliknete mišem na link. Obično se tada menja boja, a neki čitači još stavljaju okvir oko teksta linka.

© N.Jovanovid, 2010

82

CSS linkovi
• Da bi postavili stilove za linkove koji se primenjuju na celu stranicu, treba unutar definicija stilova u zaglavlju stranice staviti nešto slično niže navedenom kodu. a:link { color: #696; text-decoration: none; background-color: transparent } a:visited { color: #699; text-decoration: none; backgroundcolor: transparent } a:hover { color: #c93; text-decoration: underline; backgroundcolor: transparent } a:active { color: #900; text-decoration: underline; backgroundcolor: transparent } Ovde je važan redosled definicija stilova. Obično, redosled nema uticaj u CSS definicijama ali ovde je važno da a:hover i a:active definicije budu poslednje ili nede raditi.

© N.Jovanovid, 2010

83

CSS linkovi
• Pomenudemo ovde još jedan element, a to je boja pozadine iza (ispod) teksta. Ponekad dizajneri menjaju boju pozadine da bi ostvarili efekat isticanja (highlight) za stanja hover i/ili active.

© N.Jovanovid, 2010

84

Primer 15
<HTML><HEAD><TITLE>Naslov Stranice</TITLE> <STYLE title=mystyles type=text/css media=all>BODY { FONT-SIZE: small; MARGIN: 70px 100px 70px 250px; COLOR: #5d665b; LINE-HEIGHT: 180%; FONT-FAMILY: Verdana, Geneva, Arial, sans-serif; BACKGROUND-COLOR: #e8eae8} H4 { COLOR: #966b72} H5 {FONT-WEIGHT: normal; COLOR: #66cccc} A:link {COLOR: #00c; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none} A:visited {COLOR: #90c; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none} A:hover {COLOR: #0c0; BACKGROUND-COLOR: #ff0; TEXT-DECORATION: none} A:active {COLOR: #c00; BACKGROUND-COLOR: red; TEXT-DECORATION: none} </STYLE> </HEAD> <BODY><STRONG>home page</STRONG> | <A href="http://www.xxxxx.com/basics/mypage8a.html">amsterdam</A> | <A href="http://www.xxxxx.com/basics/mypage8b.html">tunis</A> | <A href="#moja_oznaka">new york</A> <P>&nbsp;</P>

© N.Jovanovid, 2010

85

<H4>Kada je kapetan podigao pogled,</H4> <p>zakrivljena stona svetiljka ocrtala je njegovo lice po brezuljkastim lancima tame i goletnim vrhovima. Vrata na brodu bila su otvorena prema tudinskoj letnjoj noci. "Pa?" upita on. "Imam prevod, gospodine", odgovori sociotehnicar.</p> <p>"Dugo je potrajalo, jer sam morao sam da ekstrapolujem unazad iz savremenih jezika. Tokom rada, medutim, dovoljno sam naucio da mogu da razgovaram s ovim... stvorenjima."</p> <H5>"Dobro", progunda kapetan. </H5>"Sada cemo mozda moci da otkrijemo o cemu je ovde uopcte rec. Trista mu gromova! Bio sam spreman na sve, ali ovo...!" "Znam kako vam je, gospodine. Cak i uz sve fizicke dokaze pred ocima, tesko mi je da poverujem u prvobitno objasnjenje." <A name=moja_oznaka></A></P> <P>&nbsp;</P> <H5><IMG height=188 alt=NewYork src="new-york.jpg" width=281 align=middle border=0>&nbsp; </br> <FONT color=#999999>This images is anchored at the bottom of the home page </FONT> </H5> </BODY> </HTML>

© N.Jovanovid, 2010

86

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->