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

HTML

CSS

Статьи

Полезное


Статьи

Основы HTML
Текст
Изображения
Ссылки
Списки
Таблицы
Формы
Фреймы
Основы CSS
Рецепты CSS
Оформление таблиц
Основы верстки
Табличная верстка
Верстка с помощью слоев
Использование слоев
Примеры верстки слоями

Ссылки

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

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

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

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

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

Пример 1. Подчеркивание у ссылки и изменение ее цвета

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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>
...
</body>
</html>

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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>
...
</body>
</html>

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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>
...
</body>
</html>

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
 A:link { color: blue; text-decoration: none }
 A:hover { color: red; text-decoration: underline }
.link { color: blue }
</style>
</head>

<body>
<a href="link1.php"><span class="link">Ссылка</span></a>
</body>
</html>

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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 link="#0000ff">
<p><a href="link1.php">Ссылка 1</a></p>
<p><a href="link2.php" class="link1">Ссылка 2</a></p>
<p><a href="link3.php" class="link2">Ссылка 3</a></p>
</body>
</html>

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





На главную









  • При использовании материалов сайта ссылка на comnew.ru обязательна!