CSS svojstva

Podsjetimo se kako radi CSS. Svaki se stil sastoji od selektora i njima pridruženih parova svojstva i vrijednosti:

Specifikacijom CSS-a definira se niz svojstava i njihovih vrijednosti. Svojstva se po svom djelovanju mogu grupirati u cjeline. U ovom ćemo tečaju detaljnije razmotriti sljedeće kategorije:

• svojstva fonta
• svojstva teksta
• svojstva boja i pozadina
• svojstva CSS kutije
• svojstva popisa
• pozicioniranje (smještanje).

Osim navedenih kategorija, u lekciji Ostala svojstva predstavit ćemo vam još neka korisna svojstva CSS-a.

Svojstva fonta obuhvaćaju oblikovanje pojedinih znakova u tekstu. To su, vjerojatno, najčešće upotrebljavana svojstva, jer se bez obzira na dizajn i namjenu stranice tekst zasigurno nalazi na većini od njih.

font-family

Ovo svojstvo sugerira pregledniku kojim fontom će se prikazivati tekst u dokumentu. Problem nastaje ako korisnik na računalu nema instaliran potreban font. CSS definira pet generičkih obitelji fontova – serif, sans-serif, cursive, monospace i fantasy iz kojih preglednik bira font koji će upotrijebiti. Pri definiranju možemo koristiti neke od njih:

ili, što je preporučljivo, možemo koristiti stvarna imena fontova:

U ovom će slučaju preglednik prvo pokušati prikazati tekst fontom Courier New, a ako njega nema, onda fontom Courier i tek onda, ako prva dva fonta nisu instalirana, prikazati će tekst fontom iz obitelji monospace.

• Preporučljivo je upotrebljavati samo fontove koje možemo očekivati na većini računala, odnosno operacijskih sustava. To su tzv. web safe fontovi.
• Pozivamo vas da pretraživanjem weba ustanovite možete li očekivati da će svi posjetitelji vaših stranica imati na računalu font koji ste vi zamislili na stranicama ili ne, tj. je li font koji namjeravate upotrebljavati web safe. 

font-weight

Svojstvo koje definira debljinu znakova. Može poprimiti sljedeće vrijednosti: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Vrijednost bolder daje uočljivo deblje znakove od debljine postavljene za taj element (ako je znakove moguće još podebljati), a vrijednost lighter tanje od inače postavljene vrijednosti.

Najčešće se koriste vrijednosti normal i bold. Bolder, lighter i brojčane definicije debljine fonta nisu sigurne za korištenje jer ih preglednici različito prikazuju i ovise o fontovima instaliranim na računalu posjetitelja – najčešće do 500 za normalne, a 600, 700, 800 i 900 za deblje fontove.

font-size

Definira veličinu fonta. Može poprimiti bilo koju definiranu vrijednost veličine (12px, 10pt, 2em...) ili neku od ključnih riječi (xx-small, x-small, small, medium, large, x-large, xx-large). Budući da se svojstvo nasljeđuje, možemo pisati sljedeće:

U ovom primjeru paragraf nasljeđuje veličinu definiranu selektorom body, pa bi tekst u paragrafu bio prikazan fontom veličine 15pt.

• Stvarna veličina znakova u pregledniku ovisi i o veličini prikaza koju je izabrao korisnik (tj. o zumiranju, jednostavno dostupno kombinacijom ctrl+mišji kotačić).

font-style

Sugerira pregledniku da prikaže tekst kao normal ili kao italic. Postoji još i vrijednost oblique, ali nju preglednici prikazuju isto kao italic.

font-variant

Može poprimiti vrijednosti normal ili small-caps. Korištenjem small-caps dobije se efekt teksta pisanog velikim slovima, ali fontovima različitih veličina. Primjerice, u sljedećoj su rečenici prva slova svih riječi pisana velikim slovima:

Skraćeni selektor – font

Sva se ova svojstva mogu navesti preko skraćenog svojstva font na sljedeći način:

Ova svojstva definiraju razmještaj teksta u dokumentu te još neke detalje koji su nadgradnja izbora izgleda pojedinih znakova, opisanih u prethodnoj lekciji.

letter-spacing

Ovo svojstvo definira razmak između pojedinih znakova u tekstu.

line-height

Definira razmak između dva reda teksta u istom odlomku (eng. baseline).

• Pri definiranju visine redova teksta treba paziti na veličinu znakova da se redovi ne bi preklapali.
• 
  

text-decoration

Opisuje dekoracije koje se dodaju tekstu. Može poprimiti vrijednosti: none, underline, overline, line-through i blink. Boje dekoracija pojavljuju se u boji teksta.

Vrlo često se koristi kod definiranja efekata na linkovima, kako ste to mogli vidjeti u lekciji Pseudoklase.

text-transform

Pretvara slova iz teksta u velika ili mala, ovisno o izabranoj vrijednosti svojstva. Moguće vrijednosti su capitalize, uppercase, lowercase. Capitalize postavlja početno slovo u svakoj riječi u veliko slovo. Uppercase postavlja sva slova u velika, a lowercase u mala, bez obzira na izvorno slovo u HTML kôdu.

text-align

Vodoravno poravnanje teksta. Može se primijeniti samo na blok elemente, a moguće vrijednosti su: left, right, center i justify.

text-indent

Prvi redak lijevo ili obostrano poravnatog paragrafa je često uvučen za određenu vrijednost.

Pravi izbor boja i pozadine je nešto što će, zasigurno, svako web sjedište učiniti atraktivnijim. Dok je izbor navedenih elemenata pri izradi web sjedišta prepušten vašem osobnom odabiru, ovdje ćemo vam pokazati kako postupak izbora učiniti lakšim. Naime, postavljanje ovih parametara u CSS datoteku daje vam mogućnost da s jednog mjesta, gotovo trenutno, promijenite izgled čitavog web sjedišta.

color

Postavlja boju teksta u zadanom elementu.

background-color

Definira boju pozadine za zadani element. Boja pozadine se proteže do granice elementa – uključujući odmak.

Atribut background-color kod oznake <hr> vidimo kao boju elementa.

background-image

Postavlja pozadinsku sliku u element. Ukoliko se primjenjuje s niže navedenim svojstvima, može se definirati fiksni položaj pozadinske slike ili ponavljanje po jednom od pravila.

background-repeat

Ponavljanje pozadinske slike. Može poprimiti sljedeće vrijednosti: repeat – ponavlja sliku; no-repeat – ne ponavlja sliku; repeat-x – ponavlja sliku samo po vodoravnoj osi; repeat-y – ponavlja sliku samo po uspravnoj osi.

background-attachment

Ovo svojstvo definira pomiče li se pozadinska slika s elementom ili ne. Može poprimiti vrijednost scroll – pomiče se, ili fixed – ne pomiče se. Primjerice, ukoliko želimo u tijelu dokumenta postaviti fiksnu pozadinu, možemo to napraviti sljedećim kôdom:

Efekt na stranici sličan je efektu u sljedećem okviru:

background-position

Pozadinska slika predefinirano se postavlja u gornji lijevi kut dokumenta. Background-position je svojstvo koje omogućava postavljanje početnog položaja od kojeg će se postaviti slika. U pravilu se postavljaju dvije vrijednosti – jedna za vodoravni, a druga za okomiti položaj. Vrijednosti su right, center, left za vodoravni položaj, zatim top, center, bottom za vertikalni ili postotci, odnosno udaljenost od gornjeg lijevog kuta.

Efekt na stranici sličan je efektu u sljedećem okviru:

Skraćeni selektor – background

Skraćeno svojstvo. Mogu se navesti sva navedena svojstva bez zadanog redoslijeda navođenja:

U lekciji CSS model kutije vidjeli smo kako preglednik slaže elemente CSS-a na stranicu koristeći model kutije.

CSS model kutije.

Svojstva kutije možemo podijeliti u četiri cjeline:

• margine (rubnice)
• odmaci
• granice
• dimenzije.

U sljedećim lekcijama upoznat ćemo svaku od njih.

Margine (rubnice) određuju udaljenost CSS kutije, odnosno elementa, od ostalih elemenata na stranici. Ova svojstva su duljine koje mogu biti izražene u bilo kojoj dopuštenoj mjernoj jedinici. Margine se mogu definirati ili sa sve četiri strane pojedinačno, ili skraćenim svojstvom.

margin-top

Gornja margina – udaljenost od gornjeg elementa.

margin-right

Desna margina – udaljenost od desnog elementa.

margin-bottom

Donja margina – udaljenost od donjeg elementa.

margin-left

Lijeva margina – udaljenost od lijevog elementa.

Ukoliko, primjerice, imamo element div, koji želimo odmaknuti od rubova kutije u kojoj se nalazi, možemo to napraviti koristeći margine:

• Nula se piše bez oznake mjerne jedinice, na primjer: margin-right: 0;

Skraćeni selektor – margin

Četiri pojedinačne margine mogu se zamijeniti skraćenim svojstvom, koje bi se tada, za prethodni slučaj, definiralo na sljedeći način.

Redoslijed navođenja margina:
gore, desno, dolje, lijevo.

Ukoliko želimo jednaku marginu za sve strane elementa, možemo pisati:

Odmak je udaljenost od granice CSS kutije do sadržaja. Slično kao i kod margina, postoje četiri odmaka i skraćeno svojstvo. Ukoliko nije eksplicitno definirana, predefinirana vrijednost odmaka je 0.

padding-top

Odmak od gornje granice.

padding-right

Odmak od desne granice.

padding-bottom

Odmak od donje granice.

padding-left

Odmak od lijeve granice.

Razmotrimo opet element div iz prethodne lekcije, pa mu uz postojeće margine dodajmo i odmak:

Vidljivo je da tekst zbog odmaka prelazi u nov red, ali se boja pozadine, bez obzira na odmak, proteže do granice elementa.

Skraćeni selektor – padding

Kao i kod margina, i ovdje se može definirati odmak na drugi način:

Odnosno, ukoliko je odmak sa svih strana jednak:

CSS standard definira niz svojstava kojima je moguće opisati granicu elementa. Moguće ih je podijeliti u tri grupe: širina granice, boja granice i izgled granice.

Svojstva širine granice

Slično kao i kod prethodnih svojstava, i ovo se svojstvo dijeli na četiri položaja – gore, desno, dolje i lijevo.

Ili za jednaku širinu svih četiriju granica:

Svojstva boje granice

Boja granice također se može definirati zasebno za svaku od četiri granice.

Ili za istu boju svih četiriju granica:

Svojstva izgleda granice

Svojstvo izgleda granice može poprimiti sljedeće vrijednosti: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. Ponovno imamo mogućnost definicije za svaku od granica zasebno:

Ili zajedničko svojstvo za sve četiri granice:

Skraćena svojstva granice

Sva navedena svojstva možemo postaviti skraćeno za pojedinačnu granicu:

Ili jednako za sve četiri granice u jednoj definiciji:

Dimenzije CSS kutije definirane su širinom i visinom sadržaja:

CSS model kutije.

width

Definira širinu sadržaja.

height

Definira visinu sadržaja.

Širina i visina sadržaja mogu biti postavljene na bilo koji blok element, bez obzira na dimenzije koje bi taj element inače zauzeo. Širina i visina se mogu postaviti i za slike, pa u slučaju CSS ikonice imamo:

Ukoliko uz oznaku <div> možemo navesti još poneku HTML oznaku kojoj se dolaskom CSS-a znatno povećala uporaba, onda su to sigurno popisi. Mogućnost formatiranja koje je donio CSS omogućile su da se popisi, od običnog elementa za nizanje teksta, pretvore u moćan alat.

Popisi se sastoje od <ul>, odnosno <ol> oznake, koje ustvari čine blok element, te od jedne ili više <li> oznaka koje predstavljaju označavaju elemente popisa. Svaku od ovih oznaka možemo zasebno formatirati.

list-style-type

Definira tip grafičkih oznaka koji će biti prikazan ispred pojedinog elementa popisa. Može poprimiti sljedeće vrijednosti: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.

list-style-image

Ovo nam svojstvo omogućava da popisu umjesto uobičajene grafičke oznake dodamo sliku. Primjerice:

list-style-position

Definira uvlačenje elemenata popisa. Može poprimiti vrijednosti inside ili outside. Pretpostavljena vrijednost je outside.

Skraćeni selektor – list-style

Skraćeno svojstvo za istovremen prikaz svih svojstava popisa. U ovom primjeru, ukoliko je slika nedostupna, prikazuje se circle:

Jedan od najvećih nedostataka HTML-a je nemogućnost pozicioniranja (smještanja) elemenata na stranici. Precizno smještanje elemenata može se u HTML-u izvesti isključivo tablicama i prozirnim sličicama. CSS omogućava precizno smještanje elemenata korištenjem nekoliko za to predviđenih shema.

Sheme smještanja definirane su svojstvom position, koje može poprimiti sljedeće vrijednosti: static, relative, absolute i fixed, pa shodno tome možemo govoriti o sljedećim shemama:

Statičko smještanje – (vrijednost static) – predefinirana vrijednost. Ovo je uobičajeno smještanje elemenata, pri čemu svojstva smještanja, koja ćemo upoznati u sljedećoj lekciji, ne funkcioniraju.

Relativno smještanje – (vrijednost relative) – element smještamo relativno u odnosu na mjesto na kojem je trebao biti.

Apsolutno smještanje – (vrijednost absolute) – smještanje elementa u odnosu na roditeljsku oznaku – element koji ga okružuje.

Fiksno smještanje – (vrijednost fixed) – apsolutno smještanje u odnosu na prozor preglednika.

• Nemojte miješati pojmove i smisao fiksnog i apsolutnog smještanja. Fiksno smještanje definira se u odnosu na prozor preglednika, što znači da se, pri pomicanju stranice gore-dolje, fiksno smješteni element uvijek zadržava na istom mjestu.
  
  Microsoft Internet Explorer do inačice 6.0 ne podržava vrijednost fixed, a kasnije inačice (u trenutku pisanja tečaja IE7-IE9) zahtijevaju podatak o upotrijebljenom standardu (!DOCTYPE) na početku dokumenta da bi fiksno pozicionirane elemente prikazao ispravno.

Pri korištenju apsolutnog, relativnog ili fiksnog pozicioniranja (smještanja), možemo koristiti niže navedena svojstva.

left

Udaljenost od lijeve referentne točke – elementa ili prozora preglednika. Može poprimiti vrijednost dužine ili postotka dužine.

top

Udaljenost od gornje referentne točke – elementa ili prozora preglednika. Može poprimiti vrijednost dužine ili postotka dužine.

• Svojstva čije vrijednosti poprimaju jedinice dužina često dopuštaju i negativne vrijednosti. Primjerice, left:-10px uz relativno smještavanje znači da se element prikaže 10 piksela lijevo od mjesta na kojem bi se inače prikazao.
  

z-index

Ukoliko se dva elementa prekrivaju, vrijednost ovog svojstva definira koji će element biti iznad, a koji ispod. Element s većom vrijednošću uvijek se nalazi iznad.

Tri sloja s različitim vrijednostima svojstva z-index.

• Ovaj primjer sa zadatkom pomoći će vam da bolje razumijete pozicioniranje (smještanje).
• Zadatak :: Rješenje

Od niza svojstava CSS-a, ovdje smo napravili izbor još nekolicine atraktivnih i češće upotrebljavanih.

cursor

Definira vrstu pokazivača kada se on nađe iznad elementa. Može poprimiti vrijednosti: auto, crosshair, default, help, move, pointer, text, wait...

• Budući da korisnici često podsvjesno reagiraju na oblik pokazivača miša, pazite da ih ne zbunite promjenom oblika. Za provjeru odgovorite na pitanje: što ste očekivali od gornjeg primjera kad vam se pokazivač miša promijenio u crosshair?

overflow

Definira kako će se prikazati sadržaj koji je veći od CSS kutije. Može poprimiti vrijednosti: visible, hidden, scroll i auto. Primjerice, oznaka <div> definirane visine, ali s viškom teksta, kao u sljedećem primjeru, bit će prikazana s trakom za pomicanje.

visibility

Definira vidljivost elementa. Može poprimiti vrijednosti visible – vidljiv, ili hidden – skriven.

Ako se pitate zašto biste skrivali element na stranici, odgovor leži u JavaScriptu – skriptnom jeziku koji u kombinaciji s CSS-om nudi neizmjerne mogućnosti uljepšavanja stranica dinamičkim efektima, što uključuje i skrivanje i otkrivanje elemenata. Neka vam to bude motivacija za pohađanje CARNetovih tečajeva „JavaScript” i „Napredne web tehnologije”.

display

Svojstvo koje omogućava promjenu predefiniranog načina prikaza različitih tipova elemenata. Može poprimiti vrijednosti block, inline, list-item i none. Koristi se kad želimo, primjerice, blok element prikazati kao linijski. Ovdje je primjer kako elemente popisa prikazati u liniji: