CSS - osnove

CSS – Cascading Style Sheets
Oblikovanje web stranica

Odvajanje sadržaja i oblikovanja
 CSS je tehnologija za zadavanje izgleda elemenata web
stranica
 Korištenjem CSS-a možemo u potpunosti odvojiti sadržaj
web stranice (kojeg zadajemo HTML-om) od oblikovanja
(koje zadajemo CSS-om). To je važno zbog:
»
»
»
»

Jednostavnijeg oblikovanja većeg broja stranica odjednom
Preglednijeg i lakšeg oblikovanja stranica
Manjih ukupne veličine datoteka i bržeg učitavanja stranica
Dodatnih mogućnosti za oblikovanje kojih nema u HTML-u

WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević

2013. / 2014.

2

Verzije, standardi i podrška u preglednicima
 CSS je doživio puno manje izmjena i dopuna standarda
nego HTML (CSS1, CSS2, CSS2.1)
 Verzija koja se sada koristi je 2.1, ali je u najvećoj mjeri
kompatibilna i sa starijim verzijama
(nove verzije su uglavnom donosile nove mogućnosti, a
nisu se puno mijenjala postojeća pravila)
 Svi moderni web preglednici će ispravno prikazati web
stranicu oblikovanu CSSom, poneke nesuglasice i
problemi postoje tek kod nedavno uvedenih mogućnosti
oblikovanja i kod nekih preglednika


2012. / 2013.

3

Gdje i kako pisati i spremiti stilove?
 Postoje tri osnovne mogućnosti:
1. U zasebnu datoteku s nastavkom *.css
2. U zaglavlje dokumenta
3. Na mjestu u HTML dokumentu gdje se stil i
primjenjuje


2012. / 2013.

4

Spremanje stilova u zasebnu CSS datoteku
 Stilove zapišemo u zasebnu datoteku s nastavkom css
 U HTML datoteci na koju želimo da se stilovi odnose
treba u zaglavlje dodati red npr:
<link href="stilovi.css" rel="stylesheet" type="text/css">
 Ovakav način je najbolji jer su stilovi u zasebnoj
datoteci kojom možemo na isti način oblikovati
mnoštvo stranica.
Pri tome se css datoteka u preglednik učitava samo
prvi put, a svaki slijedeći iz privremene memorije
preglednika pa to i ubrzava preuzimanje i prikazivanje
stranice

2012. / 2013.

5

Spremanje stilova u zaglavlje HTML datoteke
 Lošije rješenje, ali ipak prihvatljivo je spremanje
stilova u zaglavlju dokumenta unutar oznaka
style:
…<head>
<title>Dokument s unutarnjim cssom </title>
<style type="text/css">

</style>
</head>…


2012. / 2013.

6

Inline CSS
 Stil se zadaje na mjestu u HTML-u (unutar
oznake body) gdje je i primijenjen
 Ovo je najlošiji način jer znači da nismo odvojili
sadržaj od oblikovanja – treba izbjegavati
 Primjer:
<p style="color: red; margin-left: 20px">
Ovo je taj odlomak
</p>


2012. / 2013.

7

Sintaksa CSS-a
 U osnovi, sintaksa CSSa sastoji se od tri
osnovna elementa:
» selektor (u nedostatku ili nepoznavanju boljeg
hrvatskog termina) – pomoću njega odabiremo
element stranice kojeg ćemo oblikovati
» svojstvo - neko od svojstava tog elemenata koje se
može mijenjati npr. boja pozadine
» vrijednost – nova vrijednost koju zadajemo za
odabrano svojstvo

 Općenito stil je zadan na slijedeći način:
selektor {svojstvo1: vrijednost1; svojstvo2: vrijednost2; ...
svojstvoN: vrijednostN;}

2012. / 2013.

8

Sintaksa CSS-a, primjer 1:
 body { background-color: red; }
» U primjeru je selektor body – to znači da tim stilom oblikujemo
tijelo dokumenta
» background-color je je jedno od svojstava koje je moguće zadati
za body, pomoću njega zadajemo boju pozadine
» red je vrijednost koju zadajemo za pozadinu
» Kao rezultat imat ćemo stranicu kojoj je cijela pozadina crvena


2012. / 2013.

9

Sintaksa CSS-a, primjer 2:
 Ako se vrijednost zadaje s više riječi, potrebno ju
je staviti u navodnike kao u slijedećem primjeru
kojim bismo za font u svim odlomcima na
stranici zadali "sans serif":
p {font-family: "sans serif"}


2012. / 2013.

10

Načini zadavanja stilova
… obzirom na selektore


2012. / 2013.

11

1. Redefiniranje HTML oznake
 Selektor se piše tako da odgovara HTML oznaci
koju želimo oblikovati tim stilom
 Npr. Stil
h3 {
font-size: 120%;
color: #069;
}
oblikovat će izgled svih naslova veličine h3 u
cijelom dokumentu


2012. / 2013.

12

1. Redefiniranje HTML oznake
 Preporuča se koristiti redefiniranje HTML oznake gdje
god je to moguće, a ostale vrste selektora samo kad
oblikovanje nije moguće riješiti na ovaj način
 Primjer: obično je jedan od prvih stilova koje pišemo
redefiniranje body oznake:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.3em;
color: #333;
background-color: #FFF;
margin: 0px;
padding: 0px;
}

2012. / 2013.

13

2. Klase
 Klasama se služimo kad ne želimo oblikovati sve
elemente neke vrste, već samo neke od njih
 HTML oznaci u dokumentu potrebno je dodati
odgovarajući atribut class=“imeklase”
Ime klase zadajemo sami po svojoj volji
 Selektor možemo pisati na dva načina:
» Način 1: p.crveni – kombiniramo ime oznake i klasu.
Stil se odnosi na sve odlomke (p) na koje je primijenjena
klasa crveni (koji imaju atribut class=“crveni”)
» Način 2: .crveni – izostavljamo ime oznake. Stil se odnosi
na sve elemente u dokumentu na koje je primijenjena klasa
crveni

2012. / 2013.

14

2. Klase - primjer
 CSS – npr. u zasebnoj datoteci:
.crveni {color: #FF0000;}
.plavi {color: #0000FF;}
 HTML unutar body oznake HTML dokumenta:
<p class=“crveni”>Ovo je crveni odlomak,</p>
<p class=“plavi”>a ovo je plavi odlomak</p>


2012. / 2013.

15

3. ID selektori
 Nekim oznakama u HTML dokumentu možemo
dodati atribut id.
 To tipično radimo zbog potrebe rada s
JavaScriptom ili zbog oblikovanja.
 Svaki id u HTML dokumentu mora biti jedinstven
– ne smiju postojati dva elementa stranice s
istim id-om
 Ako radimo CSS oblikovanje id selektorom,
oblikujemo jedan jedini element – onaj koji ima
odgovarajuću id oznaku

2012. / 2013.

16

3. ID selektori - primjer
 CSS – npr. u zasebnoj datoteci:
#desnistupac { width: 33%; float: right; }
 HTML unutar body oznake HTML dokumenta:
<div id=“desnistupac”>
… sadržaj desnog stupca
</div>


2012. / 2013.

17

Pseudoklase
 Pseudoklase nemaju gotovo ništa zajedničko s
klasama. Imaju definiranu sintaksu kojom možemo
oblikovati pojedina stanja nekih HTML elemenata.
 Najviše se koriste za oblikovanje poveznica gdje
postoje 4 pseudoklase:
»
»
»
»

a:link - zadaje izgled poveznice u normalnom stanju
a:visited - izgled posjećenih poveznica
a:hover - poveznica kad se iznad nje nađe pokazivač
a:active - aktivirana (kliknuta) poveznica

 Nije uvijek potrebno zadati sva stanja, ali se stanja
trebaju zadavati upravo ovim redoslijedom

2012. / 2013.

18

Pseudoklase - primjer
 Slijedećim stilovima određen je izgled poveznica
u desnom izborniku tako da imaju rollover efekt:
div.menuright a {
font-weight: bold;
color: #900;
text-decoration: none;
}
div.menuright a:hover {
color: #F60;
text-decoration: underline;
}

2012. / 2013.

19

4. Složeni selektori
 U složenijim dokumentima često se služimo
složenim selektorima kako bismo oblikovali neke
određene elemente stranice
 U složenim selektorima možemo kombinirati i
redefiniranje oznaka i klase i ID selektore i
pseudoklase
 Stil se odnosi samo na elemente koji odgovaraju
desnom selektoru ako se nalaze unutar
elemenata koji odgovaraju lijevom selektoru…

2012. / 2013.

20

4. Složeni selektori - primjeri
 #desni h3 { … }
Stil se odnosi samo na h3 naslove koji se nalaze
unutar elementa s id-om desni
 #zaglavlje .desno a:hover { … }
Stil se odnosi samo na poveznice kad se iznad
njih nađe pokazivač koje su unutar elemenata
sa klasom desno, a koji se nalaze unutar
elementa sa id-om zaglavlje


2012. / 2013.

21

Grupiranje selektora
 Ako imamo više elemenata na koje želimo
primijeniti isto oblikovanje, tada možemo
grupirati selektore služeći se zarezima
 Primjer:
.istaknuto, img.okvir{
border: 1px solid #036;
}
 U primjeru ista svojstva (plavi obrub) zadajemo i
za klasu istaknuto i za slike sa klasom okvir

2012. / 2013.

22

Kratko ponavljanje
 CSS stilovi služe za oblikovanje elemenata web
stranica
 Stilove je najbolje spremiti u zasebnu datoteku ili
u zaglavlje dokumenta, a izbjegavamo inline
CSS
 Stilovi se pišu u obliku:
selektor {
svojstvo1: vrijednost1;
...
svojstvoN: vrijednostN;
}

2012. / 2013.

23

Kratko ponavljanje
 Obzirom na selektore imamo nekoliko načina
zadavanja stilova:
»
»
»
»
»

Redefiniranje HTML oznake
Klase
ID selektori
Pseudoklase
Složeni selektori

 Stilove možemo i grupirati služeći se zarezima


2012. / 2013.

24

CSS - osnove

More Related Content

What's hot

Viewers also liked

Similar to CSS - osnove

CSS - osnove