RP1 - CSS

✓XHTML1

Umeci, okviri i margine

Sad ~temo se malo zabaviti time kako CSS postavlja elemente na stranicu. Znamo da se blokovski elementi renderiraju odozgo prema dolje, a linijski slijeva na desno (s prijelazom u novi red kad treba). Puna istina je da svaki pojedini element ima pravokutnik u kojem se nalazi, i ti pravokutnici se sla~zu jedan do drugog linijski ili blokovski, kako ve~t treba. Taj sadr~zavaju~ti pravokutnik je zapravo sastavljen od 4 pravokutnika jedan unutar drugog.

Osnovni, najdublji pravokutnik je s~am sadr~zaj elementa, odnosno najmanji pravokutnik koji ga sadr~zi (zvat ~temo ga osnovni pravokutnik). Oko njega su jo~s tri dodatna prostora, koja se zovu (iznutra prema van):

padding (umetak)

Ovaj prostor u najstro~zem smislu pripada elementu, i mnoga svojstva CSSa ga ne mogu razlikovati od samog osnovnog pravokutnika. Na primjer, ako postavimo background-color svojstvo za element, ta boja ~te popuniti i umetak. Dakle, to je jednostavno na~cin da umjetno pro~sirimo osnovni pravokutnik, radi ljep~seg izgleda elemenata. Sve ~sto tu mo~zemo podesiti je debljina umetka, i to na svakom rubu (gornjem, desnom, gornjem, lijevom) posebno, ako je potrebno.

border (okvir)

Ovo je najfleksibilniji od tri dodatna pravokutnika: njega mo~zemo efektivno nacrtati linijama raznih tipova (crtkane, to~ckane, dvostruke, pa i elementarni 3D efekti), zadane boje i debljine. Slu~zi dodatnom isticanju pojedinih elemenata na stranici.

margin (margina)

Vanjski, transparentni dio, koji slu~zi isklju~civo razmicanju elemenata, da se okviri (ili pozadine ako okvir~a nema) ne bi slijepili me~dusobno. Kao i za umetke, sve ~sto mo~zemo specificirati su duljine, ali one imaju razli~cito zna~cenje za horizontalne i vertikalne margine (detaljnije dolje).

Pet je dakle svojstava koja mo~zemo ovdje podesiti: veli~cina umetka (padding), debljina okvira (border-width), stil linij~a koje ~cine okvir (border-style), boja okvira (border-color), te veli~cina margine (margin). "Duljinska" svojstva (sve osim boje i stila okvira) mo~zemo posebno podesiti samo na odre~denom rubu, dodav~si iza prve rije~ci svojstva ime ruba: na primjer, padding-bottom je visina donjeg umetka, border-right-width je debljina desnog ruba okvira, a margin-top je gornja margina.

Svako od tih 5 svojstava mo~zemo postaviti navode~ti jednu, dvije, tri ili ~cetiri vrijednosti:

1. ako navedemo samo jednu vrijednost, ona se odnosi na sve rubove (gornji, desni, donji i lijevi)
2. ako navedemo dvije vrijednosti, prva se odnosi na gornji i donji rub, dok se druga odnosi na lijevi i desni
3. u slu~caju tri vrijednosti, prva je za gornji rub, zadnja za donji, a ova u sredini za lijevi i desni rub
4. ako navedemo sve ~cetiri vrijednosti, one se odnose redom na 1)gornji, 2)desni, 3)donji i 4)lijevi rub

(Primijetimo da tako obavezno postavljamo svojstvo na sva ~cetiri ruba, bez obzira koliko vrijednosti naveli. Ako ho~temo postaviti samo neke vrijednosti, a ostale ostaviti nepromijenjenima (naslije~denima), moramo koristiti specifi~cnija svojstva poput padding-right.)

padding: duljina | postotak

Visina ili ~sirina umetka. Ako navedemo postotak, on se ra~cuna u odnosu na ~sirinu samog elementa (ne visinu, ~cak ni kad se radi o gornjem i donjem umetku). Dakle, padding: 0 25% bi zna~cilo dodavanje po ~cetvrt ~sirine elementa na svaku stranu, ~cine~ti time osnovni pravokutnik elementa za polovicu ~sirim.

border-width: thin | medium | thick | duljina

Debljina okvira. Obi~cno se zadaje u pikselima, ili pomo~tu klju~cnih rije~ci thin (tanak), medium (srednje debljine) i thick (debeo okvir). Defaultna vrijednost je medium, no ve~tina elemenata ipak nema okvir po defaultu, zbog defaultne vrijednosti sljede~teg svojstva, koja je none.

border-style: none | solid | dotted | dashed | double | inset | outset | groove | ridge

Vrsta linij~a koje tvore okvir. Vrijednost none zna~ci jednostavno da nema okvira. solid je obi~cna jednostruka puna linija, debljine specificirane gornjim svojstvom. dotted i dashed su to~ckana i crtkana linija redom (praznine izme~du to~ckic~a/crtic~a su popunjene bojom pozadine elementa). double je dvostruka linija, ukupne debljine (zajedno s razmakom izme~du) jednake vrijednosti border-width svojstva. inset i outset su elementarni 3D efekti, stvaraju~ti dojam udubljenog ili izdignutog elementa. groove i ridge su to isto, ali udubljuju ili izdi~zu s~am okvir: element ostaje vizualno na istoj "visini". H2 {
  padding: 3px;
  border-width: 5px;
  border-style: double none solid;
} Ovaj primjer postavlja h2 elemente tako da na udaljenosti 3 piksela imaju iznad sebe dvostruku liniiju ukupne debljine 5 piksela, a ispod sebe jednostruku liniju iste debljine.

border-color: boja

Boja okvira. Ako koristimo 3D efekte za stil okvira, treba uzeti u obzir da ~te CSS malo gradirati specificiranu boju (svijetlije/tamnije na odre~denim rubovima), kako bi stvorio dojam trodimenzionalnosti. (Ako se boja ne navede, podrazumijeva se color svojstvo elementa kojem postavljamo okvir -- dakle, boja njegovog osnovnog teksta.)

border: width style color

Pokrata za postavljanje okvira cijelog elementa. Svaki pojedini dio ne moramo navesti -- postavit ~te se na defaultnu vrijednost. Na ovaj na~cin, na~zalost, ne mo~zemo navesti vi~se od jedne vrijednosti za svako pojedino svojstvo, odnosno sve su iste na sva 4 ruba. Ako ba~s ~zelimo na ovaj na~cin postavljati odre~dene rubove okvira, postoje i pokrate istog tipa za pojedine rubove, poput border-left. H1 { border: thick outset #033 }

margin: auto | duljina | postotak

Postavljanje veli~cine margine. Dok "veli~cina umetka" zaista zna~ci njegovu ~sirinu ili visinu, ovisno o tome je li horizontalan ili vertikalan (mada se u postotcima uvijek postavlja u odnosu na ~sirinu elementa), "veli~cina margine" je druga~cije definirana. Za horizontalne margine (lijevu i desnu), ona stvarno zna~ci njihovu ~sirinu, dok za gornju i donju marginu zna~ci minimalnu udaljenost od (okvira ili pozadine) neposredno prethodnog ili sljede~teg elementa. To zna~ci da, ako su A i B linijski elementi jedan do drugog u liniji, razmak izme~du njih ~te biti zbroj od "margin-right"(A) i "margin-left"(B), no ako su to blokovski elementi jedan ispod drugog, razmak izme~du njih ~te biti maksimum od "margin-bottom"(A) i "margin-top"(B). Na to treba paziti prilikom definicije margin~a: ako vidimo da smanjivanje donje margine nekog elementa ne pomi~ce elemente ispod njega prema gore, mo~zda je kriva gornja margina elementa neposredno ispod.

Tako~der, veli~cina margine mo~ze biti i negativna: na taj na~cin mo~zemo posti~ti preklapanje pojedinih pravokutnika u nekim slu~cajevima. Ovo svojstvo nije ba~s besprijekorno implementirano na mnogim dana~snjim browserima.

Vrijednost auto zna~ci da se vrijednost te margine treba automatski podesiti. Stvar je u tome da nemamo ba~s toliko stupnjeva slobode kao da je na~s element "sam na svijetu" -- on se u ve~tini slu~cajeva nalazi unutar nekog drugog elementa, koji mo~ze imati propisanu svoju ~sirinu. Ako se recimo jedino na~s element A nalazi unutar nekog elementa B, zbroj lijevih i desnih margin~a, ~sirin~a okvira, lijevih i desnih umetaka, te ~sirine sadr~zaja elementa A mora biti jednak ~sirini sadr~zaja elementa B. ~Cesto nam je va~znije podesiti ~sirinu elementa (width svojstvo, vi~se o njemu kasnije) nego margine, pa recimo mo~zemo postaviti lijevu marginu i ~sirinu, te ~sirinu nadre~denog elementa, a desnu marginu postaviti na auto, ~sto zna~ci da je browser treba s~am izra~cunati. Ili mo~zemo postaviti desnu marginu na konkretnu vrijednost, a lijevu na auto, pa ~te element biti u odnosu na desni rub to~cno tamo gdje ~zelimo. Mo~zemo i (p)ostaviti obje margine na auto -- tad ~te browser prepoloviti preostali prostor, ~cine~ti tako element A centriranim unutar elementa B (ako je jedini tamo). (detaljnije)