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