Wikipedija

CSS

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

CSS je u određenoj formi postojao još u začecima SGML-a 1970ih 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 brauzeri 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 forumu W3C-a. Od devet, dvije 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 naslijediti osobine od druge.

Lijev prijedlog je postavljen na konferenciji "Veb mozaik" u Čikagu 1994. godine, i ponovo sa Bosovim prijedlogom 1995. Otprilike u ovo vrijeme 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 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 kompanije Softkvod, 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š uvijek razvija.

Jezik uredi

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 - 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: 

ciljni elementi {
    svojstvo: vrijednost;
    svojstvo: vrijednost;
    ...
}

CSS podržava i komentare, koji izgledaju kao u programskom jeziku C, dakle navodeći se između znakova /* i */.

Ciljni elementi uredi

Ciljni elementi se definišu na tri načina:

  • navodeći HTML tag ciljnih elemenata
  • navodeći klasu 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 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 {
    svojstvo: vrijednost;
    ...
}

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 vrijednost elementa je vrijednost argumenta ID 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 imaju id="identifikacionaVrijednost".

Svojstva i vrijednosti uredi

Svojstva na koja želimo da utičemo u datom opisu se definišu preko niza ključnih riječ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

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 samo scroll (da se kreće uvijek zajedno sa sadržajem elementa) i fixed (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

Primjeri uredi

  • 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 */
}

Organizacija CSS koda uredi

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, 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 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.

Ograničenja uredi

Poznata ograničenja "čistog" CSS-a uključuju u sledeća:

  • Nedosljednost brauzera:
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, Majkrosoftov Internet 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.
  • 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 „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 poput Javaskripta 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 izraza calc(), a Internet Eksplorer od verzije 5.0 podržava izraz expression, 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 i display 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 svojstvo display: table-cell, onda mu ne možemo dodijeliti svojstvo float niti position: 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 brauzerima Safari (brauzer) i Konkveror.
  • 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.
  • Nedostatak kolumna
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.

Vidi još uredi

Izvori uredi

  1. ↑ W3.org

Vanjske veze uredi

Izvor: https://sh.wikipedia.org/w/index.php?title=CSS&oldid=41426365