#1 Odkazy
Odkazy, v HTML syntaxi <a>, slouží pro odkazování na jiné stránky.
V základním nastavení mají odkazy tmavě fialovou barvu, jsou podtržené, nemají žádný efekt při najetí myši a změní barvu na svítivě červenou v momentě, kdy jsou stisknuté. Takovéto odkazy by však téměř nikdy neseděli do ostatních stránek, s jinými barvami. V tomto článku se podíváme, jak na základní úpravy.
#2 Barva, font a podtržení
Odkazu lze změnit barvu totožně, jako jiným textům – vlastností color (více o ní v jejím článku). Pomocí vlastnosti font, či vlastností jí přidružených, lze nastavit odkazu tučné / tenké písmo, jiný typ fontu nebo také velikost textu.
Základně nastavené podtržení se často vypíná, jelikož narušuje konzistentnost v textu. Podtržení kteréhokoliv textu se nastavuje pomocí text-decoration: underline. Pokud podtržení nechceme, zaměníme underline za none. Příklad jinak nastylovaného odkazu:
a {
color: gray;
font: 20px monospace;
text-decoration: none;
}
#3 Speciální stavy
Odkaz je jedním z mála prvků, které mají základně nastavené stylování na jejich speciální stavy, kterými pro odkaz jsou – stisknutí prvku (:active) a již navštívený odkaz (:visited). Často se také používá speciální stav „myš nad prvkem“ – :hover.
:hover
Také v článku o pseudo-class, je speciální stav, který nastává, když se pohybuje nebo stojí myš (kurzor) nad prvkem. U vlastního stylování se používá často, jelikož odděluje odkaz vizuálně již před tím, než se na něj klikne. V následujícím příkladu se po najetí myši nad odkaz změní barva jeho textu na modrou.
a {
color: green;
}
a:hover {
color: blue;
}
:active
Méně používaná pseudo-class :active slouží k nastylování momentu, kdy uživatel kliká na odkaz. Z důvodu, že se často jedná o krátkou chvíli, kdy je změna viditelná, moc se nepoužívá.
a:active {
color: cyan;
}
:visited
Posledním speciálním stavem je stav :visited, který styluje každý odkaz, na kterém již uživatel byl v minulosti. Používá se k odlišení od nenavštívených odkazů, aby se uživatel zbytečně nevracel na odkazy, které již navštívil.
a:visited {
color: gray;
}
#4 Kompletní stylování
Po aplikování předchozích úprav nám může vzniknout například toto:
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
color: red;
}
a:visited {
color: gray;
}
V tomto příkladu je odkazu nastavena modrá barva textu bez podtržení. Jakmile uživatel najede kurzorem nad odkaz, přidá se odkazu podtržení, když klikne změní se na krátký moment jeho barva na červenou. Jestliže uživatel odkaz dříve navštívil, bude mít odkaz šedý text (a bude bez podtržení, jelikož se přebírá tato vlastnost z první definice; definice :visited ji nepřepisuje).