Ссылки без подчеркивания
Средствами тегов HTML убрать подчеркивание у ссылок не представляется возможным. Поэтому для этой цели используются каскадные таблицы стилей (Cascading Style Sheets, CSS).
Одно из наиболее популярных применений CSS для ссылок — убирание у них подчеркивания. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет, или используется и то и другое действие одновременно.
Подчеркивание прячется с помощью стилевого параметроа text-decoration: none, добавляя его к селектору A, как показано в примере 1.
Пример 1. Убирание подчеркивания у ссылки
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Подчеркивание у ссылок</title>
<style type="text/css">
A {
text-decoration: none; /* Убирает подчеркивание для ссылок */
}
A:hover {
text-decoration: underline; /* Добавляем подчеркивание при наведении курсора на ссылку */
color: red; /* Ссылка красного цвета */
}
</style>
</head>
<body>
<p><a href="link.html">Наведи сюда курсор, увидишь результат</a></p>
</body>
</html>
Ниже приведен результат выполнения данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.
| Статья опубликована: 06.09.2005 | Последнее обновление: 25.02.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Eros
12.07.2006
Влад Мержевич
17.07.2006
Siniy
13.05.2007
Влад Мержевич
14.05.2007
http://htmlbook.ru/faq/?a=13
КИРИЛЛ
23.08.2007
Влад Мержевич
23.08.2007
text-decoration: none;
color: red;
}
Й. Цукен
30.08.2007
A {
text-decoration: none
}
A:hover {
text-decoration: none;
color: red
}
Amadou
07.09.2007
Amadou
07.09.2007
Itan
21.10.2007
Everrr
07.05.2008
mafka
19.06.2008
Yarik
19.06.2008
.link{
text-decoration: none;
}
...
<a class="link">Ссылка без подчеркивания</a>
Юлия
18.07.2008
Юлия
18.07.2008
Быколай
25.07.2008