Formátování odkazů
Určitě jste někdy viděli odkaz, jehož vzhled se změnil poté, co jste na něj najeli myší. Po přečtení tohoto článku budete umět takový odkaz také naformátovat. Zároveň se podíváme, jak je pro formátování podstatná hierarchie, neboli vzájemné vnořování elementů.
Pseudotřídy
Pseudotřídy se používají na naformátování odkazů, i když některé za určitých podmínek mohou být použity i jinde. Pomocí nich můžeme styl navázat nejen na samotný element odkazu <a>, ale i na jeho různé stavy. Odkaz může vypadat jinak, když je ještě nenavštívený (pseudotřída :link), již navštívený (:visited), přejedete přes něj kurzorem myši (:hover), vyberete ho stiskem tabulátoru (:focus) a nebo jej tak zvaně aktivujete, tj. stiskli jste na něm tlačítko myši, ale ještě jste ho neuvolnili (:active). Myslím, že zpočátku si vystačíte s pseudotřídou :hover.
Formátování pomocí CSS je obdobné, jako to, které už jsme si ukazovali. Jen se podíváme na správný zápis. Následující styl v první části definuje obecně, jak má vypadat odkaz; v druhé části potom, jak má být naformátován odkaz ve chvíli, kdy na něj uživatel najede myší. Stačí zde nadefinovat jen to, co je odlišné; takže v následujícím příkladu bude odkaz tučný v obou dvou stavech.
a {
color: maroon;
font-weight: bold;
}
a:hover {
color: red;
background-color: yellow;
}
Na prvním příkladu si můžete ověřit, jak se tento styl projeví v praxi. Ostatní, výše zmíněné pseudotřídy, se používají velmi obdobně; liší se jen okamžik a stav odkazu, kdy je uvidíte zafungovat ve vzhledu stránky.
Pomocí tohoto velmi užitečného nástroje můžete svým stránkám vtisknout profesionální ráz. Používejte ho však s mírou, vkusem a rozumem. Mezi dobré rady patří například jen s rozmyslem používat v pseudotřídě :hover změnu na tučné písmo, případně změnu velikosti písma. Pokud jde o odkaz v textu, tato změna "rozhodí" text a může způsobit nehezké poskakování stránky. Dále jen v omezené míře používejte CSS atribut text-decoration s hodnotou none, který vám umožní vytvořit nepodtržený odkaz. Odkaz by měl být jasně rozpoznatelý a odlišený. Podtržení je na internetových stránkách neodmyslitelně spjato s odkazem, a velmi málokdy najdete podtržený text, který by nebyl odkazem. Dobře si rozmyslete, kdy naopak vytvoříte odkaz, který není podtržený.
