Как убрать выделение ссылки в html
По умолчанию ссылки всегда подчёркиваются, чтобы легко можно было отличить ссылку от рядового текста. Но иногда для стилизации текста их необходимо убрать. Для работы со ссылками правильно использовать псевдоклассы . В примере ниже, нижнее подчеркивание у ссылок убрано, но при наведении курсора — будет появляться.
href="#" alt="http://ru.hexlet.io">Перейти по ссылке a:link, a:visited text-decoration: none; > a:hover, a:active text-decoration: underline; > Как у тега убрать визуальные эффекты?
Надо прописать для каждого состояния ссылки стиль оформления, используя псевдоклассы. А использовать !important надо только в самых крайних случаях.
a.text:active, /* активная/посещенная ссылка */ a.text:hover, /* при наведении */ a.text
block1
Отслеживать
ответ дан 25 июл 2016 в 11:45
5,542 2 2 золотых знака 20 20 серебряных знаков 41 41 бронзовый знак
Спасибо спасибо спасибо но при наведении мне как раз не надо
25 июл 2016 в 12:00
@ЕвгенийЛюбимов в таком случае достаточно прописать a.text:active, a.text <. >, а для наведения прописать отдельно ` a.text:hover <. >`, если понадобится в будущем. отметьте мой ответ принятым галочкой слева от вопроса, если он вам подходит
25 июл 2016 в 12:40
Мне подошел еще первый вариант задать цвет большего мне и не требовалось=) Но вам все равно спасибо!
25 июл 2016 в 13:23
@ЕвгенийЛюбимов не вопрос, но тогда следует учесть на будущее, что если всё-таки будет нужда задать какой-то другой цвет для ссылок при наведении, то, например, a.text:hover < color: green>a < color: #000 !important >не сработает, и придётся прописывать !important везде. а это повлечёт за собой вероятные проблемы в виде уродливого трудноподдерживаемого кода
Убираем подчеркивание у ссылки с помощью CSS
Средствами непосредственно HTML убрать нижнее подчеркивание у ссылки невозможно. Поэтому для этого используют свойства CSS.
Подчеркивание (также как и выделение текста с помощью надчеркивания и перечеркивания) определяется с помощью свойства text-decoration . Чтобы убрать линию снизу, нужно установить его в значение none .
На примере ниже у ссылки с классом noline удалено подчеркивание.
a.noline
Ниже этот же пример в Codepen, где наглядно видно, как это работает. У ссылки (тег A ) с классом noline линии снизу нет.
Как убрать синий цвет у ссылки
Чтобы убрать у ссылки синий цвет (или подсветку любого другого цвета), надо установить у нее свойства color в значение inherit (использовать свойство родительского элемента), тогда она скорее всего станет такого же цвета, как и обычный текст.
Если это не помогает, то можно таким же образом задать цвет напрямую.
Как убрать подсвечивание ссылки при наведении
Это делается при помощи псевдокласса :hover, срабатывающего при наведении на элемент. Инструкция будет выглядеть так:
Как убрать подчеркивание ссылки
Если Вы задались таким вопросом, то, скорее всего, Вам плохо знакомы стили CSS. В этой статье я опишу как можно убрать подчеркивание ссылок с помощью CSS, а также расскажу про противоположную задачу как сделать подчеркивание ссылок при наведении и т.п. Рассмотрим все возможные варианты.
По умолчанию все ссылки имеют подчеркивание. Это всегда стоит помнить при создании новых классов для тега в CSS.
За подчеркивание ссылок отвечает специальное свойство CSS text-decoration, которое может принимать следующие значения:
- underline (подчеркивание есть);
- none (выключить подчеркивание);
Примеры использования text-decoration
Пример №1. Убираем подчеркивание у ссылки
Рассмотрим первый вариант, в котором мы зададим общий (шаблонный) стиль для ссылок (цвет и размер) и еще зададим два класса ссылок. Класс podcherk включает ссылке подчеркивание, а notpodcherk соответственно убирает подчеркивание. Следующий код демонстрирует это:
html> head> style type value">text/css"> a< color: blue; /* цвет ссылки синий */ font-size:12px; /* размер 12 пикселей */ > .podcherk /* у ссылки с классом podcherk будет подчеркивание всегда */ < text-decoration: underline > .notpodcherk /* у ссылки с классом notpodcherk не будет подчеркивания по умолчанию */ < text-decoration: none > .notpodcherk:hover < text-decoration: none > style> /head> body> a class value">podcherk" href="">Ссылка с подчеркиваниемa> a class value">notpodcherk" href="">Ссылка без подчеркиванияa> a href="">Ссылка с подчеркиванием и без classa> /body> /html>
Вот во что преобразуется этот код:
Последняя ссылка будет с подчеркиванием, поскольку, как я написал ранее, по умолчанию подчеркивание включено.
Пример №2. Убираем подчеркивание при наведение
Теперь рассмотрим такой случай, чтобы сделать подчеркивание ссылки при наведение курсора на неё.
html> head> style type value">text/css"> a< color: blue; /* цвет ссылки синий */ font-size:12px; /* размер 12 пикселей */ text-decoration: none; /* убираем подчеркивание */ > a:hover /* при наведение мышки на ссылку она будет подчеркиваться, т.к. стоит параметр underline */ < text-decoration: underline > a:visited /* класс для посещенных ссылок (изменяем их цвет на черный) */ < color:black; > style> /head> body> a href="">Ссылка 1a> /body> /html>
Данный код преобразуется в такую ссылку:
Пример №3. Делаем красивое подчеркивание
На последок рассмотрим необычное оформление ссылки, а именно сделаем красивое подчеркивание для ссылки в трех вариантах: пунктирное, сплошное и фоновое. На самом деле это все экзотика, но в некоторых случаях можно сделать сайт более интересным, сделав необычное подчеркивание ссылок.
html> head> style type value">text/css"> a < color: #000000; /* цвет ссылки */ text-decoration: none; /* убираем подчеркивание */ > a.link_1 < border-bottom: 1px #0000ff dashed; /* пунктирное подчеркивание ссылки */ zoom:1; /* для IE6 и IE7 */ > a.link_1:hover /* цвет подчеркивания при наведении курсора */ < border-color: #00aaff; > a.link_2 < border-bottom: 3px #0000ff solid; /* сплошное подчеркивание */ padding-bottom: 1px; /* отступ между подчеркиванием и ссылкой */ > a.link_2:hover /* цвет подчеркивания при наведении курсора */ < border-color: #00aaff; > a.link_3 < background: url("img/fon_off.jpg") 0 100%; /* фон третьей ссылки */ padding-bottom: 2px; /* отступ от ссылки */ > a.link_3:hover /* фон при наведении */ < background: url("img/fon_on.jpg") 0 100%; > style> /head> body> a class css">link_1" href="">Ссылка с пунктирным подчеркиваниемa> a class css">link_2" href="">Ссылка со сплошным подчеркиваниемa> a class css">link_3" href="">Ссылка с подчеркиванием в виде фонаa> /body> /html>
Преобразуется на странице в:
Вот в принципе и все самые интересные примеры по подчеркиванию ссылок. Главным ответом на вопрос этой статьи служит строка: text-decoration: none (убирает подчеркивание).