IMG.thumb {
width: 70px;
height: 50px;
}
Postavlja sve slike klase thumb na veli~cinu 70x50
piksela. H1,H2,H3,H4,H5,H6 { clear: both }
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).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 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 }
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.
ACRONYM, BLOCKQUOTE.news P:first-line { text-transform: uppercase }
ABBR, CODE.Pascal { text-transform: lowercase }
CODE.Pascal .string { text-transform: none }
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.
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 }
CODE.block {
display: block;
white-space: pre;
}
CODE.oneliner {
display: block;
white-space: nowrap;
}
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) }