0 просмотров

Изучите простой способ удаления подчеркивания из ссылок в HTML

Дженнифер Кирнин — профессиональный веб-разработчик, помогающий другим в изучении веб-дизайна, HTML, CSS и XML.

По умолчанию текстовое содержимое, связанное с HTML с помощью элемента или «привязки», оформляется подчеркиванием. Часто веб-дизайнеры решают удалить этот стиль по умолчанию, удалив подчеркивание.

Причины за и против подчеркивания

Многих дизайнеров не волнует внешний вид подчеркнутого текста, особенно в плотных блоках контента с большим количеством ссылок. Все эти подчеркнутые слова действительно могут нарушить процесс чтения документа. Многие утверждают, что эти подчеркивания на самом деле затрудняют различение и быстрое чтение слов из-за того, как подчеркивание меняет естественные формы букв.

Однако сохранение этих подчеркиваний в текстовых ссылках имеет законные преимущества. Например, когда вы просматриваете большие блоки текста, подчеркнутые ссылки в сочетании с правильным цветовым контрастом позволяют читателям сразу же просмотреть страницу и увидеть, где находятся ссылки.

Если вы решите удалить ссылки из текста (простой процесс, который мы вскоре рассмотрим), обязательно найдите способы стилизовать этот текст, чтобы по-прежнему отличать ссылку от простого текста. Чаще всего это делается с помощью цветового контраста, но сам по себе цвет может представлять проблему для посетителей с нарушениями зрения, такими как дальтонизм.В зависимости от их конкретной формы дальтонизма контрастность может быть полностью потеряна для них, не позволяя им видеть разницу между связанным и несвязанным текстом. Вот почему подчеркнутый текст по-прежнему считается лучшим способом отображения ссылок.

Так как же отключить подчеркивание, если вы все еще хотите это сделать? Поскольку это визуальная характеристика, которая нас интересует, мы обратимся к той части нашего веб-сайта, которая обрабатывает все визуальные элементы — CSS.

Используйте каскадные таблицы стилей, чтобы отключить подчеркивание ссылок

В большинстве случаев вам не нужно отключать подчеркивание только для одной текстовой ссылки. Вместо этого ваш стиль дизайна, вероятно, требует, чтобы вы удалили подчеркивания со всех ссылок. Вы бы сделали это, добавив стили во внешнюю таблицу стилей.

Вот и все! Эта простая строка CSS отключит подчеркивание (которое на самом деле использует свойство CSS для «украшения текста») для всех ссылок.

Вы также можете уточнить этот стиль. Например, если вы хотите отключить только подчеркивание или ссылки внутри элемента «nav», вы можете написать:

Теперь текстовые ссылки на странице получат подчеркивание по умолчанию, но те, что в навигации, будут удалены.

Многие веб-дизайнеры предпочитают включать ссылку, когда кто-то наводит курсор на текст. Это можно сделать с помощью CSS-псевдокласса :hover, например:

Использование встроенного CSS

В качестве альтернативы внесению изменений во внешнюю таблицу стилей вы также можете добавить стили непосредственно к самому элементу в HTML.

Проблема с этим методом заключается в том, что он помещает информацию о стиле внутри вашей HTML-структуры, что не является лучшей практикой. Стиль (CSS) и структура (HTML) должны быть разделены.

Если вы хотите, чтобы у всех текстовых ссылок сайта было удалено подчеркивание, добавление этой информации о стиле к каждой ссылке на индивидуальной основе означало бы добавление изрядного количества дополнительной разметки в код вашего сайта.Это раздувание страницы может замедлить время загрузки сайта и значительно усложнить общее управление страницей. По этим причинам предпочтительнее всегда обращаться к внешней таблице стилей для всех потребностей в стиле страницы.

В заключение

Как бы легко ни было удалить подчеркивание из текстовых ссылок веб-страницы, вы также должны помнить о последствиях этого. Хотя это действительно может улучшить внешний вид страницы, это может быть сделано за счет общего удобства использования. Учтите это, когда в следующий раз решите изменить свойства «текстового оформления» страницы.

голоса
Рейтинг статьи
Статья в тему:  Вторжение союзников на Сицилию во время Второй мировой войны
Ссылка на основную публикацию
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
Adblock
detector