Aby zmienić kolor odnośnika w HTML, wykorzystuje się głównie style CSS. Można to zrobić na kilka sposobów: bezpośrednio w znaczniku HTML, w sekcji <style> w nagłówku dokumentu lub przez zewnętrzny arkusz CSS. Poniżej znajdziesz szczegółowy poradnik – od najprostszych rozwiązań po bardziej zaawansowane zastosowania, takie jak zmiana koloru linku po najechaniu myszką czy płynne przejścia kolorów.
Podstawowy odnośnik w HTML
Standardowy link tworzymy za pomocą znacznika <a>:
<a href="https://www.example.com">Odwiedź stronę</a>
Zmiana koloru odnośnika za pomocą atrybutu style
Najprostszy sposób – bezpośrednio w znaczniku:
<a href="https://www.example.com" style="color: red;">Czerwony link</a>
Zaletą jest szybkie rozwiązanie dla pojedynczych przypadków.
Wadą jest mała elastyczność oraz powtarzalność stylów.
Zmiana koloru wszystkich odnośników przez CSS
O wiele lepszą praktyką jest stosowanie arkusza stylów CSS. Przykład:
a { color: red; }
Dzięki temu wszystkie linki na stronie będą miały czerwony kolor.
Wkodowujemy tę regułę:
- w sekcji
<style>w<head>, - lub w osobnym pliku CSS załączanym do strony.
Zmiana koloru odnośnika po najechaniu myszką (:hover)
Aby link zmieniał kolor, gdy użytkownik na niego najedzie (tzw. efekt hover), używamy pseudoklasy :hover:
a { color: #1F2B6C; /* kolor domyślny */ }
a:hover { color: #e63946; /* kolor po najechaniu */ }
To bardzo popularny zabieg podnoszący użyteczność strony.
Kolory linków odwiedzonych i nieodwiedzonych
CSS pozwala rozróżnić także linki odwiedzone i nieodwiedzone –
a:link { color: blue; /* nieodwiedzony */ }
a:visited { color: purple; /* odwiedzony */ }
Dzięki takim regułom użytkownik wie, które strony już odwiedził.
Stylizacja poszczególnych linków przez klasy
Jeżeli chcesz inny kolor dla wybranych linków, przypisz im klasę:
<a href="..." class="ważny-link">Link specjalny</a>
a.ważny-link { color: green; }
Zmiana innych właściwości odnośników (np. tła, usunięcie podkreślenia)
Możesz nie tylko zmienić kolor tekstu, ale np. tło i wygląd dekoracji:
a {
color: white;
background-color: #0077cc;
text-decoration: none; /* usuwa podkreślenie */
padding: 8px 16px;
border-radius: 6px;
}
Płynne przejścia kolorów (efekt transition)
Aby uzyskać gładką zmianę koloru zamiast gwałtownej, użyj właściwości transition:
a {
color: #fff;
background-color: #1F2B6C;
transition: color 0.4s, background-color 0.4s;
}
a:hover {
color: #1F2B6C;
background-color: #fff;
}
Po najechaniu myszką efekt przejścia będzie zauważalnie płynny.
Podsumowanie najważniejszych reguł CSS
| Zastosowanie | Przykładowa reguła CSS |
|---|---|
| Podstawowy kolor linku | a { color: red; } |
| Kolor po najechaniu | a:hover { color: green; } |
| Kolor odwiedzonego linku | a:visited { color: purple; } |
| Kolor tylko dla linku z klasą | .specjalny { color: orange; } |
| Usuwanie podkreślenia | a { text-decoration: none; } |
| Przejście (animacja koloru) | transition: color 0.4s; |
Praktyczne wskazówki
- Korzystaj z CSS, zamiast atrybutu style, aby stylować linki na całej stronie.
- Stosuj klasy CSS do wyróżniania wybranych odnośników, np.: pilnych, ważnych, nawigacyjnych.
- Pamiętaj o zachowaniu kontrastu między kolorem linku a tłem, by zachować czytelność.
Dzięki powyższym przykładom z łatwością dostosujesz wygląd odnośników do własnych potrzeb – zarówno w zakresie koloru, jak i zachowania podczas interakcji z użytkownikiem.
