www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Основы CSS (ЦСС) > Ссылки

Ссылки

контентовая версия  

Для управления видом различных ссылок в CSS (ЦСС) используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 1 приведены допустимые псевдоклассы и их описания.

Табл. 1. Псевдоклассы при работе со ссылками
Свойство Описание
A:link Определяет стиль для обычной непосещенной ссылки.
A:visited Определяет стиль для посещенной ссылки.
A:active Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
A:hover Определяет стиль для ссылки при наведении на нее мышью.

Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A. Поэтому этот псевдокласс можно опустить.

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

Одно из наиболее популярных применений CSS (ЦСС) — это скрытие подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что контент, который он видит, является ссылкой. Все ведь уже привыкли — раз нижняя полоска в контенте используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект одновременно (пример 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:link {
text-decoration: none
; /* Убирает нижняя полоска в контенте для ссылок */
}
A:visited { text-decoration: none; }
A:active { text-decoration: none; }
A:hover {
text-decoration: underline;
/* Делает ссылку подчеркнутой при наведении на нее курсора */
color: red;
/* Цвет ссылки */
}
</style>
</head>
<body>
<p><a href="link.ШТМЛ">Пример ссылки</a></p>
</body>
</html>

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

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

Подчеркнутые и надчеркнутые ссылки

Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением параметра text-decoration: underline overline в селекторе A:hover.

Пример 2. Использование подчеркивания в ссылках

Валидный 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:link { text-decoration: none; }
A:visited { text-decoration: none; }
A:active { text-decoration: none; }
A:hover {
text-decoration: underline overline; /* Ссылка подчеркнутая и надчеркнутая */
color: red; /* Цвет ссылки */
}
</style>
</head>
<body>
<p><a href="link.ШТМЛ">Пример ссылки</a></p>
</body>
</html>

Результат данного примера показан ниже.

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

Изменение размера ссылки

Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.

Пример 3. Изменение размера ссылки

Валидный 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:link { text-decoration: none; }
A:visited { text-decoration: none; }
A:active { text-decoration: none; }
A:hover {
font-size: 24px; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
color: red; /* Цвет ссылки */
}
</style>
</head>
<body>
<p><a href="link.ШТМЛ">Пример ссылки</a></p>
</body>
</html>

Результат данного примера показан ниже.

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

Изменение цвета подчеркивания

Со ссылками, при помощи CSS (ЦСС), можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется нижняя полоска в контенте другого цвета, нежели сама ссылка (пример 4). Учтите, что данный прием не работает в некоторых браузерах.

Пример 4. Создание нижняя полоска в контенте другого цвета

Валидный 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:link { color: blue; text-decoration: none; }
 A:hover { color: red; text-decoration: underline; }
.link { color: blue; }
</style>
</head>

<body>
<p><a href="link1.ШТМЛ"><span class="link">Ссылка</span></a></p>
</body>
</html>

Результат данного примера показан ниже.

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

Ссылки разных цветов

Часто возникает необходимость на одной странице использовать ссылки разных цветов и размеров. И применять для каждой области web-страницы ссылки подходящего типа. Одни для меню, другие для контента. В этом случае создаем два или больше класса со своими параметрами и применяем их по своему усмотрению. В примере  6 дастаткова поменять значения у соответствующего класса, и цвета у ссылок, где этот класс используются, изменятся автоматически.

Пример 5. Ссылки разных цветов

Валидный 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 { font-size: 14px; color: red; }
A.link1 { font-size: 12px; color: green; }
A.link2 { font-size: 14px; color: blue; }
</style>
</head>

<body>
<p>| <a href="link1.ШТМЛ">Ссылка 1</a> | <a href="link2.ШТМЛ" class="link1">Ссылка 2</a> | <a href="link3.ШТМЛ" class="link2">Ссылка 3</a> |</p>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Разные ссылки на одной странице

Статья опубликована: 13.09.2009 Последнее обновление: 16.04.2009
Поиск по сайту
Основы CSS (ЦСС)
Разделы
Теги по теме

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

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

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

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

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

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