RP1 - CSS

✓XHTML1

~Ce~s~te kori~stena svojstva

Navest ~temo neka svojstva, njihove vrijednosti, te na~cin njihove interpretacije. Za cijelu listu svojstava, s detaljnim uputama o tome kako ih koristiti, najbolje je pogledati slu~zbenu referencu.

Oznake: koristit ~temo imena boja, duljina, postotak i url za vrste vrijednosti obja~snjene u to~cki o deklaracijama. Ostala takva imena bit ~te obja~snjena na licu mjesta.

font grupa

font-family: font,^* gfont

Postavlja font kojim ~zelimo da se ispi~se sadr~zaj elementa. Vrijednost je nula ili vi~se imen~a fontova, te na kraju ime takozvanog generi~ckog fonta, sve odvojeno zarezima. Fontovi ~cija su imena navedena se tra~ze redom na sustavu koji treba renderirati element, i upotrebljava se onaj koji je prvi prona~den. Ukoliko se nijedan ne prona~de, upotrebljava se generi~cki font naveden na kraju, koji mora biti prisutan. Generi~cki fontovi zapravo nisu pravi fontovi, ve~t samo simboli~cka imena za proizvoljan font sa zadanim svojstvom. To su:

serif

Proizvoljan serif font. Serif fontovi su obi~cno bogati ukrasima ("repovima" na znakovima), i u pravilu bolje izgledaju na papiru nego na ekranu.

sans-serif

Suprotno tome, sans-serif fontovi su jednostavni (na primjer, veliko slovo "i" ~cesto izgleda samo kao vertikalna crta), i uglavnom dobri za prikaz na ekranu.

cursive

Kurziv fontovi predstavljaju prijenos rukopisa na digitalni medij. Od obi~cnih nako~senih slov~a sa zaobljenim krajevima, pa do kompliciranih shem~a sa spajanjem slov~a i nepravilnostima u pisanju koje opona~saju ljudsku ruku.

fantasy

Obi~cno ekstravagantni, preukra~seni fontovi u kojima se u pravilu ne pi~su velike koli~cine teksta, ve~t samo kratke poruke.

monospace

Font u kojem su sva slova jednake ~sirine (dakle, red s 10 slov~a "i" jednako je velik kao i red s 10 slov~a "m"). Font kojim se obi~cno renderira tt element.

BODY { font-family: Helvetica, Arial, sans-serif } Ovo pravilo postavlja font cijelog dokumenta na font pod imenom Helvetica. Ako se takav font ne mo~ze prona~ci, postavlja se Arial. Ako ni njega nema, postavlja se proizvoljan (generi~cki) sans-serif font. CODE.math { font-family: cursive } Postavlja font code elemenata klase math na generi~cki kurziv font.

font-style: normal | italic | oblique

Stil fonta. italic postavlja italik font, dok normal postavlja ravan (roman) font. oblique postavlja font koji je nako~sen (recimo softverski), ali nije dodatno ukra~sen poput italika. CITE { font-style: italic }

font-variant: normal | small-caps

Varijanta fonta. normal se odnosi na font s normalnim malim i velikim slovima. small-caps se odnosi na font u kojem mala slova izgledaju sli~cno velikima, samo smanjene visine i ~sirine. P:first-line { font-variant: small-caps } Postavlja prvu liniju svih odlomaka teksta u small-caps varijanti fonta. Kao da je sve pisano u uppercaseu, no slova koja bi trebala biti mala su fizi~cki smanjena.

font-weight: normal | bold | bolder | lighter | [1-9]00

Debljina fonta. normal i bold su dvije naj~ce~s~te kori~stene, za normalna odnosno masna slova. Brojevi poput 100, 200, ..., 900 slu~ze za fino pode~savanje debljine fonta u jednoj od 9 razin~a (normal je 400, bold je 700) -- ali mnogi fontovi ne podr~zavaju tu mogu~tnost. Za one koji samo ~zele "sljede~ti deblji" odnosno "sljede~ti tanji" font, u odnosu na naslije~denu debljinu fonta,postoje rije~ci bolder i lighter. H1 { font-weight: 900 }

font-size: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | duljina | postotak

Veli~cina fonta. xx-small do xx-large se odnose na 7 stupnjeva "apsolutne" veli~cine: svaki od njih je otprilike za petinu ve~ti od prethodnog. smaller i larger uzimaju prvu sljede~tu manju odnosno ve~tu veli~cinu u odnosu na naslije~denu. U slu~caju navo~denja duljine/postotka, relativne mjere se tako~der odnose na naslije~denu veli~cinu fonta: dakle, larger, 120% i 1.2em su tri na~cina za re~ti istu stvar. SUP { font-size: xx-small }

font: style variant weight size/line-height family

Pokrata za postavljanje svih svojstava iz font grupe, kao i dodatnog svojstva line-height za visinu linije (vi~se o njemu kasnije). Obavezno je navesti samo size i family -- ostala svojstva iz font grupe dobivaju defaultne vrijednosti. BODY { font: bold 12pt/14pt Helvetica, Arial, sans-serif } Postavlja font cijelog dokumenta (gdje nije re~ceno druga~cije). Helvetica (ili Arial ili bilo koji sans-serif), veli~cine 12 to~caka, unutar linije visoke 14 to~caka, bold.

color/background grupa

color: boja

Postavlja boju teksta unutar elementa. Ovo svojstvo ne spada u background grupu, ali se ~cesto postavlja zajedno s pozadinom (vidjeti napomenu o bojama unutar poglavlja o deklaracijama). A:visited { color: #003 }

background-color: transparent | boja

Postavlja boju pozadine. transparent vrijednost ozna~cava da se na mjestu gdje bi trebala biti pozadina danog elementa, vidi njegov nadre~deni element (naj~ce~s~te njegova pozadina). Ukoliko se i stavlja slika kao pozadina, dobro je staviti i ovo svojstvo, jer slika mo~ze biti nedohvatljiva iz vi~se razlog~a. U tom slu~caju, background-color treba staviti na boju koja je "najrasprostranjenija" na samoj slici koju u idealnim uvjetima ~zelimo za pozadinu.

background-image: none | url

Postavlja sliku u pozadinu proizvoljnog vidljivog elementa. Iako tradicionalno postavljana kao svojstvo body elementa (dakle, efektivno cijele stranice), danas se slikovna pozadina, zahvaljuju~ti CSSu, mo~ze postaviti prakti~cki bilo kojem elementu posebno.

background-repeat: repeat | repeat-x | repeat-y | no-repeat

Odre~duje ho~te li se slika prikazati samo jednom na odgovaraju~toj poziciji, ili ~te se umno~ziti u mnogo primjeraka da prekrije (tile) cijelu pozadinu elementa. tiling mo~ze biti samo horizontalan (repeat-x), samo vertikalan (repeat-y), ili du~z obje dimenzije, pravokutan (repeat).

background-attachment: scroll | fixed

Vrijednost scroll ozna~cava da se pozadinska slika treba pomicati zajedno sa sadr~zajem elementa kad se on scrolla. Vrijednost fixed ka~ze da slika treba ostati na mjestu, odnosno da je (u slu~caju da je pozadina body elementa, za ~sto se i naj~ce~s~te upotrebljava) pozicionirana s obzirom na ekran, a ne s obzirom na polo~zaj elementa ~cija je pozadina. BODY {
  color: #996;
  background-color: blue;
  background-image: url(sea.jpg);
  background-attachment: fixed;
  background-repeat: repeat-x;
  background-position: bottom left;
} Postavlja boju teksta na stranici, te u pozadinu stranice stavlja sliku sea.jpg, fiksiranu prilikom scrollanja, inicijalno u donji lijevi kut ekrana, sa specifikacijom da se tiling izvr~si u horizontalnom smjeru, ukoliko slika nije dovoljno ~siroka. Za zna~cenje background-position svojstva pogledajte sljede~ti odlomak.

background-position: hpos vpos (Ovo je bilo pogre~sno u pro~slom izdanju)

Odre~duje mjesto na kojem ~te se nacrtati pozadinska slika, unutar same pozadine elementa. vpos ozna~cava vertikalnu poziciju, a hpos horizontalnu. Svaka od njih mo~ze biti postotak, duljina, ili klju~cna rije~c: top, center ili bottom za vpos, te left, center ili right za hpos. Postotci se odnose na relativni polo~zaj mjesta slike unutar elementa, dok duljine referiraju na udaljenost gornjeg/lijevog ruba slike od gornjeg/lijevog ruba elementa. Mo~ze se navesti samo jedna klju~cna rije~c, u kom slu~caju je ona druga dimenzija centrirana. top i left ozna~cavaju 0%, center je 50%, a bottom i right su isto ~sto i 100% za vpos i hpos redom. .trademarked {
  background-image: ur(../common/trademark.png);
  background-repeat: no-repeat;
  background-position: 1mm 100%;
} U elementima klase trademarked, postavlja sli~cicu trademark.png u pozadinu, udaljenu 1 milimetar od gornjeg ruba elementa, i pomaknutu potpuno na desni rub.

background: color image repeat attachment position

Pokrata za postavljanje svih svojstava background-grupe. Ne zaboravite postaviti i color svojstvo, ili pak budite potpuno sigurni da se naslije~dena vrijednost sla~ze s bojom (slike) pozadine. Nijedan od gornjih parametara nije obavezan, no dobro je uvijek navesti prvi, background-color, ~cak i kad je intencija staviti sliku u pozadinu, jer to omogu~tuje da se tekst vidi na bar pribli~zno boji koju smo zamislili. Jedan od zanimljivih izuzetaka tog pravila je ovaj: EM.waveUnderline {
  background: url(../common/wave1.gif) repeat-x bottom left;
  padding-bottom: 3px;
} Ako slika wave1.gif predstavlja jedan "vali~t", gornje pravilo ~te sve em elemente klase waveUnderline potcrtati valovitom linijom. ~Stovi~se, ako je wave1.gif animirani GIF, mo~zemo dobiti prili~cno zanimljive efekte. Za zna~cenje padding-bottom svojstva pogledajte sljede~tu to~cku.