lightanddesign.ru
You might also like
По умолчанию браузеры применяют определенный набор стилей CSS к определенным элементам HTML. В случае гиперссылок эти стили по умолчанию определяют, что текст каждой ссылки отображается в CSS подчеркнутым синим цветом. Это делается для того, чтобы посетителям сайта было легче распознать, что данный текст является ссылкой. Многие веб-дизайнеры не уделяют особого внимания этим стилям по умолчанию, особенно подчеркиванию. К счастью, CSS позволяет легко изменить внешний вид гиперссылок.
Как убрать подчеркивание ссылки CSS
Подчеркнутый текст может быть более трудным для чтения, чем обычный. Многие дизайнеры не уделяют этому достаточного внимания. Однако можно вообще убрать мелкий текст. Для этого используйте свойство CSStext-decoration. Код CSS для этого выглядит следующим образом
Эта строка кода может быть использована для удаления стиля подчеркивания CSS из всех ссылок.
Предостережение относительно удаления подчеркивания
Нравится ли вам подчеркивание или нет, нельзя отрицать тот факт, что оно может указывать на взаимосвязь между текстом и ссылками. Если убрать подчеркивание или изменить синий цвет ссылки, необходимо указать стиль, позволяющий выделить текст ссылки. Это делает взаимодействие посетителя с сайтом более интуитивным.
Не подчеркивайте текст, не связанный со ссылкой
Не подчеркивайте текст, который не является ссылкой. Люди привыкли, что подчеркнутый текст (цвет подчеркивания в CSS) — это ссылка. (Если вы подчеркиваете содержимое для выделения (а не делаете его жирным или курсивом), вы вводите пользователей сайта в заблуждение.
Измените сплошное подчеркивание точками или пунктиром
Если вы хотите изменить стиль по умолчанию ("сплошной"), сохранив при этом подчеркивание ссылок, вы можете сделать следующее Используйте точки вместо сплошных линий. Для этого удалите подчеркивание и замените его свойством border-bottom.
Подчеркивание в стандартном оформлении текста CSS было удалено, поэтому появляется только пунктирная линия.
То же самое можно сделать для добавления пунктирного подчеркивания. Просто измените значение border-bottom на пунктирную линию: см. ниже.
Изменение цвета подчеркивания
Еще один способ привлечь внимание пользователя к ссылке — изменить цвет подчеркивания. Помните, что цвет подчеркивания текста CSS должен совпадать с цветом, который вы используете.
Как сделать двойное подчеркивание
Секрет создания двойного подчеркивания заключается в изменении ширины поля. Если вы создадите поле шириной в один пиксель, в результате вы получите два подчеркивания, которые будут выглядеть как одно.
Вы также можете использовать стандартные подчеркивания для создания альтернативных двойных подчеркиваний. Например, чтобы удвоить одну из линий, сделайте следующее
Не забывайте о различных состояниях ссылок
Вы также можете использовать border-bottom для различных состояний ссылки. Используйте псевдокласс: hover для улучшения пользовательского опыта. Чтобы создать второе подчеркивание, которое появляется при наведении указателя мыши на ссылку, используйте следующий код для отключения подчеркивания в оформлении текста CSS.
Опубликуйте свои взгляды на текущую тему статьи. Мы очень ценим ваши комментарии, лайки, замечания, антипатии, подписки!
