Псевдоклассы определяют
динамическое состояние элементов, которое изменяется со временем
или с помощью действий пользователя, а также положение в дереве
документа. Примером такого состояния служит текстовая ссылка,
которая меняет свой цвет при наведении на нее курсора мыши.
При использовании псевдоклассов браузер не перегружает текущий
документ, поэтому с их помощью можно получить разные динамические
эффекты на странице.
Синтаксис применения псевдоклассов следующий.
Элемент:Псевдокласс { Описание правил стиля }
Вначале следует элемент, к которому
добавляется псевдокласс, затем указывается двоеточие, после
которого идет имя псевдокласса. Допускается применять псевдоклассы
к именам идентификаторов или классов (A.menu:hover {color:
green}) и контекстным селекторам (.menu A:hover {background:
#fc0}).
Условно все псевдоклассы делятся
на группы, которые перечислены далее.
Псевдоклассы, определяющие состояние элементов
К этой группе относятся псевдоклассы,
которые определяют текущее состояние элемента и применяют
стиль к нему только в этом случае.
active
Происходит при активации пользователем
элемента. Например, при наведении курсора на ссылку и нажатии
левой кнопки мыши.
link
Применяется к непосещенным ссылкам,
т.е. ссылкам, на которые пользователь еще не нажимал. Браузер,
причем, сохраняет историю посещений некоторое время, поэтому
ссылка может быть помечена как посещенная хотя бы потому,
что по ней был зафиксирован переход раньше.
Запись A {...} и A:link {...} по
своему результату равноценна, поскольку в браузере дает один
и тот же эффект, поэтому псевдокласс link можно не указывать.
focus
Применяется к элементу при получении
им фокуса. Например, для текстового поля формы получение фокуса
означает, что курсор установлен в поле, и с помощью клавиатуры
можно вводить в него текст (пример 16.1).
<!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=windows-1251">
<title>Псевдоклассы</title>
<style type="text/css">
INPUT:focus {
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<form action="">
<p><input type="text" value="Черный
текст"></p>
</form>
</body>
</html>
В данном примере в текстовом поле
содержится предварительный текст, он определяется значением
параметра value тега <INPUT>. При щелчке по элементу
формы происходит получение полем фокуса, и цвет текста меняется
на красный. Достаточно щелкнуть в любом месте страницы (кроме
текстового поля, естественно), как произойдет потеря фокуса
и текст вернется к первоначальному черному цвету.
Результат будет виден только для
тех элементов, которые могут получить фокус. В частности,
это теги <A>, <INPUT>, <SELECT> и <TEXTAREA>.
Псевдокласс
focus не поддерживается браузером Internet Explorer.
hover
Псевдокласс hover активизируется,
когда курсор мыши находится в пределах элемента, но щелчка
по нему не происходит.
visited
Данный псевдокласс применяется к посещенным ссылкам. Обычно
такая ссылка меняет свой цвет по умолчанию на фиолетовый,
но с помощью стилей цвет и другие параметры можно задать самостоятельно
(пример ниже).
<!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=windows-1251">
<title>Псевдоклассы</title>
<style type="text/css">
A:link {
color: #036; /* Цвет непосещенных ссылок */
}
A:visited {
color: #606; /* Цвет посещенных ссылок */
}
A:hover {
color: #f00; /* Цвет ссылок при наведении на них курсора мыши
*/
}
A:active {
color: #ff0; /* Цвет активных ссылок */
}
</style>
</head>
<body>
<p><a href="link1.html">Ссылка 1</a>
| <a href="link2.html">Ссылка 2</a>
| <a href="link3.html">Ссылка 3</a></p>
</body>
</html>
В данном примере показано использование
псевдоклассов совместно со ссылками. При этом имеет значение
порядок следования псевдоклассов. Вначале указывается visited,
а затем идет hover, в противном случае посещенные ссылки не
будут изменять свой цвет при наведении на них курсора.
Псевдоклассы link и visited могут
применяться только к ссылкам, а псевдоклассы active и hover
также и к другим элементам документа. Это расширяет набор
приемов и позволяет создавать эффект перекатывания, когда
стиль элемента меняется при наведении на него курсора мыши.
Браузер Internet Explorer 6 и младше позволяет
использовать псевдоклассы active и hover только для ссылок.
Начиная с версии 7.0 псевдоклассы в этом браузере можно добавлять
и к другим элементам.
В примере ниже показана таблица,
строки которой меняют свой цвет при наведении на них курсора
мыши. Это достигается за счет добавления псевдокласса hover
к селектору TR.
<!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=windows-1251">
<title>Псевдоклассы</title>
<style type="text/css">
TR:hover {
background: #fc0; /* Меняем цвет фона строки таблицы */
}
</style>
</head>
<body>
<table width="400" border="1" cellpadding="4"
cellspacing="0">
<tr>
<th> </th>
<th>Пики</th>
<th>Трефы</th>
<th>Бубны</th>
<th>Червы</th>
</tr>
<tr>
<td>Чебурашка</td>
<td>5</td>
<td>2</td>
<td>4</td>
<td>2</td>
</tr>
<tr>
<td>Крокодил Гена</td>
<td>2</td>
<td>7</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td>Шапокляк</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>Крыса Лариса</td>
<td>1</td>
<td>0</td>
<td>5</td>
<td>7</td>
</tr>
</table>
</body>
</html>
Псевдоклассы, имеющие отношение к дереву документа.
К этой группе относятся псевдоклассы,
которые определяют положение элемента в дереве документа и
применяют к нему стиль в зависимости от его статуса. Таких
псевдоклассов не так много, но некоторые браузеры расширяют
этот список, например, Netscape поддерживает достаточно большое
число псевдоклассов, которые можно отнести к данной группе.
first-child
Применяется к первому дочернему
элементу селектора, который расположен в дереве элементов
документа. Чтобы стало понятно, о чем речь, разберем небольшой
код.
<!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=windows-1251">
<title>Псевдоклассы</title>
<style type="text/css">
B:first-child {
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b>
adipiscing <b>elit</b>, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
<p><b>Ut wisis enim</b> ad minim veniam,
<b>quis nostrud</b> exerci tution ullamcorper
suscipit lobortis nisl ut aliquip ex ea <b>commodo consequat</b>.</p>
</body>
</html>
В данном примере псевдокласс first-child
добавляется к селектору B и устанавливает для него красный
цвет текста. Хотя контейнер <B> встречается в первом
абзаце три раза, красным цветом будет выделено лишь первое
упоминание, т.е. текст «Lorem ipsum». В остальных случаях
содержимое контейнера <B> отображается черным цветом.
Со следующим абзацем все начинается снова, поскольку родительский
элемент поменялся. Поэтому фраза «Ut wisis enim» также будет
выделена красным цветом.
Браузер
Internet Explorer поддерживает псевдокласс first-child начиная
с версии 7.0.
Псевдокласс first-child удобнее
всего использовать в тех случаях, когда требуется задать разный
стиль для первого и остальных однотипных элементов. Например,
по правилам типографики красную строку для первого абзаца
текста не устанавливают, а для остальных абзацев добавляют
отступ первой строки. С этой целью применяют параметр text-indent
с нужным значением отступа. Но чтобы изменить стиль первого
абзаца и убрать для него отступ потребуется воспользоваться
псевдоклассом first-child.
<!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=windows-1251">
<title>Псевдоклассы</title>
<style type="text/css">
P {
text-indent: 1em; /* Отступ первой строки */
}
P:first-child {
text-indent: 0px; /* Для первого абзаца отступ убираем */
}
</style>
</head>
<body>
<p>Историю эту уже начали забывать, хотя находились
горожане, которые время от времени рассказывали ее вновь прибывшим
в город посетителям.</p>
<p>Легенда обрастала подробностями и уже совсем не напоминала
произошедшее в действительности событие. И, тем не менее,
ни один человек не решался заикнуться о ней с наступлением
темноты.</p>
<p>Но однажды в город вновь вошел незнакомец. Он хромал
на левую ногу.</p>
</body>
</html>
В данном примере первый абзац текста
не содержит отступа первой строки, а для остальных он установлен.
|
