Linki CSS

Za pomocą CSS można ustawić styl linków na różne sposoby.

tekstowy link tekstowy link przycisk linku przycisk linku

Ustawianie stylów linków

Linki mogą używać dowolnych właściwości CSS (np. color,font-family,background itp.) do ustawiania stylów.

przykład

a {
  color: hotpink;
}

Spróbuj sam

Ponadto,可以根据链接的状态来设置不同的链接样式。

Cztery stany linku to:

  • a:link - Normalny, niezodowiony link
  • a:visited - Kiedy użytkownik odwiedził link
  • a:hover - Kiedy użytkownik przechodzi kursorem nad linkiem
  • a:active - Kiedy link jest klikany

przykład

/* Link niezodowiony */
a:link {
  color: red;
}
/* Link odwiedzony */
a:visited {
  color: green;
}
/* Podczas gdy kursor myszy jest nad linkiem */
a:hover {
  color: hotpink;
}
/* Wybrany link */
a:active {
  color: blue;
}

Spróbuj sam

Jeśli ustawiasz styl dla wielu stanów linku, proszę przestrzegać następujących zasad kolejności:

  • a:hover musi występować po a:link i a:visited
  • a:active musi występować po a:hover

dekoracja tekstu

text-decoration Właściwości są głównie używane do usunięcia podkreślenia z linków:

przykład

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

Spróbuj sam

kolor tła

background-color Właściwości można użyć do określenia koloru tła linku:

przykład

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

Spróbuj sam

przycisk linku

Ten przykład pokazuje bardziej zaawansowany przykład, w którym łączyliśmy wiele właściwości CSS, aby wyświetlić linki jako ramki/przyciski:

przykład

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

Spróbuj sam

Więcej przykładów

Dodawanie różnych stylów do hiperłączy
W tym przykładzie pokazano, jak dodać inne style do hiperłączy.
Zaawansowane - Tworzenie przycisku linku z ramką
To jest inny przykład tworzenia ramki/ przycisku linku.
Zmiana kursora
Atrybut cursor określa typ kursora do wyświetlenia. W tym przykładzie pokazano różne typy kursorów (dla linków).