PRIRODNO-MATEMATIKI FAKULTET UNIVERZITET U SARAJEVU
Uvod u CSS Radna skripta
Sarajevo 2010
Sadraj
1. CSS
...............................................................................................................................................................
3 1.1 Deklaracija u hodu
...........................................................................................................................
3 1.2 Deklaracija unutar taga head
.....................................................................................................
3 1.3 Deklaracija preko eksternog fajla
.............................................................................................
4 2. Selektori i strukturna pravila
.............................................................................................................
8 2.1 Univerzalni selektor
.........................................................................................................................
8 2.2 Tipski selektor
....................................................................................................................................
8 2.3 Selektor
klase.....................................................................................................................................
8 2.4 Id Selektor
...........................................................................................................................................
9 2.5 Selektor potomstva
.......................................................................................................................
10 2.6 Selektor roditelj-dijete
.................................................................................................................
10 2.7 Selektor susjedstva
.......................................................................................................................
10 3. Mjerne jedinice
.......................................................................................................................................
11 4.0 Dizajniranje web stranice pomou css-a
.................................................................................
18 4.1 Kreiranje dokumenta pomou div tagova
...........................................................................
19 4.1.1 Kreiranje omotaa
.................................................................................................................
19 4.1.2 Kreiranje zaglavlja
.................................................................................................................
20 4.1.2 Kreiranje sadraja i
sajdbara............................................................................................
20 4.2 Ureivanje stranice pomou css-a
.........................................................................................
24 4.2.1 Pisanje css koda za omota
..............................................................................................
26 4.2.2 Pisanje css koda za zaglavlje
...........................................................................................
28 4.2.3 Pisanje css koda za sadraj i sajdbar
...........................................................................
32
Uvod u CSS
3
1. CSSPostoje tri naina kako se CSS moe deklarisati: 1.
Deklaracija u hodu; 2. Deklaracija unutar head taga; 3. Deklaracija
preko eksternog fajla. Napomena 1.1: Treba rei da tokom pisanja css
koda, svaka naredba mora se zavravati sa taka-zarezom. Takoer,
napomenimo da css jeste case-sensitive, tj. ako ste u css kodu
definisali neki odjeljak sa: #odjeljak1{}, onda ne moete isti
pozivati unutar html koda sa: . Ispravno je pozivati sa: .
1.1 Deklaracija u hoduNavedimo primjer deklaracije u hodu.
Recimo da elimo da ispiemo Dobar dan, tako da nakon primjene stila,
dobijemo neto poput ovoga: DOBAR DAN. Da bismo to postigli napiimo
sljedee: Untitled Document Deklaracija u hodu
1.2 Deklaracija unutar taga headNavedimo primjer deklaracije u
unutar taga head. Prije nego damo primjer, recimo da se deklaracija
unutar taga head stavlja odmah ispod taga meta. Pogledajmo sljedei
primjer.
ass. Adis Alihodi
Uvod u CSSh1, h2 { color: green; } h3 { color: blue; } Untitled
Document Deklaracija unutar head taga
4
1.3 Deklaracija preko eksternog fajlaDa bismo izvrili
deklaraciju preko eksternog fajla, prvo emo dodati liniju koda
ispod taga meta, kao npr: , a potom kreirati fajl proba.css sa
sljedeim sadrajem:h1, h2 { color: green; } h3 { color: blue; }
Naravno ovo je samo jedan primjer koji pokazuje koritenje
deklaracije preko eksternog fajla. Sada, ako elimo da je boja
pozadine crne boje , a tekst u njoj ute boje, dovoljno je
primjeniti sljedei dio koda koristei deklaraciju unutar taga
head:body { color: yellow; background-color: black; }
Dalje, ako elimo da koristei heading tagove: h1, h2, h3, h4, h5,
h6 postignemo da boja teksta bude uta, a boja pozadine bude crna,
unutar datih tagova , onda emo primjeniti sljedei dio koda koristei
isti stil kao u primjeru gore:h1, h2, h3, h4, h5, h6 { color:
yellow;
ass. Adis Alihodi
Uvod u CSSbackground-color: black; }
5
Pretpostavimo da imamo neto poput ovoga: Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. Recimo da elimo da
postignmo isti efekat koristei postigli, iskoristit emo tag spam na
sljedei nain: html tagove. Da bismo to
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat .
Poto smo ovo uradili, trebamo sada definisati nekiEfekat
koristei opet drugi stil na sljedei nain: .nekiEfekat {
font-weight: bold; background-color: yellow; color: red; }
Dalje, ako elimo neto poput ovoga:
onda emo prvo definisati id selektor (o id selektorima bit e vie
rijei u narednim poglavljima) pod imenom idSelektor sa: #idSelektor
{ font-family: 'Comic Sans MS', Arial, Helvetica, sans-serif;
font-weight: bold; color: yellow; background-color: black; }
ass. Adis Alihodi
Uvod u CSSa onda njega primjeniti unutar liste na sljedei
nain:
- children (at 7:30 p.m. in the downstairs kitchen)
teens (at 9:30 p.m. in the youth room)
adults (at 11:00 p.m. in the fellowship hall)
6
Zamislimo da elimo postii da kada prelazimo preko nekog linka,
da taj link bude uokviren crnom bojom, u slova unutar njega crvenom
bojom. Da bismo to postigli, primjenimo sljedei dio koda:a:hover {
background-color: blue; color: white; font-size: medium; }
Pretpostavimo da imamo definisan sljedei stil za tag h1:h1 {
font-weight: bold; font-size: 90%; line-height: 1.8em; font-family:
Helvetica, Arial, sans-serif; }
Ako elimo postii isti efekat kao gore, a da pri tome ne piemo
sva etiri reda, ve samo jedan red, onda emo koristiti skraeni stil,
tj. shorthand na sljedei nain:h1 { font: bold 90%/1.8em Helvetica,
Arial, sans-serif; }
Pretpostavimo da elimo ispis kao na slici ispod koristei tag
h1:
Da bismo to postigli, primjenit emo osobinu padding-a na tag h1
na sljedei nain: h1 { padding-top: 10px; padding-right: 10px;
padding-bottom: 10px; padding-left: 10px; color:#FF0000;
ass. Adis Alihodi
Uvod u CSSbackground:#FFFF00; }
7
Grafiko objanjenje za tehniku padding unutar taga h1 dato je
sljedeom slikom:
Koristei shorthand tehniku, gornji kod moemo napisati neto
elegantnije: h1 { padding: 10px 10px 10px 10px; color:#FF0000;
background:#FFFF00; }
Primjeujemo da se brojevi za atribut padding redaju u smjeru
kazaljke na satu, tj. prvi broj (10 px) odnosi se na padding-top,
zatim drugi broj se odnosi na paddingright, zatim trei se odnosi na
padding-bottom i etvrti za padding-left. NAPOMENA 1.1: Na html
stranicu moete gledati kao na niz html tagova koji ine stablo.
Korijen tog stabla je tag html, a njegova djeca su ostali
tagovi(slika ispod).
ass. Adis Alihodi
Uvod u CSS
8
2. Selektori i strukturna pravilaSvako pravilo unutar CSS stila
sastoji se iz dva dijela: selektor; niz deklaracija.
Pomou selektora moemo predifinisati ugraenu definiciju html
tagova ili definirati neko novo pravilo koje emo primjenjivati
unutar stranice. Niz deklaracija sastoji se od osobina i
vrijednosti kojima ureujemo izgled stranice.
2.1 Univerzalni selektorOvaj selektor definiemo sa *. Ovaj
selektor utie na sve tekstualne elemente html stranice. Naime,
primjenjujui kod ispod:* { color: red; }
dobijamo da svi elementi stranice za tekst e imati crvenu
boju.
2.2 Tipski selektorOvaj selektor u oznaci a odnosit e se na sve
linkove unutar stranice, ako se drugaije ne bude definisalo pomou
ostalih selektora:a { color: white; background-color:red; }
2.3 Selektor klaseOvaj selektor se odnosi na proizvoljnu grupu
elemenata potencijalne stranice. Da bismo koristili ovaj selektor,
koristit emo atribut class. Pomou njega emo pistupiti klasi (koju
emo definisati kasnije), koju primjenjujemo na odreeni pasus web
stranice. Naime, sljedei kod demostruje gore ispriano:.mojaKlasa {
font-family: Verdana, Helvetica, Arial, sans-serif; }
ass. Adis Alihodi
Uvod u CSSPoto smo definisali klasu, primjenimo je na dva
elementa stranice, tj. unutar tagova h1 i p:Zaglavlje sa klasom 1
Paragraf sa klasom 1
9
Napomenimo da klasni selektor mojaKlasa moemo primjeniti na
svaki tag unutar html dokumenta. Ako bismo eljeli da gore definisan
klasni selektor primjenimo na odreeni paragraf, onda emo pisat
imepararafa.imeselektora, to se vidi dolje:p.mojaKlasa {
font-family: Verdana, Helvetica, Arial, sans-serif; }
Takoer, moemo primjeniti vie od jednog klasnog selektora unutar
atributa class, tako to emo imena klasnih selektora razdvajati
jednim razmakom. Naime,.prvaKlasa { font-family:Verdana; }
.drugaKlasa { font-family:Arial; color : red; }
Poto smo definisali klasne selektore, primjenimo ih unutar taga
p. Naime, Primjer klase 1 i klase 2
2.4 Id SelektorOvaj selektor omoguava da pronaemo odreeni html
element na stranici. Ovaj selektor definiemo sa #imeIdSelektora.
2.3 Selektor klase. ID selektor mora biti jedinstven. Sljedei
primjer nam pokazuje upotrebu ovog selektor:#idSelektor {
font-size: 70%; }
Poto smo definisali ovaj selektor, njega koristimo tako to
unutar dokumenta pozivamo ga pomou identifikatorom id=idSelektor.
Naime,Primjena ID Selektora
ass. Adis Alihodi
Uvod u CSS2.5 Selektor potomstva
10
Kao to samo ime kae, i ako se prisjetimo stabla kojeg ine html
tagovi, ovaj selektor definiemo sa dva taga, od kojih je drugi tag
potomak prvog taga. Naime,li em { color: green; }
2.6 Selektor roditelj-dijeteOvaj selektor je specijalan sluaj
selektora potomstva. Definie se kao: imeRoditelja>imeDjeteta.
Treba rei, da gore definisano stablo je bitno znati, kako bismo
znali ko je roditelj, a ko dijete. Sljedei primjer ilustruje
koritenje ovog selektora:body > p { font-weight: bold; }
Pretpostavimo da smo prije definisali idSelektor1, idSelektor2,
idSelektor3, mojaKlasa. Neka nam je dat kod ispod: Primjer id
Selektora 1 Primjer id Selektora 2
Napomenimo da slektor roditelj-dijete nee se primjeniti unutar
tagova koji nisu direktni potomci od taga roditelj. U konkretnom
sluaju gore, idSelektor2 nalazi se unutar taga p koji je direktni
potomak taga body, dok idSelektor1 nalazi se unutar taga p, koji
nije direktni potomak taga body, ve je potomak taga div, a ovaj je
direktni potomak taga body. Slino vai i za idSelektor3.
2.7 Selektor susjedstvaOvaj selektor se definie kao selektor
1+selektor 2, gdje su selektor 1 i selektor 2 susjedi. Naime:h1 +
h2 {margin-top: 11px;}
ass. Adis Alihodi
Uvod u CSS
11
3. Mjerne jediniceRecimo par rijei o mjernim jedinicam tokom
izrade web stranice. Mjerne jedinice dijelimo na apsolutne i
relativne. Recimo sada u kojem su odnosu apsolutne mjerne jedinice
kao to su: cm, inch, em, pt, pc itd. Lahko se moe provjeriti
(vidite u Paintu ili u Photoshopu) da je 2.54 cm 1 inch, dalje, 72
pt 1 inch, 6 (pica) 1 inch. Sljedei primjer demonstruje gdje i kako
se koriste apsolutne mjerne jedinice: h1 { font-size: 1in;
font-size: 2.54cm; font-size: 25.4mm; font-size: 72pt; font-size:
6pc; }
Relativne jedinice za mjerenje su: procenat i em. Dalje, em i
procenat nalaze se u odnosu 1:100. Naime, 1em je priblino jednako
kao da smo napisali 100%. Ako napiemo font-size:1.25 em, to znai da
trebamo smanjiti 125% veliinu fonta u odnosu na default veliinu.
Primjer 3.1: Predefiniimo stil html tagovima bold i italic na nain
da tekst koji je boldiran bude veliine 2.5 em, a koji je italic
bude uvean za 1.5 em u odnosu na default veliinu. Rjeenje: Prvo
izvrimo predefinisanje na sljedei nain: .bold { font-weight: bold;
font-size: 2.5em; } .italic { font-style: italic; font-size: 1.5em;
}
Poto smo ga predefinisali, primjenimo ga na sljedei nain:This is
normal, this is bold, this is italic, this is bold and italic, and
finally, this is bold,
ass. Adis Alihodi
Uvod u CSSthen italic.
12
Napomena 3.1: Komentar se u css fajlu postavlja unutar para /*
*/ , dok se u htmlu postavlja unutar . Upotreba komentara za css
data je primjerom ispod: /* Komentar u css-u */ body, p, td, th {
color: red; }
Primjer 3.2: Definiimo pravilo stila za html tagove na nain da
dobijemo neto poput ovoga:
Rjeenje: Da bismo to postigli, definisat emo pravila stila na
sljedei nain: ul { list-style-type: disc; } ul ul { L
ist-style-type: circle; } ul ul ul { list-style-type: square; }
Poto smo definisali pravila stila, primjenimo ih na sljedei
nain:
Lista 2
ass. Adis Alihodi
Uvod u CSS
Pod lista 2
Pod pod lista 2 Pod pod lista 3 Pod lista 3
Lista 3
13
Primjer 3.3: Definiimo pravilo stila za html tagove na nain da
dobijemo neto poput ovoga:
Rjeenje: Da bismo to postigli, definisat emo pravila stila na
sljedei nain: ol { list-style-type: roman; } ol ol {
list-style-type: alpha; } ol ol ol { list-style-type: decimal;
}
Poto smo definisali pravila stila, primjenimo ih na sljedei
nain:
Lista 1
Lista 2
ass. Adis Alihodi
Uvod u CSS
Pod lista 1 Pod lista 2 Pod pod lista 1 Pod pod lista 2 Pod pod
lista 3 Pod lista 3
Lista 3
14
Primjer 3.4: Definiimo pravilo stila za html tagove tako da
dobijemo vertikalni meni kao na slici ispod:
Rjeenje: Da bismo gornji meni uradili, prvo dizajnirajmo meni
(pogledajte sliku ispod) koristei tagove div i ul (neureena lista)
na sljedei nain:
- MENI
- Zaposlenje
- Auriranje
Brisanje Pretraga Izvjetaj Pacijent
Auriranje Brisanje Pretraga
Izvjetaj
ass. Adis Alihodi
Uvod u CSS
Oboljenja
Auriranje Brisanje Pretraga Izvjetaj Sistematski pregledi
Auriranje Brisanje Pretraga Izvjetaj Potvrde
Auriranje Brisanje Pretraga Izvjetaj Stacionarne
Organizacije
Auriranje Brisanje Pretraga
Izvjetaj
15
ass. Adis Alihodi
Uvod u CSS
16
Poto smo dizajnirali meni, trebamo definirati pravilo stila,
kako bi gornja slika izgledala kao onaj meni to se trai u postavci
primjera. Da bi to postigli, primjenimo sljedei kod: #lijevimeni {
position:absolute; top:135px; left:46px; width: 12em; height:180px;
} #lijevimeni ul { list-style: none; margin: 0; padding: 0; }
#lijevimeni a, #lijevimeni h2 { font: normal 16px/18px arial,
helvetica, sans-serif; display: block; border-width: 1px;
border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0;
padding: 2px 3px; } #lijevimeni h2 { color: #111111; background:
#D4EB9F; text-transform: uppercase; } #lijevimeni a { color: #000;
background: #EAECCD; text-decoration: none; } #lijevimeni a:hover {
color: #a00; background: #fff; } #lijevimeni li { position:
relative; } #lijevimeni ul ul ul { position: absolute; top: 0;
left: 100%; width: 100%; }
ass. Adis Alihodi
Uvod u CSSdiv#lijevimeni ul ul ul { display: none; }
div#lijevimeni ul ul li:hover ul { display: block; }
17
Poto smo definirali stil, dovoljno je unutar taga div ukljuiti
id selektor ijeviMeni sa . Kao rezultat dobijamo vertikalni meni,
to vidimo na slici ispod.
Kao to se moe vidjeti iz css koda, vertikalni meni smo
pozicionirali koristei apsolutno pozicioniranje. Meni smo postavili
da bude udaljen 135 piksela od vrha i 46 piksela od lijeve margine.
Studentima se preputa da paljivo analiziraju svaku liniju css
koda.
ass. Adis Alihodi
Uvod u CSS
18
4.0 Dizajniranje web stranice pomou css-aPretpostavimo da elimo
dizajnirati sljedeu web stranicu iskljuivo koristei css:
ass. Adis Alihodi
Uvod u CSSPrimjeujemo da se ova web stranica sastoji od:
zaglavlja (header); sadraja glavnog dijela (content) sajdbara
(sidebar).
19
Pogledajmo na sljedeoj slici gdje se to nalazi:
4.1 Kreiranje dokumenta pomou div tagova4.1.1 Kreiranje omotaaU
ovom poglavlju opisat emo ukratko, kako kreirati i stilizovati neku
stranicu da izgleda poput slike gore. Ako se prisjetimo kako smo
kreirali vertikalni meni, jasno je da prvu stvar koju emo uraditi
je ta da kreiramo stranicu i formiramo odjeljke (koje emo zvati u
zavisnosti od svrhe) pomou div tagova. Jasno se vidi sa gornje
slike da je stranica izdvojena iz pozadine (za pozadinu je odabrana
neka slika). To nas asocira da trebamo imati jedan odjeljak, kojeg
emo zvati omota. Unutar tog odjeljka, nalazit e se svi ostali
odjeljci. Kod za kreiranje tog odjeljka dat je sa:
ass. Adis Alihodi
Uvod u CSS
20
4.1.2 Kreiranje zaglavljaPoto smo kreirali omota (vizuelno je na
web stranici prikazan sivom bojom), trebamo kreirati zaglavlje.
Prije nego li kreiramo zaglavlje, pogledajmo sljedeu sliku:
Sa slike se vidi da tekst i logo sliku moemo staviti unutar
odjeljka zaglavlje, a da linkove poput Contact Us, About Us,
Privacy i Sitemap moemo staviti u poseban odjeljak (nazovimo ga
zaglavljeDno) unutar odjeljka zaglavlje. Poto smo opisali od ega se
zaglavlje sastoji, dajmo kompletan kod za kreiranje istog:
The Footbag Freaks logo appears to the left of this paragraph.
Depending on whether or not I use the CSS float property, I may see
more than one line of text beside the logo. The CSS float property
replaces the deprecated align attribute of the HTML img element and
has an identical effect. The Home of the Hack
About Us| Privacy Policy|
Sitemap
Primjetimo da imamo id selektor granicnaLinija koji emo
koristiti da pozicioniramo tekst The Home of the Hack.
4.1.2 Kreiranje sadraja i sajdbaraass. Adis Alihodi
Uvod u CSS
21
Poto smo kreirali zaglavlje, sada bi bilo dobro da imamo neki
odjeljak koji e sadravati odjeljak za sajdbar kao i odjeljak za
sadraj. Nazovimo taj odjeljak glavniDio. Kod za kreiranje istog dat
je sa:
Poto smo kreirali odjeljak glavniDio, sada emo prei na kreiranje
odjeljka sadraj. Jasno se vidi sa slike ispod, da odjeljak sadraj
treba sadravati jedan id selektor za zaglavlje sadraja i niz drugi
klasnih selektora za stilizovanje istog.
Prema tome, dajmo sada kod za sadraj i i za zaglavlje sadraja:
Simon Says
ass. Adis Alihodi
Uvod u CSS
22
Simon Mackie tells us how a change of shoes has given him new
moves and a new outlook as the new season approaches. Read More
Sada preimo na kreiranje ostalog dijela sadraja: Recent
Features
- Head for the Hills: Is Altitude Training the Answer? Lachlan
'Super Toe' Donald Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Praesent hendreritiaculis
arcu. Full Story
Hack up the Place: Freestylin' Super Tips Jules 'Pony King'
Szemere Vestibulum ante ipsum primis in faucibus orci luctus
etultrices posuere cubilia Curae; Praesent hendreritiaculis arcu.
Full Story The Complete Black Hat Hacker's Survival Guide Mark
'Steel Tip' Harbottle Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Praesent hendrerit
iaculis arcu. Full Story
Five Tricks You Didn't Even Know You Knew Simon 'Mack Daddy'
Mackie Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendreritiaculis arcu.
Full Story
Napomenimo da se gornji dio html koda mora nalaziti unutar
odjeljka sadraj, tj. odmah iz odjeljka sadrzajZaglavlje. Do sada
smo ass. Adis Alihodi
Uvod u CSS
23
kompletirali odjeljak sadraj. Ostaje nam da jo odradimo odjeljak
sajdbar. Prvo pogledamo sajdbar na slici sa lijeve strane. Kao to
vidimo sa slike i ovdje e trebati nekoliko div tagova pomou kojih
emo uspijeti napraviti da sajdbar izgleda kao na slici. Naravno to
bismo mogli uraditi bez koritenja selektora klasa. No, tada ne
bismo postigli dinamiku na stranici. U tom sluaju imali bismo
statinu stranicu. Meutim, ako elimo dinamiku, tj. ako elimo da s
vremena na vrijeme, sajdbar mijenja poziciju na stranici, onda emo
koristiti css u kombinaciji sa nekim skriptnim jezikom (javascript,
php itd.). Preimo na kod za izvedbu sajdbara o kojem smo do sada
priali: Site Search Keywords: Coming Events
- 10 Apr 06 -
Seattle Zone Qualifier
13 Apr 06 -
World Cup - Round 8 21 Apr 06 -
FootbagOOM 05 - NY 28 Apr 06 -
WFPA AGM - Hong Kong
3 May 06 -
World Cup - Round 9 Move of the Month The Outer Stall Eti bibendum
mauris nec nulla. Nullam cursus ullamcorper quam. Sed cursus
vestibulum leo. more
Sa ovim smo zavrili dizajniranje stranice (ne misli se na
primjenu css stila) koju smo prikazali na slici na poetku poglavlja
4.0. Pogledajmo na slici ispod, kako sve to izleda prije nego li
primjenimo css stil. ass. Adis Alihodi
Uvod u CSS
24
Slika 4.1.2.1. Konaan izgled stranice bez primjene css-a
4.2 Ureivanje stranice pomou css-aPrije nego to ponemo sa
primjenom css stila, navedimo nekoliko elementarnih primjera koje
emo koristiti za pozicioniranja elemenata na web stranici. Primjer
4.2.1: Pozicionirajte proizvoljan tekst tako da se nalazi udaljen
od gornje margine za 75 piksela, a od lijeve margine za 125
piksela. ass. Adis Alihodi
Uvod u CSS
25
Rjeenje: Da bismo ovo postigli koristit emo apsolutno
pozicioniranje. Kod za ovaj primjer dat je sa: Proizvoljan
tekst.
Primjer 4.2.2: Napisati kod kojim ete omoguiti relativno
pozicioniranje jednog teksta u odnosu na drugi. Rjeenje: Kod kojim
emo to postii (pogledati sliku ispod) dat je sa: lokaciji, gdje je
x1=x+50, a y1=y+50, tj. x1=175, a
Do sada smo prikazali eksplicitno apsolutno pozicioniranje,
zatim relativno poziciniranje jednog teksta u odnosu na drugi
(koriteno apsolutno pozicioniranje), koje je ostvareno preko dva
dig taga, jedan unutar drugog. Sada emo navesti primjer
eksplicitnog relativnog pozicioniranja u kombinaciji sa apsolutnim
pozicioniranjem. Primjer 4.2.3: Napisati kod kojim ete postii
apsolutno i relativno pozicioniranje jednog teksta u odnosu na
drugi. Rjeenje: Kod kojim emo to postii dat je sa: ass. Adis
Alihodi
Uvod u CSS Apsolutno i relativno pozicioniranje This is the
first line of text being positioned.
26
This is an example of a second line.
Prije nego to ponemo sa primjenom css stila, navest emo jedan
box model koji je kljuna stvar kod primjene css stila. Naime,
sljedea slika nam pokazuje o emu je rije:
Tokom pisanja koda za css, koji emo primjenjivati za uljepavanje
stranice, gore naveden box model uvijek emo imati u glavi. On nam
je na vodilja, ta i kako treba raditi. Preimo na pisanje koda za
odjeljke koje smo naveli u poglavlju 4.1.
4.2.1 Pisanje css koda za omotaPrije nego damo kod za omota,
prvo emo predefinisati tag body drei se boks modela. Naime,body {
margin:0px;/*postavljamo lijevu, desnu, gornju i donju marginu*/
padding:0px;/*definiemo prostor kao korisnu povrsinu koju emo
koristiti*/
ass. Adis Alihodi
Uvod u CSS
27
color: white;/*definiemo boju teksta na stranici*/
background-image:url(slike/bg.jpg);/*postavljamo sliku bg.jpg za
pozadine stranice koristei relativnu a ne apsolutnu putanju*/
background-color: #050845; /*definiemo boju pozadine, zato to se
slika konano protee du y ose*/
background-repeat:repeat-x;/*definiemo da se slika ponavlja po x
osi*/ font: small Arial, Helvetica, Verdana, sans-serif;/*definiemo
font za cijelu stranicu */ }
Sada, poto primjenimo tag body na dokument prikazan na slici
4.1.2.1,dobijamo:
Preimo sada na pisanje css koda za odjeljak omotac.
Naime,#omotac { background-color:#fdf8f2; color: black; margin:
30px 40px 30px 40px; padding: 10px; }
Nakon primjene ovog koda, dobijamo sljedeu sliku:
ass. Adis Alihodi
Uvod u CSS
28
4.2.2 Pisanje css koda za zaglavljeSada emo napisati css kod za
id selektore poput: #zaglavlje, #zaglavljeDno, kao i kod za niz
kombinovanih id selektora. Naime,#zaglavlje {} #zaglavljeDno {
ass. Adis Alihodi
Uvod u CSS
29
border-top: 1px solid #b9d2e3;/*solid slui za bojenje liniju,
drugim rijecima, druga vrijednost svojstva border-top nama kazuje
kako trebamo obojiti liniju*/ border-bottom: 1px solid #b9d2e3;
height:100%;/*definiemo visinu teksta izmeu border-top i
border-bottom*/ }
Nakon primjene ovog koda, dobijamo sljedeu sliku:
Sada bi trebali da neureenu listu koja sadri: Contac Us, About
Us, Privacy Policy i Sitemap uredimo. Da bismo to uradili napiimo
sljedei css kod:#zaglavljeDno ul { /*definisemo kako e se
prikazivati neureena lista*/ margin: 0px; padding: 0px 30px 0px
0px; text-align: right; } #zaglavljeDno li { /*definiemo kako e se
prikazivati stavke neureene liste*/ display:inline;/*definiemo da
se stavke prikazuju u jednoj liniji*/ background-color:#fdf8f2;
color:black; }
ass. Adis Alihodi
Uvod u CSSNakon primjene gornjeg koda, dobijamo sljedeu
sliku:
30
Primjetimo sada da smo linkove smjestili na desnoj strani
udaljivi se od omotaa za 30 px. Takoer, sve smo linkove postavili
da budu u jednoj liniji. Sada napiimo kod koji e nam omoguiti da
predifiniramo svojstva poput: active link, visited link, hover
link. Naime,#zaglavljeDno a:link, #zaglavljeDno a:visited {
text-decoration:none;/*na ovaj nain smo ponitili defaultno
postavljanje*/ background-color:#fdf8f2; color: #050845; }
#zaglavljeDno a:hover { text-decoration:none;
background-color:#00CCFF; color:#000000;
ass. Adis Alihodi
Uvod u CSS}
31
Kada sada gornji kod primjenimo, dobit emo sliku ispod.
Sada emo dati css kod kojim emo omoguiti da tekst The Home of
Hack bude u istoj liniji kao i linkovi. Naime,#granicnaLinija {
font-weight: bold; background-color: #fdf8f2; /*boja okvira*/
color: #050845; /* boja teksta unutar okvira*/ font-style: italic;
/* stil teksta unutar okvira*/ margin:0px; /* ekvivalentno sa onim
gore*/ padding: 0 0 0 20px; width: 300px; /*defniemo irinu teksta:
The Home of the Hack*/ float: left; /*definiemo da tekst pluta sa
lijeva na desno*/ }
Primjenjujui gornji css kod, dobijamo sliku ispod.
ass. Adis Alihodi
Uvod u CSS
32
Sada smo definitivno zavrili zaglavlje. Preimo na stilizovanje
sadraja i sajdbara.
4.2.3 Pisanje css koda za sadraj i sajdbarSada emo napisati css
kod za id selektore poput: #glavna, #sadraj, #sajdbar kao i kod za
niz kombinovanih id selektora. Naime,#glavniDio {
position:relative;/*definiemo relativno pozicionisanje, postiui na
taj nain da svi potomci e imati sopstven koordinatni sistem*/
top:0px; left:0px; width:100%; margin-top:10px; } #sadrzaj {
margin: 0px 240px 0px 0px; border: 1px solid #b9d2e3;
background-color: white; color: black; }
Primjenjujui gornji css kod, dobijamo sliku ispod. ass. Adis
Alihodi
Uvod u CSS
33
Uradimo sada da zaglavlje sadraj izgleda kao na sljedeoj
slici:
Da bismo ovo postigli, napiimo sljedei kod:#sadrzajZaglavlje {
background-image:url(slike/sadrzajZaglavlje.jpg);
background-repeat: no-repeat; background-color: #112236; color:
white; padding: 2em 2em 1em 200px; height: 100%; }
#sadrzajZaglavlje h2 {
ass. Adis Alihodi
Uvod u CSSmargin: 0; font-weight:normal; font-size: 140%; }
#sadrzajZaglavlje p { font-size: 110%; text-align:justify; }
#sadrzajZaglavlje p .vise { margin-top: 0; text-align: right; }
#sadrzajZaglavlje p.vise a:link, #sadrzajZaglavlje p.vise a:visited
{ color:white; text-decoration:none;
background-image:url(slike/linkStrelica.gif);
background-repeat:no-repeat; background-position:center left;
padding-left:20px; }
34
Nastavimo sada sa ureivanjem sadraja. Podsjetimo se sljedeom
slikom, kako bi to sadraj trebao da izgleda:
Dakle,#sadrzaj .unutrasnji { margin: 10px 20px 10px 40px;
padding:30px 30px 30px 30px; } #sadrzaj .unutrasnji h2 { color:
#245185; padding-bottom: 0.2em; border-bottom: 1px solid #b9d2e3;
font-size: 110%; } #sadrzaj .unutrasnji h3 { font-size: 130%; }
#sadrzaj .unutrasnji ul.karakteristike {
ass. Adis Alihodi
Uvod u CSSmargin: 0px; padding: 0px; list-style:none; } #sadrzaj
.unutrasnji h3 a:link, #sadrzaj .unutrasnji h3 a:visited { color:
#245185; } #sadrzaj .unutrasnji p { color: #666666; font-size: 90%;
} #sadrzaj .unutrasnji .karakteristike li img { float: left;
margin: 0px 5px 5px 0px; } #sadrzaj .unutrasnji p.autor {
font-weight: bold; } #sadrzaj .unutrasnji p.vise { margin-top: 0;
text-align: right; } #sadrzaj .unutrasnji p.vise a:link, #sadrzaj
.unutrasnji p.vise a:visited {
background-image:url(slike/linkStrelica.gif); background-repeat:
no-repeat; background-position: center left; padding-left: 14px;
font-size: 90%; color: #1e4c82; }
35
Sada smo kompletirali sadraj. Ostaje nam jo da stilizujemo
sajdbar. Prije nego to to uradimo, pogledajmo kako bi sajdbar
trebao da izgleda nakon to se uljepa.
ass. Adis Alihodi
Uvod u CSSDajmo sada css kod kojim emo ovo postii:#sajdbar {
position: absolute; top: 0px; left: 0px; width: 220px;
background-color: #256290; color: white; margin: 0px; padding: 0px;
} #sajdbar h3 { font-size: 110%;
background-image:url(slike/bojaSajdbara.jpg); background-repeat:
no-repeat; margin: 0px; padding: 0.2em 0 0.2em 10px; font-weight:
normal; } #sajdbar .unutrasnjost { padding: 10px; } #sajdbar ul {
list-style-image:url(slike/linkStrelica.gif); margin-left: 0;
padding-left: 20px; } #sajdbar p, #sajdbar li { font-size: 90%;
line-height: 1.4em; } #sajdbar ul a:link, #sajdbar ul a:visited {
color: white; } #sajdbar .datum { font-weight: bold; } #sajdbar
p.vise { clear: right; margin: 0 30px 0 0; text-align: right; }
#sajdbar p.vise a:link, #sajdbar p.vise a:visited { color: white;
background-image:url(slike/linkStrelica.gif); background-repeat:
no-repeat; background-position: center left; padding-left:
14px;
36
ass. Adis Alihodi
Uvod u CSS} #sajdbar .slikaSajdbara { float: right; margin: 0
30px 0 20px; } #formaZaPretragu .tekst { width: 196px; border: 1px
solid black; } #formaZaPretragu .dugmePretrage { text-align: right;
margin-top: 4px; } #formaZaPretragu .dgmPret { border: 1px solid
#45bac0; background-color: #256290; color: white; }
37
Sa ovim smo napokon zavrili sa uljepavanjem stranice. Dajmo sada
cjelokupan kod za kreiranje (HTML) i uljepavanje (CSS) stranice.
HTML KOD: Footbag freaks The Footbag Freaks logo appears to the
left of this paragraph. Depending on whether or not I use the CSS
float property, I may see more than one line of text beside the
logo. The CSS float property replaces the deprecated align
attribute of the HTML img element and has an identical effect.
ass. Adis Alihodi
Uvod u CSSThe Home of the Hack
About Us| Privacy Policy|
Sitemap Simon Says Simon Mackie tells us how a change of shoes
has given him new moves and a new outlook as the new season
approaches. Read More
38
Recent Features
- Head for the Hills: Is Altitude Training the Answer? Lachlan
'Super Toe' Donald Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Praesent hendrerit
iaculis arcu. Full Story
Hack up the Place: Freestylin' Super Tips Jules 'Pony King'
Szemere Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.
Full Story The Complete Black Hat Hacker's Survival Guide Mark
'Steel Tip' Harbottle Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Praesent hendrerit
iaculis arcu. Full Story
Five Tricks You Didn't Even Know You Knew Simon 'Mack Daddy'
Mackie Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.
Full Story
39
Site Search Keywords: Coming Events
- 10 Apr 06 -
Seattle Zone Qualifier
13 Apr 06 -
World Cup - Round 8 21 Apr 06 -
FootbagOOM 05 - NY 28 Apr 06 -
WFPA AGM - Hong Kong
3 May 06 -
World Cup - Round 9 Move of the Month The Outer Stall Eti bibendum
mauris nec nulla. Nullam cursus ullamcorper quam. Sed cursus
vestibulum leo. more
CSS KOD: ass. Adis Alihodi
Uvod u CSS
40
body { margin:0px;/*postavljamo lijevu, desnu, gornju i donju
marginu*/ padding:0px;/*definiemo prostor kao korisnu povrsinu koju
emo koristiti*/ color: white;/*definiemo boju teksta na stranici*/
background-image:url(slike/bg.jpg);/*postavljamo sliku bg.jpg za
pozadine stranice koristei relativnu a ne apsolutnu putanju*/
background-color: #050845; /*definiemo boju pozadine, zato to se
slika konano protee du y ose*/
background-repeat:repeat-x;/*definiemo da se slika ponavlja po x
osi*/ font: small Arial, Helvetica, Verdana, sans-serif;/*definiemo
font za cijelu stranicu */ } #omotac { background-color:#fdf8f2;
color: black; margin: 30px 40px 30px 40px; padding: 10px; }
#zaglavlje {} #zaglavljeDno { border-top: 1px solid #b9d2e3;/*solid
slui za bojenje liniju, drugim rijecima, druga vrijednost svojstva
border-top nama kazuje kako trebamo obojiti liniju*/ border-bottom:
1px solid #b9d2e3; height:100%;/*definiemo visinu teksta izmeu
border-top i border-bottom*/ } #zaglavljeDno ul { /*definisemo kako
e se prikazivati neureena lista*/ margin: 0px; padding: 0px 30px
0px 0px; text-align: right; } #zaglavljeDno li { /*definiemo kako e
se prikazivati stavke neureene liste*/ display:inline;/*definiemo
da se stavke prikazuju u jednoj liniji*/ background-color:#fdf8f2;
color:black; } #zaglavljeDno a:link, #zaglavljeDno a:visited {
text-decoration:none;/*na ovaj nain smo ponitili defaultno
postavljanje*/ background-color:#fdf8f2; color: #050845; }
#zaglavljeDno a:hover {
ass. Adis Alihodi
Uvod u CSStext-decoration:none; background-color:#00CCFF;
color:#000000; }
41
#granicnaLinija { font-weight: bold; background-color: #fdf8f2;
/*boja okvira*/ color: #050845; /* boja teksta unutar okvira*/
font-style: italic; /* stil teksta unutar okvira*/ margin:0px; /*
ekvivalentno sa onim gore*/ padding: 0 0 0 20px; width: 300px;
/*defniemo irinu teksta: The Home of the Hack*/ float: left;
/*definiemo da tekst pluta sa lijeva na desno*/ } #glavniDio {
position:relative;/*definiemo relativno pozicionisanje, postiui na
taj nain da svi potomci e imati sopstven koordinatni sistem*/
top:0px; left:0px; width:100%; margin-top:10px; }
#sadrzaj { margin: 0px 240px 0px 0px; border: 1px solid #b9d2e3;
background-color: white; color: black; }
#sadrzajZaglavlje {
background-image:url(slike/sadrzajZaglavlje.jpg);
background-repeat: no-repeat; background-color: #112236; color:
white; padding: 2em 2em 1em 200px; height: 100%; }
#sadrzajZaglavlje h2 { margin: 0; font-weight:normal; font-size:
140%; } #sadrzajZaglavlje p { font-size: 110%; text-align:justify;
} #sadrzajZaglavlje p .vise { margin-top: 0;
ass. Adis Alihodi
Uvod u CSStext-align: right; } #sadrzajZaglavlje p.vise a:link,
#sadrzajZaglavlje p.vise a:visited { color:white;
text-decoration:none; background-image:url(slike/linkStrelica.gif);
background-repeat:no-repeat; background-position:center left;
padding-left:20px; } #sadrzaj .unutrasnji { margin: 10px 20px 10px
40px; padding:30px 30px 30px 30px; } #sadrzaj .unutrasnji h2 {
color: #245185; padding-bottom: 0.2em; border-bottom: 1px solid
#b9d2e3; font-size: 110%; } #sadrzaj .unutrasnji h3 { font-size:
130%; } #sadrzaj .unutrasnji ul.karakteristike { margin: 0px;
padding: 0px; list-style:none; } #sadrzaj .unutrasnji h3 a:link,
#sadrzaj .unutrasnji h3 a:visited { color: #245185; } #sadrzaj
.unutrasnji p { color: #666666; font-size: 90%; } #sadrzaj
.unutrasnji .karakteristike li img { float: left; margin: 0px 5px
5px 0px; } #sadrzaj .unutrasnji p.autor { font-weight: bold; }
#sadrzaj .unutrasnji p.vise { margin-top: 0; text-align: right;
42
ass. Adis Alihodi
Uvod u CSS} #sadrzaj .unutrasnji p.vise a:link, #sadrzaj
.unutrasnji p.vise a:visited {
background-image:url(slike/linkStrelica.gif); background-repeat:
no-repeat; background-position: center left; padding-left: 14px;
font-size: 90%; color: #1e4c82; } #sajdbar { position: absolute;
top: 0px; left: 0px; width: 220px; background-color: #256290;
color: white; margin: 0px; padding: 0px; } #sajdbar h3 { font-size:
110%; background-image:url(slike/bojaSajdbara.jpg);
background-repeat: no-repeat; margin: 0px; padding: 0.2em 0 0.2em
10px; font-weight: normal; } #sajdbar .unutrasnjost { padding:
10px; } #sajdbar ul { list-style-image:url(slike/linkStrelica.gif);
margin-left: 0; padding-left: 20px; } #sajdbar p, #sajdbar li {
font-size: 90%; line-height: 1.4em; } #sajdbar ul a:link, #sajdbar
ul a:visited { color: white; } #sajdbar .datum { font-weight: bold;
} #sajdbar p.vise
43
ass. Adis Alihodi
Uvod u CSS{ clear: right; margin: 0 30px 0 0; text-align: right;
} #sajdbar p.vise a:link, #sajdbar p.vise a:visited { color: white;
background-image:url(slike/linkStrelica.gif); background-repeat:
no-repeat; background-position: center left; padding-left: 14px; }
#sajdbar .slikaSajdbara { float: right; margin: 0 30px 0 20px; }
#formaZaPretragu .tekst { width: 196px; border: 1px solid black; }
#formaZaPretragu .dugmePretrage { text-align: right; margin-top:
4px; } #formaZaPretragu .dgmPret { border: 1px solid #45bac0;
background-color: #256290; color: white; }
44
Ako bismo sada htjeli da nam se sajdbar nalazi na desnoj strani,
sve to trebamo uraditi jeste da odemo do odjeljaka sadrzaj i
sajdbar i da promjenimo dvije linije koda i to:
unutar odjeljka sadrzaj, umjesto margin: 0px 240px 0px 0px;
stavit emomargin: 0px 0px 0px 240px;
unutrar odjeljka sajdbar, umjesto left:0; stavit emo
right:0px;
Nakon to smo napravili ove izmjene, imamo novu web stranicu sa
sajdbarom koji se pojavljuje na desnoj strani. Pogledajmo ovu
promjenu na slici ispod.
ass. Adis Alihodi
Uvod u CSS
45
Na ovaj nain, mijenjajui samo dvije linije css koda unutar
odjeljaka sadrzaj i sajdbar, dobijamo malo drugaiju stranicu. U
kombinaciji sa JavaScriptom i CSSom, moemo postii da iz minute u
minutu naa stranica poprima drugaiji oblik. Tako postiemo da
stranica jako lijepo izgleda i sem toga ostvarujemo dinaminost na
jedan planiran i smislen nain.
ass. Adis Alihodi
![Uvod u Programiranje [Skripta]](https://img.pdfslide.tips/doc/110x75/5571fbf249795991699626ec/uvod-u-programiranje-skripta.jpg)
