RP1 - CSS

✓XHTML1

Preostala svojstva

width: auto | duljina | postotak
height: auto | duljina
Eksplicitno postavljanje duljine i ~sirine pojedinog elementa. Primjenjivo na dulje odlomke teksta (lak~se je ~citati redove koji ne idu preko cijelog ekrana), slike (mo~zemo im promijeniti dimenzije na osnovu klasifikacije), blockquote navode iz drugih izvor~a (ako su preduga~cki, a postavimo im eksplicitno visinu, browser bi trebao po~stivati tu postavku, stavljaju~ti scrollbar unutar pravokutnika tog elementa). Za zna~cenje vrijednosti auto vidjeti prethodnu to~cku, o marginama. IMG.thumb {
  width: 70px;
  height: 50px;
}
Postavlja sve slike klase thumb na veli~cinu 70x50 piksela.
float: none | left | right
clear: none | left | right | both
Ponekad ~zelimo da se neki element renderira uz lijevi ili desni rub ekrana, a da se tekst obavija oko njega. Taj element je naj~ce~s~te slika, ili pseudoelement :first-letter (takozvani drop cap efekt), no mo~ze biti i bilo koji drugi vidljivi element.
S druge strane, svojstvo clear slu~zi elementima da se "brane" od floating elemenata. Na primjer, naslovi se obi~cno trebaju renderirati sami u svom novom redu, na fiksnoj udaljenosti od lijevog ruba ekrana, bez obzira na to je li trenutno na lijevoj strani neka slika oko koje se omotava tekst. Da bi naslov to postigao, on mo~ze "o~cistiti" svoju lijevu ili desnu (ili obje) stranu od plutaju~tih elemenata. U najgorem slu~caju, CSS ~te ga tada pomaknuti prema dolje, ispod svih plutaju~tih elemenata koji su trenutno na rubovima, i tamo ga pozicionirati na njegovo mjesto u liniji. To se mo~ze posti~ti pomo~tu: H1,H2,H3,H4,H5,H6 { clear: both }
Tekstualna svojstva
word-spacing: normal | duljina
letter-spacing: normal | duljina
Vrijednost koja se dodaje na uobi~cajeni razmak izme~du rije~c~i/slov~a. Vrijednost normal zna~ci da browser te veli~cine mo~ze donekle razvla~citi, kako bi postigao bolji vizualni dojam (na primjer, poravnanje rubova teksta, ili kerning), i razli~cita je od 0, koja specificira da razmak izme~du svih rije~c~i/slov~a treba ostati fiksan. Mogu~te je postaviti i negativnu duljinu, ~sto ~te rezultirati "zbijenim" slovima, ili ~cak slovima "pretipkanim" jedno preko drugog -- naravno, ukoliko to browser mo~ze izvesti. H1,H2,H3 { letter-spacing: 1ex } Razmi~ce slova u naslovima razine do 3, otprilike kao da je izme~du svaka dva utipkan jo~s jedan razmak (1ex je ~sirina prosje~cnog slova u trenutnom fontu).
text-align: left | right | center | justify
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | postotak
Poravnanje teksta (i ostalih elemenata). text-align se odnosi na horizontalno poravnanje, i mo~ze biti lijevo (lijevi rub ravan, desni varira), desno (desni rub ravan, lijevi varira ovisno o duljini pojedinih rije~c~i), centrirano ("nazubljeno" na oba kraja jednako), ili potpuno poravnano (oba kraja ravna, razmaci izme~du rije~c~i/slov~a variraju). Treba uzeti u obzir da je poravnanje unutar elementa, ne unutar ekrana.
vertical-align je vertikalno poravnanje. baseline je default, i to je poravnanje s obzirom na takozanu osnovnu liniju teksta -- dno ve~tine normalnih znakova u tekstu (osim onih s "repovima", poput g,j,...). sub i super su vertikalna poravnanja koja odgovaraju subskriptima i superskriptima (indeksima i eksponentima). top, middle i bottom su sasvim jasni -- odgovaraju postotcima 0%, 50% i 100%. Postotci se odnose na ukupni prostor kojeg zauzima linija -- njegovu visinu mo~zemo podesiti pomo~tu svojstva line-height. Me~dutim, top i bottom mogu biti prili~cno razli~citi od o~cekivanog, ako se na primjer unutar linije nalazi neka velika slika. U tu svrhu postoje text-top i text-bottom razine, koje odgovaraju vrhu i dnu obi~cnog teksta unutar linije.
line-height: normal | broj | duljina | postotak
Ovim svojstvom mo~zemo postaviti visinu pojedine linije teksta unutar nekog elementa za kojeg o~cekujemo da ~te se prostirati na vi~se linij~a. (line-height se ina~ce mo~ze postaviti i pomo~tu font: pokrate, iako formalno ne spada u font-grupu.) Kad se od visine linije oduzme visina fonta teksta na toj liniji i ta razlika podijeli s 2, dobije se koli~cina praznog prostora (half-leading) koja se doda na gornji i donji rub linije, i tako se dobije linijski pravokutnik. Linijski pravokutnici svih linij~a koje tvore element se nasla~zu jedan na drugi, i dobije se osnovni pravokutnik tog elementa, na koji se onda mogu dodati umeci, okvir i margine. Primijetimo da je taj postupak nezavisan od umetaka, okvira i margin~a pojedinih linijskih elemenata -- na primjer, ako postavimo linkovima umetke i okvire ve~te od half-leadinga, to ne~te dovesti do dodatnog razmicanja linij~a koje sadr~ze linkove; samo ~te dovesti do ~cudnih preklapanj~a okvira jednog elementa s tekstom drugog. Do preklapanja mo~ze do~ti i ako postavimo line-height na veli~cinu manju od font-size -- tada ~te half-leading biti negativan.
Vidimo da osim duljine i postotka (koji se odnosi na veli~cinu fonta u samoj liniji), mo~zemo postaviti i broj (bez ikakve mjerne jedinice) kao vrijednost. Broj je ekvivalentan postotku ~sto se ti~ce vrijednosti (1.2 je isto ~sto i 120%), ali se razli~cito naslje~duje. Naime, kao i kod svih svojstava, kad navedemo postotak (ili drugu relativnu mjeru, poput 3em, vrijednost se izra~cuna, i postavi za dani element kao iznos. Podre~deni elementi onda naslje~duju taj iznos, potpuno neovisno o tome ~sto je on bio specificiran kao postotak ne~cega. No kad navedemo BLOCKQUOTE { line-height: 1.1 } kao pravilo, svaki sljede~ti podre~deni element blockquote elementa naslijedit ~te taj broj, i kao posljedica toga imat ~te za desetinu ve~tu visinu linije od svog nadre~denog elementa. To mo~ze biti korisno ukoliko se radi o broju manjem od 1, tako da se podre~deni elementi sve vi~se zbijaju.
text-decoration: none | underline | overline | line-through | blink
text-transform: none | uppercase | lowercase | capitalize
text-indent: duljina | postotak

text-decoration slu~zi za razne "ukrasne" efekte na tekstu -- potcrtavanje, natcrtavanje, precrtavanje i treperenje (blinkanje). Mo~zemo navesti i vi~se efekata: recimo, A.once:visited { text-decoration: underline line-through } ~te posje~tene linkove klase once renderirati potcrtano i precrtano. Puno trepere~teg teksta obi~cno se ne smatra ugodnom stranicom -- dobro je izbjegavati ga, ili bar koristiti samo u specifi~cnim situacijama. Vrijednost none mo~zemo koristiti da isklju~cimo efekte koje browser obi~cno renderira po defaultu -- na primjer, potcrtavanje linkova. Iako su efekti od text-decoration: underline/overline i border-bottom/top: 1px solid vrlo sli~cni, postoje razlike kojih treba biti svjestan. border sigurno omogu~tuje daleko ve~ti izbor boj~a, debljin~a i stilova "potcrtavanja". S druge strane, text-decoration se mo~ze vi~se pribli~ziti samim slovima, pa ~cak i precrtati "repove" slov~a poput g,j,..., dok border to ne mo~ze (padding ne mo~ze biti negativan).

text-transform slu~zi promjeni teksta u velika/mala slova, u stilske svrhe (razli~cito od font-variant svojstva... razmislite o prednostima i manama jednog i drugog, poput ove usporedbe u prethodnom odlomku). capitalize je poseban stil u kojem je prvo slovo svake rije~ci veliko, a ostala mala. SPAN.songName, H2,H3,H4 { text-transform: capitalize }
ACRONYM, BLOCKQUOTE.news P:first-line { text-transform: uppercase }
ABBR, CODE.Pascal { text-transform: lowercase }
CODE.Pascal .string { text-transform: none }
Napomena o dva zadnja pravila... Pascal je case insensitive, pa kod napisan u njemu mo~zemo slobodno renderirati malim slovima. No stringovi unutar Pascal koda svejedno trebaju zadr~zati svoja velika slova, pa ~cetvrto pravilo poni~stava tre~te (izra~cunajte specifi~cnosti!) na elementima klase string unutar code elemenata klase Pascal.

text-indent slu~zi uvla~cenju prve linije teksta (opet, sa sitnim razlikama od :first-line { margin-left: duljina }). Postoci se odnose na ~sirinu elementa. Kao i za marginu, mogu~te je postaviti i negativnu vrijednost.

Klasifikacijska svojstva
display: inline | block | list-item | none

Rekli smo da postoje blokovski i linijski elementi u XHTMLu, i naveli pravila za sadr~zavanje izme~du njih. Ponekad se isplati promijeniti taj vizualni tip nekog elementa, ili ~cak potpuno isklju~citi njegovo prikazivanje. Pri tome treba biti pa~zljiv, pogotovo ako ~zelimo da se dokument u kojem koristimo takve elemente validira kao dobar XHTML dokument. Naime, validator procjenjuje valjanost dokumenta samo na osnovu njega, ne gledaju~ti stilsku karticu. Kao posljedica toga, ponekad treba pa~zljivo odabrati elemente kojima ho~temo promijeniti prikaz.

Na primjer, ~cesto nam (kao u ovim primjerima) treba blok programskog koda, dulji od samo jedne linije, i prirodno je za to iskoristiti code element, eventualno dodatno klasificiran kao code.block. No code je linijski element, i ako ~zelimo da se prika~ze kao blokovski, treba mu promijeniti vizualni tip. To mo~zemo u~ciniti sljede~tim pravilom: CODE.block { display: block } , ~cime smo code elemente klase block proglasili blokovskim elementima. I oni ~te se stvarno renderirati kao blokovski (s prelaskom u novi red na po~cetku i na kraju), no i dalje ~te za validator biti linijski elementi. To zna~ci da ~temo ih morati ubaciti unutar na primjer p elemenata, kako bi na~s dokument pro~sao validaciju. To nas navodi na pomisao da preispitamo svoju zamisao o klasifikaciji, i zaista, mo~zda je bolje koristiti klasificirani blokovski element pre.code. Ako ni~sta drugo, bar besplatno dobijemo i po~stivanje prelazaka u novi red, i vi~sestrukih razmaka, koje je toliko bitno kod indentiranog koda. Ipak, i to svojstvo se mo~ze specificirati "ru~cno" ako ~zelimo, kao ~sto ~temo vidjeti uskoro (white-space: pre deklaracija).

Vrijednost list-item zapravo ozna~cava blokovski element, ali s dodatkom nekih svojstava koja ~temo uskoro navesti (list-style grupa), a koja ga ~cine prikladnim za prikaz kao objekta u listi. Svojstva iz list-style grupe mo~zemo postaviti na proizvoljnom elementu, i ona ~te se normalno naslje~divati kroz na~se stablo elemenata u dokumentu, no do~ti ~te do vizualnog izra~zaja tek na elementu koji ima display svojstvo postavljeno na list-item. Po defaultu, to je jedino li element u XHTMLu, ali taj vizualni tip mo~zemo pridijeliti bilo kojem (blokovskom, ako ne ~zelimo imati problema s validacijom) elementu, ako to ~zelimo. Na primjer, pravilo BLOCKQUOTE P { display: list-item } prikazivat ~te odlomke teksta unutar blockquote elemenata kao elemente liste: svaki sa svojim bulletom (ili ne~cim drugim, ~sto mo~zemo promijeniti postavljanjem svojstava list-style grupe).

Vrijednost none zabranjuje prikaz elementa, kao i svih njegovih podre~denih elemenata, pa makar oni imali display svojstvo postavljeno na ne~sto drugo. Tako mo~zemo na primjer stvarno maknuti elemente odavno ozna~cene kao obrisane sa stranice, isklju~citi prikazivanje vanjskih slik~a, posje~tenih linkova koje se isplati posjetiti samo jednom, te ukloniti neprovjerene izvore informacij~a: DEL.old, IMG.external, A.once:visited, CITE.unchecked { display: none }

white-space: normal | pre | nowrap
Za blokovske elemente, ovo svojstvo predstavlja promjenu uobi~cajenog algoritma za raspore~divanje rije~ci u linije (zanemarivanje uzastopnih razmak~a, prelasci u nove redove po potrebi, ...). Vrijednost pre ka~ze da se element treba pona~sati kao pre element, odnosno po~stivati nove redove i razmake to~cno onako kako pi~su u izvornom kodu. normal ozna~cava normalno pona~sanje, recimo kao p element. nowrap je ne~sto izme~du, dozvoljava zanemarivanje vi~sestrukih razmaka i novih redova, ali zabranjuje browseru prijelom reda na desnom rubu elementa (eksplicitan prijelaz u novi red mogu~t je upotrebom br elementa). Takvi elementi obi~cno rezultiraju horizontalnim scrollbarom ako su preduga~cki. CODE.block {
  display: block;
  white-space: pre;
}
CODE.oneliner {
  display: block;
  white-space: nowrap;
}
list-style-type: disc | square | circle | decimal | lower-alpha | upper-alpha | lower-roman | upper-roman | none
list-style-image: none | url
list-style-position: outside | inside
list-style: type position image

list-style grupa slu~zi postavljanju svojstava koja renderiraju blokovski element kao element neke liste (poput li elementa). Uglavnom se odnose na dodatno lijevo uvla~cenje tog elementa (kontrolirano lijevom marginom), i postavljanje nekog simbola ili slike u tako dobiveni prostor. Dobro je ta svojstva postaviti na sadr~zavaju~tem elementu -- dakle, ul ili ol -- a ne na samom li elementu. Unutra postavljeni li ~te ih bez problema naslijediti i prikazati jer mu je display svojstvo postavljeno na list-item, a daju~ti svojstvo formalno nadre~denom elementu omogu~tujemo mu da dr~zi kontrolu nad recimo time koliko je dosad li elemenata ve~t renderirano unutar njega, ~sto je bitno ako kao ol ~zeli znati kojim brojem labelirati sljede~ti li element. Naravno, sve ovo vrijedi i za proizvoljne elemente A i B umjesto ol/ul i li, gdje A ima display postavljeno na block, a B na list-item.

list-style-type svojstvo odre~duje tip simbola koji ~te se koristiti. disc, square i circle su popunjeni krug, kvadrat i prazan krug, bullets koji se obi~cno upotrebljavaju za neure~dene liste. decimal postavlja elementima liste prirodne (arapske) brojeve redom (1, 2, 3, ....). lower-roman i upper-roman to ~cine rimskim brojkama -- lower pomo~tu i,v,x,l,c,d,m, a upper pomo~tu I,V,X,L,C,D,M. lower-alpha i upper-alpha postavljaju slova kao oznake (a,b,c,d,...; odnosno A,B,C,D,...). none jednostavno ozna~cava da nema nikakvog simbola, ali dodatno uvla~cenje i dalje ostaje (kao da je simbol nevidljiv, ali i dalje zauzima mjesto).

list-style-image nam omogu~tuje postaviti proizvoljnu sliku kao bullet za element liste. Vrijede sli~cne napomene kao za bacground-image i background-color: ukoliko se slika ne mo~ze u~citati (ili jednostavno dok se ne u~cita), postavit ~te se bullet definiran preko list-style-type. Zato je dobro postaviti list-style-type svojstvo (ili jednostavno koristiti pokratu list-style) ~cak i ako nam je krajnja intencija imati sliku, po mogu~tnosti tako da simbol kojeg renderira list-style-type bude sli~can toj slici. Ako smo bez idej~a, mo~zemo ostaviti defaultnu vrijednost disc za list-style-type -- u svakom slu~caju bolje nego none.

list-style-position upravlja preciznije navedenim uvla~cenjem kako bi se dobilo mjesto za bullet. Ako je postavljeno na outside, element liste je jednostavno uvu~cen za iznos svog margin-left svojstva, a onda se u tako dobiveni prostor (ako stane) postavi bullet u vertikalnoj razini njegove prve (ili jedine) linije. Ako je postavljeno na inside, tad se pored gore navedenog uvla~cenja obavi jo~s jedno -- prva linija elementa liste uvu~ce se jo~s toliko, i u tako dobiven prostor se postavi bullet. Ostale linije (ako ih ima) elementa liste po~cinju od normalne lijeve margine, pa se dobiva sli~can efekt kao da bullet ima svojstvo float: left.

list-style je naravno pokrata, koja postavlja sva tri gornja svojstva odjednom. Defaultne vrijednosti su disc za type, none za image, te outside za position. Na primjer, ako ~zelimo da nam se prije svakog odlomka teksta unutar blockquote elementa identifikatora nice nacrta cvjeti~t (ili kru~zi~t ako cvjeti~ta nema), mo~zemo postaviti ne~sto ovakvo: BLOCKQUOTE#nice P {
  display: list-item;
  margin-left: 20px;
}
BLOCKQUOTE#nice { list-style: circle outside url(../common/flower.png) }