Jak zmienić podkreślenia linków HTML na stronie internetowej?

W tym artykule wyjaśniono kilka sposobów wykorzystania CSS do zmiany domyślnego wyglądu łączy tekstowych na stronie internetowej poprzez usunięcie podkreślenia, zmianę go na linię kropkowaną lub zmianę jego koloru. Dołączone są dodatkowe informacje dotyczące zmiany podkreślenia na linię przerywaną lub podwójne podkreślenie.

Jak usunąć podkreślenie w linkach tekstowych

Domyślnie przeglądarki internetowe mają pewne Style CSS że mają zastosowanie do określonych elementów HTML. Jeśli nie zastąpisz tych wartości domyślnych własnymi arkuszami stylów witryny, zostaną zastosowane wartości domyślne. Dla

hiperłącza, domyślny styl wyświetlania polega na tym, że każdy połączony tekst jest niebieski i podkreślony. Jeśli chcesz, możesz zmienić wygląd tych podkreśleń lub całkowicie usunąć je ze swojej strony internetowej.

Aby usunąć podkreślenia z łączy tekstowych, użyj właściwości CSS text-decoration. Oto CSS, który piszesz, aby to zrobić:

a { dekoracja tekstu: brak; }

Za pomocą tej jednej linii CSS usuwasz podkreślenie ze wszystkich linków tekstowych na swojej stronie internetowej. Mimo że jest to bardzo ogólny styl (używa selektora elementów), nadal ma więcej szczegółów niż domyślne style przeglądarek. Ponieważ te domyślne style są tym, co tworzy podkreślenia na początku, to właśnie to musisz nadpisać.

Przestroga dotycząca usuwania podkreśleń

Wizualnie usunięcie podkreśleń może być dokładnie tym, co chcesz osiągnąć, ale powinieneś również zachować ostrożność. Niezależnie od tego, czy podoba Ci się wygląd podkreślonych linków, czy nie, nie możesz twierdzić, że pokazują one, który tekst jest połączony, a który nie. Jeśli usuniesz podkreślenia lub zmienisz domyślny niebieski kolor linku, upewnij się, że zastąpiłeś je stylami, które nadal pozwalają wyróżniać się połączonym tekstem. Zapewni to bardziej intuicyjne wrażenia dla odwiedzających Twoją witrynę.

Nie podkreślaj brakujących linków

Kolejna przestroga dotycząca linków i podkreśleń, nie podkreślaj tekstu, który nie jest linkiem, aby go podkreślić. Ludzie oczekują, że podkreślony tekst będzie linkiem, więc jeśli podkreślisz treść, aby dodać podkreślenie (zamiast pogrubienia lub kursywy), wysyłasz niewłaściwą wiadomość i mylisz witrynę użytkowników.

Jak zmienić podkreślenie na kropki lub kreski

Jeśli chcesz zachować podkreślenie łącza tekstowego, ale zmienić styl tego podkreślenia z domyślnego wyglądu, który jest linią ciągłą, możesz to zrobić. Zamiast tej ciągłej linii możesz użyć kropek, aby podkreślić swoje linki. Aby to zrobić, nadal usuniesz podkreślenie, ale zastąpisz je właściwością stylu border-bottom:

a { dekoracja tekstu: brak; obramowanie-dół: 1px z kropkami; }

Ponieważ usunąłeś standardowe podkreślenie, pojawia się tylko podkreślenie kropkowane.

Możesz zrobić to samo, aby uzyskać kreski. Po prostu zmień styl obramowania na dole na przerywany:

a { dekoracja tekstu: brak; obramowanie-dół: przerywany 1px; }

Jak zmienić kolor podkreślenia

Innym sposobem na zwrócenie uwagi na linki jest zmiana koloru podkreślenia. Tylko upewnij się, że kolor pasuje do Twojego schemat kolorów.

a { dekoracja tekstu: brak; obramowanie-dół: 1px stałe czerwone; }

Podwójne podkreślenia

Sztuczka polegająca na używaniu podwójnych podkreśleń polega na tym, że musisz zmienić szerokość obramowania. Jeśli utworzysz obramowanie o szerokości 1 piks., otrzymasz podwójne podkreślenie, które wygląda jak pojedyncze podkreślenie.

a { dekoracja tekstu: brak; border-bottom: 3px double; }

Możesz również użyć istniejącego podkreślenia, aby utworzyć podwójne podkreślenie z innymi funkcjami, takimi jak kropkowana linia:

a { border-bottom: 1px double; }

Nie zapomnij o stanach łączy

Możesz dodać styl border-bottom do swoich linków w różnych stanach, takich jak :hover, :active lub :visited. Może to stworzyć przyjemny styl „najazdu” dla odwiedzających, gdy użyjesz tej pseudoklasy „najechanie”. Aby po najechaniu na łącze pojawiło się drugie podkreślenie kropkowane:

a { dekoracja tekstu: brak; }
a: hover { border-bottom: 1px z kropką; }