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

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

По умолчанию все ссылки имеют подчеркивание. Это всегда стоит помнить при создании новых классов для тега <a> в CSS.

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

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

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

Пример №1. Убираем подчеркивание у ссылки

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

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

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

Ссылка с подчеркиванием

Ссылка без подчеркивания

Ссылка с подчеркиванием и без class

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





Пример №2. Убираем подчеркивание при наведение

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

<html>
<head>
<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>
</head>
<body>
<a href="">Ссылка 1</a>
</body>
</html>

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

Ссылка 1

Пример №3. Делаем красивое подчеркивание

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

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

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

Ссылка с пунктирным подчеркиванием

Ссылка со сплошным подчеркиванием

Ссылка с подчеркиванием в виде фона

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




Читайте также:

• Как изменить вид ссылки при наведении

• Как увеличивать изображения (все способы)

• Как сделать карту изображений (карта ссылок)

• Как сделать слайдер

• Как сделать обтекание картинки текстом

• Как открыть ссылку в новом окне

• Коды символов для HTML

• Добавление социальных кнопок на сайт

• Коды и названия html цветов для сайта

• Как сделать бегущую строку на сайте

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.