OSNOVE CSS-a 2. dio

1. OSNOVE CSS-a 2. dio Vježbe iz kolegija "Mrežni servisi" Autor: Krunoslav Žubrinić kruno@laus.hr Dubrovnik, 2005/2006

2. Sadržaj • CSS • Prazan prostor oko elemenata (padding) • Pozicioniranje elemenata (margine) • Smještanje sadržaja na stranici • Svojstva linkova • Ostala svojstva

3. Prazan prostor (padding) • određuje se veličina praznog prostora oko sadržaja elementa • padding - prostor na sve 4 strane • padding-bottom- prostor s donje strane • padding-left- prostor s lijeve strane • padding-right- prostor s desne strane • padding-top- prostor s gornje strane • vrijednost: veličina u odgovarajućoj mjernoj jedinici (mm, cm, px, em,...)

4. Primjer 1 • CSS • #odlomak3 { padding:2em; • } Prostor oko sadržaja trećeg odlomka sa svih strana je 2 znaka

5. HTML dokument

6. Pozicioniranje elemenata • margine određuju udaljenost sadržaja od ruba stranice • margin - sve 4 margine • margin-top- gornja margina • margin-right- desna margina • margin-bottom- donja margina • margin-left- lijeva margina • vrijednost: veličina u odgovarajućoj mjernoj jedinici (mm, cm, px, em,...)

7. Primjer 2 • CSS • h1 { margin-top:2em; • } • #odlomak1 { margin-right:4em; • } • #odlomak2 { margin-left:4em; • } • #odlomak3 { margin-left:8em; • } • naslov ćemo odmaknuti za 2 znaka od gornje margine; • prvi odlomak za 4 znaka od desne margine. • drugi odlomak uvući ćemo za 4 znaka u desnu stranu, a treći za 8 znakova.

8. HTML dokument

9. Pozicioniranje elemenata • moguće je odrediti horizontalni smještaj elementa unutar nadređenog • float • vrijednost: left, right, none • prilikom korištenja pozicioniranja pomoću float, obavezno je navesti širinu elementa (width)

10. Primjer 3 • CSS • #odlomak1 { width:15em; float: left; • } • #odlomak2 { margin-left:16em; • } • prvi odlomak ćemo pozicionirati lijevo i staviti da je širine 15 znakova • drugi odlomak je odmaknut od lijeve margine za 16 znaka

11. HTML dokument

12. Pozicioniranje elemenata na stranici • sadržaj svakog elementa može se smjestiti na određenu poziciju na stranici • bottom - udaljenost od dna stranice • left - udaljenost od lijeve stranice • right - udaljenost od desnog ruba stranice • top - udaljenost od vrha stranice • width - širina sadržaja • position - vrsta pozicije • vrijednosti: static, relative,absolute, fixed,

13. Vrste pozicija • static - "prirodna" pozicija na koju preglednik inače smješta odgovarajući element • ne koriste se left i top pozicioniranje • relative - element se smješta u odnosu na poziciju na koju bi bio smješten "static" pozicioniranjem • npr. left: 20px dodaje 20 px na poziciju na koju bi bio pozicioniran "static" pozicioniranjem • absolute - element se smješta u odnosu na svog "roditelja" (nadređeni element) • fixed - element se smješta u odnosu na prozor preglednika (današnji preglednici još uvijek ne podržavaju!)

14. Primjer 4 CSS #odlomak2 { position: absolute; top: 8em; width: 49%; } #odlomak3 { position: absolute; left: 50%; width: 49%; } Napraviti ćemo stranicu koja se sastoji od naslova, zaglavlja stranice (prvi odlomak) i dva stupca jednake širine ispod njega (2. i 3. odlomak)

15. HTML dokument

16. Svojstva linkova • posebni "pseudo selectori" za prikaz stanja u kojem se nalazi link • a:link- stil linka koji nije posjećen • a:visited- stil posjećenog linka • a:active- stil linka koji je zadnji izabran • a:hover- stil linka iznad kojeg se nalazi miš • važan je redoslijed navođenja pseudo selectora koji mora biti • link->visited->active->hover

17. Primjer 5 Neposjećene linkove prikazati ćemo zelenim slovima, posjećene crvenim, aktivni linkovi biti će prikazani žutim slovima na smeđoj pozadini, a aktivni link iznad kojeg se nalazi miš bijelim slovima na zelenoj pozadini. CSS a:link {color: green;} a:visited {color: red;} a:active { background-color:brown; color: yellow; } a:hover { background-color:green; color: white; }

18. HTML dokument

19. Primjer 6 CSS ul{ list-style-type: none; } li { margin-left: .2em; width: 8em; } a{ display: block; color: white; background-color: green; text-decoration: none; } a:hover { background-color: red; color: white; } Korištenjem pobrojane liste napraviti ćemo horizontalni meni. Linkovi će biti prikazani bijelim slovima na zelenoj pozadini. Aktivni link iznad kojeg se nalazi miš biti će prikazan bijelim slovima na crvenoj pozadini.

20. HTML dokument

21. Ostala svojstva • cursor- izgled cursora kada se pozicionira iznad elementa • vrijednosti: crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help • display- način na koji se element prikazuje • vrijednosti: none,inline,block • visibility- da li će element biti vidljiv ili ne • vrijednosti: visible,hidden

22. Literatura • Vodiči kroz CSS • http://www.w3schools.com/css/ • http://www.w3.org/MarkUp/Guide/Style.html • http://www.w3.org/Style/CSS/learning • http://www.westciv.com/style_master/academy/css_tutorial/ • http://www.thenoodleincident.com/ • http://gallery.theopalgroup.com/selectoracle/ • Popis svih CSS elemenata i svojstava • http://www.blooberry.com/indexdot/css/propindex/all.htm • Specifikacija boja • http://www.w3schools.com/css/css_colors.asp • CSS specifikacije • http://www.w3.org/TR/REC-CSS1 • http://www.w3.org/TR/REC-CSS2

23. Zadatak 1 • Stranicu iz 1 zadatka "Osnove CSSa 1. dio" formatirajte na način da: • tekst bude podijeljen u 2 odlomka • prvi odlomak odmaknite od lijeve margine 20% • drugi odlomak odmaknite od desne margine 30%

24. Zadatak 2 Formatirajte stranicu s zaglavljem i 2 stupca. Prvi stupac zauzima 60% ukupne širine stranice, a drugi preostali dio. Stupce formatirati pomoću float Naslov je bijelim slovima na plavoj pozadini

25. Zadatak 3 Pomoću pobrojane liste napravite izbornik koji će mijenjati boju pozadine kada se kursor nalazi iznad njega. Boju će promijeniti iz modre (navy) u crvenu (red). Linkovi neka vode na stranice proizvođača preglednika: http://www.microsoft.com/ http://www.mozilla.org/ http://www.opera.com/ http://linx.browser.org/

26. Zadatak 4 Izbornik iz prethodnog zadatka napravite da bude horizontalni.

27. Zadatak 5 Stranicu recepta iz 3. zadatka "Napredni HTML" formatirajte pomoću CSSa bez tablica.

28. Zadatak 6 Formatirajte životopis pomoću CSSa, bez tablica.