css - osnove

CSS – Cascading Style Sheets

Oblikovanje web stranica

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

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

2013. / 2014.


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.


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.


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.

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.


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.


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.


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.


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.


Načini zadavanja stilova

… obzirom na selektore

2012. / 2013.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.

css - osnove

Education