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 <style type="text/css"> h1 {background-color: blue} p {color:red;text-align:center} body {color:white;background-image:url(“sl1.gif")}

Prvi naslov

Drugi naslov

Tekst paragrafa

© N.Jovanovid, 2010

6

Selektori selector { property:value; property:value; property:value; }

Prvi naslov

Drugi naslov

Tekst paragrafa

Tekst paragrafa 2

© N. Jovanovid, D.Stankovid, 2012

7

Selektori selector { property:value; property:value; property:value; } Želimo da im postavimo: background-color:red;

Prvi naslov

Drugi naslov

Tekst paragrafa

Tekst paragrafa 2

© N. Jovanovid, D.Stankovid, 2012

8

Selektori selector { property:value; property:value; property:value; } Želimo da im postavimo: background-color:red;

Prvi naslov

Drugi naslov

Tekst paragrafa

Tekst paragrafa 2

© N. Jovanovid, D.Stankovid, 2012

9

Selektori selector { property:value; property:value; property:value; } Želimo da im postavimo: background-color:red;

Prvi naslov

Drugi naslov

Tekst paragrafa

Tekst paragrafa 2

© N. Jovanovid, D.Stankovid, 2012

10

Selektori selector { property:value; property:value; property:value; } Želimo da im postavimo: background-color:red;

(samo unutrašnji div – koristiti hijerarhiju)

Prvi naslov

Drugi naslov

Tekst paragrafa

Tekst paragrafa 2

© N. Jovanovid, D.Stankovid, 2012

11

Selektori selector { property:value; property:value; property:value; } Želimo da im postavimo: background-color:red;

(samo gornja li – koristiti hijerarhiju)

Prvi naslov

Drugi naslov

Tekst paragrafa

Tekst paragrafa 2

© N. Jovanovid, D.Stankovid, 2012

12

Selektori selector { property:value; property:value; property:value; } Želimo da im postavimo: background-color:red;

(kako sad???)

Prvi naslov

Drugi naslov

Tekst paragrafa

Tekst paragrafa 2

© N. Jovanovid, D.Stankovid, 2012

13

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.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;

(sad vi...)

Prvi naslov

Drugi naslov

Tekst paragrafa

Tekst paragrafa 2

© N. Jovanovid, D.Stankovid, 2012

16

Selektori selector { property:value; property:value; property:value; } Želimo da im postavimo: background-color:red;

(samo gornja li – pomodu id i klase)

Prvi naslov

Drugi naslov

Tekst paragrafa

Tekst paragrafa 2

© N. Jovanovid, D.Stankovid, 2012

17

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 , u okviru taga , sa definisanom putanjom i imenom CSS dokumenta

© 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

Moja prva strana sa EKSTERNIM CSS-om

I nije neki sadrzaj, ali bar ima stil.

Ovde traba da bude jos toga...

© 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

Ovo je paragraf.
© N.Jovanovid, 2010

23

Primer 3

Prvi naslov

Drugi naslov

Tekst paragrafa

© 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:

Tekst koji treba da bude uz desnu marginu

• a paragrafi čiji tekst treba da bude centriran imati strukturu

Tekst koji treba da bude centriran

© N.Jovanovid, 2010

31

Primer4

Naslov stranice

Tekst koji treba da bude uz desnu marginu

Tekst koji treba da bude centriran

© 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 }

© N.Jovanovid, 2010

44

primer5 <TITLE>My page <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 } 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."

© 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

Description

Serif

Times New Roman Georgia Arial Verdana

Imaju male linije na krajevima karaktera Bez malih linija na krajevima karaktera

Courier New Lucida Console

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 <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}

Naslov

Prvi pasus. Prva linija prvog pasusa
Prvi pasus. Druga linija prvog pasusa.

Drugi pasus. Prva linija drugog pasusa.
Drugi pasus. Druga linija drugog pasusa.

© N.Jovanovid, 2010

49

Primer 7 - Stilizacija teksta – Zaglavlja <TITLE>My page <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}

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.“ © 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 <TITLE>My page <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}

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. <STRONG>"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, <em> gospodine . Cak i uz sve fizicke dokaze pred ocima, <STRONG>tesko mi je da poverujem u prvobitno objasnjenje.“ © 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

© 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 © 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; – all four borders are dotted© N.Jovanovid, 2010

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 <style type="text/css"> p { border:red solid thin; outline:#00ff00 dotted thick; }

UPOZORENJE: Ovo je primer crtanja linije oko elementa.

© N.Jovanovid, 2010

68

Primer 12 <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}

A dotted outline

A dashed outline

A solid outline

A double outline

A groove outline

A ridge outline

An inset outline

An outset outline

© 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)

...

ili numerisane (ordered lists)

...

a svaka stavka liste je obuhvadena tagovima

...

. Svaki tip ima par opcija koje mogu biti specificirane iz HTML-a

...

daje kvadratne predznake,

...

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

Program Load

1. Insert CD into Computer
2. Click the Start Icon
3. Load the Program
4. Play the Game

© N.Jovanovid, 2010

74

Liste - Vrednosti svojstva list-style-type Vrednost

Opis

Vrednost

disk

Pun crn krug

upper-latin

circle

Nepopunjen crn krug

Opis A, B, C, D, itd.

hebrew

Tradicionalno hebrejsko numerisanje

square

Pun crn kvadrat

armenian

Tradicionalno jermensko numerisanje

decimal

1, 2, 3, 4, 5, itd.

georgian

Gruzijsko numerisanje

decimalleading-zero

01, 02, ...98, 99 ili 001, 002, .., 099, 100, itd.

cjkideographic

Obični ideografski brojevi

lower roman

i, ii, iii, iv, v, itd.

hirgana

a, i, u, e, o, ka, ki, itd.

upperroman

I, II, III, IV, V, itd.

katana

A, I, U, E, O, KA, KI, itd.

lower-greek

Tradicionalno grčko numerisanje (alfa, beta, itd.)

hiraganairoha

i, ro, ha, ni, ho, he, to, itd

lower-alpha

a, b, c, d, itd.

katakanairoha

I, RO, HA, NI, HO, HE, TO, itd

lower-latin

a, b, c, d, itd.

none

Bez oznake, samo razmak

upper-alpha

A, B, C, D, itd.

inherit

Koristi stil liste roditeljskog elementa

© N.Jovanovid, 2010

75

Primer 14 - CSS liste

• Coffee
<style type="text/css">
• Tea
ul.circle {list-style-type:circle}
• Coca Cola
ul.square {list-style-type:square}

Type upper-roman:

ol.upper-roman {list-style-type:upper-roman}

ol.lower-alpha {list-style-type:lower-alpha}
1. Coffee
2. Tea
3. Coca Cola

Type lower-alpha:

Type circle:

• Coffee
• Coffee
• Tea
• Tea
• Coca Cola
• Coca Cola

© N.Jovanovid, 2010

Type square:

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. Ovo je link na home page

© N.Jovanovid, 2010

77

• Dakle, imamo par tagova ... 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”

© 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 <TITLE>Naslov Stranice <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} <STRONG>home page | amsterdam | tunis | new york

 

© N.Jovanovid, 2010

85

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 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."

 

 
This images is anchored at the bottom of the home page

© N.Jovanovid, 2010

86