<p id='prepend'>KaskßdovΘ styly (CSS) jsou na souΦasn²ch webech Φφm dßl tφm vφce vyu₧φvßny, a proto se zv∞tÜuje i rozsah a komplexnost stylov²ch p°edpis∙. Je tedy stßle nutn∞jÜφ psßt CSS tak, abychom se v n∞m vyznali, a to i po delÜφ dob∞ nebo ve v∞tÜφch t²mech. A prßv∞ o tom je tento Φlßnek.</p>
<p>┌vodem bych rßd p°edeslal, ₧e v tomto Φlßnku budu mluvit p°evß₧n∞ o obecn∞ v₧it²ch postupech, jak psßt CSS p°ehledn∞ a logicky. V n∞kter²ch p°φpadech ale budu vychßzet i ze sv²ch zkuÜenostφ a z toho, jak to p°ipadß logickΘ a p°ehlednΘ <em>mn∞ osobn∞</em>. Samoz°ejm∞ tyto postupy nikomu nevnucuji ani netvrdφm, ₧e bez nich bude vaÜe CSS nep°ehlednΘ. Pokud ji₧ mßte za₧ity vlastnφ postupy, klidn∞ u nich z∙sta≥te - d∙le₧itΘ je, aby vßÜ zßpis byl p°ehledn² a logick² pro vßs (a p°φpadn∞ pro n∞koho, kdo bude CSS zßpis po vßs Φφst).</p>
<h3>Struktura stylovΘho p°edpisu</h3>
<p>Nejprve si °ekneme n∞co o tom, jak stylov² p°edpis uspo°ßdat. Stylov² p°edpis je tvo°en pravidly a takzvan²mi @-pravidly (et-pravidly).</p>
<div class='list'>
<ol>
<li>Na ·plnΘm zaΦßtku by se m∞la nachßzet @-pravidla <samp>@charset</samp> a <samp>@import</samp> (v tomto po°adφ). DoporuΦenφ CSS jejich pou₧itφ jinde nep°ipouÜtφ.</li>
<li>Jako dalÜφ by m∞la nßsledovat pravidla formßtujφcφ prvky obecn∞ (tedy bez identifikßtor∙ a t°φd) - jako prvnφ pravidlo pro <samp><body></samp> a dßle pravidla pro:
<ul>
<li>nadpisy,</li>
<li>seznamy (<samp><ul></samp>, <samp><ol></samp> a <samp><dl></samp>),</li>
<li>odstavce,</li>
<li>odkazy,</li>
<li>v²znamovΘ prvky (<samp><em></samp>, <samp><dfn></samp>, <samp><cite></samp>, <samp><abbr></samp>, <samp><blockquote></samp>...),</li>
<li>formulß°ovΘ prvky (<samp><form></samp>, <samp><fieldset></samp>, <samp><input></samp>...),</li>
<li>tabulky...</li>
</ul>
</li>
<li>Dßle je vhodnΘ uvΘst obecnΘ t°φdy - tedy ty, kterΘ pou₧φvßme u r∙zn²ch prvk∙ a nejsou s ₧ßdn²m spojeny, nap°φklad:
<div class='sample'>
.zvyrazneni {
<br /> font-weight: bold;
<br />}
</div>
</li>
<li>Jako dalÜφ p°ipadajφ pravidla formßtujφcφ t°φdy spojenΘ s urΦit²m prvkem:
<div class='sample'>
p.kod {
<br /> font-family: monospace;
<br />}
</div>
</li>
<li>Jako poslednφ potom uvßdφme pravidla pro konkrΘtnφ prvky urΦenΘ sv²m <samp>id</samp>:
<div class='sample'>
#navigace {
<br /> border: 1px solid blue;
<br />}
</div>
Tyto prvky byste m∞li uvßd∞t v urΦitΘm po°adφ, nap°φklad nejd°φve zformßtovat logo, potom hlavnφ obsah strßnky a nakonec navigaci - m∙₧ete pou₧φt i po°adφ, v jakΘm se prvky nachßzejφ v k≤du strßnky.
</li>
</ol>
</div>
<p>Pokud se ve vaÜem p°edpisu vyskytujφ @-pravidla <samp>@media</samp>, doporuΦuji je uvΘst na ·plnΘm konci p°edpisu, dφky Φemu₧ budou moci pravidla zde uvedenß bez problΘm∙ p°epsat ostatnφ pravidla v p°edpisu (kterß jsou obvykle urΦena pro vÜechna mΘdia).</p>
<h3>Jak psßt pravidla</h3>
<p>Pro pravidla se obvykle pou₧φvß tento zßpis:</p>
<div class='sample'>
selektor {
<br /> prvnφ deklarace;
<br /> druhß deklarace;
<br /> ...
<br />}
</div>
<p>Tedy nap°φklad:</p>
<div class='sample'>
#clanek p#uvod {
<br /> font-size: 120%;
<br /> font-weight: bold;
<br />}
</div>
<p>Deklarace jsou odsazeny dv∞ mezery od okraje, co₧ je obvykle pova₧ovßno za "tak akorßt". Pou₧φvat ale samoz°ejm∞ m∙₧ete i menÜφ nebo v∞tÜφ odsazenφ.</p>
<p>D∙le₧itΘ je, ₧e se selektor i deklarace vlastnostφ nachßzejφ na samostatn²ch °ßdcφch. To pravidlo zp°ehled≥uje - na prvnφ pohled vidφte, o kter² prvek se jednß a kterΘ vlastnosti jsou nastavovßny. Je zde takΘ prostor pro komentß°e, kterΘ se mohou nachßzet hned vedle selektoru nebo vedle deklarace, kterΘ se t²kajφ.</p>
<h3>St°ednφk pat°φ za ka₧dou deklaraci</h3>
<p>DoporuΦenφ CSS °φkß, ₧e st°ednφk slou₧φ jako odd∞lovaΦ jednotliv²ch deklaracφ, za poslednφ deklaracφ v pravidle se tedy uvßd∞t nemusφ. Jß vßm ale doporuΦuji uvßd∞t ho za vÜemi deklaracemi, tedy i za tou poslednφ. Jinak se zßkonit∞ stane, ₧e budete muset Φasem jednu deklaraci p°idat a na st°ednφk u₧ zapomenete:</p>
<div class='sample'>
p.obrazek {
<br /> color: gray;
<br /> font-size: 80% /* tato deklarace byla poslednφ */
<br /> text-transform: uppercase;
<br />}
</div>
<p>A nev∞°ili byste, jak dlouho vßm bude trvat, ne₧ odhalφte, ₧e prßv∞ zapomenut² st°ednφk je p°φΦinou ÜpatnΘho zobrazenφ...</p>
<h3>Dodr₧ujte po°adφ vlastnostφ</h3>
<p>V pravidle je jedno, kterou vlastnost uvedete d°φve a kterou a₧ pozd∞ji. V zßjmu p°ehlednΘho zßpisu je ale dobrΘ dodr₧ovat alespo≥ n∞jakΘ po°adφ. Jß obvykle uvßdφm pravidla v nßsledujφcφ posloupnosti:</p>
<div class='list'>
<ol>
<li>barva pφsma a vlastnosti pozadφ (<samp>color</samp>, <samp>background-color</samp>...),</li>
<p>MΘn∞ pou₧φvanΘ Φi hodn∞ specifickΘ vlastnosti (<samp>vertical-align</samp>, <samp>cursor</samp>, <samp>list-style</samp>, <samp>border-collapse</samp> a dalÜφ) uvßdφm nakonec nebo tam, kde se mi v konkrΘtnφm pravidle zdajφ logickΘ.</p>
<p>Se sprßvn²m po°adφm vlastnostφ to ale p°φliÜ nep°ehßn∞jte, abyste nestrßvili nad jejich °azenφm vφce Φasu ne₧ nad stylovßnφm webu. Je pouze dobrΘ alespo≥ podv∞dom∞ n∞jak² po°ßdek dodr₧ovat, abyste u rozsßhl²ch pravidel nemuseli prochßzet vÜechny deklarace, kdy₧ t°eba chcete zjistit velikost pφsma.</p>
<h3>Syntaxe ID selektor∙</h3>
<p>U ID selektor∙ je povolen² jak zßpis <samp>jmΘno-prvku#ID-prvku</samp> (nap°φklad <samp>p#uvod</samp>), tak i <samp>#ID-prvku</samp> (nap°φklad <samp>#uvod</samp>).</p>
<p>Logicky lepÜφm zßpisem je ten prvnφ, tedy i se jmΘnem prvku - °φkß nßm toti₧, jak² prvek formßtujeme, bez toho, abychom se museli dφvat do k≤du strßnky. V∞tÜinou ale pou₧φvßme ID selektory u prvk∙ <samp><div></samp>, ideßlnφ tedy je pou₧φvat jmΘna u vÜech prvk∙ krom∞ <samp><div></samp> (nap°φklad na prvek <samp><div id="logo"></samp> se tedy budeme ve stylu odkazovat pomocφ <samp>#logo</samp>, zatφmco na prvek <samp><p id="uvod"></samp> pomocφ <samp>p#uvod</samp>). Jednak si tφm uÜet°φme psanφ a jednak se nßm bude snadn∞ji hledat ·sek stylu, kter² formßtuje konkrΘtnφ objekt, t°eba navigaci (nebudeme se muset zastavovat u ka₧dΘho selektoru zaΦφnajφcφho na <samp>div#</samp>). Zßrove≥ ale budeme moci z ka₧dΘho ID selektoru poznat, o jak² se jednß prvek.</p>
<h3>U ID selektor∙ uvßd∞jte p°edky prvku</h3>
<p>Ka₧d² konkrΘtnφ prvek (dop°edu vφme, o jak² prvek se jednß a kde je ve strßnce pou₧it) by m∞l b²t v selektoru za°azen do struktury strßnky - m∞ly by b²t uvedeny prvky, uvnit° kter²ch se nachßzφ. Dφky tomu se nebudeme muset dφvat do k≤du strßnky, kdy₧ nap°φklad budeme chtφt zjistit, od kter²ch prvk∙ p°ebφrß nßÜ prvek d∞diΦnΘ vlastnosti. TakΘ bude nßÜ stylov² p°edpis logiΦt∞jÜφ a pochopiteln∞jÜφ.</p>
<p>Pokud je t°eba souΦßstφ navigace vyhledßvacφ formulß° a my chceme formßtovat pole pro zadßnφ textu, kterΘ se zde nachßzφ, m∞li bychom pou₧φt nßsledujφcφ pravidlo:</p>
<p>Pravidla byste takΘ m∞li uvßd∞t v po°adφ podle jejich nejvyÜÜφho p°edka, tak₧e vÜechny prvky, kterΘ jsou uvnit° navigace, by se ve stylovΘm p°edpisu m∞ly nachßzet na jednom mφst∞.</p>
<h3>Jak nastavovat rßmeΦky, v²pln∞ a okraje</h3>
<p>Pro nastavovßnφ rßmeΦk∙, v²plnφ a okraj∙ se v∞tÜinou pou₧φvajφ takzvanΘ <em>sdru₧enΘ vlastnosti</em> (<samp>margin</samp>, <samp>border-bottom</samp> a dalÜφ), kterΘ nastavφ v₧dy vφce vlastnostφ najednou (nap°φklad velikost okraje na vÜech stranßch prvku).</p>
<p>U vlastnostφ rßmeΦk∙ je obvykle vhodnΘ nejprve nastavit vÜechno pomocφ vlastnosti <samp>border</samp> a potom zahrnout do zßpisu p°φpadnΘ odliÜnosti (pozd∞jÜφ deklarace p°ebijφ ty d°φv∞jÜφ). Pokud nap°φklad chceme na hornφ, levΘ a dolnφ stran∞ prvku pou₧φt Φern² teΦkovan² rßmeΦek a na pravΘ stran∞ Φerven² tvo°en² dv∞ma linkami, pou₧ijeme tento zßpis...</p>
<div class='sample'>
#prvek {
<br /> border: dotted black;
<br /> border-right: double red;
<br />}
</div>
<p>...a ne tento zbyteΦn∞ dlouh² zßpis:</p>
<div class='sample'>
#prvek {
<br /> border-top: dotted black;
<br /> border-left: dotted black;
<br /> border-bottom: dotted black;
<br /> border-right: double red;
<br />}
</div>
<p>U vlastnostφ pro velikost okraje a v²pln∞ se v∞tÜinou pou₧φvß k nastavenφ odliÜn²ch hodnot pro r∙znΘ strany vlastnost <samp>margin</samp> respektive <samp>padding</samp>:</p>
<div class='sample'>
#prvek {
<br /> padding: 10px 20px 10px 10px;
<br /> margin: 1em 0 2em;
<br />}
</div>
<h3>Pou₧φvejte komentß°e</h3>
<p>Jednφm z nejd∙le₧it∞jÜφch pravidel pro vytvo°enφ logickΘho a p°ehlednΘho CSS je pou₧φvßnφ komentß°∙. Na ty byste nem∞li zapomφnat u ₧ßdn²ch slo₧it∞jÜφch konstrukcφ a hlavn∞ u <em>hack∙</em> - ty jsou Φasto tak nelogickΘ, ₧e pomalu u₧ po t²dnu nevφte, proΦ jste ten kter² hack pou₧ili.</p>
<p>Pomocφ komentß°∙ byste takΘ m∞li cel² stylov² p°edpis rozd∞lit na Φßsti, nap°φklad na Φßst, kde se formßtujφ odkazy, na Φßst, kde se formßtuje navigace a podobn∞ (jak jsme si ji₧ °ekli na zaΦßtku tohoto Φlßnku).</p>
<p>A to je vÜe k logickΘmu a p°ehlednΘmu CSS, tedy z mojφ strany. Doufßm, ₧e pro vßs bude tato chvφle naopak startovacφm bodem...</p>
<li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3380'>VyΦiÜt∞nφ tabulky z MS Wordu v MSIE JavaScriptem</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3383'>Kompletnφ pr∙vodce XSLT - °φzenφ toku transformace</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3385'>èt∞pßnka Sunkovß: Jeden za vÜechny, vÜichni za jednoho</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3379'>SMARTY - cache, WAP a bezpeΦnost</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3381'>╚eskß on-line reklama - internet a chu¥ na bagety</a></li>
</ul>
</div>
</div>
<div class='page-right-box cauldron'>
<h3>Diskuznφ kotel</h3>
<div class='page-right-box-in'>
<ul>
<li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3357' title='(57 komentß°∙)'>Se°azenφ tabulky JavaScriptem snadno a rychle</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3363' title='(29 komentß°∙)'>JavaScript, programujeme internetovΘ aplikace</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3364' title='(29 komentß°∙)'>Kam pat°φ menu</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3368' title='(20 komentß°∙)'>Eric Meyer o CSS - Ovlßdn∞te kaskßdovΘ styly!</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3380' title='(16 komentß°∙)'>VyΦiÜt∞nφ tabulky z MS Wordu v MSIE JavaScriptem</a></li>
