T°φdy a identifikßtory

V HTML existuje n∞kolik podporovan²ch styl∙ textu (tag∙), nap°φklad nadpisy, seznamy, definice. Jejich zobrazenφ a formßtovßnφ se dß ovlivnit pomocφ CSS styl∙, o tom byly minulΘ kapitoly. Aby se mohl potencißl kaskßdov²ch styl∙ rozvinout do krajnosti, mohou si tv∙rci webov²ch strßnek definovat styly vlastnφ.

P°φklad: podtitul

P°φkladem vlastnφho stylu m∙╛e b²t podtitul. (Nepat°φ do nadpisu a p°ece by m∞l b²t formßtovßn odli╣n∞ ne╛ normßlnφ text.) Dß se formßtovat p°φmo, ale aby byl ve v╣ech dokumentech stejn², je dobrΘ nadefinovat jej jako styl. HTML ale nemß pro podtitul ╛ßdn² tag <podtitul>, a tak si musφm pomoci jinak. Vytvo°φm t°φdu s nßzvem podtitul, ve stylopisu mu nadefinuji vlastnosti (t°eba tuΦnost, zarovnßnφ na st°ed) a u danΘho textu jenom °eknu, ╛e pat°φ do t°φdy podtitul.

.podtitul { text-align: center;
font-weight: bold; text-decoration: overline} /* zarovnßnφ na st°ed, tuΦnΘ
pφsmo a nadtr╛enφ*/

Text uvnit° "zaklasovanΘho" elementu se bude formßtovat podle definice ve stylopisu. Je╣t∞ je t°eba v╣imnout si teΦky na zaΦßtku deklarace ve stylopisu. Ta vyjad°uje, ╛e deklarace se nebude t²kat html tagu, ale t°φdy.

Atribut class (t°φda) se m∙╛e pou╛φt u libovolnΘho elementu (tagu). Symbolicky:

Element se stejnou class se v dokumentu m∙╛e vyskytovat mnohokrßt (na rozdφl od ID -- identifikßtoru, o tom pozd∞ji). Potom se tento element zformßtuje podle definice.

Takto je mo╛nΘ vytvo°it si mnoho vlastnφch t°φd -- styl∙. Jß mßm nap°φklad krom∞ podtitulu nadeklarovan² formßt poznßmek, odkazov²ch li╣t a d∙le╛it∞j╣φch odstavc∙. Je mo╛nΘ toho vymyslet desφtky, to se doΦtete v kapitole o strukturovanΘm textu.

Identifikßtor

Pro jednoznaΦn² popis n∞jakΘho elementu (zejmΘna pro pot°eby skript∙) existuje univerzßlnφ atribut ID. I jemu se m∙╛e ve stylopisu p°i°adit n∞jakß deklarace, ale na rozdφl od t°φdy nezaΦφnß teΦkou, ale dvojk°φ╛kem #. V t∞le dokumentu by se element s jednφm identifikßtorem m∞l vyskytovat jenom jednou.

Kdybych v p°edchozφm p°φkladu pou╛il identifikßtoru namφsto t°φdy, deklarace by vypadala takhle:

Identifikßtor id se z hlediska CSS chovß stejn∞ jako t°φda class. Rozdφly jsou prßv∞ jen ve skriptech a v parsovßnφ dokumentu. Osobn∞ identifikßtory pro formßtovßnφ nepou╛φvßm, staΦφ mi t°φdy.

Slo╛enΘ deklarace

Hromadnß deklarace

Stylopisy umo╛≥ujφ nadeklarovat vlastnosti pro vφce element∙ najednou. Nap°φklad deklarace

obarvφ v╣echny nadpisy prvnφ, druhΘ i t°etφ ·rovn∞ na zeleno. Hromadnou deklaraci pou╛φvßm, pokud zadßvßm mnoho stejn²ch vlastnostφ pro mnoho element∙. D∙le╛itß je Φßrka mezi selektory! Kdyby tam nebyla, ╣lo by o n∞co jinΘho, toti╛ o kontextov² selektor.

Kontextovß deklarace

Tato deklarace by ud∞lala kurzφvou v╣echny odkazy uvnit° nadpis∙ t°etφ ·rovn∞ (elementy A uvnit° elementu H3).

<h3>ObyΦejn² text nadpisu s <a>odkazem
kurzφvou</a></h3>

<p>ObyΦejn² odstavec s <a>obyΦejn²m odkazem</a></p>

Odkazy v obyΦejn²ch odstavcφch to nijak neovlivnφ, stejn∞ tak obyΦejn² text trojkovΘho nadpisu.

Osobn∞ tuto vlastnost pova╛uji za nejfantastiΦt∞j╣φ a v²born∞ pou╛itelnou vlastnost CSS. Pou╛il jsem ji t°eba v p°φkladu o r∙zn²ch barvßch odkaz∙.

Sklßdßnφ styl∙

Dφky CSS se na jeden element m∙╛e navrstvit mnoho r∙zn²ch deklaracφ (proto styly kaskßdovΘ), n∞kdy i protich∙dn²ch. Jak se rozhodne, kterß deklarace p°evlßdne? Zpravidla ta poslednφ.

Kdy╛ chci, aby n∞jakß d°φv∞j╣φ deklarace p°evlßdla, napφ╣u do deklarace °et∞zec "! important". Takovß deklarace potom nebude p°ehlu╣ena ╛ßdnou pozd∞j╣φ. (Tuto vlastnost doporuΦuji pou╛φvat s rozvahou, proto╛e zp∙sobuje zmatek p°i pozd∞j╣φm lad∞nφ designu.)

Pseudoelementy

Ve specifikaci CSS1 se vyskytujφ pseudoelementy :first-line a :first-letter. Znamenajφ prvnφ °ßdek a prvnφ pφsmeno. Nap°φklad zßpis:

by m∞l zp∙sobit, ╛e odstavce budou mφt prvnφ °ßdek modr² a prvnφ pφsmeno dvakrßt v∞t╣φ.

Ale ve v∞t╣in∞ prohlφ╛eΦ∙ to nefunguje. Hodn∞ lidφ nad tφm strßvilo x hodin ve snaze to rozchodit. Je to marnΘ.

Z prohlφ╛eΦ∙ to podporujφ pouze Mozilla 5, NN 6 a Internet Explorer 5.5 (nikoliv IE 5.0)

Shrnujφcφ p°φklad

Ve stylopisu (v hlaviΦce Φi v externφm souboru) se mohou vyskytovat i takovΘhle v∞ci:

Doufßm, ╛e v²znam je z°ejm². V╣echno to funguje. D∙le╛itΘ je v p°φkladu snad jen to, ╛e se m∙╛e jeden element deklarovat vφcekrßt a ╛e kontextovß deklarace se m∙╛e kombinovat s t°φdami a pseudot°φdami.

NejistΘ znaky

Ve jmΘnech t°φd a identifikßtor∙ se vyvarujte pou╛φvßnφ podtr╛φtka _ (a rad∞ji i Φe╣tiny a jin²ch pochybn²ch znak∙). Internet Explorer 5 podtr╛φtko v nßzvu t°φdy nebo ID snese a sprßvn∞ zobrazφ, ╛ßdn² jin² prohlφ╛eΦ ale ne!!!