Kilka wskazówek dotyczących usuwania podkreśleń HTML za pomocą CSS

Układ dowolnego tekstu informacyjnego obejmuje włączenie semantycznych hiperłączy lub kotwic. Te elementy są dodawane ze znacznikiem "a" (kotwica). Nowoczesne przeglądarki domyślnie wyświetlają podobny element z niższym podkreśleniem. Często projektanci lub projektanci stron internetowych preferują lub zmieniają ten styl lub w ogóle go usuwają.

W niektórych przypadkach jest to naprawdę konieczne. Na przykład w gęstym bloku referencyjnym, gdzie zbędny projekt spowoduje tylko przeciążenie percepcji i utrudni odczytanie dokumentu. Jednak w niektórych przypadkach wskazane jest oddzielenie tekstu i linków. Jeśli projekt witryny całkowicie wyklucza takie formatowanie, warto zastosować dowolny inny rodzaj wyboru takich elementów. Najczęstszym rodzajem rozróżnienia jest dziś kontrast kolorów kotwic w tekście. To jest skuteczne. Jedynym małym minusem takiej opcji będzie problem wyboru tekstu dla osób, które nie mogą odbierać różnych kolorów (ślepota barw). Ale jest to tak niski odsetek użytkowników, że można go zaniedbać.


Jeśli mimo wszystko postanowiono usunąć podkreślenie linków, wymagana będzie pewna wiedza na temat struktury strony internetowej, a mianowicie CSS.

Usuń podkreślenia linków w całej witrynie

Dla osób dobrze zorientowanych w projektowaniu stron internetowych, w szczególności w CSS, usunięcie podkreśleń linków nie będzie specjalną pracą. Aby to zrobić, wystarczy znaleźć i znaleźć pliki witrynyotwarty plik odpowiedzialny za stylistykę. Zwykle znajduje się w katalogu głównym i ma rozszerzenie .css. Możesz usunąć podkreślenia linków za pomocą prostego kodu:


a {dekoracja tekstu: brak; } Ta mała linia usuwa wszystkie elementy napisane tagiem "a" całkowicie w całej witrynie. Ale co, jeśli nie masz dostępu do pliku CSS? W takim przypadku celowe jest użycie znacznika Style na początku dokumentu. Działa tak samo jak plik CSS. Aby zastosować style, należy na samym początku dokumentu (lub strony HTML) dodać projekt, który ma zwykłe reguły stylów CSS.
Te style dotyczą tylko określonej strony. Nie będą działać w innych sekcjach lub dokumentach witryny.

Usuń podkreślenie linków po najechaniu kursorem

Ale co, jeśli musisz usunąć podkreślenie linku po najechaniu myszą? CSS może nam w tym pomóc. Kod będzie wyglądać tak: a: hover {text-decoration: none; } Pseudo-klasa ": hover" jest odpowiedzialna za dekorowanie elementów po najechaniu kursorem. Łącząc te dwie opcje, możemy sprawić, że podkreślenie linku pojawi się tylko po najechaniu kursorem, w przeciwnym razie wszystko będzie wyglądać jak zwykły tekst: a {dekoracja tekstu: brak; } a: hover {text-decoration: podkreślenie; }

Zastosowanie identyfikatorów i klas

Jak widać z powyższego, łatwo jest zmienić stylizację przedmiotu na stronie lub w dokumencie HTML. Wadami takich wariantów są niemożność selektywnego stosowania stylów: nie cała strona lubdokument, ale do konkretnego linku.
Istnieje kilka możliwości rozwiązania tego problemu. Możesz usunąć podkreślenia linków w nieaktywny sposób. Chociaż kategorycznie nie zaleca się tego w zakresie optymalizacji strony. Aby to zrobić, musisz określić opcję Style bezpośrednio w tagu linku: druga opcja jest bardziej akceptowalna. Wprowadź element w dodatkowej klasie lub id i już te selektory przypisujemy wymagającemu stylowi: Następnie wszystko jest zrobione na zwiniętym. W pliku CSS możemy usunąć podkreślenie linków, stosując znany nam styl dla klasy lub identyfikatora, w zależności od wyboru. Klasa jest zapisana kropką przed nazwą: .none_decoration {text-decoration: none; } Identyfikator jest oznaczony znakiem #: #none_decoration {text-decoration: none; } Ta reguła dotyczy zarówno pliku CSS, jak i znacznika stylu

Zmienia styl wyświetlania łącza w tekście

Oprócz możliwości usunięcia podkreślenia łącza, CSS umożliwia stosowanie innych stylów. Często projektanci stron internetowych lub graficy używają koloru głównego tekstu, aby odróżnić tekst referencyjny.
Niech to będzie proste: i {color: * określ żądany kolor w dowolnym formacie (* czerwony, # c2c2c2 rgb (1323365) *) *; } Podobna stylizacja jest używana zgodnie z tymi samymi zasadami, jak opisane w przypadku cofania połączenia. Reguły CSS są w tym przypadku identyczne. Zmiana koloru linku i cofnięcie podkreślenia może być zastosowana jako oddzielna stylizacja (wówczas link pozostanie podkreślony, ale zmieni kolor ze standardowego niebieskiego nakonieczne dla ciebie).

Wymiana standardowej stylizacji

Kolejna uwaga do końca. Zamiast cofania połączenia CSS umożliwia zastąpienie domyślnych wartości projektu. Aby to zrobić, ustaw następujące wartości w konstrukcji dekoracji tekstu: styl dekoracji tekstu:
  • Jeśli potrzebujesz linii ciągłej, określ wartość bryły.
  • Dla falistej linii falistej.
  • Podwójna linia jest odpowiednio podwójna.
  • Linię można zastąpić kropkowaną sekwencją punktów.
  • Podkreśl słowo w formie obrysu - przerywana
  • Możesz również zmienić położenie linii w odniesieniu do tekstu: Projekt linii-tekstu-dekoracji-linii może przyjmować następujące wartości:
  • Standard (podkreślenie poniżej) - podkreślenie.
  • Przekonwertuj słowo (frazę) - przez.
  • Linia jest powyżej - overline.
  • Nie znamy żadnego - bez stylizacji.
  • I kolor (nie mylić z kolorem tekstu!): Linia do dekoracji tekstu: (dowolny kolor w dowolnym formacie * czerwony, # c2c2c2 rgb (1323365) *). Dla wygody wszystkie trzy pozycje można zapisać razem w projekcie: dekoracja tekstowa: czerwona, prosta, falista.

    Powiązane publikacje