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

Средствами тегов HTML убрать подчеркивание у ссылок не представляется возможным. Поэтому для этой цели используются каскадные таблицы стилей (Cascading Style Sheets, CSS).

Одно из наиболее популярных применений CSS для ссылок — убирание у них подчеркивания. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет, или используется и то и другое действие одновременно.

Подчеркивание прячется с помощью стилевого параметроа text-decoration: none, добавляя его к селектору A, как показано в примере 1.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
A {
text-decoration: none /* Убирает подчеркивание для ссылок */
}
A:hover {
text-decoration: underline; /* Добавляем подчеркивание при наведении курсора на ссылку */
color: red /* Ссылка красного цвета */
}
</style>
</head>
<body>
<a href="link.php">Наведи сюда курсор, увидишь результат</a>
</body>
</html>

Ниже приведен результат выполнения данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.

НАВЕДИ СЮДА КУРСОР, УВИДИШЬ РЕЗУЛЬТАТ

Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное

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