Псевдоклассы
Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или связи с действиями пользователя, а также положение в документе. В HTML-коде такие элементы явно не указаны, и в нем никак не отображаются. Стили, написанные к таким элементам, применяются автоматически ко всему, что попадает под определение псевдокласса.
Синтаксис псевдоклассов такой:
элемент:псевдокласс {описание правил стиля }Допускается применять псевдоклассы к именам идентификаторов или классов -
a.menu:hover {color:green}, и к контекстным селекторам - .menu a:hover {background: #fc0}.Примером псевдокласса, определяющего состояние элементов, может служить текстовая ссылка, которая меняет свой цвет, при наведении на нее курсора мыши:
a {color: #000}a:hover {color: #f90}
При выполнении которого правила, после наведения курсора на ссылку, исчезает подчеркивание и изменяется фон:
a {color: #000}a:hover {background: #ddd; text-decoration: none}
<html>
<head>
<title>псевдоклассы</title>
<style type="text/css">
a:{color: #036 /* цвет не посещенных ссылок */}
a:visited {color: #606 /* цвет посещенных ссылок */}
a:hover {background: #DDD; text-decoration: none; color: #f00 /* цвет ссылок при наведении на них курсора мыши */}
a:active {color: #ff0 /* цвет активных ссылок */}
</style>
</head>
<body>
<a href="link1.html">ссылка 1</a> | <a href="link2.html">ссылка 2</a> | <a href="link3.html"> ссылка 3</a>
</body>
</html>
В этом примере были применены псевдоклассы определяющие текущее состояние элемента и применяющие к нему назначенные правила:
- active - выполняется при наведении курсора на ссылку и нажатии левой кнопки мыши;
- link - применяется к ссылкам, на которые пользователь еще не нажимал. Причем браузеры сохраняют историю посещений некоторое время, поэтому ссылка может быть помечена как посещенная еще и потому, что по ней был зафиксирован переход раньше;
- visited - применяется к посещенным ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно;
- hover - позволяет задавать стили, изменяющие состояние элемента, при наведении на него курсора мыши.
Псевдоэлементы
Псевдоэлементы позволяют задать стиль логических, не определенных в документе, элементов, а также создать содержимое, которого нет в исходном коде текста.
Синтаксис использования псевдоэлементов:
селектор:псевдоэлемент {описание правил стиля}Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним отдельно по очередности.
Например, псевдоэлемент first-letter изменяет стиль первой буквы в тексте элемента, к которому добавляется, т.е. создает в тексте буквицу:
p:first-letter {color: red}Псевдоэлемент first-line задает курсивное написание первой строки абзаца:
p:first-line {font-style: italic}Вот как изменяется шрифт, размер и цвет первой буквы каждого абзаца текста при применении этого псевдоэлемента:
<html><head>
<style type="text/css">
a {color: #036}
a:visited {color: #606}
a:hover {background: #ddd; text-decoration: none; color: #f00}
a:active {color: #ff0}
p {font-family: Arial, Helvetica, sans-serif; font-size: 90%; color: black}
p:first-letter { font-family: 'Times New Roman', Times; font-size: 200%; color: red}
</style>
</head>
<body>
<a href="link1.html">ссылка 1</a> | <a href="link2.html">ссылка 2</a> | <a href="link3.html"> ссылка 3</a>
<p>Вот так можно начинать абзац - с буквицы. Вот так можно начинать абзац - с буквицы. Кроме того, первая строка абзаца набрана курсивом, вторая и последующие - нормальным стилем. Такое написание определено правилами p:first-line {font-style: italic}</p>
<p>Этот абзац тоже начинается с буквицы.</p>
</body>
</html>
