Uvod u web programiranje:Uvod u CSSDubrovnik, oujak 2013.
Tomo Sjekavica
Zatieno licencom http://creativecommons.org/licenses/by-nc-sa/3.0/hr/
Uvod u web programiranje: Uvod u CSS 2
Creative Commonsslobodno smijete:
dijeliti umnoavati, distribuirati i javnosti priopavati djelo remiksirati preraivati djelo
pod slijedeim uvjetima: imenovanje. Morate priznati i oznaiti autorstvo djela na
nain kako je specificirao autor ili davatelj licence (ali ne nain koji bi sugerirao da Vi ili Vae koritenje njegova djela imate njegovu izravnu podrku).
nekomercijalno. Ovo djelo ne smijete koristiti u komercijalne svrhe.
dijeli pod istim uvjetima. Ako ovo djelo izmijenite, preoblikujete ili stvarate koristei ga, preradu moete distribuirati samo pod licencom koja je ista ili slina ovoj.
U sluaju daljnjeg koritenja ili distribuiranja morate drugima jasno dati do znanja licencne uvjete ovog djela. Najbolji nain da to uinite je linkom na ovu internetsku stranicu. Od svakog od gornjih uvjeta mogue je odstupiti, ako dobijete doputenje nositelja autorskog prava. Nita u ovoj licenci ne naruava ili ograniava autorova moralna prava.
Tekst licence preuzet je s http://creativecommons.org/.
Uvod u web programiranje: Uvod u CSS 3
CSS
CSS = Cascading Style Sheets odreuje nain prikaza HTML elemenata vrste CSS stilova: stilovi koji se primjenjuju na 1 element linijski predloci atribut tipa style HTML elementa
stilovi koji se primjenjuju na 1 dokument umetnuti predloci ukljueni u zaglavlju head HTML dokumenta
stilovi koji se primjenjuju na vie dokumenata vezani predloci navedeni unutar posebne .css datoteke
CSS Zen Garden
Uvod u web programiranje: Uvod u CSS 4
Ako nekoga zanimaostatak primjeramoe vidjeti na:
www.csszengarden.com
Linijski predloci
Uvod u web programiranje: Uvod u CSS 5
Tekst odlomka
atribut CSS stila
vrijednost atributa
svojstvo atributa
atribut style moe imati vie svojstava sa
pridruenim vrijednostima koja su odvojena s
znakom ;
tablica prilagoena s: http://en.wikipedia.org/wiki/Web_colors
osnovne boje koje se mogu koristiti na web
stranicama, ostale bojepotraite na Internetu
Linijski predloci primjer
Uvod u web programiranje: Uvod u CSS 6
Dobrodoli u klub "Kod smrznutog pingvina"
Klub "Kod smrznutog pingvina" je prostor u kojem moete
Kako do nasSiete na treoj stanici od Pila,
klub_stil-01.html
sigurno postoji neki nain da ne moramo pisati sva svojstva i vrijednosti atributa za svaki
element na kojem elim primijeniti iste stilove
Elementi CSS-a
Uvod u web programiranje: Uvod u CSS 7
selector { property: value; }
osnovni element CSS-a koji definira izgled svih
elemenata na koje je primijenjen
vrijednost odgovarajueg svojstva stila, navodi se
iza znaka :
odgovarajue svojstvo stila odreenog elementa
kao to su boja fonta, boja pozadine, vrsta fonta,
body{background-color: silver;color: navy;
}
cijelom dokumentu (body) semijenja boja pozadine u srebrnu (silver), a boja
fonta u tamno plavu (navy)
Umetnuti predloci primjer
Uvod u web programiranje: Uvod u CSS 8
p{
color: maroon;background-color: gray;
}
klub_stil-02.html
definicije svih stilova se navode u style elementu unutar zaglavlja HTML
dokumenta (head)
atribut typeodreuje da je vrsta
stila text/css
Svojstva fonta font-family naziv obitelji ili konkretnog fonta
vrijednost: naziv obitelji ili naziv fonta osnove obitelji fontova:
serif sa ukrasnim krajevima sans-serif bez ukrasnih krajeva monospace fontovi sa slovima fiksne irine cursive fontovi koji simuliraju rukopis fantasy stilizirani ukrasni fontovi
naziv konkretnog fonta: npr. Verdana, Times New Roman
Uvod u web programiranje: Uvod u CSS 9
serif fontovi
GeorgiaTimes New Roman
Roman
sans-serif fontovi
Arial VerdanaArial BlackTrebuchet MS
fantasy fontovi
ImpactBroadwayMagneto
cursive fontovi
Comic SansMonotype Corsiva
Freestyle Script
monospace fontovi
ConsolasCourier NewCourier
ako naziv fontasadri vie
rijei treba ga navesti unutar
dvostrukih navodnika
Svojstva fonta i teksta font-size veliina fonta
vrijednost: izraena u pikselima px, postocima % ili u nekoj drugoj mjernoj jedinici
font-weight debljina fonta vrijednost: bold, bolder, lighter, normal
font-style stil fonta vrijednost: italic, normal
text-decoration ukraavanje teksta vrijednost: blink, line-through, none, overline,
underline
text-align horizontalno poravnavanje teksta vrijednost: center, justify, left, right
Uvod u web programiranje: Uvod u CSS 10
Zadatak 1
Uvod u web programiranje: Uvod u CSS 11
izmijenite postojee i dodajte nove stilove web stranici klub_stil-02.html tako da rezultat bude kao na slici
pozadina cijelog dokumenta je
srebrna, a vrsta fonta Courier New
naslov 1. razine je crvene boje, podcrtan i centriran,
a vrsta fonta je Arial
naslov 2. razine je tamnoplave boje, nakoen, imacrtu iznad teksta, vrsta
fonta je Vedrana, a veliina fonta je 20px
odlomci su poravnati udesno,tekst je podebljan, zelene
boje i veliine 14px
Svojstva pozadine
background-color boja pozadine vrijednost:
naziv boje, npr. white, black, red hex oznaka, npr. #FFFFFF, #000000, #FF0000 rgb oznaka, npr. rgb(255,255,255), rgb(0,0,0), rgb(255,0,0)
background-image slika pozadine vrijednost: url(slika), npr. url(http://goo.gl/hPo1a)
background-repeat ponavljanje slike pozadine vrijednost: no-repeat, repeat, repeat-x, repeat-y
Uvod u web programiranje: Uvod u CSS 12
hex i rgb oznake predstavljajuomjer tri osnovne boje crvene, zelene i plave pomou kojih se
moe dobiti bilo koja boja
slika preuzeta iz: E. Freeman & E. Freeman, Head First HTML with CSS & XHTML, O'Reilly, 2006
hex i rgb oznake odreenih bojamoete pronai na internetu, npr.
http://en.wikipedia.org/wiki/Web_colors
Primjer sa slikom pozadine
Uvod u web programiranje: Uvod u CSS 13
body{
background-color: #CCCCCC;background-image:
url(club_penguin_BW.png); background-repeat: no-repeat;
}p{
color: maroon;background-color: gray;
}
klub_stil-03.html
id i class selektori id selector za opis jedne instance (jedan element)
oznaava se s oznakom hash ispred naziva, npr. #selektor
class selector za opis razreda (vie elemenata) oznaava se s tokom ispred naziva, npr. .selektor
Uvod u web programiranje: Uvod u CSS 14
Primjer s id i class selektorima
Uvod u web programiranje: Uvod u CSS 15
#crveni{
color: red;}.plavi{color: blue;
}
id_class.html
Ovo je obini naslov.Ovo je crveni naslov.Ovo je prvi plavi naslov.Ovo je drugi plavi naslov.
nemojte nazive id i classselektora zapoinjati s brojem jer takvi nazivi
nisu podrani u svim web preglednicima
Svojstva linkova selektori za formatiranje linkova:
a stil linka a:hover stil linka iznad kojeg se nalazi pokaziva mia
koritenje selektora linkova skupa s id selektorom npr. a#selektor, a#selektor:hover
koritenje selektora linkova skupa s class selektorom npr. a.selektor, a.selektor:hover
Uvod u web programiranje: Uvod u CSS 16
a{font-style: italic;color: red;
}
a:hover{font-weight: bold;color: blue;
}
linkovi.html
Zadatak 2
dodajte stilove web stranici klub-02.htmltako da rezultat bude kao na slici
Uvod u web programiranje: Uvod u CSS 17
naslov je centriran i koristi sliku pozadina.jpg
kao pozadinu koja se ponavlja samo vodoravno
link je plave boje, podebljan i nije podcrtan,
kad se prijee s miem preko njega promijeni se boja u
sivu i podcrta se
neporedana lista koristisliku pozadina.jpg kao
pozadinu koja se ponavlja samo vertikalno, a boja pozadine liste je #666666
slika pozadine iz primjera: pozadina.jpg
boja fonta prve 2. stavke obje liste je #000099
link je crvene boje i podcrtan, kad se prijee s
miem preko njega promijeni se boja u zelenu, podeblja se i ne prikazuje se crta
koristiti id i class selektore gdje mislite da je potrebno
CSS box model
omota oko HTML elemenata koji se sastoji od: padding razmak izmeu sadraja i okvira border okvir oko sadraja i razmaka margin udaljenost sadraja od ruba nadreenog
elementa
Uvod u web programiranje: Uvod u CSS 18
slika preuzeta s: http://www.w3schools.com/css/css_boxmodel.asp
Svojstva okvira (border) border-style stil iscrtavanja okvira
vrijednost: dashed, dotted, double, none, solid
border-width debljina okvira vrijednost: medium, thin, thick ili veliina u px
border-color boja okvira vrijednost: naziv boje, hex ili rgb oznaka
mogue je primijeniti svojstva za odreenu stranu okvira border-[top|bottom|right|left]-[style|color|width] npr. border-top-style: solid;
mogue je primijeniti sva svojstva okvira odjednom border: width style color; npr. border: thin solid red;
Uvod u web programiranje: Uvod u CSS 19
Primjer s okvirima
Uvod u web programiranje: Uvod u CSS 20
okviri-01.html
h2{border-bottom-style: dashed;border-bottom-width: 2px;
}#odlomak1{border-style: dotted;border-width: medium;border-color: red;
}#odlomak2{border: thick
