www html, html уроки, html теги, css, верстка
Уроки книги по css и 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.ШТМЛ">Наведи сюда курсор, увидишь результат</a></p>
</body>
</html>

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

НАВЕДИ СЮДА КУРСОР, УВИДИШЬ РЕЗУЛЬТАТ
Статья опубликована: 06.09.2009 Последнее обновление: 25.02.2009
Поиск по сайту
Ссылки
Разделы
Теги по теме

A
Тег A является одним из важных элементов ШТМЛ и предназначен для разработки ссылок. В зависимости от присутствия параметров name или href тег A устанавливает ссылку или якорь.

CSS (ЦСС) по теме

color
Определяет цвет контента элемента.

text-decoration
Добавляет оформление контента в виде его подчеркивания, перечеркивания, линии над контентом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект