Neno Dodig, mag.inf.

ZasLo CSS?
O alo piilagodiii izgled siianice da ona bude iednalog
piilaza u svim pieglednicima?
O alo foimaiiiaii dolumeni da elemenii u niemu budu
piecizno smiesieni?
O alo na web siedisiu od sioiinu siianica odiednom
piomiieniii, piimieiice, boiu fonia na svim
siianicama?
ove CSSa
O (eng. CoscoJinq Style Sbeets), odnosno siilsle
iablica, iednosiavan su melanizam za dodavanie
siilova - foniova, boia iid.
O liip:]]www.csszengaiden.com
ove CSSa
O oiisieniem -a posialo ie moguce odvoiiii
piezeniaciiu podaiala i dizain od same siiuliuie
podaiala. To znaci da su sada dizaineii mogli
samosialniie osmisliavaii web siedisia - pialiicli
neovisno o lieaioiima HTML lda.
ove CSSa
O am HTML ld posiaie neuspoiedivo ciiliii i manii
sio znaci da ga ie bilo puno lalse nadziiaii.
ove CSSa
O asladnim siilovima omoguceno ie upiavlianie web
siedisiem s iednog miesia uz posiivanie poiedinacnil
odsiupania od zadanog siila. Odiednom ie posialo
moguce iednosiavnom piomienom nelolilo
paiameiaia, piomiieniii izgled iisucama siianica.
ove CSSa
O Predlozen i standardiziran pod okriliem W3 konzorciia
otpocetka ie relativno iednako implementiran kod
razlicitih proizvodaca web preglednika. To sto niie u
potpunosti iednako implementiran, lako se riesavalo
uporabom razlicitih stilova za razlicite preglednike.
ove CSSa
O ie donio ciiav niz nacina za uiedivanie piilaza
podaiala loii do iada nisu posioiali u samom HTML-u
aLl za lzradu CSSa
O alaii (Maciomedia Dieamweavei, Miciosofi
FioniPage iid.)
O Noiepad, Noiepad++
uuzle l bo[e
O oie smo vec definiiali na HTML piedavaniima
O Point pi] - iipogiafsla iedinica loia duzinu od iednog
inca definiia sa : poinia. Viiiednosi iednog inca ie
:, cm pa uz malo iacunania za velilo slovo
siandaidnog fonia od i:pi, loii ie uglavnom unapiiied
zadan lod vecine piogiama za obiadu ielsia,
dobiiemo viiiednosi od o,: cm.
uuzle l bo[e
O W em] - ielaiivna iedinica za definiianie velicine
fonia. Po definiciii ie elvivalenina viiiednosii foni-
size za dani elemeni. Piimieiice, ulolilo za paiagiaf
definiiamo viiiednosi foni-size od i:pi, iada ce
unuiai iog paiagiafa iem popiimiii viiiednosi od i:pi.
uuzle l bo[e
O PiksW px] - piibliziie li dovolino pogled vasem
zaslonu, piimiieiii ceie da ie podiielien u ieseilasiu
siiuliuiu sasiavlienu od malil lvadiaiica. Ti
lvadiaiici se nazivaiu pilseli. Iedna od naivazniiil
sivaii loie povezuiemo s pilselima ie iezoluciia loiu
loiisiimo na moniioiu. iandaidne viiiednosii
iezoluciia loie su danas u upoiiebi su i:oxio:,
io:x ie ooxoo pilsela.
rlm[er Llova u P1MLu
p>
foni face=ouiiei New, ouiiei, mono>
foni coloi==oooo size=+:>
b>Loiem]b>]foni>
ipsum doloi sii amei,]foni>
]p>
p>
foni face=ouiiei New, ouiiei, mono>
foni coloi==oooo size=+:>
b>consecieiui]b>]foni>
adipisicing elii ... ]foni>
]p>
dvo[e P1ML
p>
span class=siil>Loiem]span>
ipsum doloi sii amei ...
]p>
p>
span class=siil>consecieiui]span>
adipisicing elii ...
]p>
dvo[e CSS
p
foni-family:ouiiei New, ouiiei, mono;

.siil
coloi:=oooo;
foni-size::px;
foni-weigli:bold;

SaLavlce CSSa
O selektori p, .stil identiIiciraiu poiedine elemente na
HTML stranici;
O ,97-:9 color, Iontsize... kliucne riieci za opis
poiedinog elementa stranice;
O ;rijednosti , 24px... vriiednost koiu moze
poprimiti poiedino svoistvo;
O komentari tekst napisan izmedu znakova i .
SeekLorl
O sWWktov [svojstvo:vvijWVnost]
O iednosiavni selelioii
O llasni selelioii
O D selelioii
O lonielsini selelioii
O pseudollase
!edoLavl eekLorl
p
foni-family:Veidana, Helveiica, sans-seiif;

li
coloi:=oooo;
foni-size::px;
foni-weigli:bold;

kal eekLorl
.iziela
foni-weigli:bold;
foni-size:iipx;

.piiievod
foni-siyle:iialic;
foni-size:i:px;

ld eekLorl
=iziela
foni-weigli:bold;
foni-size:iipx;

=piiievod
foni-siyle:iialic;
foni-size:i:px;

koLekLl eekLorl
p b
foni-size:i:px;
coloi:ied;

eudokae
a:lovei
baclgiound-coloi:=ooo;
coloi:=fff;

a:aciive
baclgiound-coloi:=ffffoo;
coloi:=ccoooo;

kako povezaLl CSS P1ML
dokumeLom?
O povezivaniem na vanisli dolumeni
O uvozeniem vanislog dolumenia
O umeianiem u zaglavlie dolumenia
O dodavaniem u liniii aiiibuiom siyle.
ovezlva[e a va[kl dokumeL
lead>
...
linl iel=siylesleei
iype=iexi]css lief=siil.css>
...
]lead>
uvoze[e va[koa dokumeLa
lead>
...
siyle iype=iexi]css>
--
mimpoii uil(]css]siil.css);
mimpoii ]css]siili.css;
mimpoii liip:]]www.example.com]css]siil:.css;
-->
]siyle>
...
]lead>
umeLa[e CSSa u zaaav[e
dokumeLa
lead>
...
siyle iype=iexi]css>
p
foni-family:ouiiei New, ouiiei, mono;

.siil
coloi:=oooo;
foni-size::px;
foni-weigli:bold;

]siyle>
...
]lead>
uodava[e CSSa u ll[l pomocu
aLrlbuLa Lve
p siyle=foni-size:iopx>...ielsi...]p>
SeekLorl
li, l:, l
foni-family:sans-seiif;

li
foni-size:ipx;

l:
foni-size:ipx;

l
foni-size:i:px;

Nasljedivanje
na[edlva[e
id
coloi:ied;

ZadaLak
body foni-size:iopi
li foni-size:i:o%
olila ie velicina fonia u Hi iagu?
1ko lma vecl prlorlLeL?
O siilovi piidiielieni aiiibuiom siyle
O iV selelioii
O llasni selelioii i pseudollase
O lonielsini, pa iednosiavni selelioii
O Ulolilo dva selelioia imaiu poipuno isii piioiiiei,
viiiedii ce onai loii ie u siilu posliednii naveden.
rlm[er
li
coloi:blue;

=naslov
coloi:ied;

.plavo
coloi:blue;

naLavak prlm[era
li id=naslov>Loiem ipsum]li>
p class=plavo siyle=coloi:ied>Loiem ipsum doloi
sii amei, consecieiui adipisicing elii, sed do eiusmod
iempoi incididuni ui laboie ei doloie magna
aliqua.]p>
CSS mode kuLl[e
rlm[er p
p
maigin-iop:px;
maigin-boiiom::opx;
padding-lefi:opx;

naLavak prlm[era
CSS eemeLl
O blol elemenii (eng. Tlock level elements)
O liniisli elemenii (eng. inline elements)
O popisi (eng. lists).
CSS eemeLl bok
CSS eemeLl ll[kl
Ceerlckl koLe[erl Sn l ulv
O PAN - liniisli geneiicli
O DV - blol geneiicli
rlm[er Sn
p
foni-size:iipx;

.isialnuio
foni-size:ipx;
foni-weigli:bold;
boidei:ipx solid =ooo;

p>Loiem span class=isialnuio>ipsum
doloi]span>, sii amei.]p>
rlm[er ulv
.csslod
padding:px;
maigin:o;
widil:opx;
coloi:=oooo;
baclgiound-coloi:=FFFF;
foni-family:couiiei, mono;
iexi-align:lefi;
boidei-widil:ipx;
boidei-siyle:dasled;
boidei-coloi:=:;

pcelLo o aLrlbuLlma
O aiiibuii fonia
O aiiibuii ielsia
O aiiibuii boia i pozadina
O aiiibuii luiiie
O aiiibuii popisa
O pozicioniianie (smiesianie).
LrlbuLl foLa
O foni-family
O foni-weigli
O foni-size
O foni-siyle
O foni-vaiiani
LrlbuLl LekLa
O leiiei-spacing
O line-leigli
O iexi-decoiaiion
O iexi-iiansfoim
O iexi-align
O iexi-indeni
LrlbuLl bo[a
O coloi
O baclgiound-coloi
O baclgiound-image
O baclgiound-iepeai
O baclgiound-aiiaclmeni
O baclgiound-posiiion
O baclgiound
LrlbuLl CSS kuLl[e
O maigine (iubnice)
O odmaci
O gianice
O dimenziie
Marale
O maigin-iop
O maigin-iigli
O maigin-boiiom
O maigin-lefi
O maigin
dmacl(paddla)
O padding-iop
O padding-iigli
O padding-boiiom
O padding-lefi
O padding
Cralce(border)
div
boidei-iop-widil::px;
boidei-iigli-widil:px;
boidei-boiiom-widil:px;
boidei-lefi-widil:px;
boidei-siyle:solid;
boidei-coloi:=ooo;
baclgiound-coloi:=FF;

ulmezl[e kuLl[e
O widil
O leigli
Svo[Lva popla
O lisi-siyle-iype
O lisi-siyle-image
O lisi-siyle-posiiion
O lisi-siyle
ozlclolra[e (m[esLa[e)
O iaiiclo smiesianie
O Relaiivno smiesianie
O Apsoluino smiesianie
O Filsno smiesianie
v[ezba 1 CSS lzborlk
O Naslovnica
O Pioizvodi
O Pioizvod i
O Pioizvod :
O Pioizvod
O O nama
O oniali
v[ezba 1 lzrada P1MLa
Napiaviie daioielu index.liml
ul>
li>a lief==>Naslovnica]a>]li>
li>a lief==>Pioizvodi]a>]li>
li>a lief==>O nama]a>]li>
li>a lief==>oniali]a>]li>
]ul>
v[ezba 1 lzrada P1MLa
ul>
li>a lief==>Naslovnica]a>]li>
li>a lief==>Pioizvodi]a>
ul>
li>a lief==>Pioizvod i]a>]li>
li>a lief==>Pioizvod :]a>]li>
li>a lief==>Pioizvod ]a>]li>
]ul>
]li>
li>a lief==>O nama]a>]li>
li>a lief==>oniali]a>]li>
]ul>
v[ezba 1 lzrada CSSa
Napiaviie daioielu moi.css
ul, li
lisi-siyle:none; ] slida giaficlu oznalu ]
maigin:opx;
padding: opx;

ul li a, ul li a:visiied
display:blocl;
iexi-decoiaiion:none;
maigin:ipx;
padding::px opx :px px;
widil:i:opx;

ul ul li a, ul ul li a:visiied
display:blocl;
iexi-decoiaiion:none;
maigin:ipx ipx ipx ipx;
padding::px opx :px px;
widil:iopx;

v[ezba 1 SLllzlra[e CSSa
ul, li
lisi-siyle:none;
maigin:opx;
padding: opx;

ul li a, ul li a:visiied
display:blocl;
iexi-decoiaiion:none;
maigin:ipx;
padding::px opx :px px;
widil:i:opx;
coloi:=; ] boia linlova ]
foni-weigli:bold; ] podebliana slova ]
boidei-lefi:px solid =; ] gianica ]

ul ul li a, ul ul li a:visiied
display:blocl;
iexi-decoiaiion:none;
maigin:ipx ipx ipx ipx;
padding::px opx :px px;
widil:iopx;
coloi:=; ] boia linlova ]
foni-weigli:bold; ] podebliana slova ]
boidei-lefi:px solid =; ]gianica]

v[ezba 1 uodava[e dlamlckoa efekLa
ul, li
lisi-siyle:none;
maigin:opx;
padding: opx;

ul li a, ul li a:visiied
display:blocl;
iexi-decoiaiion:none;
maigin:ipx;
padding::px opx :px px;
widil:i:opx;
coloi:=;
foni-weigli:bold;
boidei-lefi:px solid =;

] dinamicli efeli za izboinil ]

ul li a:lovei
iexi-decoiaiion:none;
maigin:ipx;
boidei-lefi:px solid =ccf;

ul ul li a, ul ul li a:visiied
display:blocl;
iexi-decoiaiion:none;
maigin:ipx ipx ipx ipx;
padding::px opx :px px;
widil:iopx;
coloi:=;
foni-weigli:bold;
boidei-lefi:px solid =;

] dinamicli efeli za podizboinil ]

ul ul li a:lovei
iexi-decoiaiion:none;
maigin:ipx;
boidei-lefi:px solid =ccf;

v[ezba 2 komlLl arafovl
=giaf
coloi:=fff;
baclgiound:uil(images]giapl_bacl.gif );
baclgiound-posiiion:boiiom;
widil:opx;
leigli:iopx;
boidei:ipx solid =ooo;
padding:opx;
maigin:opx;
maigin-lefi:opx;
posiiion:ielaiive;

v[ezba 2 1rake arafa
=giaf ul
widil:opx;
leigli:iopx;
padding:opx;
maigin:opx;

=giaf ul li
posiiion:absoluie;
iexi-align:ceniei;
baclgiound-coloi:=;
padding:opx;
maigin:opx;
widil:opx;
leigli:ioopx;
lisi-siyle-iype:none;
boiiom:opx;

v[ezba 2 P1ML
ul id=giaf>
li siyle=lefi:opx;leigli:ioopx>ioo]li>
li siyle=lefi:opx;leigli:opx>o]li>
li siyle=lefi:iopx;leigli:opx>o]li>
li siyle=lefi::iopx;leigli:i:opx>i:o]li>
li siyle=lefi::opx;leigli:opx>o]li>
]ul>