---

Hypertextové odkazy - styly

Dnes si ukážeme styly pro naše odkazy. Zaměříme se na pseudotřídy :link, :visited, :active a :hover, kterými můžeme jediněčně stylizovat hypertextové odkazy pro různé situace.

Odkazy s atributem href

a:link {
color: #444;
text-decoration: none;
font-weight: bold;
}

Tato deklarace stylizuje všechny značky odkazů, které používají atribut href . Odkaz bude mít tmavě šedou barvy, bude tučný a nebude podtržený. Stejně dobře můžeme použít výchozí styl podtržení ( text-decoration: underline; ) nebo styl nadtržení ( text-decoration: overline; ). Samozřejmě můžeme použít i oba dva zároveň ( text-decoration: underline overline; ).

Výsledek: Nedávno jsem shlédl zajímavý článek o cibuli.

Obrázky v pozadí

Naše možnosti stylizování odkazů jsou obrovské. Na odkazy můžeme deklarovat stejná pravidla jako na mnoho ostatních jiných prvků. Můžeme nastavovat barvy pozadí, obrázky v pozadí, rámečky atd.

a:link {
padding-left: 20px;
background: url('ikona.gif') no-repeat left 50%;
}

Výsledek: přečtěte si článek Návod jak vypěstovat cibuli.

Zde vidíte malou ikonku, která může být zarovnána doleva nebo doprava kolem odkazu. Zarovnání ikony jsme nastavili vlevo ( left ) a vertikálně doprostřed ( 50% ). Dále jsme také nastavili 20 pixelovou výplň vlevo, aby ikonu nepřekrýval žádný text.

Navštívené odkazy

Deklarace pravidla a:visited usnadní uživatelům orientaci v tom, na kterém odkazu už dříve byli. Na tuto pseudotřídu lze aplikovat mnoho pravidel CSS, čímž dáme navštíveným odkazům jejich vlastní jedinečný styl.

a:visited {
color: #888;
}

Tato deklarace nám zajistí, aby již navštívené odkazy měly šedou barvu. Velice důležité je vytvořit alespoň nepatrnou změnu, než se stylizování navštívených odkazů úplně vyhýbat. Sám mám nejradši vytvářet pro tuto pseudotřídu pravidla, která zajišťují slabší odstín ještě nenavštíveného odkazu. Výpadá to vskutku lépe, než používat úplně jinou barvu než u pseudotřídy :link . Pak se může stát že při úplné změně barvy se někdy uživatel v odkazech ztratí a nebude vědět které jěště nenavštívil a které už ano.

Přejetí myší

Další velice šikovná pseudotřída je :hover , která aplikuje pravidla pči přejetí myši nad odkazem. I zde jsou možnosti použití pravidel CSS celkem neohraničené.

a:link {
color: #008000;
text-decoration: #008000;
border-bottom: 1px dotted #008000;
}

a:hover {
color: #4682b4;
border-bottom: 1px solid #4682b4;
}

První deklarace nastaví, aby odkaz byl zelený a pod ním bylo zelené tečkované ohraničení. Pravidlo text-decoration: #008000 zajistí aby se nám výchozí nastavení klidilo z cesty. Druhá deklarace nastaví, že při peřejetí myši nad odkazem se změní text na modrou barvu steelblue a ohraničení nabude podoby nepřerušované čáry. Pokud si s vytvářením různých pravidel vyhrajete, budete sami překvapeni čeho všeho se dá pomocí CSS dosáhnout.

Tečkované, čárkované nebo úplné ohraničení?

Jak už jste asi zjistili pokud použijeme v pravidlu border-bottom hodnotu solid , dostaneme ohraničení s plnou čárou. Hodnota dashed představuje čárkované ohraničení a dotted tečkované. Nastává zde však problém s hodnotou dotted , která bude mít tloušťku 1px ( border-bottom: 1px dotted #000 ), protože Internet Explorer pro Windows zobrazí toto ohraničení jako přerušovanou čáru ( dashed ). Je to sice nepříjemné, ale myslím že to je chyba prohlížeče a my bychom se kvůli němu neměli této deklaraci vyhýbat.

Aktivní odkazy

Poslední pseudotřída, kterou jsme ještě neprobrali je :active , která se aktivuje po kliknutí myší na odkaz.

a:active {
color: #8b0000;
}

Toto pravidlo říká prohlížeči, aby se po kliknutí myší na odkaz změnila barva odkazu na tmavě červenou. Zde bych doporučoval narozdíl od pseudotřídy :visited nastavit barvu na rozdílnou od výchozí barvy odkazu. Pro uživatele to může být doplňkovou vizuální pomůckou k rozpoznání, že se rozhodl vydat se na příslušné místo určení a že opravdu na odkaz klikl.

Shrnutí

Pořadí ve kterém jsem různé stavy odkazů popisoval nebylo zcela náhodné. Jejich seřazení se musí dodržovat kvůli tomu, aby neanulovaly jedna druhou a aby se chovaly zcela správně. Takže pořadí by mělo být takovéto:

1. a:link - odkaz
2. a:visited - navštívený
3. a:hover - přejíždění
4. a:active - aktivní

16.8.2005