 |
pomocφ CSS
N∞kdy m∙╛ete chtφt obarvit odkazy v r∙zn²ch Φßstech strßnky r∙zn∞. V normßlnφm textu je chcete mφt t°eba modrΘ a v odkazovΘ li╣t∞ bφle na modrΘm pozadφ. Pro tento ·kol se bßjeΦn∞ hodφ CSS. Je to tΘm∞° vzorov² p°φklad.
Je dobrΘ urΦit novou t°φdu jmΘnem "lista". U odstavce, kter² tvo°φ li╣tu, jenom napφ╣u p°φslu╣nost k tΘto t°φd∞:
<p class="lista">Text li╣ty s <a
href="n∞kam">odkazem</a></p>
Obsahem tohoto odstavce m∙╛e b²t libovolnΘ HTML, formßtovßnφ se provede pomocφ ".lista {...}" ve stylopisu.
<html><head><title>R∙znΘ barvy odkaz∙</title>
<style><!--
a {color: blue} /* Odkazy budou modrΘ */
.lista {background-color: blue; color: white} /*ModrΘ pozadφ a bφlΘ pφsmo */
.lista a {color: white} /* Odkazy (a) uvnit°
t°φdy lista budou bφlΘ */
--></style>
</head>
<body>
<p>Normßlnφ odstavec s n∞jak²m <a
href="n∞kam">odkazem</a>.</p>
<p class="lista">Text li╣ty s <a
href="jinam">odkazem</a></p>
</body></html>
P°φklad si m∙╛ete zobrazit v prohlφ╛eΦi. Samoz°ejm∞ by to je╣t∞ cht∞lo vyladit, o tom nφ╛e.
V p°φkladu jsem pou╛il kontextovΘ deklarace. To je to ".lista a". ╪φkß, ╛e nßsledujφcφ styl se bude aplikovat na v╣echny odkazy (element "a") uvnit° elementu, kter² mß nastaveno class="lista". V tomto p°φpad∞ °φkßm, ╛e ty odkazy budou bφlΘ {color: white}.
Je d∙le╛itΘ, ╛e specißlnφ deklarace odkaz∙ v li╣t∞ nßsledovala a╛ za deklaracφ obecn²ch odkaz∙. V CSS toti╛ platφ, ╛e co je pozd∞ji, je platn∞j╣φ (proto jsou to "kaskßdovΘ" styly). Kdybych to napsal v opaΦnΘm po°adφ, byly by v╣echny odkazy modrΘ.
V praxi by se to muselo doplnit o v²pis v╣ech pseudot°φd odkaz∙. Jde o to, ╛e jinak se barvφ odkazy nav╣φvenΘ, nenav╣tφvenΘ, aktivnφ a p°ejφ╛d∞nΘ my╣φ. O tom u╛ jsem psal jinde. Nynφ jen tolik, ╛e se to samoz°ejm∞ m∙╛e rozepsat, t°eba takhle:
a:link {color: blue} /* nenav╣tφven² */
a:visited {color: purple} /* nav╣tφven²*/
.lista a:visited, .lista a:link {color: white} /* oba typy v li╣t∞ */
a:hover, .lista a:hover {color: red} /* odkazy p°ejφ╛d∞nΘ my╣φ */
V╣im∞te si, ╛e jsem pou╛il hromadnou deklaraci, ve kterΘ se elementy se stejn²m stylem odd∞lujφ Φßrkou.
Zrovna v tomto p°φkladu by n∞komu mohlo vadit, ╛e se v Netscapu 4 zobrazuje pozadφ pouze pod textem a nikoliv pod cel²m odstavcem. Proto je dobrΘ p°idat deklaraci, kterß p∙sobφ doslova magicky (a nevysv∞tliteln∞):
.lista {border: none; margin: 0px}
Tato deklarace zp∙sobφ, ╛e Netscape vykresluje pozadφ pod cel²m obdΘlnφkov²m prostorem odstavce. Mo╛nΘ jsou jakΘkoliv platnΘ deklarace marginu a borderu.
Aby se text li╣ty nelepil na okraje modrΘho pozadφ, m∙╛e se pou╛φt vlastnost padding - vnit°nφ okraj. Ten ud∞lß na okraji li╣ty prostorovou mezeru, kterß ale je╣t∞ bude pat°it do li╣ty, tak╛e se podbarvφ mod°e.
.lista {padding: 10px}
Vy╣perkovßnφ li╣ty se dß ud∞lat r∙zn²mi zp∙soby, to u╛ nechßm na vßs. Zatφm jsem v╣echny uvßd∞nΘ deklarace shrunul do lep╣φho p°φkladu, kter² si m∙╛ete zobrazit a zdroj prostudovat sami.
Toto je li╣ta, t°eba╛e s trochu jin²m nastavenφm stylu, ne╛
uvßdφm v p°φkladu nebo v lep╣φm p°φkladu.
Vizte tΘ╛: ·vod do CSS, t°φdy a
identifikßtory, zdokonalenφ odkaz∙, CSS prakticky
Obsah
Hledßnφ
Zßkladnφ kurs
Editory
HTML tipy
Provoz webu
CSS styly
Jak psßt web:
http://dusan.pc-slany.cz/internet/
Pφ╣e Yuh∙: autorova strßnka, mail: dusan@pc-slany.cz
Poslednφ aktualizace 27.07.2001