RP1 - CSS

✓XHTML1

Naslje~divanje, preklapanje i specifi~cnost

Kao ~sto ~temo uskoro vidjeti, CSS omogu~tuje pode~savanje nekih 50ak svojstava. Postaviti ih sve za svaki od 50ak vizualnih XHTML elemenata, bilo bi zaista mukotrpan posao. Zato CSS dopu~sta naslje~divanje, princip po kojem elementi unutar nekog drugog elementa automatski dobivaju mnoga njegova svojstva. Jedno od svojstava koje se naslje~duje je font-weight ("masno~ta" fonta). Kao posljedica toga, ako postavimo pravilo EM { font-weight: bold } u na~su stilsku karticu, i unutar em elementa imamo na primjer link (a element), njegov tekst ~te tako~der biti boldan, ako ne ka~zemo druga~cije. ~Stovi~se, budu~ti da su svi elementi na koje se CSS mo~ze odnositi, uvijek sadr~zani u body elementu u XHTMLu, staviv~si pravilo BODY { font-weight: bold } rekli smo da ~te sav tekst na stranici koja u~cita tu stilsku karticu biti boldan, osim teksta onih elemenata za koje posebno navedemo pravilo font-weight: normal.

Ne naslje~duju se formalno sva svojstva, no ~cesto se pona~saju kao da se naslje~duju, odnosno ~cak i bolje. Na primjer, background-image je svojstvo koje odre~duje sliku koju treba staviti u pozadinu nekog elementa. Ako imamo pravilo TABLE { background-image: url(pozadina.png) } , nema smisla da svaka ~telija tablice (td ili th element) naslijedi gornju vrijednost, i time dobije svoju kopiju datoteke pozadina.png kao background. Umjesto toga, njihov background-image se postavlja na none, a background-color na specijalnu vrijednost transparent, koja dozvoljava da se kroz nju vidi pozadina nadre~denog elementa.

Osim toga, CSS je fantasti~cno modularan jezik. Bilo koja stilska kartica mo~ze u~citati bilo koju drugu (dok god nemamo cirkularnost), i dalje graditi na njoj. Dovoljno je na samom po~cetku .css datoteke navesti posebno "pravilo" @import url(druga stilska kartica); . Tako~der, dokument mo~ze pomo~tu link elementa referencirati nekoliko stilskih kartic~a koje sve zajedno utje~cu na njegov kona~cni izgled: samo navedemo sve odgovaraju~te .css datoteke u link elementima jednu za drugom. <link rel="stylesheet" type="text/css" href="../rp1.css" />
<link rel="stylesheet" type="text/css" href="../../F/m.css" />

Osim svega toga, kao ~sto autor dokumenta specificira izgled dokumenta unutar stilske kartice koju on proizvodi, mnogi browseri dopu~staju korisniku -- ~citatelju stranice, da ima svoju stilsku karticu, kojom mo~ze nadopuniti ili ~cak pregaziti neko pravilo koje je autor zamislio. Tako~der, za sva ona svojstva koja nisu specificirana ni od strane autora ni od strane korisnika, browser ima svoje defaultne vrijednosti za renderiranje pojedinih elemenata, koje se mogu shvatiti kao da browser ima svoju stilsku karticu koja mu govori kako renderirati elemente za koje se nitko nije potrudio/sjetio definirati svoja pravila.

To su sve instance preklapanja (cascading), koje je osnova CSSa. Preklapanje je ujedno i najja~ci argument za jednostavnost kori~stenja CSSa -- svatko mo~ze specificirati samo ono ~sto je njemu va~zno, i za svako svojstvo ~te se, dovoljno duboko, na~ti netko tko ga je postavio: ako ni~sta drugo, proizvo~da~c browsera.

No, s preklapanjem dolaze i konflikti. Sasvim je zamislivo da na jedan dokument utje~tu 3 ili 4 stilske kartice, svaka sa svojom idejom o tome kako treba renderirati neki njegov element. U tom trenutku, dolazi do izra~zaja CSSov posebni mehanizam, koji svakom pravilu (neovisno o grupiranju, dakle pravilo s jednim selektorom i jednom deklaracijom) pridjeljuje specifi~cnost, veli~cinu na osnovu koje procjenjuje koje pravilo je "naju~ze", najspecifi~cnije, i kao takvo najvjerojatnije dobar izbor za renderiranje. Specifi~cnost se definira kao ure~dena petorka (r,i,c,e,n), sa sljede~tim komponentama:

1. r je broj od 1 do 5, koji se odnosi na porijeklo i va~znost danog pravila. I autor i korisnik mogu nazna~citi da je pojedino pravilo va~zno, dodav~si "! important" na kraj njegove deklaracije (prije ";", odnosno "}"). Na primjer, H2 { font-size: x-large ! important } je pravilo koje ka~ze da se h2 elementi trebaju renderirati ekstra-velikim fontom, i da je to "va~zno". Pod porijeklom se misli na to potje~ce li stilska kartica na kojoj se pravilo nalazi, od autora, korisnika ili browsera. To~cne vrijednosti su:
   1. za defaultnu vrijednost svojstva u "stilskoj kartici" browsera
   2. za obi~cno pravilo u korisnikovoj stilskoj kartici
   3. za obi~cno pravilo u autorovoj stilskoj kartici
   4. za va~zno pravilo u autorovoj stilskoj kartici
   5. za va~zno pravilo u korisnikovoj stilskoj kartici
2. i je broj identifikatora u selektoru. Svaki "#..." objekt je jedan identifikator
3. c je broj klas~a (ra~cunaju~ti i pseudoklase) u selektoru
4. e je broj elemenata (ra~cunaju~ti i pseudoelemente) u selektoru
5. n je redni broj danog pravila unutar vlastite .css datoteke. Pri tom se (odre~divanju rednog broja pravila) prvo razgrupiraju sve sekcije, i "@import" pravila se zamijene s konkretnim sadr~zajem importiranih stilskih kartic~a.

Na primjer, ako na po~cetku autorove stilske kartice (povezane iz dokumenta link elementom) pi~se BLOCKQUOTE#essential P.long A:visited KBD {
  text-decoration: none;
  border-bottom-width: thin ! important
} , ovo drugo pravilo (koje postavlja ~sirinu donjeg dijela okvira na thin) ima specifi~cnost (4,1,2,4,2).

Za svako svojstvo pojedinog elementa skupe se sva pravila koja bi mogla utjecati na njega, i odabere se ono s (leksikografski) najve~tom specifi~cno~s~tu. Pravila u vi~setrukim link-elementom povezanim stilskim karticama s jednim te istim dokumentom, procesiraju se redom kojim su stilske kartice navedene -- kao i unutar jedne stilske kartice, ono ~sto je navedeno poslije, pobje~duje ako je sve ostalo isto. Specijalan slu~caj toga je da pravila navedena unutar "@import"anih stilskih kartic~a mo~zemo lako pregaziti unutar svoje stilske kartice, budu~ti da CSS1 zahtijeva da @import-pravila do~du na vrh.