Naucz się prostego sposobu na usunięcie podkreśleń z linków w HTML

Domyślnie treść tekstowa, która jest połączone z HTML użycie elementu lub 'kotwica' ​​jest stylizowane z podkreśleniem. Często projektanci stron internetowych decydują się usunąć ten domyślny styl, usuwając podkreślenie.

Powody za i przeciw podkreśleniu

Wielu projektantów nie dba o wygląd podkreślonego tekstu, zwłaszcza w gęstych blokach treści z dużą ilością linków. Wszystkie te podkreślone słowa mogą naprawdę przerwać czytanie dokumentu. Wielu twierdziło, że te podkreślenia w rzeczywistości utrudniają rozróżnienie i szybkie odczytanie słów z powodu sposobu, w jaki podkreślenie zmienia naturalne formy liter.

Istnieją jednak uzasadnione korzyści z utrzymywania tych podkreśleń w linkach tekstowych. Na przykład, gdy przeglądasz duże bloki tekstu, podkreślone linki w połączeniu z odpowiednim kontrastem kolorów ułatwiają czytelnikom natychmiastowe przejrzenie strony i zobaczenie, gdzie znajdują się linki.

Jeśli zdecydujesz się usunąć linki z tekstu (prosty proces, który wkrótce omówimy), pamiętaj, aby znaleźć sposób na stylizowanie tego tekstu, aby nadal odróżniać to, co jest linkiem, od zwykłego tekstu. Najczęściej robi się to za pomocą kontrast kolorów , ale sam kolor może stanowić problem dla osób z wadami wzroku, takimi jak ślepota barw. W zależności od ich szczególnej formy ślepoty barw, kontrast może być na nich całkowicie utracony, co uniemożliwia im dostrzeżenie różnicy między tekstem połączonym a niepodłączonym. Dlatego podkreślony tekst jest nadal uważany za najlepszy sposób na pokazanie linków.

Jak więc wyłączyć podkreślenie, jeśli nadal chcesz to zrobić? Ponieważ jest to cecha wizualna, na której nam zależy, zwrócimy się do części naszej witryny, która zajmuje się wszystkimi rzeczami wizualnymi — CSS.

Użyj kaskadowych arkuszy stylów, aby wyłączyć podkreślenia na łączach

W większości przypadków nie chcesz wyłączać podkreślenia tylko jednego linku tekstowego. Zamiast tego Twój styl projektowania prawdopodobnie wymaga usunięcia podkreśleń ze wszystkich łączy. Zrobiłbyś to, dodając style do swojego zewnętrzny arkusz stylów .

|_+_|

Otóż ​​to! Ta jedna prosta linia CSS wyłączy podkreślenie (które faktycznie używa właściwości CSS do „tekstu-dekoracji”) we wszystkich linkach.

Możesz również uzyskać bardziej konkretny styl. Na przykład, jeśli chcesz wyłączyć tylko podkreślenie lub linki wewnątrz elementu „nav”, możesz napisać:

|_+_|

Teraz linki tekstowe na stronie będą miały domyślne podkreślenie, ale te w nawigacji usunęłyby je.

Wielu projektantów stron internetowych decyduje się na ponowne włączenie linku, gdy ktoś najedzie kursorem na tekst. Można to zrobić za pomocą :hover Pseudoklasa CSS , lubię to:

|_+_|

Korzystanie z wbudowanego CSS

Jako alternatywę do wprowadzania zmian w zewnętrznym arkuszu stylów, możesz również dodać style bezpośrednio do samego elementu w HTML .

Problem z tą metodą polega na tym, że umieszcza informacje o stylu w strukturze HTML, co nie jest najlepszą praktyką. Styl (CSS) i struktura (HTML) powinny być oddzielone.

Jeśli chcesz, aby wszystkie linki tekstowe w witrynie zostały usunięte z podkreślenia, dodanie tych informacji o stylu do każdego linku z osobna oznaczałoby dodanie sporej ilości dodatkowych znaczników do kodu witryny. To rozdęcie strony może spowolnić czas ładowania witryny i sprawić, że ogólne zarządzanie stroną będzie znacznie trudniejsze. Z tych powodów lepiej jest zawsze korzystać z zewnętrznego arkusza stylów dla wszystkich potrzeb związanych ze stylami stron.

W zamknięciu

Usunięcie podkreślenia z linków tekstowych na stronie internetowej jest proste, ale należy również pamiętać o konsekwencjach takiego postępowania. Chociaż może rzeczywiście poprawić wygląd strony, może to zrobić kosztem ogólnej użyteczności. Weź to pod uwagę, gdy następnym razem będziesz rozważać zmianę właściwości „text-decoration” strony.