Různé barvy odkazů

pomocí CSS a class

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 na použití tříd (class).

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.

Výpis zdroje

<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.

Kontextová deklarace

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}.

Pořadí deklarací

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é.

Pseudotřídy

V praxi by se to muselo doplnit o výpis všech pseudotříd odkazů. Jde o to, že jinak se barví odkazy navští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.

Vyladění v NS 4

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.

Okraje lišty - padding

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.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.