Rychlá příručka - CSS - Odkazy

Kaskádové styly tagu <a>

Odkazem, který vytváří v kódu jazyka HTML tag <a>, může být cokoliv. Může to být jedno slovo, celý odstavec, ale také obrázky. Pokud je odkazem text, tak se všechen text, který je odkazem, zbarví do modré barvy a podtrhne se. Tyto vlastnosti tagu <a> můžeme zrušit pomocí kaskádových stylů color (tím nastavíme jinou barvu) a text-decoration (pro zrušení podtržení). Většinou by se ale text, který je odkazem, měl odlišit od ostatního textu, aby uživatel odkaz poznal. Můžeme proto použít kaskádové styly font-weight (tučnost), font-style (kurzíva), font-family (font), font-size (velikost), ale i spoustu dalších. Pokud je odkazem obrázek, tak se vytvoří kolem tohoto obrázku rámeček, který má modrou barvu. To lze zrušit pomocí kaskádového stylu border-width, kterému v tomto případě nastavíme hodnotu 0px. Parametry href, target a title nelze nijak nahradit kaskádovými styly.

Kaskádové styly tagu <a> po nejetí myší

Většinou na webech můžete vidět, že odkaz se ještě trochu změní (např. barvou fontu), když na něj najedeme myší. Protože myše stále více upadají ve prospěch dotykových zařízení, již v blízké budoucnosti vám asi následující článek bude připadat zbytečný. Pro uživatele, kteří používají myš a klávesnici, ale pomocí následujícího článku můžete vytvořit krásný efekt. Vše spočívá v tom, že po zadávání něčeho, čemu chcete přiřadit kaskádové styly, uděláte bez mezery dvojtečku a napíšete slovo hover (např. a:hover), tím dáváte najevo, že budete nastavovat kaskádové styly, které budou platné jen po najetí myší. Výraz hover lze použít i na jiné tagy, ale pro odkaz se tento výraz hodí nejvíce, proto se o něm dozvídáte zde. Většinou se při textu nastavuje pouze jiná barva fontu, u obrázků, které jsou odkazem, můžete nastavit po najetí myši rámeček, ale fantazii se meze nekladou.

© 2013 Petr Lhotský - petrlhotsky@windowslive.com