Různé barvy odkazů 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ě:

Obsahem tohoto odstavce může být libovolné HTML, formátování se provede pomocí ".lista {...}" ve stylopisu.

Výpis zdroje

.lista {background-color: blue; color: white} /*Modré pozadí a bílé písmo */

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ší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:

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ě):

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.

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.