Ссылки без подчеркивания
www-html.ru
Обычная версия
Средствами тегов ШТМЛ убрать нижняя полоска в контенте у ссылок не представляется возможным.
Поэтому для этой цели используются каскадные таблицы стилей (Cascading Style
Sheets, CSS (ЦСС)).
Одно из наиболее популярных применений CSS (ЦСС) для ссылок — убирание у
них подчеркивания. С позиции юзабилити не совсем верное решение, поскольку
пользователь может сразу не догадаться, что контент, который он видит, является
ссылкой. Все ведь уже привыкли — раз нижняя полоска в контенте используется, значит
это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок
может придать определенный эффект сайту. Часто делается, что при наведении
курсора, ссылка становится подчеркнутой, меняет свой цвет, или используется
и то и другое действие одновременно.
нижняя полоска в контенте прячется с помощью стилевого параметроа text-decoration:
none, добавляя его к селектору A, как показано
в примере 1.
Пример 1. Убирание подчеркивания у ссылки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>нижняя полоска в контенте у ссылок</title>
<style type="text/CSS (ЦСС)">
A {
text-decoration: none;
}
A:hover {
text-decoration: underline;
color: red;
}
</style>
</head>
<body>
<p><a href="link.ШТМЛ">Наведи сюда курсор, увидишь результат</a></p>
</body>
</html>
Ниже приведен результат выполнения данного примера. При наведении курсора на
ссылку, она становится подчеркнутой и красной.
