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