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