Instrukcije IWA

https://www.facebook.com/InstrukcijeIwa

SVEUILITE U ZAGREBU
FAKULTET ORGANIZACIJE I INFORMATIKE
VARADIN

CSS OSNOVE I PRIMJERI

Instrukcije IWA
https://www.facebook.com/InstrukcijeIwa

Sadraj
1.

TO JE TO CSS? .............................................................................................................................................. 1

2.

CSS SINTAKSA ................................................................................................................................................ 1

CSS KOMENTARI ...................................................................................................................................................... 1

Implicitno ................................................................................................................................ 1
CSS ID I KLASA ........................................................................................................................................................ 2

Jednoznano (ID) .................................................................................................................... 2

Eksplicitno ............................................................................................................................... 2
3.

TRI NAINA ZA UMETANJE CSS-A ........................................................................................................... 3

EKSTERNA CSS DATOTEKA....................................................................................................................................... 3
INTERNI CSS ............................................................................................................................................................. 3
CSS U LINIJI HTML ELEMENTA ................................................................................................................................ 3

4.

LISTA CSS SVOJSTAVA ................................................................................................................................ 4

1. to je to CSS?
1.
2.
3.
4.

CSS je skraenica za Cascading Style Sheets

CSS-om se definira kako e se HTML elementi prikazati na web stranici
CSS je dodan HTML-u 4.0 kako bi se rijeio problem dizajna
CSS se koristi interno (unutar style tagova) ili eksterno (CSS datoteka)

CSS-om definiramo kako e se HTML elementi prikazati na web stranici (krajnjem korisniku).
Stil (CSS) se obino sprema u eksterne CSS datoteke (tipino, datoteke sa .css kao ekstenzijom).
Eksterne CSS datoteke omoguuju vam da promijenite izgled svih web stranica (koje koriste istu
CSS datoteku), ureujui samo jednu datoteku.

2. CSS Sintaksa
CSS se sastoji od dva glavna dijela - CSS selektora, te deklaracija. Svaka se deklaracija sastoji
od svojstva, te vrijednosti svojstva.
Svojstvo je stilski atribut koji elite promijeniti. Svako svojstvo mora sadravati vrijednost.
Svaka deklaracija zavrava sa tokom-zarezom. Preporuljivo je da svaku deklaraciju stavljate u
zaseban redak, kako bi va CSS bio pregledniji. Primjer:
selektor
{
svojstvo1:vrijednost;
svojstvo2:vrijednost;
svojstvo3:vrijednost;
}

CSS Komentari
Kao i u veini programskih jezika ili metoda i CSS podrava komentare. Uglavnom se komentari
koriste za objanjavanje koda, kako bi se kasnije lake snali. Vana napomena je da web
preglednici ne interpretiraju komentare. CSS komentar poinje sa "/*" (bez navodnika), te
zavrava sa "*/". Primjer
Implicitno
Definira se selektor koji se odnosi na neki od HTML tagova (npr. h1, br, hr, p..). Kada se
definira selektor na taj nain onda se sva definirana svojstva odnose na sve elemente koji imaju
taj tag.
h1
{
margin-left:20px; /* Pomie h1 20 piksela od vrha */
}

CSS ID i Klasa
CSS vam omoguuje da odredite svoje selektore - ID, te klasu (ID, class). ID selektor se koristi
za specificiranje stila za jedan, unikatan element. ID selektor koristi HTML-ov id atribut, te je
definiran sa "#" (bez navodnika). Primjer ispod e biti primijenjen na HTML elementu iji je id
atribut postavljen na "dijalog".
Jednoznano (ID)
#dijalog
{
color:#DD0000; /* Postavlja boju teksta na tamno crvenu */
padding-left:15px; /* Pomie sadraj unutar elementa za 15 piksela u lijevu stranu */
}
HTML
<p id= dijalog >ovo je paragraf S CSS</p>
Selektor klase (class selector) se koristi za specificiranje stila za grupu elemenata. Suprotno od
ID selektora, class selektor se esto koristi na nekoliko elemenata. Ova metoda vam omoguuje
definiranje stila grupi elemenata sa istim class atributom. Class selektor koristi HTML-ov class
atribut, te je definiran sa "." (bez navodnika). Primjer ispod e biti primijenjen na grupu HTML
elemenata kojima je class atribut postavljen na "centriraj".
Eksplicitno
.centriraj
{
text-align:center; /* Poreuje tekst iz sredine u lijevu i desnu stranu */
}
HTML
<p class= centriraj >ovo je paragraf S CSS</p>
Takoer moete specificirati da se klasa odnosi na samo odreene HTML elemente. Primjer
ispod e biti primijenjen samo na p (paragraf) elemente kojima je class atribut definiran kao
"centriraj".
p.centriraj
{
text-align:center; /* Poreuje tekst iz sredine u lijevu i desnu stranu */
}

3. Tri naina za umetanje CSS-a

Postoje tri naina za umetanje CSS-a, a to su:
1. Eksterna CSS datoteka
2. Interni CSS
3. Postaviti CSS u istu liniju kao i HTML element

Eksterna CSS datoteka

Eksterna CSS datoteka je odlian nain za primjenu stila na vie razliitih web stranica. Sa
eksternom CSS datotekom, moete promijeniti izgled web stranice, ureujui samo jednu
datoteku. Svaka web stranica mora ostvariti "vezu" do eksterne CSS datoteke, koristei <link>
tag unutar <head> tag-a. Primjer:
<head>
<link rel="stylesheet" type="text/css" href="moj_stil.css" />
</head>
Eksterna CSS datoteka se moe pisati/ureivati u bilo kojem tekstualnom ureditelju (text-editor).
Datoteka ne bi smjela koristiti nikakve HTML tagove, te bi trebala biti spremljena sa .css
ekstenzijom. Primjer CSS datoteke:
hr { color: sienna; }
p { margin-left:20px; }
body { background-color:#44444AA; }

Interni CSS
Interni CSS bi se trebao koristiti u situaciji kada zasebna stranica zahtjeva zaseban stil. Interni
CSS se definira unutar <head> i <style> taga. Primjer:
<head>
<style>
hr { color: sienna; }
p { margin-left:20px; }
body { background-color:#4444AA; }
</style>
</head>

CSS u liniji HTML elementa

Ovakav nain ureivanja CSS-a bi trebalo izbjegavati, ili barem ne koristiti u prevelikoj dozi.
Stil se u ovoj situaciji pie u liniji elementa, tonije style atributu. Primjer:
<p style="margin-left:25px;">Ovaj je paragraf pomaknut u lijevo.</p>

4. Lista CSS svojstava

CSS osnovna stranica:
http://www.w3schools.com/css/
Pozicioniranje
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_styles
The CSS Box Model

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;