CSS
Ekstenzija datoteke: | .css |
---|---|
Razvio: | Hekon Vium Laj, Bert Bos i W3C konzorcijum |
Prvo pojavljivanje: | 17. decembar 1996. |
Tip formata: | Jezik stilskih listova |
Kaskadne stilske tablice |
---|
Poređenje |
Veb dizajn |
HTML |
---|
Poređenja |
CSS (engl. 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.
Istorija
[uredi | uredi izvor]Veb standardi |
---|
Standardi |
|
Organizacije |
|
CSS je u određenoj formi postojao još u začecima SGML-a 1970-ih 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čiti veb-pregledači su prikazivali dokumente na različite načine, i postojala je potreba za doslednom tehnikom definisanja prikaza elemenata na stranici.
Da bi se ovo postiglo, devet različitih metoda je predloženo na zvaničnom forumu W3C-a. Od devet, dve metode su izabrane kao temelj onoga što je kasnije postalo CSS: CHSS (engl. Cascading HTML Style Sheets) i SSP (engl. Stream-based Style Sheet Proposal). Prvo je Hakon Vium Li (koji je sada šef tehničke službe kompanije Opera) predložio CHSS u oktobru 1994, 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 poput DSSSL-a i FOSI-a, CSS je dozvoljavao da više opisa utiče na dokument, tj. jedna definicija stilova je mogla naslediti osobine od druge.
Lijev predlog je postavljen na konferenciji „Veb mozaik“ u Čikagu 1994. godine, i ponovo sa Bosovim predlogom 1995. Otprilike u ovo vreme je osnovan W3C, koji je preuzeo funkciju razvoja CSS-a. Do kraja 1996, CSS je bio spreman da se objavi kao standard, i CSS1 je objavljen u decembru.
Razvoj HTML-a, CSS-a i DOM-a se odvijao u jednoj istoj grupi, HTML Editorial Review Board (ERB). Početkom 1997. grupa ERB se podelila 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 kompanije SoftQuad, 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. novembra 1997; objavljen je kao zvanična verzija 12. maja 1998. CSS3, čiji je razvoj započet 1998. se još uvek razvija.
Jezik
[uredi | uredi izvor]CSS sintaksa se sastoji od opisa 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 opisi slažu jedan preko drugog da bi definisali konačni izgled određenog elementa (otuda naziv Cascading (engl. cascade - crep) 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
- vrednosti
Nakon što definišemo ciljne elemente, tj. elemente na koje će se trenutni opis odnositi, nizom parova svojstvo-vrednost definišemo izgled svakog ciljnog elementa. Sintaksa koja se pri tome definiše je sljedećeg oblika:
циљни елементи {
својство: вредност;
својство: вредност;
...
}
CSS podržava i komentare, koji izgledaju kao u programskom jeziku C, dakle navodeći se između znakova /*
i */
.
Ciljni elementi
[uredi | uredi izvor]Ciljni elementi se definišu na tri načina:
- navodeći HTML tag ciljnih elemenata
- navodeći klasu elemenata
- navodeći direktnu identifikacionu vrednost (
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 {
својство: вредност;
...
}
Klasa HTML elementa je reč koju stavimo kao vrednost argumenta CLASS
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 {
својство: вредност;
...
}
Ovaj opis će, dakle, imati uticaja na sve elemente u dokumentu koji su definisani na sljedeći način:
<p class="imeKlase">...</p>
<div class="imeKlase">...</p>
...
Identifikaciona vrednost elementa je vrednost argumenta ID
pri definiciji tog elementa. U jednom dokumentu identifikacione vrednosti moraju biti jedinstvene, tj. može postojati samo jedan element sa određenom identifikacionom vrednošć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 vrednost:
#identifikacionaVrijednost {
својство: вредност;
...
}
Ovaj će, dakle, opis uticati na sve elemente koji u svojoj HTML definiciji imaju id="identifikacionaVrijednost"
.
Svojstva i vrednosti
[uredi | uredi izvor]Svojstva na koja želimo da utičemo u datom opisu se definišu preko niza ključnih reči definisanih u W3C 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
Vrednosti pojedinih svojstava se definišu na dva načina:
- predefinisanim ključnim rečima
- brojevnim vrednostima
Predefinisane ključne reči za vrednosti svojstava se koriste u situacijama kada dato svojstvo ima ograničen broj mogućnosti. Tako na primer svojstvo za definiciju pozadine elementa može biti samo scroll
(da se kreće uvek zajedno sa sadržajem elementa) i fixed
(da stoji uvek na istom mestu bez obzira na sadržaj).
Brojevne vrednosti se mogu zadavati na nekoliko načina:
- zadajući samo brojevnu vrednost
- navodeći i jedinicu veličine skupa sa opisom (
px
,em
,pt
, ...)
Ako zadajemo samo brojevnu vrednost, 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
Primeri
[uredi | uredi izvor]- Primer za definiciju pozadine cijele stranice:
body {
background-color: aqua; /* позадина боје aqua */
}
- Primer za definiciju izgleda svih elemenata klase "citat":
.citat {
font-family: serif; /* фонт са кукицама, као Times New Roman */
font-style: italic; /* искошен текст */
font-size: 9pt; /* величина слова 9 тачака */
}
Organizacija CSS koda
[uredi | uredi izvor]CSS kod se može zadavati na tri standardna mesta:
- 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, argument style
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 argumenta class
taga, a zatim definišući izgled tih klasa bilo u okviru elementa style
u zaglavlju ili u eksternoj datoteci. Argument style
taga se najčešće koristi ako neki element ne pripada nijednoj grupi i ima posebne zahteve 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 promena u fajlu sa stilovima utiče na sve stranice te su stilovi centralizovani.
Ograničenja
[uredi | uredi izvor]Poznata ograničenja „čistog“ CSS-a uključuju u sledeća:
- Nedoslednost veb-pregledača:
- Različiti pregledači će interpretirati CSS kôd na različite načine zbog svojih bagova ili zbog nepodržavanja određenih mogućnosti CSS-a. Na primer, Internet Explorer, č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 doslednost prikaza u brojnim popularnim pregledačima, moraju se koristiti raznorazne „veštine“ i „štimanja“. I pored toga, ponekad je nemoguće postići identičan prikaz dokumenta u različitim pregledačima.
- Složenost
- 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 „nasleđivanje“ - ne postoji način da se izabere opis nekog drugog elementa na kojem bi se bazirao trenutni element. Nasleđivanje postoji, ali se bazira na unapred utvrđenom pravilu da se opisi nasleđ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 nasleđivanje jer bi to otežalo i usporilo rad pregledača.
- 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 prohtevi, poput centriranja objekta po vertikali, ili prikaz podnožja dokumenta na samom dnu vidljivog dela prozora, zahtevaju prilično komplikovane opise, ili opise koje podržavaju samo određeni pregledači. Ponekad je najlakše uposliti skriptni jezik poput JavaScripta 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 JavaScript.
- 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 Explorer 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 primer, 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 primer, ako određenom elementu dodelimo svojstvodisplay: table-cell
, onda mu ne možemo dodeliti 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 dodeljivanje svojstva
position: relative
reš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 rešenje.
- Nemogućnost postavljanja više pozadinskih tema istom elementu
- Složena grafička rešenja zahtevaju 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 rešiti u trećoj verziji CSS-a[1], a određena rešenja već postoje u pregledačima Safari i Konqueror.
- Kontrola oblika elemenata
- CSS trenutno dopušta samo pravougaone elemente. Elementi zaobljenih uglova ili drugih nepravougaonih oblika zahtevaju izlaženje iz opsega CSS-a ili korišćenje sličica.
- Ne postoje striktna pravila o redosledu 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 promenljivih
- CSS ne podržava promenljive ni u kakvom obliku. Promenljive bi poslužile za centralizovani opis određene boje, veličine ili čitavog skupa svojstava, što bi obezbedilo lakše održavanje i menjanje, ali i manje CSS dokumente. Sa trenutnim verzijama, pristupa se grupnom opisivanju nekoliko različitih klasa razdvojenim zarezom, da bi se umanjio problem nepostojanja promenljivih.
- Nedostatak kolumna (stubaca)
- Kolumne teksta, poput novinarskih, se najčešće rešavaju plutajućim elementima ili tabelama, ali različiti pregledači, na monitorima različitih rezolucija, veličina i odnosa strana će prikazati različite rezultate. Dodavanje jednostavnih deklaracija za definisanje kolumna bi rešilo ove probleme.
Reference
[uredi | uredi izvor]Literatura
[uredi | uredi izvor]- Jeffrey Zeldman : Designing With Web Standards, New Riders. 2009. ISBN 978-0-321-61695-1. (paperback) (book's companion site)
- Dan Cederholm : Web Standards Solutions, The Markup and Style Handbook, Friends of Ed. 2009. ISBN 978-1-4302-1920-0. (paperback) (Author's site)
- Meyer, Eric A. (2006). Cascading Style Sheets: The Definitive Guide, Third Edition. O'Reilly Media, Inc. ISBN 978-0-596-52733-4.
- More Eric Meyer On CSS . 2004. ISBN 978-0-7357-1425-0.
- Eric Meyer On CSS . 2002. ISBN 978-0-7357-1245-4.
- Meyer, Eric A. (2001). Cascading Style Sheets 2.0 Programmer's Reference. McGraw-Hill Osborne Media. ISBN 978-0-07-213178-9.
- The Zen of CSS Design (co-authored by CSS Zen Garden Owner, Dave Shea, and Molly E. Holzschlag). 2005. ISBN 978-0-321-30347-9.
- Kynn Bartlett: Teach Yourself CSS in 24 Hours, 2nd Edition . . Sams Publishing. 2006. ISBN 978-0-672-32906-7.
- Cascading Style Sheets: Designing for the Web by Håkon Wium Lie and Bert Bos. 2005. ISBN 978-0-321-19312-4.
- Cascading Style Sheets Cascading Style Sheets, PhD thesis, by Håkon Wium Lie – provides an authoritative historical reference of CSS
- Briggs, Owen; Patterson, Matt; Costello, Eric; Champeon, Steven (2004). Cascading Style Sheets: Separating Content from Presentation. Apress. ISBN 978-1-59059-231-1.
- Keith Schengili-Roberts (2003). Core CSS, 2nd Edition. Prentice Hall. ISBN 978-0-13-009278-6.
- On the Analysis of Cascading Style Sheets, Pierre Geneves, Nabil Layaida, and Vincent Quint, Proceedings of the 21st International Conference on World Wide Web (WWW'12). p. 809-818, 2012.