CSS (engleski:Cascading Style Sheets) je jezik formatiranja pomoću kog se definiše izgled elemenata veb-stranice.
Prvobitno,HTML je služio da definiše kompletan izgled, strukturu i sadržaj veb-stranice, ali je od verzije 4.0 HTML-a uveden CSS koji bi definisao konkretan izgled, dok je HTML ostao u funkciji definisanja strukture i sadržaja.
CSS je u određenoj formi postojao još u začecimaSGML-a1970ih godina.
Kako je HTML postajao komplikovaniji, davao je sve više mogućnosti za definiciju izgleda elemenata, ali je istovremeno postajao nečitljiviji i teži za održavanje. Različitibrauzeri su prikazivali dokumente na različite načine, i postojala je potreba za dosljednom tehnikom definisanja prikaza elemenata na stranici.
Da bi se ovo postiglo, devet različitih metoda je predloženo na zvaničnom forumuW3C-a. Od devet, dvije metode su izabrane kao temelj onoga što je kasnije postalo CSS: CHSS (engleski:Cascading HTML Style Sheets) i SSP (engleski:Stream-based Style Sheet Proposal). Prvo je Hakon Vium Li (koji je sada šef tehničke službe kompanijeOpera) predložio CHSS u oktobru1994, jezik koji je imao dosta sličnosti sa današnjim CSS-om. Bert Bos je radio na brauzeru po nazivu Argo, koji je imao sopstveni način definisanja stilova, SSP. Li i Bos su radili zajedno da bi osnovali CSS standard (slovo H je izbačeno iz skraćenice CHSS jer se CSS mogao odnositi i na druge jezike pored HTML-a).
Za razliku od postojećih jezika poputDSSSL-a iFOSI-a, CSS je dozvoljavao da više opisa utiče na dokument, tj. jedna definicija stilova je mogla naslijediti osobine od druge.
Lijev prijedlog je postavljen na konferenciji "Veb mozaik" uČikagu1994. godine, i ponovo sa Bosovim prijedlogom1995. Otprilike u ovo vrijeme je osnovan W3C, koji je preuzeo funkciju razvoja CSS-a. Do kraja1996, CSS je bio spreman da se objavi kao standard, i CSS1 je objavljen u decembru.
Razvoj HTML-a, CSS-a iDOM-a se odvijao u jednoj istoj grupi,HTML Editorial Review Board (ERB). Početkom1997. grupa ERB se podijelila na tri radne grupe: radna grupa za HTML, kojom je upravljao Den Konoli iz W3C-a, radna grupa za DOM, kojom je upravljao Loren Vud iz kompanijeSoftkvod, i radna grupa za CSS, kojom je upravljao Kris Lili iz W3C-a.
Radna grupa za CSS je počela da radi na problemima koji nisu bili obuhvaćeni CSS-om verzije 1, koji se tako razvio u CSS2,4. novembra1997; objavljen je kao zvanična verzija12. maja1998. CSS3, čiji je razvoj započet1998. se još uvijek razvija.
CSS sintaksa se sastoji odopisa izgleda elemenata u dokumentu. Opis može da definiše izgled više elemenata, i više opisa može da definiše jedan element. Na taj način se opisislažu jedan preko drugog da bi definisali konačni izgled određenog elementa (otuda nazivCascading (engleski:cascade - crijep) da bi se dočaralo slaganje jednog stila preko drugog u definisanju konačnog izgleda elementa)
Svaki opis se sastoji od tri elementa:
- definicija ciljnih elemenata
- svojstva
- vrijednosti
Nakon što definišemo ciljne elemente, tj. elemente na koje će se trenutni opis odnositi, nizom parova svojstvo-vrijednost definišemo izgled svakog ciljnog elementa. Sintaksa koja se pri tome definiše je sljedećeg oblika:
ciljnielementi{svojstvo:vrijednost;svojstvo:vrijednost;...}CSS podržava i komentare, koji izgledaju kao u programskom jezikuC, dakle navodeći se između znakova/* i*/.
Ciljni elementi se definišu na tri načina:
- navodeći HTML tag ciljnih elemenata
- navodećiklasu elemenata
- navodeći direktnu identifikacionu vrijednost (
ID) elementa
Kada definišemo preko HTML taga, to znači da će opis uticati na sve elemente u dokumentu koji imaju ovaj tag. Definicija ciljnih elemenata se tada vrši preko direktnog upisa odgovarajućeg HTML taga:
body{svojstvo:vrijednost;...}Klasa HTML elementa je riječ koju stavimo kao vrijednost argumentaCLASS pri definiciji tog elementa. Definicija ciljnih elemenata (svih koji imaju određenu istu klasu) se vrši tako što upišemo znak tačke (.) a zatim naziv klase:
.imeKlase{svojstvo:vrijednost;...}Ovaj opis će, dakle, imati uticaja na sve elemente u dokumentu koji su definisani na sljedeći način:
<pclass="imeKlase">...</p><divclass="imeKlase">...</p>...
Identifikaciona vrijednost elementa je vrijednost argumentaID pri definiciji tog elementa. U jednom dokumentu identifikacione vrijednosti moraju biti jedinstvene, tj. može postojati samo jedan element sa određenom identifikacionom vrijednošću, što znači da ovakvi opisi mogu uticati samo na po jedan element u dokumentu. Definišu se pomoću znaka tarabe (#) a zatim identifikacionu vrijednost:
#identifikacionaVrijednost{svojstvo:vrijednost;...}Ovaj će, dakle, opis uticati na sve elemente koji u svojoj HTML definiciji imajuid="identifikacionaVrijednost".
Svojstva na koja želimo da utičemo u datom opisu se definišu preko niza ključnih riječi definisanih uW3C standardu, a koje se kategorišu u sljedeće grupe:
- definicija pozadine elementa
- ivica
- okvir
- prikaz
- dimenzije
- font
- generisani sadržaj
- margine
- unutrašnji prazan prostor
- pozicija
- izgled pripadajućeg teksta
Vrijednosti pojedinih svojstava se definišu na dva načina:
- predefinisanim ključnim riječima
- brojevnim vrijednostima
Predefinisane ključne riječi za vrijednosti svojstava se koriste u situacijama kada dato svojstvo ima ograničen broj mogućnosti. Tako na primjer svojstvo za definiciju pozadine elementa može biti samoscroll (da se kreće uvijek zajedno sa sadržajem elementa) ifixed (da stoji uvijek na istom mjestu bez obzira na sadržaj).
Brojevne vrijednosti se mogu zadavati na nekoliko načina:
- zadajući samo brojevnu vrijednost
- navodeći i jedinicu veličine skupa sa opisom (
px,em,pt, ...)
Ako zadajemo samo brojevnu vrijednost, imamo mogućnost da je pišemo na dva načina:
- u dekadnom sistemu (709)
- u heksadekadnom sistemu (#a4fde3); ovaj sistem se najviše koristi u definiciji boje
- Primjer za definiciju pozadine cijele stranice:
body{background-color:aqua;/* pozadina boje aqua */}- Primjer za definiciju izgleda svih elemenata klase "citat":
.citat{font-family:serif;/* font sa kukicama, kao Times New Roman */font-style:italic;/* iskošen tekst */font-size:9pt;/* veličina slova 9 tačaka */}CSS kod se može zadavati na tri standardna mjesta:
- direktno u tagu, koristeći argument
style - u zaglavlju dokumenta unutar taga
style - u eksternoj datoteci, koja se u dokument uključuje tagom
link
Za jako male dokumente, argumentstyle taga može biti prihvatljiv, ali za veće dokumente ne može jer se na ovaj stil definiše za svaki element ponaosob. Definicija stilova se najčešće radi grupišući elemente u klase, pomoću argumentaclass taga, a zatim definišući izgled tih klasa bilo u okviru elementastyle u zaglavlju ili u eksternoj datoteci. Argumentstyle taga se najčešće koristi ako neki element ne pripada nijednoj grupi i ima posebne zahtjeve u odnosu na sve ostale elemente.
Stilovi u eksternoj datoteci imaju jednu posebnu prednost u odnosu na preostala dva načina, a to je da na taj način možemo da utičemo na elemente više dokumenata, praktično na čitav jedan sajt. Dovoljno je da pisac bude dosljedan u definisanju klasa elemenata, da bi jedan fajl sa stilovima određivao izgled svih stranica. Na ovaj način jedna promjena u fajlu sa stilovima utiče na sve stranice te su stilovi centralizovani.
Poznata ograničenja "čistog" CSS-a uključuju u sledeća:
- Različiti brauzeri će interpretirati CSS-kŏd na različite načine zbog svojih bagova ili zbog nepodržavanja određenih mogućnosti CSS-a. Na primjer,MajkrosoftovInternet Eksplorer, čija ranija izdanja nisu podržavala mnoge mogućnosti CSS-a 2.1, su pogrešno interpretirala veliki broj bitnih opisa objekata, uključujući širinu, visinu i plutanje. Da bi se postigla dosljednost prikaza u brojnim popularnim brauzerima, moraju se koristiti raznorazne "vještine" i "štimanja". I pored toga, ponekad je nemoguće postići identičan prikaz dokumenta u različitim brauzerima.
- Veliki sajtovi imaju problem veličine CSS dokumenata, koji vremenom postaju toliko složeni i dugački da održavanje i dodavanje novih svojstava postaje izuzetno težak posao.
- Opisi elemenata se ne mogu bazirati na drugim objektima
- CSS ne podržava „nasljeđivanje“ - ne postoji način da se izabere opis nekog drugog elementa na kojem bi se bazirao trenutni element. Nasljeđivanje postoji, ali se bazira na unaprijed utvrđenom pravilu da se opisi nasljeđuju od elementa u kojem se dotični element nalazi, tj. od roditeljskog elementa. Radna grupa za CSS objašnjava da ne želi da uvede proizvoljno nasljeđivanje jer bi to otežalo i usporilo rad brauzera.
One block declaration cannot explicitly inherit from another
- Problemi pri vertikalnoj orijentaciji elemenata
- Iako je prilično lako postići horizontalni tok elemenata, vertikalni tok je prilično teško, i ponekad nemoguće, postići na željeni način. Jednostavni prohtjevi, poput centriranja objekta po vertikali, ili prikaz podnožja dokumenta na samom dnu vidljivog dijela prozora, zahtijevaju prilično komplikovane opise, ili opise koje podržavaju samo određeni brauzeri. Ponekad je najlakše uposliti skriptni jezik poputJavaskripta da na osnovu tekućeg stanja klijenta prikaže element na odgovarajućoj poziciji, čime se opet gubi na kompatibilnosti jer određeni korisnici ne žele da koriste Javaskript.
- Nedostatak aritmetičkih operacija
- Dosadašnje verzije CSS-a ne podržavaju ni najjednostavnije aritmetičke operacije (npr.
margin-left: 10%-10px;). Neki pomaci su napravljeni, raspravom Radne grupe za CSS o uvođenju izrazacalc(), a Internet Eksplorer od verzije 5.0 podržava izrazexpression, sa sličnim mogućnostima.
- Neslaganje pojedinačnih opisa
- Određena svojstva imaju sličnu svrhu, i često se ne slažu u potpunosti. Na primjer, svojstva
position,float idisplay određuju lokaciju prikaza elementa i njihovo kombinovanje često prouzrokuje neočekivane rezultate a određene kombinacije su po pravilu zabranjene. Na primjer, ako određenom elementu dodijelimo svojstvodisplay: table-cell, onda mu ne možemo dodijeliti svojstvofloat nitiposition: relative.
- Određeni elementi ne mogu sadržati plutajuće pod-elemente
- Ne postoji svojstvo koje takve elemente forsira da podržavaju plutajuće pod-elemente. Ponekad dodjeljivanje svojstva
position: relative rješava ovaj problem, ili definisanje i samog nad-elementa da ima plutajuće svojstvo, ali u situacijama kada to nije prihvatljivo za organizaciju dokumenta, to nije rješenje.
- Nemogućnost postavljanja više pozadinskih tema istom elementu
- Složena grafička rješenja zahtijevaju više od jedne pozadinske slike po elementu, ali CSS podržava samo jednu. Zbog toga su dizajneri primorani da elemente slažu jedan preko drugog da bi dobili ono što su tražili, ili da odustanu od prvobitne ideje. Ovaj problem se planira riješiti u trećoj verziji CSS-a[1], a određena rješenja već postoje u brauzerimaSafari (brauzer) iKonkveror.
- Kontrola oblika elemenata
- CSS trenutno dopušta samo pravougaone elemente. Elementi zaobljenih uglova ili drugih nepravougaonih oblika zahtijevaju izlaženje iz opsega CSS-a ili korišćenje sličica.
- Ne postoje striktna pravila o redoslijedu opisa i pripadajućih svojstava
- Trenutno se opisi i svojstva mogu zadavati u bilo kom redu, ali ukoliko su u konfliktu, prednost ima posljednje zadati izraz.
- Nepostojanje promjenljivih
- CSS ne podržava promjenljive ni u kakvom obliku. Promjenljive bi poslužile za centralizovani opis određene boje, veličine ili čitavog skupa svojstava, što bi obezbijedilo lakše održavanje i mijenjanje, ali i manje CSS dokumente. Sa trenutnim verzijama, pristupa se grupnom opisivanju nekoliko različitih klasa razdvojenim zarezom, da bi se umanjio problem nepostojanja promjenljivih.
- Kolumne teksta, poput novinarskih, se najčešće rješavaju plutajućim elementima ili tabelama, ali različiti brauzeri, na monitorima različitih rezolucija, veličina i odnosa strana će prikazati različite rezultate. Dodavanje jednostavnih deklaracija za definisanje kolumna bi riješilo ove probleme.
