Содержание
По умолчанию веб-браузеры имеют определенные стили CSS, которые они применяют к определенным элементам HTML. Если вы не перезаписываете эти значения по умолчанию собственными таблицами стилей вашего сайта, то будут применяться значения по умолчанию. Для гиперссылок стиль отображения по умолчанию состоит в том, что любой связанный текст будет синим и подчеркнутым. Браузер делает это так, чтобы посетители сайта могли легко видеть, какой текст связан. Многим веб-дизайнерам безразличны эти стили по умолчанию, особенно те, которые подчеркиваются. К счастью, CSS позволяет легко изменить внешний вид этих подчеркиваний или полностью удалить их.
Удаление подчеркивания в текстовых ссылках
Подчеркнутый текст может быть более сложным для чтения, чем подчеркнутый текст. Кроме того, многие дизайнеры просто не заботятся о внешнем виде подчеркнутых текстовых ссылок. В этих случаях вы, вероятно, захотите удалить эти подчеркивания в целом.
Чтобы удалить подчеркивания из текстовых ссылок, вы будете использовать свойство text-художественное оформление CSS. Вот CSS, который вы бы написали для этого:
a {текстовое оформление: нет; }
С этой одной строкой CSS вы удалили бы подчеркивание из всех текстовых ссылок. Несмотря на то, что это очень общий стиль (он использует селектор элементов), он все же обладает большей специфичностью, чем стили стилей браузеров по умолчанию. Поскольку эти стили по умолчанию — это то, что создает подчеркивание для начала, это то, что вам нужно перезаписать.
Предупреждение об удалении подчеркиваний
Визуально удаление подчеркиваний может быть именно тем, чего вы хотите достичь, но вы должны быть осторожны, когда делаете это также. Нравится ли вам внешний вид подчеркнутых ссылок или нет, вы не можете утверждать, что они ясно показывают, какой текст связан, а какой нет. Если вы уберете подчеркивание или измените этот синий цвет ссылки по умолчанию, убедитесь, что вы заменили их стилями, которые все еще позволяют выделенному тексту выделяться. Это сделает более интуитивно понятным для посетителей вашего сайта.
Не подчеркивайте не ссылки
Еще одно предостережение в отношении ссылок и подчеркиваний: не подчеркивайте текст, который не является ссылкой, чтобы подчеркнуть его. Люди ожидают, что подчеркнутый текст будет ссылкой, поэтому, если вы подчеркиваете контент, чтобы добавить акцент (вместо того, чтобы выделять его жирным шрифтом или курсивом), вы отправляете неправильное сообщение и вводите пользователей в заблуждение.
Измените подчеркивание на точки или тире
Если вы хотите, чтобы текстовая ссылка была подчеркнута, но изменила стиль этого подчеркивания по сравнению с внешним видом по умолчанию, который представляет собой строку «солдат», вы также можете сделать это. Вместо этой сплошной линии вы можете использовать точки, чтобы подчеркнуть ваши ссылки. Для этого вы все равно удалите подчеркивание, но замените его на свойство стиля border-bottom:
a {текстовое оформление: нет; граница снизу: пунктирная 1px; }Так как вы удалили стандартное подчеркивание, отображается только пунктир.
Вы можете сделать то же самое, чтобы получить тире. Просто измените стиль границы снизу на пунктирную:
a {текстовое оформление: нет; граница снизу: пунктирная 1px; }Изменить цвет подчеркивания
Еще один способ привлечь внимание к вашим ссылкам — изменить цвет подчеркивания. Просто убедитесь, что цвет соответствует вашей цветовой гамме.
a {текстовое оформление: нет; нижний край: 1px сплошной красный; }Двойное подчеркивание
Хитрость в использовании двойных подчеркиваний заключается в том, что вам нужно изменить ширину границы. Если вы создадите рамку шириной 1px, вы получите двойное подчеркивание, которое выглядит как одно подчеркивание.
a {текстовое оформление: нет; граница снизу: 3px двойная; }Вы также можете использовать существующее подчеркивание, чтобы сделать двойное подчеркивание с другими функциями, такими как одна из пунктирных линий:
a {border-bottom: 1px double; }Не забывайте о ссылочных состояниях
Вы можете добавить стиль границы внизу для своих ссылок в различных состояниях, таких как: hover,: active или: visit. Это может создать приятный опыт в стиле «ролловер» для посетителей, когда вы используете этот псевдо-класс «hover». Чтобы при наведении курсора на ссылку появилось второе пунктирное подчеркивание:
a {текстовое оформление: нет; }
a: hover {border-bottom: 1px dotted; }Оригинальная статья Дженнифер Крынин. Под редакцией Джереми Жирара
