Как убрать подчеркивание ссылки
Если Вы задались таким вопросом, то, скорее всего, Вам плохо знакомы стили CSS. В этой статье я опишу как можно убрать подчеркивание ссылок с помощью CSS, а также как сделать подчеркивание ссылок при наведении и т.п. Рассмотрим все возможные варианты.
По умолчанию все ссылки имеют подчеркивание. Это всегда стоит помнить при создании новых классов для тега a в CSS. За подчеркивание ссылок отвечает специальный параметр text-decoration, которые может принимать следующие значения:
→ underline (подчеркивание есть);
→ none (выключить подчеркивание).
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>
|
Вот во что преобразуется этот код:
Ссылка с подчеркиванием
Ссылка без подчеркивания
Ссылка с подчеркиванием и без 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>
Данный код преобразуется в такую ссылку:
Ссылка 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>
Преобразуется на странице в:
Ссылка с пунктирным подчеркиванием
Ссылка со сплошным подчеркиванием
Ссылка с подчеркиванием в виде фона
Вот в принципе и все самые интересные примеры по подчеркиванию ссылок. Главным ответом на вопрос этой статьи служит строка: text-decoration: none (убирает подчеркивание).
Читайте также:
• Как сделать фон для сайта
• Как добавить бегущую строку на сайте
• Эффект падающих снежинок на сайт через JavaScript
• Коды символов в HTML
• Добавление социальных кнопок на сайт
← Перейти в каталог html уроков и советов
|
