You are on page 1of 3

Kaskadno ime dolazi iz specificirane šeme prioriteta kako bi se odredilo koje se pravilo

stila primjenjuje ako više od jednog pravila odgovara određenom elementu. Ova kaskadna
šema prioriteta je predvidljiva.
CSS specifikacije održava World Wide Web Consortium (W3C). Tip Internet medija
(MIME tip) text/css je registrovan za upotrebu sa CSS-om prema RFC 2318 (mart 1998).
W3C koristi besplatnu uslugu CSS validacije za CSS dokumente.
Pored HTML-a, drugi jezici za označavanje podržavaju upotrebu CSS-a uključujući
XHTML, običan XML, SVG i XUL.
CSS ima jednostavnu sintaksu i koristi brojne engleske ključne riječi da specificira imena
različitih svojstava stila.
Tabela stilova se sastoji od liste pravila. Svako pravilo ili skup pravila sastoji se od jednog
ili više selektora i bloka deklaracije.
U CSS-u, selektori deklariraju na koji dio oznake se stil primjenjuje uparujući oznake i
atribute u samoj markaciji.
Selektori se mogu prijaviti za sljedeće:
• svi elementi određenog tipa, npr. zaglavlja drugog nivoa h2
• elementi specificirani atributom, posebno:
o id : jedinstveni identifikator unutar dokumenta, identificiran heš prefiksom npr
#id
o klasa : identifikator koji može označiti više elemenata u dokumentu,
identificiran prefiksom tačke, npr.classname
• elemente u zavisnosti od toga kako su postavljeni u odnosu na druge u stablu
dokumenta.

Slika 3.2. Primjer CSS koda

7
Klase i ID-ovi razlikuju velika i mala slova, počinju slovima i mogu uključivati
alfanumeričke znakove, crtice i donje crte. Klasa se može primijeniti na bilo koji broj
instanci bilo kojeg elementa. ID se može primijeniti samo na jedan element.

Pseudo-klase se koriste u CSS selektorima kako bi se omogućilo formatiranje na osnovu


informacija koje nisu sadržane u stablu dokumenta. Jedan primjer široko korištene pseudo-
klase je :hover, koja identificira sadržaj samo kada korisnik "pokaže na" vidljivi element,
obično držeći kursor miša iznad njega. Dodaje se selektoru kao u a:hover ili
#elementid:hover. Pseudo-klasa klasifikuje elemente dokumenta, kao što su :link ili
:visited, dok pseudo-element pravi selekciju koja se može sastojati od delimičnih
elemenata, kao što su ::first-line ili ::first-letter.

Selektori se mogu kombinovati na mnogo načina kako bi se postigla velika specifičnost i


fleksibilnost. Više selektora može biti spojeno u razmaknutu listu kako bi se odredili
elementi prema lokaciji, tipu elementa, ID-u, klasi ili bilo kojoj njihovoj kombinaciji.
Redoslijed selektora je važan. Na primjer div.myClass {color: red;}, primjenjuje se na sve
elemente klase myClass koji su unutar div elemenata, dok.myClass div {color: red;} se
primjenjuje na sve elemente div koji su unutar elemenata klase myClass. Ovo se ne smije
brkati sa spojenim identifikatorima kao što je div.myClass {color: red;} koji se primjenjuje
na elemente div klase myClass.

Slika 3.3. Primjer CSS pravila

Na slici 3.3. je prikazan primjer CSS pravila. Prvo se piše selektor, koji u ovom slučaju
selektuje sve div elemente. Zatim se unutar zagrada (deklaracioni blok) pišu svojstva i
njihove vrijednosti. U ovom slučaju div elementima su promijenjena dva svojstva, color i
text-align. Boja teksta je postavljena na blue (plava) i tekst je poravnat sa obje strane
(justify).
U tabeli 3.1. je prikazana sintaksa za svaki selektor i na šta se on odnosi.

8
Uzorak Na šta se odnosi
E element tipa E
E element je izvorno sidro hiperveze čiji cilj još nije posjećen (:link) ili je već
E:link
posjećen (:visited)
E:active E element tokom određenih radnji korisnika
E::first-line prva formatirana linija E elementa
E::first-letter prvo formatirano slovo E elementa
.c svi elementi sa class="c"
#myid element sa id="myid"
E element čija je klasa "upozorenje" (jezik dokumenta specificira kako se
E.warning
klasa određuje)
E#myid E element sa ID-om jednakim "myid"
.c#myid element sa class="c" i ID jednakim "myid"
EF F element potomak E elementa
* bilo koji element
E[foo] E element sa "foo" atributom
E[foo="bar"] E element čija je vrijednost atributa "foo" tačno jednaka "bar"
E element čija je vrijednost atributa "foo" lista vrijednosti razdvojenih
E[foo~="bar"]
razmacima, od kojih je jedna tačno jednaka "bar"
E element čiji atribut "foo" ima listu vrijednosti odvojenu crticom koja počinje
E[foo|="en"]
(slijeva) sa "en"
E:first-child E element, prvo dijete svog roditelja
element tipa E u jeziku "fr" (jezik dokumenta specificira kako se jezik
E:lang(fr)
određuje)
E::before generirani sadržaj prije sadržaja E elementa
E::after generirani sadržaj nakon sadržaja E elementa
E>F dijete F elementa E elementa
E+F F element kojem neposredno prethodi E element
E[foo^="bar"] E element čija vrijednost atributa "foo" počinje točno nizom "bar"
E[foo$="bar"] E element čija vrijednost atributa "foo" završava točno nizom "bar"
E[foo*="bar"] E element čija vrijednost atributa "foo" sadrži podniz "bar"
E:root E element, korijen dokumenta
E:nth-child(n) E element, n-to dijete njegovog roditelja
E:nth-last-
E element, n-to dijete njegovog roditelja, računajući od posljednjeg
child(n)
E:nth-of-type(n) E element, n-ti brat svog tipa
E:nth-last-of-
E element, n-ti brat svog tipa, računajući od posljednjeg
type(n)
E:last-child E element, posljednje dijete svog roditelja
E:first-of-type E element, prvi brat ovog tipa
E:last-of-type E element, posljednji brat tog tipa
E:only-child E element, jedino dijete svog roditelja
E:only-of-type E element, jedini brat svog tipa
E:empty E element koji nema djece (uključujući tekstualne čvorove)
E:target E element je cilj referentnog URI-ja
E:enabled element korisničkog interfejsa E koji je omogućen
E:disabled element korisničkog interfejsa E koji je onemogućen
element korisničkog sučelja E koji je označen (na primjer radio-dugme ili
E:checked
okvir za potvrdu)
E:not(s) E element koji ne odgovara jednostavnom selektoru s
E~F F element kojem prethodi E element
Tabela 3.1. Sintaksa selektora i na šta se odnose

You might also like