Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 1 приведены допустимые псевдоклассы и их описания.
Свойство | Описание |
---|---|
A:link | Определяет стиль для обычной непосещенной ссылки. |
A:visited | Определяет стиль для посещенной ссылки. |
A:active | Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. |
A:hover | Определяет стиль для ссылки при наведении на нее мышью. |
Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A. Поэтому этот псевдокласс можно опустить.
Одно из наиболее популярных применений CSS — это скрытие подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект одновременно (пример 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: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="1.html">Пример ссылки</a></p> </body> </html>
Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.
Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением свойства text-decoration: underline overline в селекторе A:hover.
Пример 2. Использование подчеркивания в ссылках
<!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: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="1.html">Пример ссылки</a></p> </body> </html>
Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.
Пример 3. Изменение размера ссылки
<!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: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="1.html">Пример ссылки</a></p> </body> </html>
Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка (пример 4).
Пример 4. Создание подчеркивание другого цвета
<!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:link { color: blue; text-decoration: none; } A:hover { color: red; text-decoration: underline; } .link { color: blue; } </style> </head> <body> <p><a href="1.html"><span class="link">Ссылка</span></a></p> </body> </html>
Часто возникает необходимость на одной странице использовать ссылки разных цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего типа. Одни для меню, другие для текста. В этом случае создаем два или больше класса со своими параметрами и применяем их по своему усмотрению. В примере 6 достаточно поменять значения у соответствующего класса, и цвета у ссылок, где этот класс используются, изменятся автоматически.
Пример 5. Ссылки разных цветов
<!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 { 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="1.html">Ссылка 1</a> | <a href="2.html" class="link1">Ссылка 2</a> | <a href="3.html" class="link2">Ссылка 3</a> |</p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Разные ссылки на одной странице
Сайт