Как убрать подчеркивание ссылки

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

По умолчанию все ссылки имеют подчеркивание. Это всегда стоит помнить при создании новых классов для тега <a> в CSS. За подчеркивание ссылок отвечает специальный параметр text-decoration, которые может принимать следующие значения:

• underline (подчеркивание есть);
• none (выключить подчеркивание);

Примеры использования text-decoration

1. Рассмотрим первый вариант, в котором мы зададим общий (шаблонный) стиль для ссылок (цвет и размер) и еще зададим два класса ссылок. Класс podcherk включает ссылке подчеркивание, а notpodcherk соответственно убирает подчеркивание. Следующий код демонстрирует это:

<style type="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> <a class="podcherk" href="">Ссылка с подчеркиванием</a> <a class="notpodcherk" href="">Ссылка без подчеркивания</a> <a href="">Ссылка с подчеркиванием и без class</a>

Вот во что преобразуется этот код:

a.podcherk{ color: blue; /* цвет ссылки синий */ font-size:12px; /* размер 12 пикселей */ } a.notpodcherk{ color: blue; /* цвет ссылки синий */ font-size:12px; /* размер 12 пикселей */ } .podcherk { text-decoration: underline } .notpodcherk, .notpodcherk:hover { text-decoration: none } Ссылка с подчеркиванием Ссылка без подчеркивания Ссылка с подчеркиванием и без class

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

2. Теперь рассмотрим такой случай, чтобы сделать подчеркивание ссылки при наведение курсора на неё.

<style type="text/css"> a{ color: blue; /* цвет ссылки синий */ font-size:12px; /* размер 12 пикселей */ text-decoration: none; /* убираем подчеркивание */ } a:hover /* при наведение мышки на ссылку она будет подчеркиваться, т.к. стоит параметр underline */ { text-decoration: underline } a:visited /* класс для посещенных ссылок (изменяем их цвет на черный) */ { color: black; } </style> <a href="">Ссылка 1</a>

Данный код преобразуется в такую ссылку:

a.podcherk2{ color: blue; /* цвет ссылки синий */ font-size:12px; /* размер 12 пикселей */ text-decoration: none; /* убираем подчеркивание */ } a.podcherk2:hover { text-decoration: underline } /* при наведение мышки на ссылку она будет подчеркиваться, т.к. стоит параметр underline */ a.podcherk2:visited { color: black; } /* класс для посещенных ссылок (изменяем их цвет на черный) */ Ссылка 1

3. На последок рассмотрим необычное оформление ссылки, а именно сделаем красивое подчеркивание для ссылки в трех вариантах: пунктирное, сплошное и фоновое. На самом деле это все экзотика, но в некоторых случаях можно сделать сайт более интересным, сделав необычное подчеркивание ссылок.

<style type="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; /* отступ от ссылки */ } .link_3:hover /* фон при наведении */ { background: url("img/fon_on.jpg") 0 100%; } </style> <a class="link_1" href="">Ссылка с пунктирным подчеркиванием</a> <a class="link_2" href="">Ссылка со сплошным подчеркиванием</a> <a class="link_3" href="">Ссылка с подчеркиванием в виде фона</a>

Преобразуется на странице в:

a.link_1 { color: #000000; /* цвет ссылки */ text-decoration: none; /* убираем подчеркивание */ border-bottom: 1px #0000ff dashed; /* пунктирное подчеркивание ссылки */ } a.link_1:hover { border-color: #00aaff; } /* цвет подчеркивания при наведении курсора */ a.link_2 { color: #000000; /* цвет ссылки */ text-decoration: none; /* убираем подчеркивание */ border-bottom: 3px #0000ff solid; /* сплошное подчеркивание */ padding-bottom: 1px; /* отступ между подчеркиванием и ссылкой */ } a.link_2:hover { border-color: #00aaff; } /* цвет подчеркивания при наведении курсора */ a.link_3 { color: #000000; /* цвет ссылки */ text-decoration: none; /* убираем подчеркивание */ background: url("img/fon_off.jpg") 0 100%; /* фон третьей ссылки */ padding-bottom: 2px; /* отступ от ссылки */ } .link_3:hover { background: url("img/fon_on.jpg") 0 100%; /* фон при наведении */} Ссылка с пунктирным подчеркиванием Ссылка со сплошным подчеркиванием Ссылка с подчеркиванием в виде фона

Вот в принципе и все самые интересные примеры по подчеркиванию ссылок. Главным ответом на вопрос этой статьи служит строка: text-decoration: none (убирает подчеркивание).