Samouczek HTML

Strona główna HTML Wprowadzenie do HTML Edytory HTML Podstawy HTML Elementy HTML Atrybuty HTML Nagłówki HTML Akapity HTML Style HTML Formatowanie HTML Cytaty HTML Komentarze HTML Kolory HTML HTML CSS Linki HTML Obrazy HTML Ulubione HTML Tabele HTML Listy HTML Blok HTML i wbudowany Klasy HTML Identyfikator HTML Ramki HTML HTML JavaScript Ścieżki plików HTML Nagłówek HTML Układ HTML HTML Responsywne Kod komputerowy HTML Semantyka HTML Przewodnik po stylach HTML Jednostki HTML Symbole HTML Emotikony HTML Zestaw znaków HTML Kodowanie adresu URL HTML HTML a XHTML

Formularze HTML

Formularze HTML Atrybuty formularza HTML Elementy formularza HTML Typy danych wejściowych HTML Atrybuty wejściowe HTML Atrybuty formularza wejściowego HTML

Grafika HTML

Płótno HTML HTML SVG

Media HTML

Media HTML Wideo HTML Dźwięk HTML Wtyczki HTML HTML YouTube

API HTML

Geolokalizacja HTML Przeciągnij/upuść HTML Magazyn sieciowy HTML HTML Web Workers HTML SSE

Przykłady HTML

Przykłady HTML Quiz HTML Ćwiczenia HTML Certyfikat HTML Podsumowanie HTML Dostępność HTML

Odniesienia HTML

Lista znaczników HTML Atrybuty HTML Globalne atrybuty HTML Obsługa przeglądarki HTML Zdarzenia HTML Kolory HTML Płótno HTML HTML audio/wideo Dokumenty HTML Zestawy znaków HTML Kodowanie adresu URL HTML Kody językowe HTML Wiadomości HTTP Metody HTTP Konwerter PX na EM Skróty klawiszowe

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 link

Przykł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 .