SADRAJ
1. Uvod ................................................................................................................................................ 1
1.1. Normal Flow ............................................................................................................................ 1
1.2. CSS display i visibility svojstvo ................................................................................................. 2
1.3. HTML i element ................................................................................................ 5
1.4. CSS model kutije (box model) .................................................................................................. 5
Visina i irina ....................................................................................................................... 7
Margine i padding ............................................................................................................... 7
Margine ............................................................................................................................... 7
Padding ............................................................................................................................... 7
Ivice ..................................................................................................................................... 7
1.5. Pseudoklase i pseudoelementi ................................................................................................ 8
Overflow svojstvo ............................................................................................................... 8
1.6. Uslovni komentari za IE ........................................................................................................... 9
2. Pozicioniranje HTML elemenata upotrebom CSS-a....................................................................... 10
2.1. Float CSS svojstvo .................................................................................................................. 10
Sintaksa ............................................................................................................................. 10
Osobine plutajudih elemenata .......................................................................................... 11
Float u praksi ..................................................................................................................... 12
Problemi u primjeni float svojstva .................................................................................... 14
2.2. Position CSS svojstvo ............................................................................................................. 17
Position: static ................................................................................................................... 17
Position: relative ............................................................................................................... 18
Position: absolute ............................................................................................................. 19
Position: fixed ................................................................................................................... 20
Web programiranje CSS pozicioniranje
1
1. Uvod
Jezik za obiljeavanje CSS znai Cascading Style Sheets. Dijeli se na dvije verzije 2.1 i 3, a u ovoj
skripti bavimo se iskljuivo CSS-om 2.1 koji je, uprkos postojanju verzije 3, jo uvijek u irokoj
upotrebi, mada polako svoje mjesto ustupa novijoj verziji standarda.
CSS svoj naziv zahvaljuje svojoj osobini odreenosti prioriteta u prikazu bududi da CSS-ovi selektori
na raznim razinama i razliitim prioritetima mogu oblikovati isto mjesto. CSS je usmjeren za prikaz
(X)HTML-a, ali ne nuno samo njega nego i bilo kojeg drugog jezika za obiljeavanje (npr. XML).
Bududi da je preuzima funkciju grafikog oblikovanja sadraja, (X)HTML-u ostaje ono za to je
prvobitno i zamiljen za opis strukture elemenata. Radimo li u striktnom modu HTML-a 4.1 ili
XHTML-a 1.0, njegova je upotreba obavezna.
Odvajanjem sadraja od izgleda generira se manje koda, a on je bitno pregledniji te ga je lake
naknadno ureivati.
Svaki se element (X)HTML-a moe modificirati CSS-om ime moemo govoriti o univerzalnosti CSS-
ovih selektora (za razliku od HTML-ovih atributa).
Popisi selektora (selectors) je podugaak i on se ne mora uiti napamet, ali se mora znati za to slui i
kako se upotrebljava. U ovim se skriptama oni nede taksonomski nabrajati, nego de se ukazati na
osnovnu sintaksu i mogudnosti, a uenicima se ostavlja da dodatne informacije pronau na tutorijalu
iz CSS na stranicama W3Schoolsa http://www.w3schools.com/css/. Zbog svoje univerzalnosti
selektori su primjenjivi za brojna mjesta tako da je uenje time jednostavnije svojstvo padding,
margin, align moe imati i odlomak, div, slika, naslov itd.
U ovoj skripti biti de dat kratak opis nekih naprednih CSS selektora i njihovi naini primjene prilikom
izrade web stranica.
1.1. Normal Flow
Prije negoli preemo u pregled i opisivanje pojedinih CSS selektora bitni za nae izuavanje CSS-a ,
vano je razmotriti ogranienja odnosno osobine prostora u kojem CSS funkcionie. Osnovna
karakteristika za koju se veu sve osobine CSS-a zove se normal flow ili normalni tok dokumenta.
Prema CSS 2.1 specifikaciji svaki element unutar CSS posmatra se kao kutija (box) na koji se
primjenjuju razliita CSS svojstva.
Ako su elementi kutije, normal flow dokumenta analogan je zakonu gravitacije u stvarnom svijetu.
Normalni tok definie nain na koji redamo kutije elemenata jedan na drugi, jedan ispod ili pored
drugog, u onom redu u kojem se pojavljuju u (X)HTML kdu. Osnovna pravila koja nam zakon
gravitacije dozvoljava u nainu redanja obinih kutija, vae i u svijetu CSS-a s tom razlikom da nam
CSS nudi naine i mogudnosti da prkosimo zakonu gravitacije ukoliko to elimo.
Web programiranje CSS pozicioniranje
2
1.2. CSS display i visibility svojstvo
Da bi smo razumjeli kako funkcionie display/visibility svojstvo pogledajmo osnovnu podjelu HTML
elemenata na dvije skupine:
1. block-level elementi
Poinju i zavravaju sa novim redom (line break) u prikazu browsera
, , , ,
2. inline elementi
prikazuju se jedan za drugim, bez prelaza u novi red
, , , ,
Bez obzira na ovu podjelu, mogude je promijeniti inline element u block-level i obrnuto, ime se moe
postidi specifian prikaz stranice a jo uvijek biti u okviru web standarda.
Sljededi primjer prikazuje elemente liste kao inline elemente.
Rezultat unutar browsera
Sljededi primjer prikazuje element kao blok element:
Web programiranje CSS pozicioniranje
3
Rezultat unutar browsera
Display osobina definie kako i da li se upote element prikazuje, a visibility osobina definie da li bi
elemenat trebao biti vidljiv ili ne. Pogledajmo na sljededem primjeru.
Element stranice moemo sakriti tako to postavimo svojstvo display na none ili visibility na
hidden. Meutim, postoji razlika u krajnjem prikazu ostalih elemenata stranice.
Visibility:hidden sakriva element, ali predvieni prostor za taj element u prikazu stranice jo uvijek
je zauzet. Element de biti sakriven, ali de jo uvijek uticati na izgled stranice.
Web programiranje CSS pozicioniranje
4
Display:none sakriva element ali ne zauzima prostor unutar stranice. Element de biti sakriven, a
stranica de se prikazati kao da on uopte i ne postoji.
Web programiranje CSS pozicioniranje
5
1.3. HTML i element
je block-level element koji se moe koristiti kao kontejner za grupisanje drugih HTML
elemenata. Nema posebnog znaenja, osim tog da s obzirom da predstavlja block-level element,
browser prikazuje po jedan prazan red prije i poslije elementa.
U kombinaciji sa CSS-om, element se koristi za postavljanje stilova na vedi broj elemenata.
Druga esta upotreba elementa prilikom definisanja izgleda (layouta) stranice. Zamjenjuje
danas prevazienu metodu upotrebe elementa za definisanje izgleda stranice.
element predstavlja inline element koji se moe koristiti kao kontejner za tekst. Element
nema posebnog znaenja, a u kombinaciji sa CSS-om moe se upotrijebiti za postavljanje odreenih
stilova na dijelove teksta.
Tag Opis
Definie sekciju u dokumentu (block-level)
Definie sekciju u dokumentu (inline)
1.4. CSS model kutije (box model)
Vrlo bitna osobina za razumjevanje HTML-a i CSS-a jeste tzv. Box model.
Box model definie svaki element na HTML stranici (block ili inline level) kao pravougaonu kutiju,
koja pored visine i irine moe (ali i ne mora) ukljuivati margine (margins), popune (padding) i ivicu
(border).
Da naglasimo jo jednom
Vrlo je bitno znati odrediti tane dimenzije kutije pojedinog elementa kako bi se prilikom njegovog
pozicioniranja znala potrebna veliina prostora u kojem se on mora nalaziti. U suprotnome moe dodi
do pomjeranja elemenata koji moe imati nepredvidive posljedice na na dizajn i oteati mogudnosti
pronalaenja greke prilikom njegovog kreiranja.
Dimenzija kutije zapoinje sa irinom i visinom elementa koja moe biti definisana njegovim tipom,
njegovim sadrajem ili vrijednostima CSS svojstava width i height.Visina i irina se zatim sabiraj
