Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Psevdoklassy-v-css

Псевдоклассы в CSS

Псевдоклассы очень часто используются веб-разработчиками. Особенно их любят использовать, чтобы добиться нужного эффекта при выполнении какого-либо действия над ссылками. Например изменение цвета ссылки при наведении на неё курсором. Общий синтаксис написания для всех псевдоклассов имеет следующий вид:

селектор:псевдокласс { свойство1: значение; ... свойствоN: значение}

Чтобы вам было легче во всем разобраться рассмотрим небольшой пример:

<!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>Псевдоклассы CSS</title>
  <style type="text/css">
   a:link { color: red; } /*цвет не посещенной ссылки */
   a:visited { color: blue; } /* цвет посещенной ссылки */
   a:hover {
    color: green; /* цвет ссылки при наведении курсором мыши */
    font-weight: bold; /* жирный шрифт */
    text-decoration: none; /* убираем подчеркивание */
   }
   a:active { color: yellow; } /* желтый цвет ссылки в
 момент нажатия */  
  </style>
 </head>
 <body>
  <p><a href="#">Псевдоклассы в CSS</a></p>  
 </body>
</html>

Можете посмотреть как будут меняться свойства ссылки при нажатии, при наведении и т.д. Следует заметить, что в данном примере я использовал при наведении жирный шрифт. Его использовать я бы вам не советовал так как прыгающие буквы очень раздражают посетителей сайта, а вот убирать подчеркивание порой бывает даже полезно.



наверх