Stylování odkazů pomocí CSS je kapitola sama pro sebe.

CSS toho totiž umí s odkazy opravdu mnoho, počínaje potlačením výchozích HTML vlastností (skrytí podtržení), konče zajímavými hover efekty, kdy odkazy reagují na najetí kursoru myši). Na odkazy se dají aplikovat všechny možné styly, co jsme probírali v článku o formátování textu.

Efekt při přejezdu myší

Na spoustě stránek se můžete setkat s tím, že po najetí kursoru na odkaz, se daný odkaz nějakým způsobem změní. Udělat něco takového na svém webu je až směšně jednoduché, postará se o to pseudotřída hover.

Hover se píše za selector a je od něj oddělená dvojtečkou. Nyní trochu rozšíříme první příklad.

Princip je velice jednoduchý. Najedete-li myší na odkaz, použije se sada vlastností označená pseudotřídou hover. V okamžiku, kdy opustíte kursorem daný odkaz, použijí se opět normální styly.

Hover můžete používat dokonce i pro jiné tagy než odkazy. Problém je ale v podpoře ze strany Internet Exploreru 6 (a nižší), který je pořád bohužel dost rozšířený. Pro IE6 se musí podobná funkcionalita řešit složitě JavaScriptem. Nám ale zatím bude stačit hover pouze pro odkazy, s čímž nemá problém ani zmíněný prohlížeč.

Dekorace

U odkazů nemusíme pořád dokolečka zapínat a vypínat podtržítka, stačí zapojit fantazii.

Pozadí odkazů

Pozadí se dá pomocí stylu poměrně složitě nastavovat, nás bude zajímat ale jen barva. Změny barvy docílíme pomocí vlastnosti background-color, která nabývá stejných hodnot, jako známe z HTML. A teď jak to využijeme u odkazů.

Rámečky

Rámečky ve stylech jsou také poměrně komplexní záležitost, my se ale věnujeme odkazům a proto to sfoukneme stručně. Základem je vlastnost border. Ta má současně 3 hodnoty: typ rámečku (solid, double, dotted, dashed…), barvu a tloušťku. Zároveň se dá specifikovat konkrétní část rámečku a to pomocí vlastností border-top, border-bottom, border-left a border-right (pro ty z vás, co neumí anglicky, to znamená nahoře, dole, vlevo a vpravo). Důležité pro nás je především to, že můžeme nastavovat barvu rámečku nezávisle na barvě odkazu, což třeba u čar nad a pod nešlo.

Tento způsob s tečkovaným podtržítkem (ve skutečnosti je to samozřejmě rámeček) se často používá pro různé vysvětlivky. V následujících dvou příkladech nakombinujeme pozadí a rámeček.

Takovýto odkaz by se už hodil spíše jako nadpis dokumentu než do běžného textu, nicméně jde nám hlavně o demonstraci možností CSS. Pomocí správně zvoleného pozadí a rámečku můžeme dosáhnout i zajímavého 3D efektu.

Prostorového dojmu

docílíme jednoduchým nastavením světelejších barev pro horní a levý rámeček, naopak dolnímu a pravému přidělíme barvu tmavší. Tělo odkazu je odstínem někde mezi. Při najetí prohodíme hodnotu barev u jednotlivých částí rámečku, což vytvoří efekt „zanoření“. Vlastnost padding nastavuje velikost odsazení mezi rámečkem a textem, fyzicky tím tedy tlačítko zvětšíme. A nakonec taková malá perlička, která vám bohužel půjde jen Firefoxu.

Zaoblené rohy umožňuje speciální firefoxí vlastnost -moz-border-radius, takže uživatele ostatních prohlížeče o tenhle efekt ochudíte. Na druhou stranu, zaoblené rohy jsou na webu dosti neokoukaná záležitost, takže byste rozhodně zaujali.

Další pseudotřídy

Kromě hover tady máme několik dalších použitelných pseudotříd.

• link – nenavštívený odkaz, nemá cenu definovat, protože nenavštívenému odkazu se automaticky přiřazují vlastnosti definované obecně (tak jak jsme činili dosud).
• visited – navštívený odkaz, toto už je velice užitečná pseudo třída, protože umožňuje odlišit v rámci webu, které odkazy už uživatel navštívil.
• focus – označený odkaz, pokud se pohybuje uživatel po stránce pomocí tabu, budou takto označené odkazy zvýrazněné.
• active– odkaz v okamžiku, kdy na něj klikneme. Vzhledem k tomu, že se jedná o zlomek sekundy (než se načte nová stránka), to nepovažuji za příliš užitečné.

Zatímco link a visited jsou určené pouze pro odkazy, hover, focus a active se dají aplikovat na jakýkoliv element. Třeba focus se dá použít u formulářových políček, tato pseudotřída se aplikuje v okamžiku, kdy uživatel píše do daného políčka. Bohužel podpora ze strany prohlížečů není dokonalá, musíte to ozkoušet.

Nyní trochu vylepšíme naše 3D tlačítka pomocí pseudotřídy active.

Při stisknutí tlačítka se aktivuje pseudotřída active a vytvoří se efekt, který známe od běžných systémových tlačítek. Tlačítka jsme vylepšili také o zaoblené rohy, což si ale opět vychutnají jen uživatelé Firefoxu.

Pár tipů pro tvorbu odkazů

• Za každou cenu musí být poznat, že se jedná o odkaz! Buď přímo podle vzhledu nebo aspoň z kontextu (třeba menu). Proto pokud podtržítko u odkazů ponecháte, nic tím nezkazíte.
• Nebojte se kombinovat různé vlastnosti. Jak vám ukázal tento článek, lze dosáhnout zajímavých výsledků. A pokud nevíte jak, nechte se inspirovat existujícími weby.
• Zkuste experimentovat s barvami. Neomezujte se pouze na výchozí předdefinované barvy, sežeňte si někde paletu a zkuste míchat.
• Pokud to půjde, vyhněte si při hover efektech různým změnám velikosti či řezu písma. Způsobuje to překreslování celého textu a to uživatelé nemají moc rádi.