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

Автор: content Суббота, Апрель 7th, 2012 Нет комментариев

Рубрика: Уроки html

Средствами тегов HTML убрать подчеркивание у ссылок не представляется возможным. Поэтому для этой цели используются каскадные таблицы стилей (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="text.html">Наведи сюда курсор, увидишь результат</a></p>
 </body>
</html>

В данном примере при наведении курсора на ссылку, она становится подчеркнутой и красной.

Источник: http://htmlbook.ru/content/ssylki-bez-podcherkivaniya
Автор: Влад Мержевич

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты