|
Здравствуйте! Записался на ваш курс, но не понимаю как произвести оплату. Надо ли писать заявление и, если да, то куда отправлять? как я получу диплом о профессиональной переподготовке? |
Инспектор
Вы можете этот курс.
Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 13:
Псевдо-классы CSS
Псевдо-классы и классы CSS
Псевдо-классы можно объединять с классами CSS:
a.silver:visited {color: #C0C0C0 }
<a class="silver" href="index.php">Silver</a>Если ссылка в приведенном выше примере была посещена, она будет выводиться серебряным цветом.
CSS2 - Псевдо-класс :first-child
Псевдо-класс :first-child соответствует определенному элементу, который является первым потомком другого элемента.
Примеры:
- В данном примере селектор соответствует любому элементу h1, который является первым потомком элемента div, и делает отступ для первой строки первого параграфа внутри элемента div:
div h1:first-child { text-indent:50px }Этот селектор будет соответствовать первому параграфу внутри div в следующем коде:
<div> <h1> Первый заголовок в div. Имеет отступ первой строки. </h1> <h1> Второй заголовок в div. Не имеет отступа. </h1> </div>
но он не будет соответствовать параграфу в следующем коде HTML:
<div> <p> Параграф внутри div. </p> <h1>Первый заголовок в div. Не имеет отступа. </h1> </div>
- В данном примере селектор соответствует любому элементу strong, который является первым потомком элемента div, и задает font-style как italic для первого strong внутри элемента div:
div:first-child strong { font-style: italic }В следующем коде HTML strong является первым потомком элемента div:
<div>Изучайте -- <strong>язык программирования</strong> C++.</div>
- В данном примере селектор соответствует любому элементу b, который является первым потомком любого элемента, и задает text-decoration как none:
b:first-child { text-decoration: none }В следующем примере первый элемент b в коде HTML ниже является первым потомком параграфа и не будет подчеркиваться. Но второй элемент a в параграфе не является первым потомком параграфа и будет подчеркнут:
<p> Посетите <b>www.intuit.ru</b> и выучите CSS! Посетите <b><a href="http://www.intuit.ru">www.intuit.ru</a></b> и выучите HTML! </p>
CSS2 - Псевдо-класс :lang
Данный псевдокласс позволяет определить специальные правила для различных языков. В следующем примере класс :lang определяет тип кавычек для элементов b с атрибутом lang со значением "fr":
<html>
<head>
<style type="text/css">
b:lang(fr)
{
quotes: "'" "'"
}
</style>
</head>
<body>
<p>Просто текст <b lang="fr">Выделенный текст</b>
Остальной текст</p>
</body>
</html>Псевдо-классы
Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.
| Псевдо-класс | Назначение | IE | F | N | W3C |
|---|---|---|---|---|---|
| :active | Добавляет специальный стиль активированному элементу | 4 | 1 | 8 | 1 |
| :focus | Добавляет специальный стиль элементу, когда элемент находится в фокусе | - | - | - | 2 |
| :hover | Добавляет специальный стиль элементу, когда указатель мыши находится над элементом | 4 | 1 | 7 | 1 |
| :link | Добавляет специальный стиль непосещенной ссылке | 3 | 1 | 4 | 1 |
| :visited | Добавляет специальный стиль посещенной ссылке | 3 | 1 | 4 | 1 |
| :first-child | Добавляет специальный стиль элементу, который является первым потомком некоторого другого элемента | 1 | 7 | 2 | |
| :lang | Позволяет автору определить используемый в заданном элементе язык | 1 | 8 | 2 |
