Aby usunąć kolor hiperłącza w HTML — czyli sprawić, by odsyłacz nie wyróżniał się domyślną (najczęściej niebieską lub fioletową) barwą — należy użyć CSS i odpowiednio nadpisać styl koloru linków. W poniższym poradniku dowiesz się, jak to zrobić krok po kroku, wraz z praktycznymi przykładami zastosowań.
Czym jest kolor hiperłącza?
Domyślnie element <a> (anchor) w HTML, czyli hiperłącze, wyświetla się w przeglądarce na niebiesko (stan nieodwiedzony) lub na fioletowo (stan odwiedzony). Ten kolor wynika z ustawień przeglądarki, ale można go zmienić — albo na dowolną barwę, albo nawet na taki sam kolor, jak otaczający tekst, dzięki czemu link nie będzie się wyróżniał.
Jak usunąć domyślny kolor hiperłącza? (CSS)
Aby anulować domyślny kolor hiperłącza, należy przypisać mu własny kolor za pomocą właściwości color. Przykładowo, aby hiperłącze miało czarny kolor (jak zwykły tekst), zastosuj:
a { color: black; }
Jeśli chcesz, aby link zupełnie nie miał własnego koloru (dziedziczył kolor tekstu z otoczenia), możesz użyć wartości inherit:
a { color: inherit; }
Całkowite „usunięcie koloru” – link niewidoczny
Możesz także ustawić identyczny kolor jak tło, np.:
a { color: white; /* na białym tle link praktycznie znika */ }
Pamiętaj jednak, że wtedy link staje się niewidoczny dla użytkownika, co wpływa negatywnie na dostępność strony.
Przykłady praktyczne
Usunięcie koloru i podkreślenia (link jak zwykły tekst)
<!-- HTML -->
<a href="https://example.com">Przykładowy link</a>
/* CSS */
a {
color: inherit; /* dziedziczenie koloru z otaczającego tekstu */
text-decoration: none; /* usunięcie podkreślenia */
}
Dzięki tej konfiguracji link nie będzie się wyróżniał żadnym kolorem ani podkreśleniem.
Personalizacja kolorów w różnych stanach linku
a {
color: inherit;
text-decoration: none;
}
a:hover, a:focus {
color: #c0392b; /* kolor najechanego/aktywnego linku */
text-decoration: underline; /* pojawiające się podkreślenie przy najechaniu */
}
W ten sposób link wygląda jak zwykły tekst, ale po najechaniu kursorem zmienia kolor i pojawia się podkreślenie, co poprawia obsługę użytkownika oraz dostępność.
Usunięcie koloru wyłącznie wybranym linkom
Jeżeli chcesz, aby tylko niektóre linki nie miały swojego koloru, zastosuj klasę CSS:
<a href="https://example.com" class="no-color-link">Ukryty link</a>
.no-color-link {
color: inherit;
text-decoration: none;
}
Ważne wskazówki
- Dostępność – usuwając kolor i podkreślenie z linków należy pamiętać, by użytkownik miał możliwość odróżnienia linków od pozostałego tekstu, np. poprzez inną formę wyróżnienia przy najechaniu myszką (np. podkreślenie lub zmiana tła);
- Spójność – płaszczyznowe ukrywanie kolorów linków na stronie może być mylące dla odwiedzających, dlatego zawsze warto zapewnić przynajmniej jedno wyróżnienie (np. podkreślenie na hover);
- Dziedziczenie kolorów – ustawiając
color: inherit, odsyłacz przyjmuje kolor tekstu z rodzica, co pozwala łatwo dostosować go do kolorystyki sekcji lub całej strony.
Zaawansowane zastosowania
Usuwanie koloru hiperłącza za pomocą JavaScript (dynamicznie)
Jeśli z jakiegoś powodu musisz zmieniać kolory linków dynamicznie (np. w reakcji na kliknięcie przycisku), można to osiągnąć także przez JavaScript:
const link = document.getElementById("myLink");
link.style.color = "inherit";
link.style.textDecoration = "none";
Podsumowanie
Chcąc usunąć kolor hiperłącza w HTML, stosuj CSS: color: inherit lub nadaj linkowi kolor identyczny jak tekst otaczający. Zawsze pamiętaj o doświadczeniu użytkownika i nie ukrywaj linków całkowicie bez możliwości ich rozpoznania. Możesz także personalizować styl linków przy pomocy klas lub JavaScript. Dzięki temu Twoja strona będzie czytelna, estetyczna i funkcjonalna.
