HTML odkazy - různé barvy
Odkaz HTML se zobrazí jinou barvou v závislosti na tom, zda byl navštíven, nenavštíven nebo je aktivní.
HTML barvy odkazu
Ve výchozím nastavení se odkaz zobrazí takto (ve všech prohlížečích):
- Nenavštívený odkaz je podtržený a modrý
- Navštívený odkaz je podtržený a fialový
- Aktivní odkaz je podtržený a červený
Barvy stavu odkazu můžete změnit pomocí CSS:
Příklad
Zde bude nenavštívený odkaz zelený bez podtržení. Navštívený odkaz bude růžový bez podtržení. Aktivní odkaz bude žlutý a podtržený. Navíc při najetí myší na odkaz (a:hover) zčervená a podtrhne:
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
Tlačítka odkazů
Odkaz lze také upravit jako tlačítko pomocí CSS:
Toto je odkazPříklad
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
Chcete-li se o CSS dozvědět více, přejděte do našeho výukového programu CSS .
HTML značky odkazů
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Úplný seznam všech dostupných značek HTML naleznete v naší Referenční příručce značek HTML .