Domyślnie przeglądarka internetowa przechowuje określone style CSS, które 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. W przypadku hiperłączy domyślnym stylem wyświetlania jest to, że każdy połączony tekst będzie niebieski i podkreślony. Przeglądarka robi to, aby odwiedzający witrynę mogli łatwo zobaczyć, który tekst jest połączony. Wielu projektantów stron internetowych nie dba o te style domyślne, szczególnie te podkreślenia. Na szczęście CSS ułatwia zmianę wyglądu tych podkreśleń lub całkowite ich usunięcie.
Usuwanie podkreślenia w łączach tekstowych
Podkreślony tekst może być trudniejszym do odczytania nie podkreślonym tekstem. Ponadto wielu projektantów po prostu nie dba o wygląd podkreślonych linków tekstowych. W takich przypadkach prawdopodobnie zechcesz całkowicie usunąć te podkreślenia.
Aby usunąć podkreślenia z linków tekstowych, użyjesz dekoracji tekstowej właściwości CSS. Oto CSS, który napiszesz, aby to zrobić:
a {dekoracja tekstowa: brak; }
Dzięki tej jednej linii CSS usuniesz podkreślenie ze wszystkich linków tekstowych. Mimo że jest to bardzo ogólny styl (używa selektora elementów), nadal ma on większą specyfikę niż domyślne style przeglądarek. Ponieważ te domyślne style tworzą początkowe podkreślenia, to właśnie trzeba je nadpisać.
Przestroga dotycząca usuwania podkreśleń
Wizualnie usuwanie podkreśleń może być dokładnie tym, co chcesz osiągnąć, ale powinieneś zachować ostrożność, kiedy to robisz. Niezależnie od tego, czy podoba Ci się wygląd podkreślonych linków, czy nie, nie możesz twierdzić, że wyjaśniają, który tekst jest połączony, a który nie. Jeśli usuniesz podkreślenia lub zmienisz domyślny niebieski kolor linku, powinieneś upewnić się, że zastąpiłeś je stylami, które nadal pozwalają wyróżnić tekst z linkami. Zapewni to bardziej intuicyjną obsługę odwiedzających witrynę.
Nie podkreślaj nie-łącz
Kolejna uwaga na linki i podkreślenia, nie podkreślają tekstu, który nie jest łączem jako sposobem na podkreślenie. Ludzie zaczęli oczekiwać, że podkreślony tekst będzie linkiem, więc jeśli podkreślisz treść, by dodać podkreślenie (zamiast pogrubienia lub pochylenia), wyślesz nieprawidłową wiadomość i wprowadzisz w błąd użytkowników witryny.
Zmień Podkreślenie na Kropki lub Kreski
Jeśli chcesz zachować podkreślenie linku tekstowego, ale zmienić styl tego podkreślenia na domyślny wygląd, który jest linią "soldi", możesz to zrobić. Zamiast tej linii ciągłej 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 tekstowa: brak; border-bottom: kropka 1px; }
Ponieważ usunięto standardowe podkreślenie, kropkowana jest jedyną, która się pojawi.
Możesz zrobić to samo, aby uzyskać myślniki. Po prostu zmień styl kreski na dno na przerywany:
a {dekoracja tekstowa: brak; border-bottom: 1px przerywany; }
Zmień kolor podkreślenia
Innym sposobem na zwrócenie uwagi na linki jest zmiana koloru podkreślenia. Tylko upewnij się, że kolor pasuje do twojego schematu kolorów.
a {dekoracja tekstowa: brak; border-bottom: 1px solid red; }
Podwójne podkreślenia
Sztuczka polegająca na użyciu podwójnych podkreśleń polega na tym, że musisz zmienić szerokość obramowania. Jeśli utworzysz szeroką granicę 1px, otrzymasz podwójne podkreślenie, które wygląda jak pojedyncze podkreślenie.
a {dekoracja tekstowa: brak; border-bottom: 3px double; }
Możesz także użyć istniejącego podkreślenia, aby utworzyć podwójne podkreślenie z innymi funkcjami, takimi jak jedna z linii, która jest przerywana:
a {border-bottom: 1px double; }
Nie zapomnij o stanach łącza
Możesz dodać styl border-bottom do 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 pseudo-klasy "hover". Aby dodać drugi podkreślony podkreślenie po najechaniu myszą na link:
a {dekoracja tekstowa: brak; } a: hover {border-bottom: 1px kropkowany; }
Oryginalny artykuł Jennifer Krynin. Edytowane przez Jeremy'ego Girarda
