Scribd Logo
Upload

Welcome to Scribd!

  • Css Vezbe

    Uploaded by

    Nikola Nojic
    113 views86 pages
    CSS

    Original Title

    css-vezbe

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    CSS

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    113 views86 pages

    Css Vezbe

    Uploaded by

    Nikola Nojic
    CSS

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    of 86

    CSS - Cascading Style Sheets

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

    N. Jovanovid, D.Stankovid, 2012

    Cascading Style Sheets


    HTML definie strukturu tj. sadraj CSS se koristi za podeavanje izgleda tog HTML-om definisanog sadraja
    Npr. promena pozadine, boja, vrsta i veliina slova, izgled tabele, poravnanje, veliina, ... 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 definiemo 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 (definiu) ove CSS linije?


    CSS elementi se mogu definisati kao:
    Unutranji (Interni) Spoljnji (Eksterni) U liniji (In line)

    N.Jovanovid, 2010

    Interni CSS
    Da bi se definisali u okviru stranice koristi se tag <style>, u head sekciji HTML stranice, i njegov atribut type sa vrednodu "text/css" U okviru ovog taga se definiu pojedinani CSS elementi.

    N.Jovanovid, 2010

    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

    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 unutranji 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?

    Pomau u dodeljivanju stilova pojedinim elementima Slobodni smo da sami dodamo te atribute u zavisnosti od nae potrebe da samo odreenim 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 vie stranica Pomodu eksternog CSS-a mogude je promeniti izgled celog web sajta promenom samo jednog fajla, koji definie stil U okviru svake stranice, umesto dosadanjih CSS elemenata, treba definisati referencu na novi dokument.
    N.Jovanovid, 2010 18

    Eksterni CSS
    Referenca na CSS fajl se postie 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 moe se definisati u bilo kom tekst editoru Fajl ne treba da sadri 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 sadraj sa prezentacijom U ovom sluaju 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 sluaju da se definiu razliiti stilovi, interni i eksterni, vrednost de biti nasleena od specifinijeg 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 nasleuje od eksternog stila, a format teksta iz internog

    N.Jovanovid, 2010

    26

    Profesor...

    N. Jovanovid, D.Stankovid, 2012

    27

    U okviru jednog objekta moe da se navede vie parova atribut-vrednost. U tom sluaju parovi se odvajaju pomodu znaka ;
    p {font-size:8pt;color:red}

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

    28

    Vie 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 odreeni CSS objekat moe da ima vie vrednosti za isti atribut i da su te razliite vrednosti potrebne na razliitim 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 definie navoenjem simbola . i imena klase. p.desno {text-align: right} p.centrirano {text-align: center}

    N.Jovanovid, 2010

    30

    CSS klase
    Klasu odreenog objekta pozivamo tako to u eljenom tagu navodimo kod class=imeKlase. Tako de na naoj 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 moe specificirati
    Imenom (red) RGB ("rgb(255,0,0)") Heksadecimalnom vrednodu ("#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
    Nain 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 izmeu prvog reda i ostatka teksta u izabranom elementu. p {text-indent:50px}

    N.Jovanovid, 2010

    42

    Meuredni razmak
    Razmak izmeu redova je podrazumevano oko 120% veliine fonta. Dodavanje malo vedeg razmaka poboljava itkost, posebno ako su redovi dugi. Da bi promenili razmak izmeu redova, moemo 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 veliine 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
    Generika 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
    Veliina fonta h1 {font-size:40px} h2 {font-size:30px} p {font-size:14px}
    Em jedinica za veliinu 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 - Podeavanje margina


    U body definiciji margina je po default-u 50 piksela (sve etiri margine iste). Meutim, moemo definisati razliite 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 podraava tampanu stranu sa neto vedom levom marginom. U slededem primeru je nekoliko rei 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 sadraja sadraj 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 sadraja elementa je padding elementa. Padding odvaja element od njegove bordure i margine. Bordura je izmeu paddinga i margine. Sam objekat je okruen 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 paljivi kod koridenja paddinga zato to on funkcionie potpuno drugaije u Microsoft Internet Exploreru nego kod drugih itaa. Za razliku od prikazane slike, IE stavlja padding unutar okvira, tako da njena visina i irina ostaju iste. Svi drugi itai stavljaju paddding izvan okvira, dodajudi ga na visinu i irinu. Prema tome, veliina kutije de se menjati u zavisnosti od toga koji se ita koristi za pregledanje stranice i to moe stvoriti potpuno nepredviene 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 funkcioniu i stvari u realnom ivotu. Vaa kuda moe biti na 50 m od centra grada a kilometar od eleznike stanice, na primer. edi je sluaj da se poloaj kutije definie slededim tipom specifikacije top:50px; left:100px to ne znai 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 sline pasusima, ali zahtevaju jo malo doterivanja. HTML obezbeuje 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 odreivanje mesta oznake elementa liste u odnosu na tekst elementa liste. Ovo svojstvo moe 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, moete i za njih specificirati margine, na primer ... ol li { margin: .5em 0 .5em 0 } dodaje meuredni 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, moemo 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 ureene 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 grko 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 Obini 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
    Sutina HTML-a je to to je hipertekstualan dokument. Linkovi (veze) dodati na rei, fraze ili slike mogu se klikom mia 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 moete 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 ukljuen unutar prvog taga. To je hypertekstualna referentna adresa na koju elimo da skoimo. Ako postavljamo anker na specifino 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 drugaije od okolnog teksta. Podrazumevana prezentacija hipertekst linkova u HTML-u ima tri razliita stanja.
    Neposeen (unvisited) link

    Poseen (visited) link Aktivni (active) link

    N.Jovanovid, 2010

    79

    CSS linkovi
    CSS omogudava promenu izgleda linkova. Linkovi ne moraju biti podvueni, 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 oslobaamo podvlaenja.

    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 pokazivaem mia 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 podvlaenje 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 miem na link. Obino se tada menja boja, a neki itai 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 neto slino nie 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 vaan redosled definicija stilova. Obino, redosled nema uticaj u CSS definicijama ali ovde je vano 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 might also like