 |
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Zßkladnφ zp∙soby p°i°azenφ stylu
NejjednoduÜÜφm zp∙sobem p°i°azenφ stylu k oznaΦkovanΘ Φßsti dokumentu je uvedenφ jmΘna p°φsluÜnΘ znaΦky, tj. nap°φklad definice stylu odstavce bude vymezena p {...}. Podobn∞ lze p°i°adit styl znaΦkßm s identifikßtorem (obsahujφ atribut id) Φi spadajφcφ do n∞jakΘ t°φdy (obsahujφ atribut class>), tj. ke znaΦce <p id="odstavec01" class="odstavce"> lze stylovΘ vlastnosti p°i°adit takΘ pomocφ nßsledujφcφch definic:
.odstavce {...}
Z hlediska struktury webovΘho dokumentu lze p°i°azenφ stylu ke znaΦkßm omezit na zßklad∞ toho, zda jsou tyto znaΦky obsa₧eny vájinΘ znaΦce, podle nßsledujφcφ definice budou Φervenß jenom ta zv²razn∞nφ, kterß jsou obsa₧ena váodstavcφch:
V∞tÜφ flexibilitu v p°i°azovßnφ styl∙ na zßklad∞ struktury dokumentu vÜak CSS 1 nenabφzφ.
Hv∞zdiΦka na scΘn∞
Hlavnφm p°φnosem druhΘ verze CSS je zßstupn² znak * nahrazujφcφ jak libovoln² element (tj. znaΦku) v dokumentu, tak libovoln² (jeden a vφce) poΦet ·rovnφ element∙ (tj. hloubku zano°enφ jednΘ znaΦky uvnit° jin²ch znaΦek). Podle zadßnφ:
budou Φervenß jenom ta zv²razn∞nφ, kterß nejsou p°φmo obsa₧ena v t∞le webovΘ strßnky (ale jsou nap°φklad v n∞jakΘm odstavci):
<em>Nebude Φerven∞</em>
<p><em>Bude Φerven∞</em></p>
</body>
Pokud bychom naopak cht∞li aplikovat styl pouze na p°φmΘ potomky, lze to za°φdit symbolem >:
<em>Bude Φerven∞</em>
<p><em>Nebude Φerven∞</em></p>
</body>
Jß na brßchu...
Krom∞ posuzovßnφ zßvislosti rodiΦ/potomek (tj. vno°enosti znaΦek do sebe), lze v CSS2 pomocφ symbolu + up°es≥ovat takΘ sourozeneck² vztah, tj. zda znaΦce, kterΘ chceme p°i°adit styl, p°edchßzφ jinß znaΦka (Φi vφcero znaΦek):
Podle tΘto definice bude prvnφ °ßdek odsazen pouze u odstavce, kter² bezprost°edn∞ nßsleduje za nadpisem prvnφ ·rovn∞:
<h1>Nadpis</h1>
<p>Odstavec s odsazen²m °ßdkem.</p>
<p>V tomto ani v p°φpadn²ch dalÜφch odstavcφch ji₧ °ßdek odsazen nebude.</p>
</body>
Specißln∞ pro prvnφ a poslednφ elementy v °ad∞ sourozeneck²ch znaΦek existujφ up°es≥ujφcφ pseudot°φdy first-child a last-child, kterΘ lze pou₧φt nßsledujφcφm zp∙sobem:
body > *:last-child {margin-bottom: 3em}
P°ed nadpisem druhΘ ·rovn∞ bude zv∞tÜeno odsazenφ pouze v p°φpad∞, ₧e jej nep°edchßzφ n∞jakß znaΦka na stejnΘ ·rovni. Zßrove≥ bude zv∞tÜeno odsazenφ za poslednφ znaΦkou na strßnce (a¥ u₧ je tato znaΦka jakßkoli). Pseudot°φdu last-child sice specifikace CSS 2 v∙bec nedefinuje, v Mozille p°esto funguje.
Kdy₧ majφ atributy co °φci
Dßle lze pomocφ CSS 2 omezit p°i°azenφ stylu ke znaΦce na zßklad∞ atribut∙ tΘto znaΦky; vyhodnocovßnφ atribut∙ se zapisuje do hranat²ch zßvorek:
a[target="_blank"] {color: blue}
Takto budou veÜkerΘ kotvy, kterΘ figurujφ jako nßv∞Ütφ, vypsßny zelen∞ (bez ohledu na identifikßtor nßv∞Ütφ, tj. hodnotu atributu name) a veÜkerΘ odkazy, kterΘ otevφrajφ novΘ okno, mod°e (zde tedy ji₧ pouze v p°φpad∞, ₧e hodnota atributu target je _blank).
Pokud je d∙le₧it² pouze atribut znaΦky a na znaΦce samotnΘ nezßle₧φ, lze samoz°ejm∞ pou₧φt hv∞zdiΦku jako zßstupn² symbol, p°iΦem₧ specifikace ji povoluje vynechat, zßpis *[lang="cs"] je tedy ekvivalentnφ s [lang="cs"]. VÜimn∞me si, ₧e tφmto zp∙sobem je mo₧nΘ nahradit p°i°azenφ styl∙ podle identifikßtoru Φi t°φdy, jak je p°edstaveno v prvnφm p°φklad∞ tohoto Φlßnku:
[class="odstavce"] {...}
V praxi je vÜak kv∙li kompatibilit∞ z°ejm∞ vhodn∞jÜφ zp∙sob podle CSS 1.
KoneΦn∞ dodejme, ₧e vÜechny v²Üe uvedenΘ techniky p°i°azovßnφ styl∙ lze vÜelijak kombinovat pro dosa₧enφ po₧adovan²ch v²sledk∙.
A co na to prohlφ₧eΦe?
V²sledky zkouÜenφ popsan²ch p°i°azovacφch technik v r∙zn²ch prohlφ₧eΦφch jsou pom∞rn∞ jasnΘ. Mozilla v²Üe popsanß pravidla zvlßdß beze zbytku (testovßno na verzi 1.1), Opera (verze 6.05) a₧ na pseudot°φdy takΘ. Kamenem ·razu je Internet Explorer, kter² ₧ßdnou z p°i°azovacφch technik CSS2 neumφ ani v poslednφ verzi 6.0.