Saltar al contenido

Як змінити підкреслення посилань на веб-сторінці

29 de julio de 2021

Змістовий покажчик

Що знати

  • Видаліть підкреслення з текстових посилань за допомогою властивості CSS для оформлення тексту, набравши текст a {прикраса тексту: немає; }.
  • Змініть підкреслення на крапки за допомогою властивості стилю border-bottom a {прикраса тексту: немає; межа-дно: 1 піксель пунктир; }.
  • Змініть колір підкреслення, набравши a {прикраса тексту: немає; бордюр: 1px суцільно-червоний; }. Замінити суцільним червоним з іншим кольором.

У цій статті описано кілька способів використання CSS для зміни типового вигляду текстових посилань на веб-сторінці, видаливши підкреслення, змінивши його на пунктирну лінію або змінивши колір. Додана додаткова інформація для зміни підкреслення на пунктирну або подвійне підкреслення.

Як видалити підкреслення з текстових посилань

За замовчуванням веб-браузери мають певні стилі CSS, які вони застосовують до певних елементів HTML. Якщо ви не перезаписуєте ці значення за замовчуванням на власні таблиці стилів вашого сайту, тоді застосовуються значення за замовчуванням. Для гіперпосилань типовим стилем відображення є те, що будь-який зв’язаний текст має синій колір та підкреслюється. Якщо ви хочете, ви можете змінити вигляд цих підкреслення або повністю видалити їх зі своєї веб-сторінки. Щоб видалити підкреслення з текстових посилань, ви використовуєте властивість CSS text-decoration. Ось CSS, який ви пишете для цього: a {text-decoration: none; }

class = «ql-syntax»> За допомогою цього одного рядка CSS ви видаляєте підкреслення з усіх текстових посилань на вашій веб-сторінці. Незважаючи на те, що це дуже загальний стиль (він використовує селектор елементів), він все одно має більше конкретності, ніж стилі браузерів за замовчуванням. Оскільки саме ті стилі за замовчуванням створюють підкреслення для початку, саме це вам потрібно переписати.

Застереження щодо видалення підкреслення

Візуально видалення підкреслення може бути саме тим, що ви хочете досягти, але ви також повинні бути обережними, коли робите це. Незалежно від того, подобається вам вигляд підкреслених посилань чи ні, ви не можете стверджувати, що вони дають зрозуміти, на який текст посилається, а який ні. Якщо ви знімаєте підкреслення або змінюєте цей синій колір посилання за замовчуванням, вам слід переконатись, що ви заміните їх стилями, які все одно дозволяють виділеному тексту. Це забезпечить більш інтуїтивний досвід для відвідувачів вашого сайту.

Не підкреслюйте непосилання

Ще одне застереження щодо посилань та підкреслення: не підкреслюйте текст, який не є посиланням, як спосіб підкреслити його. Люди сподіваються, що підкреслений текст буде посиланням, тому, якщо ви підкреслите вміст, щоб додати акцент (замість того, щоб робити його жирним або курсивом), ви надсилаєте неправильне повідомлення і заплутаєте користувачів сайту.

Як змінити підкреслення на крапки або тире

Якщо ви хочете залишити підкреслене текстове посилання, але змінити стиль цього підкреслення з вигляду за замовчуванням, який є «суцільним» рядком, ви можете зробити це теж. Замість цієї суцільної лінії ви можете використовувати крапки, щоб підкреслити свої посилання. Для цього ви все одно видалите підкреслення, але заміните його властивістю стилю border-bottom: a {text-decoration: none; межа-дно: 1 піксель пунктир; }

Оскільки ви видалили стандартне підкреслення, єдиним з’являється пунктир. Ви можете зробити те саме, щоб отримати тире. Просто змініть стиль межі внизу на штриховий: a {text-decoration: none; межа-дно: 1px пунктир; }

Як змінити колір підкреслення

Ще один спосіб привернути увагу до своїх посилань – це змінити колір підкреслення. Просто переконайтеся, що колір відповідає вашій колірній гамі. a {прикраса тексту: немає; бордюр: 1px суцільно-червоний; }

Подвійне підкреслення

Фокус у використанні подвійних підкреслення полягає в тому, що вам потрібно змінити ширину межі. Якщо ви створите межу шириною 1 піксель, ви отримаєте подвійне підкреслення, яке виглядає як одне підкреслення. a {прикраса тексту: немає; межа-дно: 3px подвійний; }

Ви також можете використовувати наявне підкреслення, щоб зробити подвійне підкреслення з іншими функціями, наприклад, одним із пунктирних рядків: {border-bottom: 1px double; }

Не забувайте про стан посилань

Ви можете додати стиль кордону до ваших посилань у різних станах, таких як: наведення курсору,: активний або: відвіданий. Це може створити приємний досвід стилю «перекидання» для відвідувачів, коли ви використовуєте цей псевдо-клас «наведення». Щоб зробити другий підкреслений пунктиром під час наведення курсора на посилання: a {text-decoration: none; }
a: hover {border-bottom: 1px пунктир; }

Формат mla apa chicago Ваше посилання

Кірнін, Дженніфер. «Як змінити підкреслення посилань на веб-сторінці.» ThoughtCo, травень. 14, 2021, thinkco.com/change-link-underlines-3466397.
Кірнін, Дженніфер. (2021, 14 травня). Як змінити підкреслення посилань на веб-сторінці. Отримано з https://www.thoughtco.com/change-link-underlines-3466397
Кірнін, Дженніфер. «Як змінити підкреслення посилань на веб-сторінці.» ДумкаCo. https://www.thoughtco.com/change-link-underlines-3466397 (доступ 29 липня 2021 р.).