special

This webpage has been robot translated, sorry for typos if any. To view the original content of the page, simply replace the translation subdomain with www in the address bar or use this link.

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

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

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

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

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

Валидный HTML
Валидный CSS
<!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=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>

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

Copyright © www.htmlbook.ru


Created/Updated: 25.05.2018

';>