Web Tech · CSS

Uvod

CSS je jednostavan mehanizam za dodavanje stilova: fontova, boja razmaka između paragrafa, uređivanje tablica. Svojim dolaskom CSS je izazvao pravu revoluciju na internetu i to zahvaljujući nizu prednosti koje ima pred tabličnim layoutom (korištenje tablica za formiranje stranice). Korištenjem CSS-a postalo je moguće odvojiti prezentaciju podataka i dizajn od same strukture podataka. HTML kôd postaje pregledniji i manji što znači da ga je puno lakše kontrolirati, a također je moguće jednostavnom primjenom parametara promijeniti izgled stranice.

Sintaksa

Stilski obrasci sačinjeni su od stilskih pravila. Svako pravilo ima dva dijela:

- Selektor: Određuje element na koji se stilsko pravilo odnosi

- Deklaracija: Određuje kako izgleda sadržaj opisan CSS-om

Koristimo se sa setom interpunkcijskih i posebnih znakova kako bi definirali stilsko pravilo.

Sintaksa za stilska pravila uvijek slijedi sljedeći uzorak:

 selektor {deklaracija;}

Deklaracija se dijeli na dvije stavke:

1. Properties (aspekti kako da računalo prikaže tekst i grafiku).

2. Values (podaci koji određuju kao želimo da tekst i slike izgledaju na našoj stranici).

Properties se od vrijednosti (value) u deklaraciji odvaja dvotočkom, a svaka deklaracija završava s točkom-zarez:

selector {property: value;}

Selektori

CSS za selektiranje elemenata najčešće koristi sam naziv elementa npr.

h1{color: blue;font-size: 16px;}

Osim toga omogućuje definiranje vlastitih selektora. Dok se ID selektor koristi za definiranje stila samo jednog HTML elementa na web stranici, class selektor (klasa) se najčešće odnosi na više elemenata.

ID selektor se unutar CSS datoteke definira oznakom ljestve #, a sintaksa pisanja CSS deklaracija ostaje ista.


#naslov{color: blue;font-size: 16px;}

Ovaj stil će se odnositi na HTML element koji će u HTML datoteci imati atribut ID="naslov". Primjer:

<!DOCTYPE html>
<html>
<body>
<h1 id="naslov">Naslov 1</h1>
</body>
</html>

Class selektor se definira točkom i u CSS datoteci ga deklariramo ovako:


.naslov{color: blue;font-size: 16px;}

Ovaj stil će se odnositi na sve HTML elemente sa atributom class koji također ima vrijednost "naslov". Primjer:

<!DOCTYPE html>
<html>
<body>
<h1 class="naslov">Naslov 2</h1>
</body>
</html>

Način korištenja

Za jedan selektor možemo napraviti nekoliko stilskih pravila, svaki s jednom deklaracijom:


h1{color: blue;}
h1{font-family:Arial;}
h1{font-size:36px;}

No, tako velika kolekcija stilsih pravila postaje teška za upotrebu. CSS vam dozvoljava da kombinirate nekoliko deklaracija u jedno stillsko pravilo koje utječe na karakteristike prikaza pojedinog selektora:


h1{
color: blue;
font-family:Arial;
font-size:36px;
}

Sve deklaracije za h1 selektor su unutar istih vitičastih zagrada ({}) i odvojene su točkazarezom (;). Možemo staviti neograničen broj deklaracija u stilsko pravilo, samo trebamo svaku deklaraciju završiti s točka-zarezom.

Možemo napraviti da se isti set deklaracija odnosi na cijelu skupinu selektora. Selektore je potrebno odvojiti zarezima. Sljedeće stilsko pravilo ostavlja deklaracije za boju teksta, font i veličinu fonta:


h1,h2,h3{
color: blue;
font-family:Arial;
font-size:36px;
}

Povezivanje

CSS stilove je moguće povezati sa HTML-om na tri načina:

Linijski način

Linijski stil se koristi ukoliko se za jedan element želi primjeniti posebno svojstvo koje neće utjecati na druge elemente.
Koristi se putem atributa style koji može sadržavati bilo koje CSS svojstvo.

<p style="color:green;font-size:20px;">Ovo je paragraf</p>

Unutarnji način

Koristi se ukoliko jedan cijeli dokument ima drugačiji stil od drugih dokumenata u istom direktoriju. Definira se unutar zaglavlja <head> , koristeći <style> oznaku.

<head>
<style type="text/css">
body {background-color:red;}
p {color:blue;}
</style>
</head>

Vanjski način

Najčešći način korištenja CSS-a, budući da se an taj način uštedi najviše vremena. Sav stil se odredi unutar vanjske CSS datoteke, te se ta ista poziva unutar zaglavlja putem <link> oznake.

<head>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>

Nasljeđivanje

Neka svojstva u CSS-u element može naslijedit od drugog elementa ukoliko se nalazi unutar njega. Često su to svojstva vezana za oblikovanje teksta npr. font family, text-alignment i slično ali i mnogi drugi.

Primjer


<div style=”font-family:sans-serif; border:1px solid red; padding:10px;”>
    Ovaj tekst će imati sans-serif font.
    <p>Ovaj tekst će također imati sans-serif font, jer se font naslijeđuje automatski,ali obrub se neće naslijediti.
    </p>
     </div>

Ali na sljedećem primjeru ćete primjetiti da možete „natjerati“ element da naslijedi stil od drugog elementa

Primjer


     <div style=”font-family:serif; border:1px solid red; padding:10px;”>
 Ovaj tekst će imati serif font.
  <p style=”border:inherit;”>
Sada će paragraf također imati crveni obrub. Za to je zaslužna vrijednost „inherit“, što znači naslijedi.</p>
    </div>

Boja teksta

Boja fonta i boja linkova se određuje svojstvom „color“. A kao unos boje se koriste 3 načina:

- Heksadecimalni zapis - poput "#ff0000"

- RGB vrijednost - poput "rgb(255,0,0)"

- Naziv boje - poput "red"

Predefinirana vrijednost je crna, a unutar body selektora se određuje predefinirana vrijednost za taj dokument.

Veličina teksta

Za promjenu veličine teksta koristi se svojstvo font-size. Svojstvo se može postaviti na nekoliko načina od kojih je najpopularniji unošenje apsolutne vrijednosti u pikselima (px).

Osim toga , postoje još i "em" , postotci te izrazi poput small, large, medium itd.


p{font-size: 12px;}
p{font-size: x-small;}
p{font-size: 200%;}
p{font-size: 2em;}

Debljina slova

Stilska deklaracija koja koristi font-weight svojstvo, a čija vrijednost može biti jedna od sljedećih:

- bold: renderira tekst u srednjoj bold debljini,

- bolder: renderira tekst deblji od normalnog bolda,

- lighter: renderira tekst tanji od normalnog bolda,

- normal: miče bilo kakvo bold formatiranje,

- cjelobrojna vrijednosti od 100 - 900 (100 je najtanji a 900 najdeblji).

Tip fonta

Tip fonta je također dio koji se može uređivati unutar svojstava fonta. U te tipove spadaju razne grupe fontova ili font-family. Postoje dvije osnovne verzije a to su serif i sans-serif. Slova sa serifima koriste ukrase na rubovima slova te nisu toliko čitljiva kao što su slova bez serifa.

Pozadinska boja elemenata

Pozadinske boje elemenata se postavljanu na vrlo sličan način kao što se postavlja boja slova. Boja se može postaviti koristeći nekoliko načina:

- Heksadecimalni zapis - poput "#ff0000"

- RGB vrijednost - poput "rgb(255,0,0)"

- Naziv boje - poput "red"

Širina i visina

Širinu i visinu elementa određujemo preko svojstva width i height. Elementi mogu poprimiti vrijednost u pixelima ili postocima.

div{width: 400px;}
div{width: 40%;}


div{height: 200px;}
div{height: 20%;}

Obrub

Svakom HTML elementu se može postaviti obrub svojstvom border. Vrijednost svojstva sastoji se od nekoliko dijelova:

debljine obruba (najčešće u pikselima),
vrsta obruba (puna linija, točkasta linija, itd.) te
boja obruba.

div{border: 3px solid black;}

Postoji i drugi način deklaracije obruba a to je da se svaki od tih elemenata pojjedinačno označe.

Dakle, border-width se unosi u postotcima ili pikselima.

Border-style može biti jedan od sljedećih:

Dotted (istočkan obrub)
Dashed(isprekidan obrub)
Solid (puni obrub)
Double (dvostruki obrub)

Boja linije određuje se sa svojstvom border-color.

Osim obruba koji utječe na element sa svih strana postoje i pojedinačni obrubi:

border-top (gornji obrub),
border-right (desni obrub),
border-bottom (donji obrub),
border-left(lijevi obrub),

Margina

Razmak između dva HTML elementa naziva se margina (margin). Kao i kod obruba margine se mogu postaviti na svakoj stranici posebno. Također moguće je staviti marginu za sve stranice samo sa jednom vrijednosti.

div{margin: 3px;}

Postoji i pojedinačni način unosa margina a to je :

margin-top (gornja margina),
margin-right (desna margina),
margin-bottom (donja margina),
margin-left(lijeva margina),

Također je moguće unijeti sve margine unutar jedne linije:

div{margin: 15px 10px 10px 15px;}

Prvi broj se odnosi na gornju marginu, drugi na desnu, treći na donju te zadnji na lijevu marginu. Dakle vrijednosti se dodjeljuju u smjeru kretanja kazaljki na satu

Padding

Padding je svojstvo koje određuje udaljenost sadržaja HTML elemenata od obruba. Način na koji se deklarira je isti kao i kod margina tj. može se reći da je jedina razlika između padding-a i margine ta što se margina odnosi na udaljenost od obruba do drugog elementa a padding utječe na unutarnju udaljenost , točnije udaljenost od obruba do elementa na koji se primjenjuje.

Koristeći svojstvo position moguće je pozicionirati pojedini element na stranicu ovisno o njegovoj vrijednosti. Uz ovo svojstvo također se koriste svojstva left, right, top i bottom pomoću kojih se pože odrediti pozicija nekog elementa u odnosu na navedene strane. Svojstvo position može imati sljedeće vrijednosti:

static,
absolute,
relative te
fixed.

Statično

Vrijednost static je predefinirana vrijednost svojstva position, na taj način se elementi dodaju jedan za drugim na stranicu. Svojstva left, right, top i bottom nemaju utjecaja prilikom korištenja ove vrijednosti.

Apsolutno

Korištenjem vrijednosti absolute elementi se pozicioniraju apsolutno u odnosu na druge elemente tj. na prvi element koji ima poziciju različito od static ukoliko takav element ne postoji onda se element pozicionira u odnosu na <html> oznaku.

Relativno

Korištenjem svojstva relative elementi se pozicioniraju relativno na normalnu poziciju.

Fiskirano

Kod korištenja svojstva fixed potrebno je znati se element postavlja na fiksnu poziciju te će taj element uvijek biti na točno toj poziciji. Prilikom pomicanja kliznih traka (scrollanja) element uvijek ostaje na istoj poziciji.

Float i Clear

Svojstvo float omogućuje kako bi se ciljani element postavio ili uz lijevi ili uz desni rub ekrana. Ukoliko na više elemenata postavimo svojstvo float to neće imati utjecaja na konačni izgled. Ako se na lijevi stupac postavi svojstvo float na vrijednost left rezultat će biti kao na slici.

Kako bi se postavio sadržaj s desne strane potrebno je postaviti i širinu elementa unutar kojeg se nalazi sadržaj. Širina elementa se može izračunati koristeći sljedeću formulu: 964-200-4-20 =740 od čega je 200 piksela širina lijevog stupca 4 je obrub po 2 piksela sa svake strane i 25 je padding, 15 piksela lijeve i 10 piksela sa desne strane.

Korištenjem fiksnih širina oba stupca postiže se postavljanje obaju stupaca kako je planirano no zadnji dio odnosno footer se nalazi ispod sadržajnog stupca što se želi izbjeći. Kako bi se to izbjeglo potrebno je koristiti svojstvo clear koje ima tri vrijednosti left, right i both. Postavljanjem svojstva clear i vrijednosti both na footer postiže se konačni izgled stranice.

Z-indeks

Uobičajeno HTML stranice su dvodimenzionalne, no ponekad je potrebno elemente složiti i u tri dimenzije, svojstvo z-index to omogućava. Z-index se može primjenjivati samo kada se primjenjuje svojstvo position sa vrijednostima absolute, relative i fixed. Vrijednosti z-indexa prikazuju koliko je element „blizu“ korisniku tj. koliko je udaljen.

Naime vrijednosti mogu biti ili negativne što znači da je element u pozadini drugih elemenata ili mogu biti pozitivne vrijednosti što znači da je element iznad svih. Predefinirana vrijednost je auto; Ukoliko se koristi nekoliko elemenata koji imaju vrijednost auto elementi će se slagati jedan na drugi.

Display

Svojstvo display određuje na koji će se način HTML element prikazivati. Najčešće vrijednosti ovog svojstva su:

none,
block,
inline.

None

Koristeći none vrijednost element se ne prikazuje na stranici.

Block

Koristeći block vrijednost element se prikazuje kako je inače i predviđeno tj. širina se postavlja na širinu elementa koji je iznad njega. Elementi div, p, ul, ol, li i od h1 do h6 imaju predefinirane vrijednosti block. Ponašaju je kao da je postavljen prijelom retka prije i poslije elementa.

Inline

Koristeći inline vrijednost element zauzima mjesta samo onoliko koliko mu je potrebno tj. koliko je velik sadržaj elementa. Obično se nalaze unutar nekog „block“ elementa. Elementi span, a, img, em, strong imaju predefinirane vrijednosti inline. Ne rade prijelom retka prije i poslije elementa.

Linkovi

Neke od pseudoklasa koje se mogu koristiti u vezama su:

a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}

Koristeći pseudoklase moguće je u potpunosti promijeniti izgled veza ovisno o njihovim stanjima.

:link – se koristi za prikazivanje veza koje još nisu posjećene tj. korisnik nije nikad koristio tu vezu.
:visited – se koristi za prikazivanje veza koje je korisnik posjetio.
:hover – se koristi za prikazivanje veza u trenutku kada se pokazivačem miša prolazi preko veze.
:active – se koristi za prikazivanje veza koje su aktivne veze.

Liste

Svim listama je moguće dodati 4 svojstva:

list-style-postavlja sva svojstva liste u jedan izraz
list-style-image- određuje sliku kao oznaku elementa liste
list-style-position- određuje da li se elementi u listi nalaze iznutra ili izvana toka sadržaja
list-style-type- određuje tip oznaka elementa u listi

Budući da postoje uređene i neuređene liste moguće im je dodavati različite vrijendosti.

Span & Div

Prilikom uređivanja izgleda HTML dokumenata potrebno je grupirati više elemenata u logičke cjeline kao što su na primjer zaglavlje gdje se nalazi logo i navigacija. Takvo grupiranje moguće je napraviti koristeći <div> element. Koristeći taj element moguće je postaviti ista svojstva za niz elemenata koji se nalaze unutar pojedine cjeline.

Element <span> se također može koristiti za odvajanje logičkih cjelina ali za razliku od div elementa koji stvara blokove, span je linijski element.

CSS

Osnovno