Aby usunąć podkreślenie hiperłącza w HTML, należy użyć stylów CSS, które kontrolują wygląd elementów na stronie. Domyślnie przeglądarki podkreślają linki (<a href="...">), aby je wyróżnić, ale z łatwością można to zmienić za pomocą właściwości text-decoration.
1. Usuwanie podkreślenia z wszystkich linków na stronie
Najprostszym i najczęściej stosowanym sposobem jest użycie poniższej reguły CSS:
a { text-decoration: none; } Powyższy kod powoduje, że wszystkie hiperłącza na stronie nie będą miały podkreślenia.
Aby zastosować ten styl na całej stronie, można dodać go do sekcji <style> w <head> dokumentu HTML lub do zewnętrznego pliku .css.
Przykład wbudowany bezpośrednio w nagłówku HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład usunięcia podkreślenia</title>
<style>
a { text-decoration: none; }
</style>
</head>
<body>
<a href="https://example.com">To jest link bez podkreślenia</a>
</body>
</html>
2. Usuwanie podkreślenia tylko z wybranych linków
Jeśli chcesz usunąć podkreślenie tylko z konkretnych hiperłączy, możesz użyć klasy CSS:
a.bez-podkreslenia { text-decoration: none; } W kodzie HTML należy nadać linkowi odpowiednią klasę:
<a href="https://example.com" class="bez-podkreslenia">Ten link nie ma podkreślenia</a>
<a href="https://example.com">Ten link zachowuje podkreślenie</a>
3. Dodanie podkreślenia tylko na „hoverze” (po najechaniu myszką)
Często stosuje się rozwiązanie, w którym link domyślnie nie ma podkreślenia, ale pojawia się ono przy najechaniu kursorem –
a { text-decoration: none; color: #0056b3; }
a:hover { text-decoration: underline; color: #d0021b; }
Przykład użycia w kodzie HTML:
<a href="https://example.com">Efekt podkreślenia po najechaniu</a>
4. Usuwanie podkreślenia inline (bez wykorzystania zewnętrznego CSS)
Możliwe jest także zastosowanie stylu bezpośrednio w znaczniku HTML, ale zaleca się tego unikać na większych stronach (utrudnia to późniejszą modyfikację oraz utrzymanie kodu):
<a href="https://example.com" style="text-decoration: none;">Link bez podkreślenia</a>5. Stylowanie różnych stanów linków
Za pomocą pseudoklas CSS można precyzyjnie określać wygląd linków w różnych stanach:
a:link– link nieodwiedzony,a:visited– link wcześniej odwiedzony,a:hover– link, na który najechano,a:active– link aktywowany (w chwili kliknięcia).
Przykład:
a:link, a:visited { text-decoration: none; color: #333; }
a:hover, a:active { text-decoration: underline; color: #0066cc; }
6. Usuwanie podkreślenia tylko w określonych sekcjach strony
Możesz selektywnie usuwać podkreślenie tylko dla linków w określonych częściach witryny, np. w nagłówku, stopce lub w konkretnym elemencie:
.header a { text-decoration: none; color: #fff; }HTML:
<div class="header">
<a href="#">Link bez podkreślenia w nagłówku</a>
</div>
<div class="main">
<a href="#">Link z domyślnym podkreśleniem</a>
</div>
7. Najczęstsze błędy i dobre praktyki
- Nie stosuj stylów inline (atrybut
stylew tagu) na rozbudowanych stronach – utrudnia to zarządzanie kodem; - Używaj klas i zewnętrznych plików CSS dla większej przejrzystości i łatwej modyfikacji;
- Pamiętaj o dostępności – zachowaj czytelność i wyraźne oznaczenie linków. Jeśli usuwasz podkreślenie, warto zmienić kolor linku, żeby nadal był odróżnialny od zwykłego tekstu.
Podsumowanie
Usuwanie podkreślenia hiperłączy odbywa się przy pomocy CSS przez ustawienie text-decoration: none; dla wybranych selektorów. Możesz tę regułę stosować globalnie, lokalnie, na różnych stanach pseudoklas lub w konkretnych częściach witryny. Takie podejście daje pełną kontrolę nad wyglądem oraz zachowaniem linków w serwisie internetowym.
