Zawartość
- Przyczyny i przeciw podkreśleniu
- Użyj kaskadowych arkuszy stylów, aby wyłączyć podkreślenia łączy
- Korzystanie z wbudowanego CSS
- W zamknięciu
Domyślnie treść tekstowa połączona z HTML za pomocą lub element „anchor” jest stylizowany podkreśleniem. Często projektanci stron internetowych wybierają usunięcie tej domyślnej stylizacji poprzez usunięcie podkreślenia. Wielu projektantów nie dba o wygląd podkreślonego tekstu, szczególnie w gęstych blokach treści z dużą ilością linków. Wszystkie te podkreślone słowa mogą naprawdę zakłócić proces czytania dokumentu. Wielu twierdziło, że podkreślenia te utrudniają rozróżnianie i szybkie czytanie słów ze względu na sposób, w jaki podkreślenie zmienia naturalne formy literowe. Istnieją jednak uzasadnione korzyści z zachowania tych podkreśleń w linkach tekstowych. Na przykład podczas przeglądania dużych bloków tekstu podkreślone łącza w połączeniu z odpowiednim kontrastem kolorów ułatwiają czytelnikom natychmiastowe zeskanowanie strony i sprawdzenie, gdzie znajdują się łącza. Jeśli zdecydujesz się usunąć linki z tekstu (prosty proces, który omówimy wkrótce), koniecznie znajdź sposoby na stylizowanie tego tekstu, aby nadal odróżniać link od zwykłego tekstu. Najczęściej robi się to z wyżej wspomnianym kontrastem kolorów, ale sam kolor może stanowić problem dla osób z wadami wzroku, takimi jak ślepota kolorów. W zależności od ich szczególnej formy ślepoty na kolory kontrast może zostać całkowicie utracony, uniemożliwiając im dostrzeżenie różnicy między połączonym i niepowiązanym tekstem. Dlatego podkreślony tekst jest nadal uważany za najlepszy sposób wyświetlania linków. Jak więc wyłączyć podkreślenie, jeśli nadal chcesz to zrobić? Ponieważ jest to cecha wizualna, o którą nam chodzi, przejdziemy do tej części naszej witryny, która obsługuje wszystkie rzeczy wizualne - CSS. Przyczyny i przeciw podkreśleniu
Użyj kaskadowych arkuszy stylów, aby wyłączyć podkreślenia łączy
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ślenia ze wszystkich łączy. Zrobiłbyś to, dodając style do zewnętrznego arkusza stylów.
{
dekoracja tekstu: brak;
}
Otóż to! Ta jedna prosta linia CSS wyłączyłaby podkreślenie (które faktycznie używa właściwości CSS do „dekorowania tekstu”) we wszystkich linkach.
Możesz także uzyskać bardziej szczegółowy z tym stylem. Na przykład, jeśli chcesz tylko wyłączyć podkreślenie lub łącza w elemencie „nav”, możesz napisać:
nawigować po {
dekoracja tekstu: brak;
}
Teraz linki tekstowe na stronie uzyskałyby domyślne podkreślenie, ale te w nawigacji spowodowałyby usunięcie.
Jedną rzeczą, którą wybiera wielu projektantów stron internetowych, jest włączenie linku z powrotem, gdy ktoś umieści kursor nad tekstem. Można to zrobić za pomocą pseudoklasy: hover CSS, jak poniżej:
{
dekoracja tekstu: brak;
}
a: hover {
dekoracja tekstu: podkreślenie;
}
Korzystanie z wbudowanego CSS
Alternatywnie 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 ona informacje o stylu wewnątrz struktury HTML, co nie jest najlepszą praktyką. Styl (CSS) i struktura (HTML) powinny być oddzielone.
Jeśli chcesz, aby wszystkie linki tekstowe witryny usunęły podkreślenie, dodanie informacji o stylu do każdego linku z osobna oznaczałoby dodanie znacznej ilości znaczników do kodu witryny. Ten wzdęcie strony może spowolnić ładowanie witryny i znacznie utrudnić ogólne zarządzanie stroną. Z tych powodów lepiej jest zawsze zwracać się do zewnętrznego arkusza stylów dla wszystkich potrzeb związanych ze stylem strony.
W zamknięciu
Tak proste, jak usunięcie podkreślenia z linków tekstowych strony internetowej, należy również pamiętać o konsekwencjach takiego działania. Chociaż rzeczywiście może oczyścić wygląd strony, może to zrobić kosztem ogólnej użyteczności.Weź to pod uwagę następnym razem, gdy rozważysz zmianę właściwości „dekoracji tekstu”.
