 |
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
|
Hledání
Jak psát web:
http://dusan.pc-slany.cz/internet/
Píše Yuhů: autorova stránka,
mail: dusan@pc-slany.cz
Poslední aktualizace 24.03.2002