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 w łą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.
{
dekoracja tekstu: brak;
}
Otóż to! Ta jedna prosta linia CSS wyłączy podkreślenie (które faktycznie używa właściwości CSS do "dekoracji tekstu") we wszystkich linkach.
W tym stylu możesz również uzyskać bardziej szczegółowy wygląd. Na przykład, jeśli chcesz wyłączyć tylko podkreślenie lub linki wewnątrz elementu „nav”, możesz napisać:
nawigować {
dekoracja tekstu: brak;
}
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 CSS, lubię to:
{
dekoracja tekstu: brak;
}
a: najedź {
dekoracja tekstu: podkreślenie;
}
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 podkreślenie, dodaj te informacje o stylu do każdy link indywidualnie oznaczałby dużą ilość dodatkowych znaczników dodanych do Twojej witryny kod. 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 „dekoracji tekstu” na stronie.