RP1 - CSS

✓XHTML1

Uvod. Selektori

U prethodnim vje~zbama smo nau~cili ~sto je XHTML, i vidjeli smo da je za pisati dobar XHTML najva~znije dobro shvatiti logi~cku strukturu dokumenta. To je zato ~sto je XHTML zami~sljen i napravljen kao jezik (za razliku od HTMLa) potpuno oslobo~den prezentacijskih efekata, koji odre~duju kako ~te se to~cno ne~sto renderirati na ekranu (ili bilo gdje drugdje).

Posljedica toga je, naravno, da XHTML dokumenti, sami po sebi, u browseru obi~cno izgledaju prili~cno siroma~sno. Prezentacija i vizualne karakteristike prikaza pojedinih XHTML elemenata se mogu precizno specificirati, samo ~sto XHTML nije pravi jezik za to. Postoje specijalizirani jezici za tu svrhu. Najpoznatiji od njih je vjerojatno CSS.

CSS dokumenti, takozvane stilske kartice (stylesheets), sastoje se od pravil~a (koja se ~cesto grupiraju u sekcije). Svako pravilo se sastoji od selektora i deklaracije, i pi~se se u obliku selektor { deklaracija }. Selektor kazuje na koji/kakav element se treba primijeniti deklaracija, koja kazuje kako neko svojstvo tog elementa treba renderirati. Selektor mo~ze biti jednostavan (samo ime elementa, uz eventualno ime klase ili id), ili kontekstni (nekoliko jednostavnih selektora odvojenih razmacima, koji ozna~cavaju elemente jedan unutar drugog). Klase se u CSSu pi~su s po~cetnom to~ckom, a id-ovi (kao i u XHTMLu prilikom dereferenciranja) s po~cetnim znakom "#". Dakle, neki primjeri jednostavnih selektor~a su:

Napomena: jedna deklaracija ~ciji efekt se gotovo uvijek mo~ze vidjeti je recimo { background: green }, koja postavlja boju pozadine elementa na zelenu. Tu deklaraciju mo~zete upariti (napisati nakon) s bilo kojim od donjih selektor~a (na nekom prikladno slo~zenom dokumentu), da vidite na ~sto se pojedini selektor odnosi -- podru~cje njegovog dosega obojit ~te se zeleno.

BLOCKQUOTE

Odnosi se na sve blockquote elemente. Napomenimo da je CSS, za razliku od XHTMLa, case insensitive (op~tenito ne razlikuje velika i mala slova), te da se u selektorima imena elemenata obi~cno pi~su velikim slovima, da se bolje uo~ce.

CODE.math

Odnosi se na code elemente koji imaju definiran univerzalni atribut class s vrijedno~s~tu "math". Na primjer, element <code class='math'>x&isin;[0,1]</code> bi bio u dosegu tog selektora (odnosno, na njegov sadr~zaj x&isin;[0,1] bi se odnosile deklaracije u viti~castim zagradama nakon tog selektora).

.vazno

Odnosi se na sve elemente koji imaju atribut class sa vrijedno~s~tu 'vazno'. Na primjer, element <em class='vazno'>Napomena:</em> bi bio u dosegu tog selektora.

#osnovniTeorem

Odnosi se na onaj element u dokumentu koji ima atribut id postavljen na vrijednost "osnovniTeorem". Tako~der je mogu~te specificirati vrstu elementa, na primjer "P#osnovniTeorem", no to nema previ~se smisla jer je element s tim id-om ionako jedinstven, bar za dani XHTML dokument. Da, jedna stilska kartica mo~ze upravljati renderiranjem vi~se dokumenata, no svejedno nije dobra praksa imati unutar razli~citih dokumenata razli~cite elemente s istim id atributom.

Pseudoklase

Osim navedenih klas~a (onih koje specificira autor dokumenta kao vrijednosti class atributa), posebno a element mo~ze imati nekoliko pseudoklas~a, najva~znije od kojih su ":link" i ":visited" (kao ~sto vidimo, pseudoklase se umjesto s to~ckom pi~su s dvoto~ckom na po~cetku). To su klase koje ne ovise o tome kako je a elemente (linkove) klasificirao autor dokumenta, ve~t kako ih je "klasificirao" korisnik: na posje~tene i neposje~tene.

A:link

Odnosi se na linkove koji jo~s nisu posje~teni (aktivirani, "kliknuti"), ili pak na one koji su zadnji put posje~teni prije mnogo vremena (recimo, prije zadnjeg brisanja browser cachea).

A:visited

Linkovi koji su ve~t (nedavno) posje~teni -- bilo iz tog dokumenta, bilo iz nekog drugog. Ideja je da je razumno pretpostaviti da za njihov sadr~zaj korisnik ve~t zna, te mo~zda ne moraju biti toliko vizualno upe~catljivi kao oni neposje~teni.

:visited

Skra~teni zapis za "A:visited". Budu~ti da u CSS1 (po kojem radimo), jedino a element mo~ze imati pseudoklase, s~amo navo~denje pseudoklase je dovoljno. Ipak, treba uzeti u obzir da u CSSu ne postoji deklaracija verzije (nigdje na stilskoj kartici ne pi~se da je ona ba~s CSS1), tako da je dobro pitanje je li u~steda jednog slova vrijedna glavobolj~a u trenutku kad najnovija verzija CSSa definira :visited pseudoklasu i za cite element, na primjer.

A.natrag:link

Linkovi klase "natrag", koji jo~s nisu posje~teni. Na primjer, element <a class="natrag">Povratak</a> bi spadao pod doseg tog selektora, ukoliko jo~s nije posje~ten (ako se to odnosi na linkove koji stvarno slu~ze vra~tanju s podre~denih dokumenata, ta situacija obi~cno indicira da je korisnik do~sao do dokumenta nekim drugim putom od onog koji smo mi zamisliti -- na primjer za WWW, pomo~tu search enginea). Vidimo da mo~zemo kombinirati klasu i pseudoklasu, no treba upamtiti da u tom slu~caju pseudoklasa uvijek dolazi na kraju.

Kontekstni selektori

Kontekstni selektor je vi~se jednostavnih selektor~a nanizanih jedan za drugim (i odvojenih obi~cno razmacima, osim kod pseudoelemenata, o ~cemu vi~se kasnije). Ideja je da se neke deklaracije odnose samo na elemente unutar nekih drugih elemenata. Na primjer, unutar code.math elementa, sadr~zaj var elementa ~te vjerojatno trebati druga~cije renderirati nego unutar address ili li elementa. To se mo~ze posti~ti kontekstnim selektorima. Na primjer:

P EM

Odnosi se na samo one em elemente koji su unutar p elementa (ne nu~zno neposredno unutar njega). Na primjer u kodu <h1>Tocka <em>1</em></h1>
<p>Tocka <em>2</em>, <a href="tocka3.html">tocka <em>3</em></a></p> , taj selektor bi se odnosio na brojeve "2" i "3", ali ne na "1", jer on nije unutar p elementa.

BLOCKQUOTE#essential P.long A:visited KBD

Odnosi se na kbd elemente unutar posje~tenih linkova u odlomcima teksta klase .long, sve to samo unutar blockquotea identificiranog kao essential. (Ovako precizan selektor vam skoro sigurno nikada ne~te trebati.:)

DL.fancy DD

dd elementi unutar definicijskih list~a klase fancy. ~Cesta je pojava poku~sati svaki pojedini dd element unutar takve liste klasificirati, no to otvara puno problema (~sto ako dodamo novi dd element i zaboravimo mu pridijeliti klasu?; ~sto ako copy&pasteamo elemente izme~du dvije liste?), i pi~semo vi~se nego ~sto je potrebno. Puno je bolje napisati "class='fancy'" samo na jednom mjestu (ili nekoliko njih) u XHTML dokumentu (kao atribut dl elementa), i onda pristupati pojedinim elementima unutar liste pomo~tu kontekstnih selektor~a.

UL UL

Odnosi se na neure~dene liste negdje unutar neure~denih list~a (dakle, dubine barem 2). Primijetimo: iako je po pravilima XHTMLa nemogu~te utrpati jedan ul element direktno unutar drugog (ul element smije sadr~zavati samo li elemente), CSS pravilo "ne mora sadr~zavati neposredno" za kontekstne selektore osigurava da mo~zemo i to napisati. Dakako, mo~zemo napisati i "potpuniju" sekvencu "UL LI UL" (kao ~sto mo~zemo i "HTML BODY UL LI UL":), ali vezanje deklaracij~a na li element ("UL LI UL LI") nosi sa sobom neke probleme, ~sto ~te postati jasnije kad objasnimo preklapanje.

Pseudoelementi

Osim ~sto ima pseudoklase za a element, CSS nudi i pseudoelemente: specijalne fiktivne elemente unutar nekih blokovskih elemenata (najva~zniji je p), za koje opet nije odgovoran autor dokumenta, ve~t browser: oni ovise o tome kako se to~cno poslo~zi pojedini element na konkretnom korisnikovom ekranu. To su ":first-line" i ":first-letter" -- prva linija, i prvo slovo, pojedinog blokovskog elementa (naj~ce~s~te odlomka teksta). Jasno je da ~sto to~cno ulazi u prvu liniju odlomka, ovisi o tome kakva je veli~cina fonta, kolika je ~sirina browserovog prozora, rezolucija... autor to ne mo~ze znati. ~Sto je prvo slovo odlomka, autor mo~ze dodu~se ozna~citi posebnim elementom, no nema potrebe niti puno smisla -- to nije logi~cki ve~t prezentacijski detalj, jer prvo slovo odlomka se obi~cno ni po ~cemu ne razlikuje od ostalih slov~a, osim po tome kako se renderira.

INS:first-letter

Odnosi se na prvo slovo proizvoljnog ins elementa. Vidimo da to mo~zemo shvatiti donekle kao kontekstni selektor (":first-letter" element unutar "INS" elementa), s tom razlikom da ovdje sadr~zavanje mora biti neposredno -- radi se stvarno o prvom slovu sadr~zaja ins elementa, ne o prvom slovu nekog npr. odlomka unutar ins elementa. U znak toga, pseudoelementi se pi~su odmah nakon elemenata unutar kojih se "nalaze", bez razmaka.

:first-letter

Ovo nije dobar selektor sam po sebi (ne odnosi se, recimo, na prva slova svih blokovskih elemenata u dokumentu). Pseudoelementi uvijek moraju biti referencirani unutar konkretnih elemenata, i moramo uvijek navesti na koji element se misli.

P.prvi:first-line

Odnosi se na prvu liniju (uklju~cuju~ti i prvo slovo) p elemenata klase "prvi". Ovo isto mo~zemo shvatiti kao kontekstni selektor u nekom smislu, no treba zapamtiti da ispred pseudoelemenata nikada ne ide razmak.

BLOCKQUOTE P:first-line

Prva linija samo onih p elemenata koji se nalaze unutar nekog blockquote elementa. Vidimo da su pseudoelementi dozvoljeni unutar kontekstnih selektor~a, no u tom slu~caju oni moraju biti zadnji -- iako ponekad ima smisla govoriti o "elementima sadr~zanima unutar prve renderirane linije", nije jasno ~sto uraditi s elementima koji nisu potpuno u prvoj liniji (na primjer, prelamaju se s prve na drugu). Zbog takvih konfuzij~a, CSS1 je jednostavno zabranio kontekstualiziranje unutar pseudoelemenata.

Grupiranje selektor~a

Vi~se selektor~a se mo~ze grupirati, odnosno nanizati odvojene zarezima. U tom slu~caju, u dosegu tog "multiselektora" ~te biti svi oni elementi koji bi bili u dosegu bilo kojeg pojedinog -- dakle, zarez me~du selektorima ima zna~cenje logi~ckog "ili". Obi~cno se iza zareza jo~s stavi razmak, radi lak~seg ~citanja.

EM, STRONG

Odnosi se na sve em elemente, i na sve strong elemente -- dakle, na sve nagla~sene dijelove teksta.

H1,H2,H3,H4,H5,H6

Odnosi se na sve naslove -- ono ~sto smo obi~cno zvali "hx element". Uo~cimo da mo~zemo izostaviti razmak iza zareza -- ni s njim ovo ne bi bilo puno ~citljivije.

OL.kratka, UL.kratka, DL.kratka

Odnosi se na sve liste klase "kratka". Primijetimo da u CSS1 nema dodatnog grupiranja -- ne mo~zemo napisati ne~sto poput (OL,UL,DL).kratka.

.math KBD, KBD.math

Odnosi se na sve kbd elemente unutar proizvoljnog elementa klase math, kao i na s~ame kbd elemente klase math. Ne odnosi se na kbd elemente koji "nemaju nikakve veze" s klasom math. Primijetimo da su ovo gore dva nezavisna selektora -- ono ~sto je u dosegu jednog, mo~ze a ne mora biti u dosegu drugog.