vyhodnocovßnφ konflikt∙ CSS deklaracφ
Pravidla kaskßdovßnφ - P°ednastaven² vzhled - D∞diΦnost - Priorita vnit°nφho elementu - Pozd∞j╣φ vyhrßvß - Vlastnφ nastavenφ
Dlouho jsem nemohl pochopit, proΦ se kaskßdovΘ styly jmenujφ kaskßdovΘ. Ne ╛e bych to te∩ ·pln∞ chßpal, ale pokusφm se alespo≥ naznaΦit.
CSS vznikalo v dob∞, kdy v HTML jazyce panoval stra╣liv² zmatek. Objevovaly se novΘ tagy, kterΘ m∞ly za cφl jenom formßtovat text urΦit²m zp∙sobem, nebyl v tom ╛ßdn² systΘm. Byla pot°eba vytvo°it univerzßlnφ systΘm, kter² by deklaroval formßtovßnφ jak mal²ch kousk∙ textu (obdoba tagu font), tak cel²ch blok∙ textu (obdoba nap°. tagu basefont) nebo dokonce soustav dokument∙.
Slo╛it² systΘm je nßchyln² k chybßm. Znßmou nev²hodou HTML jazyka bylo, ╛e nem∞l mechanismus na °e╣enφ konfliktnφch a ne·pln²ch deklaracφ. CSS s n∞Φφm takov²m poΦφtß u╛ od zaΦßtku a dokonce to mß ve jmΘn∞ (CSS = Cascading Style Sheets).
Je to na╣t∞stφ velmi logickΘ:
Zvyk je ╛eleznß ko╣ile znamenß, ╛e kaskßdovΘ styly respektujφ p∙vodnφ vzhled html element∙. Pokud styly n∞co nem∞nφ, tak to z∙stane. Nap°φklad kdy╛ u tagu H2 zm∞nφm barvu
h2 {color: green}
tak se sice zm∞nφ barva, ale z∙stane p∙vodnφ velikost pφsma. Prost∞ co styly v²slovn∞ neupravujφ, to z∙stßvß.
Pod°φzen² element p°ejφmß formßtovßnφ nad°azenΘho elementu. Nap°φklad kdy╛ se nastavφ barva pφsma t∞la dokumentu na Φervenou,
body {color: red}
tak budou ΦervenΘ i v╣echny odstavce, prost∞ v╣echno.
N∞kterΘ vlastnosti se ned∞dφ (nap°φklad border). Ve specifikaci je to u ka╛dΘ vlastnosti napsßno.
N∞kterΘ prohlφ╛eΦe v d∞diΦnosti chybujφ (nap°. obsah tabulky ned∞dφ nastavenφ body).
Bli╛╣φ ko╣ile ne╛ kabßt znamenß, ╛e v p°φpad∞ konfliktu vyhrßvß ten element, kter² je "vnit°n∞j╣φ", je blφ╛e formßtovanΘmu obsahu. Kdy╛ mßm t°eba zßpis
<span style="color: red"><span
style="color: green">obsah</span></span>,
tak obsah bude zelen², nikoliv Φerven². P°ebφjφ to i d∞diΦnost (s v²jimkou vlastnosti display: none).
Pokud se zapisuje vlastnost n∞jakΘho elementu vφcekrßt za sebou (a t°eba r∙zn∞), tak platφ ten zßpis, kter² je uveden nejpozd∞ji. To se stßvß hlavn∞ tak, ╛e n∞co deklaruji ve stylopisu strßnky a pak to pot°ebuji na urΦitΘm mφst∞ zm∞nit.
<style>
p {color: red; font-style: italic}
</style>
<body>
<p style="color: blue">modr² odstavec kurzφvou</p>
<p>normßlnφ Φerven² odstavec kurzφvou</p>
</body>
Vlastnosti, kterΘ nejsou m∞n∞ny, z∙stßvajφ v platnosti (v p°φkladu ta kurzφva -- font-style: italic nebyla p°epsßna) Platφ poslednφ zadßnφ (barva color: byla p°epsßna).
Dß se nastavit, aby vlastnost nebyla pozd∞ji p°epsßna. D∞lß se to klauzulφ !important za zßpisem CSS vlastnosti. Nap°.
h1 {color: red !important}
h1 {color: blue}
<h1>Nadpisy budou ΦervenΘ</h1>, i kdy╛ byla snaha je zamod°it. Pokud si dob°e pamatuji, Netscape !important nebere a ignoruje. P°i pou╛φvßnφ !important je nutnΘ b²t opatrn², proto╛e kdy╛ se na to zapomene, tak se pak d∞sn∞ blb∞ ladφ dlouhΘ stylopisy.
Modernφ prohlφ╛eΦe dovolujφ u╛ivateli pou╛φvat p°i Φtenφ strßnek vlastnφ p°edlohu se styly. Nap°φklad v Internet Exploreru se to d∞lß v Nßstrojφch > Mo╛nosti Internetu > karta ObecnΘ > Usnadn∞nφ > Formßtovat dokumenty pomocφ vlastnφch p°edloh se styly. Sem si ka╛d² m∙╛e zadat sv∙j *.css soubor a v╣echny prohlφ╛enΘ strßnky jφm budou ovlivn∞ny.
Pou╛φvß to mßlokdo, ΦastΘ je to pouze u slabozrak²ch. Pßr znßm²ch to pou╛φvß pro eliminaci nesnesiteln²ch barevn²ch efekt∙ Φten²ch strßnek.
Pokud je takov² soubor dob°e napsßn, dovoluje dost zm∞nit vizß╛ strßnek. Uvedenß pravidla majφ toti╛ nejvy╣╣φ prioritu (dß se to chßpat i tak, ╛e jsou uvedena nakonec), nezm∞nφ ale to, co mß nastaveno !important. I to je d∙vod, proΦ rad∞ji moc nepou╛φvat !important.
Odflßknut² p°φklad: p°φklad konfliktnφch deklaracφ
o tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek