RP1 - CSS

✓XHTML1

Češće korištena svojstva

Navest ćemo neka svojstva, njihove vrijednosti, te način njihove interpretacije. Za cijelu listu svojstava, s detaljnim uputama o tome kako ih koristiti, najbolje je pogledati službenu referencu.

Oznake: koristit ćemo imena boja, duljina, postotak i url za vrste vrijednosti objašnjene u točki o deklaracijama. Ostala takva imena bit će objašnjena na licu mjesta.

font grupa
font-family: font,* gfont
Postavlja font kojim želimo da se ispiše sadržaj elementa. Vrijednost je nula ili više imenā fontova, te na kraju ime takozvanog generičkog fonta, sve odvojeno zarezima. Fontovi čija su imena navedena se traže redom na sustavu koji treba renderirati element, i upotrebljava se onaj koji je prvi pronađen. Ukoliko se nijedan ne pronađe, upotrebljava se generički font naveden na kraju, koji mora biti prisutan. Generički fontovi zapravo nisu pravi fontovi, već samo simbolička imena za proizvoljan font sa zadanim svojstvom. To su:
serif
Proizvoljan serif font. Serif fontovi su obično 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" često izgleda samo kao vertikalna crta), i uglavnom dobri za prikaz na ekranu.
cursive
Kurziv fontovi predstavljaju prijenos rukopisa na digitalni medij. Od običnih nakošenih slovā sa zaobljenim krajevima, pa do kompliciranih shemā sa spajanjem slovā i nepravilnostima u pisanju koje oponašaju ljudsku ruku.
fantasy
Obično ekstravagantni, preukrašeni fontovi u kojima se u pravilu ne pišu velike količine teksta, već samo kratke poruke.
monospace
Font u kojem su sva slova jednake širine (dakle, red s 10 slovā "i" jednako je velik kao i red s 10 slovā "m"). Font kojim se obično 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že pronači, postavlja se Arial. Ako ni njega nema, postavlja se proizvoljan (generički) sans-serif font. CODE.math { font-family: cursive } Postavlja font code elemenata klase math na generički 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šen (recimo softverski), ali nije dodatno ukrašen 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čno velikima, samo smanjene visine i širine. 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čki smanjena.
font-weight: normal | bold | bolder | lighter | [1-9]00
Debljina fonta. normal i bold su dvije najčešće korištene, za normalna odnosno masna slova. Brojevi poput 100, 200, ..., 900 služe za fino podešavanje debljine fonta u jednoj od 9 razinā (normal je 400, bold je 700) -- ali mnogi fontovi ne podržavaju tu mogućnost. Za one koji samo žele "sljedeći deblji" odnosno "sljedeći tanji" font, u odnosu na naslijeđenu debljinu fonta,postoje riječi 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čina fonta. xx-small do xx-large se odnose na 7 stupnjeva "apsolutne" veličine: svaki od njih je otprilike za petinu veći od prethodnog. smaller i larger uzimaju prvu sljedeću manju odnosno veću veličinu u odnosu na naslijeđenu. U slučaju navođenja duljine/postotka, relativne mjere se također odnose na naslijeđenu veličinu fonta: dakle, larger, 120% i 1.2em su tri načina za reći 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še 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čeno drugačije). Helvetica (ili Arial ili bilo koji sans-serif), veličine 12 točaka, unutar linije visoke 14 točaka, bold.
color/background grupa
color: boja
Postavlja boju teksta unutar elementa. Ovo svojstvo ne spada u background grupu, ali se često 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čava da se na mjestu gdje bi trebala biti pozadina danog elementa, vidi njegov nadređeni element (najčešće njegova pozadina). Ukoliko se i stavlja slika kao pozadina, dobro je staviti i ovo svojstvo, jer slika može biti nedohvatljiva iz više razlogā. U tom slučaju, background-color treba staviti na boju koja je "najrasprostranjenija" na samoj slici koju u idealnim uvjetima želimo 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ći CSSu, može postaviti praktički bilo kojem elementu posebno.
background-repeat: repeat | repeat-x | repeat-y | no-repeat
Određuje hoće li se slika prikazati samo jednom na odgovarajućoj poziciji, ili će se umnožiti u mnogo primjeraka da prekrije (tile) cijelu pozadinu elementa. tiling može biti samo horizontalan (repeat-x), samo vertikalan (repeat-y), ili duž obje dimenzije, pravokutan (repeat).
background-attachment: scroll | fixed
Vrijednost scroll označava da se pozadinska slika treba pomicati zajedno sa sadržajem elementa kad se on scrolla. Vrijednost fixed kaže da slika treba ostati na mjestu, odnosno da je (u slučaju da je pozadina body elementa, za što se i najčešće upotrebljava) pozicionirana s obzirom na ekran, a ne s obzirom na položaj elementa čija 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ši u horizontalnom smjeru, ukoliko slika nije dovoljno široka. Za značenje background-position svojstva pogledajte sljedeći odlomak.
background-position: hpos vpos (Ovo je bilo pogrešno u prošlom izdanju)
Određuje mjesto na kojem će se nacrtati pozadinska slika, unutar same pozadine elementa. vpos označava vertikalnu poziciju, a hpos horizontalnu. Svaka od njih može biti postotak, duljina, ili ključna riječ: top, center ili bottom za vpos, te left, center ili right za hpos. Postotci se odnose na relativni položaj mjesta slike unutar elementa, dok duljine referiraju na udaljenost gornjeg/lijevog ruba slike od gornjeg/lijevog ruba elementa. Može se navesti samo jedna ključna riječ, u kom slučaju je ona druga dimenzija centrirana. top i left označavaju 0%, center je 50%, a bottom i right su isto što 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čicu 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đena vrijednost slaže s bojom (slike) pozadine. Nijedan od gornjih parametara nije obavezan, no dobro je uvijek navesti prvi, background-color, čak i kad je intencija staviti sliku u pozadinu, jer to omogućuje da se tekst vidi na bar približno 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ć", gornje pravilo će sve em elemente klase waveUnderline potcrtati valovitom linijom. Štoviše, ako je wave1.gif animirani GIF, možemo dobiti prilično zanimljive efekte. Za značenje padding-bottom svojstva pogledajte sljedeću točku.