|
Здравствуйте! Записался на ваш курс, но не понимаю как произвести оплату. Надо ли писать заявление и, если да, то куда отправлять? как я получу диплом о профессиональной переподготовке? |
Инспектор
Вы можете этот курс.
Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 13:
Псевдо-классы CSS
Аннотация: Определяются способы создания специальных эффектов для элементов.
Ключевые слова: псевдокласс
Псевдо-классы используются для создания специальных эффектов для некоторых элементов.
Примеры:
- В примере показано, как выделить гиперссылку в документе цветом.
<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> - В примере показано, как определить для гиперссылки другой стиль.
<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> - В примере показано, как можно использовать псевдо-класс :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> - В примере показано, как можно использовать псевдо-класс :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 } /* выбранная ссылка*/Примечания:
- Чтобы иметь эффект, a:hover ДОЛЖЕН следовать в определении CSS после a:link и a:visited!!
- Чтобы иметь эффект, a:active ДОЛЖЕН следовать в определении CSS после a:hover!!
- Имена псевдо-классов не зависят от регистра символов.
Анатолий Федоров
| Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989 |
