Содержание
По умолчанию текстовое содержимое, которое связано с HTML с помощью элемента «anchor», подчеркивается подчеркиванием. Часто веб-дизайнеры выбирают этот стиль по умолчанию, удаляя подчеркивание.
Причины за и против подчеркивания
Многие дизайнеры не заботятся о внешнем виде подчеркнутого текста, особенно в плотных блоках контента со множеством ссылок. Все эти подчеркнутые слова действительно могут нарушить процесс чтения документа. Многие утверждают, что эти подчеркивания на самом деле затрудняют различение и чтение слов из-за того, как подчеркивание меняет естественные формы букв.
Однако есть и законные преимущества сохранения этих подчеркиваний в текстовых ссылках. Например, когда вы просматриваете большие блоки текста, подчеркнутые ссылки в сочетании с надлежащим цветовым контрастом позволяют читателям сразу же отсканировать страницу и увидеть, где находятся ссылки.
Если вы решили удалить ссылки из текста (простой процесс, который мы вскоре расскажем), обязательно найдите способы стилизовать этот текст, чтобы по-прежнему отличать ссылку от простого текста. Чаще всего это делается с вышеупомянутым цветовым контрастом, но один цвет может создать проблему для посетителей с нарушениями зрения, такими как дальтонизм. В зависимости от их конкретной формы дальтонизма, контраст может быть полностью потерян, что не позволяет им увидеть разницу между связанным и несвязанным текстом. Вот почему подчеркнутый текст все еще считается лучшим способом показать ссылки.
Так как же отключить подчеркивание, если вы все еще хотите это сделать? Поскольку это визуальная характеристика, которая нас интересует, мы обратимся к той части нашего веб-сайта, которая обрабатывает все визуальные элементы — CSS.
Используйте каскадные таблицы стилей, чтобы отключить подчеркивания в ссылках
В большинстве случаев вы не хотите отключать подчеркивание только одной текстовой ссылкой. Вместо этого ваш стиль дизайна, скорее всего, требует, чтобы вы удалили подчеркивания из всех ссылок. Вы сделаете это, добавив стили к вашей внешней таблице стилей.
{
текстовое оформление: нет;
}
Это оно! Эта простая строка CSS отключит подчеркивание (которое на самом деле использует свойство CSS для «украшения текста») на всех ссылках.
Вы также можете получить более конкретный с этим стилем. Например, если вы хотите отключить только подчеркивание или ссылки внутри элемента nav, вы можете написать:
nav {
текстовое оформление: нет;
}
Теперь текстовые ссылки на странице получат подчеркивание по умолчанию, но те, которые находятся в навигации, будут удалены.
Одна вещь, которую многие веб-дизайнеры выбирают, — это снова включить ссылку, когда кто-то наводит курсор мыши на текст. Это можно сделать с помощью псевдокласса: hover CSS, например:
{
текстовое оформление: нет;
}
a: hover {
текст-отделка: подчеркнуть;
}
Использование встроенного CSS
В качестве альтернативы внесению изменений во внешнюю таблицу стилей вы также можете добавить стили непосредственно к самому элементу в HTML.
Проблема этого метода заключается в том, что он помещает информацию о стиле в структуру HTML, что не является наилучшей практикой. Стиль (CSS) и структура (HTML) должны храниться отдельно.
Если вы хотите, чтобы все текстовые ссылки на сайте были удалены подчеркиванием, добавление этой информации о стиле к каждой ссылке на индивидуальной основе означало бы добавление достаточного количества дополнительной разметки в код вашего сайта. Это раздувание страницы может замедлить время загрузки сайта и сделать общее управление страницей намного сложнее. По этим причинам предпочтительно всегда обращаться к внешней таблице стилей для всех нужд стиля страницы.
В заключение
Как легко удалить подчеркивание из текстовых ссылок веб-страницы, вы также должны помнить о последствиях этого. Хотя он действительно может очистить внешний вид страницы, он может сделать это за счет общего удобства использования. Примите это во внимание в следующий раз, когда вы подумаете об изменении свойств текста для оформления.
