Linki HTML - różne kolory
Łącze HTML jest wyświetlane w innym kolorze w zależności od tego, czy zostało odwiedzone, nieodwiedzone, czy jest aktywne.
Kolory linków HTML
Domyślnie link będzie wyglądał tak (we wszystkich przeglądarkach):
- Nieodwiedzony link jest podkreślony i niebieski
- Odwiedzony link jest podkreślony i fioletowy
- Aktywny link jest podkreślony i czerwony
Możesz zmienić kolory stanu łącza za pomocą CSS:
Przykład
Tutaj nieodwiedzony link będzie zielony bez podkreślenia. Odwiedzony link będzie miał kolor różowy bez podkreślenia. Aktywny link będzie żółty i podkreślony. Ponadto po najechaniu myszą na link (a:hover) zmieni się on na czerwony i podkreślony:
<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>
Przyciski linków
Link może być również stylizowany na przycisk za pomocą CSS:
To jest linkPrzykład
<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>
Aby dowiedzieć się więcej o CSS, przejdź do naszego samouczka CSS .
Tagi linków HTML
Tag | Description |
---|---|
<a> | Defines a hyperlink |
Pełną listę wszystkich dostępnych tagów HTML można znaleźć w naszym podręczniku HTML Tag Reference .