Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 13:

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

< Лекция 12 || Лекция 13: 12 || Лекция 14 >
Аннотация: Определяются способы создания специальных эффектов для элементов.
Ключевые слова: псевдокласс

Псевдо-классы используются для создания специальных эффектов для некоторых элементов.

Примеры:

  1. В примере показано, как выделить гиперссылку в документе цветом.
    <html>
    <head>
    
    <style type="text/css">
    a:link {color: #808080}
    a:visited {color: #FFFF00}
    a:hover {color: #00FF00}
    a:active {color: #0000FF}
    </style>
    
    </head>
    
    <body>
    
    <p><a href="index.php">This is a link</a></p>
    <ol><b>Примечание:</b>
    <li><i>a:hover ДОЛЖЕН следовать в определении CSS после <b>a:link</b> и
      <b>a: visited!!</b></i></li>
    <li><i>a:active ДОЛЖЕН следовать в определении CSS после <b>a:hover!!</b></i></li>
    </ol>
    
    </body>
    </html>
  2. В примере показано, как определить для гиперссылки другой стиль.
    <html>
    <head>
    <style type="text/css">
    a.color:link {color: #808000}
    a.color:visited {color: #008080}
    a.color:hover {color: #C0C0C0}
    
    a.size:link {color: #808000}
    a.size:visited {color: #008080}
    a.size:hover {font-size: 250%}
    
    a.background:link {color: #808000}
    a.background:visited {color: #008080}
    a.background:hover {background: #C0C0C0}
    
    a.family:link {color: #808000}
    a.family:visited {color: #008080}
    a.family:hover {font-family: sans-serif}
    
    a.line:link {color: #808000; text-decoration: none}
    a.line:visited {color: #008080; text-decoration: none}
    a.line:hover {text-decoration: line-through}
    </style>
    </head>
    
    <body>
    <p>Наведите курсор мыши на ссылки.</p>
    <p><b><a class="line" href="index.php">Меняем оформление текста у ссылки</a></b></p>
    <p><b><a class="size" href="index.php">Меняем размер у ссылки</a></b></p>
    <p><b><a class="background" href="index.php">Меняем цвет фона у ссылки</a></b></p>
    <p><b><a class="family" href="index.php">Меняем семейство шрифта у ссылки</a></b></p>
    <p><b><a class="color" href="index.php">Меняем цвет у ссылки</a></b></p>
    </body>
    
    </html>
  3. В примере показано, как можно использовать псевдо-класс :first-child.
    <html>
    <head>
    <style type="text/css">
    a:first-child
    {
    text-decoration:underline
    }
    </style>
    </head>
    
    <body>
    <p>Посетите  <a href="http://www.intuit.ru">Intuit</a> там много бесплатных курсов</p>
    <p>Посетите <a href="http://www.intuit.ru">Intuit</a> 
       там есть бесплатные учебные программы</p>
    </body>
    
    </html>
  4. В примере показано, как можно использовать псевдо-класс :lang.
    <html>
    <head>
    <style type="text/css">
    b:lang(fr)
    {
    quotes: "'" "'"
    }
    </style>
    </head>
    
    <body>
    <p>Просто текст<b lang="fr">Выделенный текст:</b> Сам текст.</p>
    </body>
    
    </html>

Синтаксис псевдо-классов:

selector:pseudo-class {property: value}

Классы CSS также можно использовать с псевдо-классами:

selector.class:pseudo-class {property: value}

Анкерные псевдо-классы

Различные ссылки, на которые указывает курсор мыши, можно выводить различным образом в поддерживающих CSS браузерах:

a:link {color: #808080 }     /* непосещенная ссылка*/
a:visited {color: #008000 }  /* посещенная ссылка */
a:hover {color: #008080 }   /* курсор мыши указывает на ссылку*/
a:active {color: #00FF00 }   /* выбранная ссылка*/

Примечания:

  1. Чтобы иметь эффект, a:hover ДОЛЖЕН следовать в определении CSS после a:link и a:visited!!
  2. Чтобы иметь эффект, a:active ДОЛЖЕН следовать в определении CSS после a:hover!!
  3. Имена псевдо-классов не зависят от регистра символов.
< Лекция 12 || Лекция 13: 12 || Лекция 14 >
Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Елена Елаева
Елена Елаева
Россия
Владимир Лагодный
Владимир Лагодный
Россия