Заработок в интернете - Псевдоклассы

Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши. При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с их помощью можно получить разные динамические эффекты на странице.

Синтаксис применения псевдоклассов следующий.

Элемент:Псевдокласс { Описание правил стиля }

Вначале следует элемент, к которому добавляется псевдокласс, затем указывается двоеточие, после которого идет имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов (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>
<style type="text/css">
INPUT:focus {
color: red /* Красный цвет текста */
}
</style>
</head>
<body>

<form action="">
<input type="text" value="Черный текст">
</form>

</body>
</html>

В данном примере в текстовом поле содержится предварительный текст, он определяется значением параметра value тега <INPUT>. При щелчке по элементу формы происходит получение полем фокуса, и цвет текста меняется на красный. Достаточно щелкнуть в любом месте страницы (кроме текстового поля, естественно), как произойдет потеря фокуса и текст вернется к первоначальному черному цвету.

Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги <A>, <INPUT>, <SELECT> и <TEXTAREA>.

Псевдокласс focus не поддерживается браузером Internet Explorer.

hover

Псевдокласс hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.

visited

Данный псевдокласс применяется к посещенным ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно (пример 16.2).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
A:link {
color: #036 /* Цвет непосещенных ссылок */
}

A:visited {
color: #606 /* Цвет посещенных ссылок */
}

A:hover {
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>

Ссылка 1 | Ссылка 2 | Ссылка 3

В данном примере показано использование псевдоклассов совместно со ссылками. При этом имеет значение порядок следования псевдоклассов. Вначале указывается visited, а затем идетhover, в противном случае посещенные ссылки не будут изменять свой цвет при наведении на них курсора.

Псевдоклассы link и visited могут применяться только к ссылкам, а псевдоклассы active и hoverтакже и к другим элементам документа. Это расширяет набор приемов и позволяет создавать эффект перекатывания, когда стиль элемента меняется при наведении на него курсора мыши.

Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы active и hoverтолько для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере можно добавлять и к другим элементам.

В примере 16.3 показана таблица, строки которой меняют свой цвет при наведении на них курсора мыши. Это достигается за счет добавления псевдокласса hover к селектору TR.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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>

	Пики	Трефы	Бубны	Червы
Чебурашка	5	2	4	2
Крокодил Гена	2	7	1	3
Шапокляк	5	4	3	1
Крыса Лариса	1	0	5	7

Псевдоклассы, имеющие отношение к дереву документа

К этой группе относятся псевдоклассы, которые определяют положение элемента в дереве документа и применяют к нему стиль в зависимости от его статуса. Таких псевдоклассов не так много, но некоторые браузеры расширяют этот список, например, Netscape поддерживает достаточно большое число псевдоклассов, которые можно отнести к данной группе.

first-child

Применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа. Чтобы стало понятно, о чем речь, разберем небольшой код (пример 16.4).

Пример 16.4. Использование псевдокласса first-child

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

В данном примере псевдокласс first-child добавляется к селектору B и устанавливает для него красный цвет текста. Хотя контейнер <B> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т.е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <B> отображается черным цветом. Со следующим абзацем все начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.

Браузер Internet Explorer поддерживает псевдокласс first-child начиная с версии 7.0.

Псевдокласс first-child удобнее всего использовать в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных элементов. Например, по правилам типографики красную строку для первого абзаца текста не устанавливают, а для остальных абзацев добавляют отступ первой строки. С этой целью применяют параметр text-indent с нужным значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него отступ потребуется воспользоваться псевдоклассом first-child (пример 16.5).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<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>

Историю эту уже начали забывать, хотя находились горожане, которые время от времени рассказывали ее вновь прибывшим в город посетителям.

Легенда обрастала подробностями и уже совсем не напоминала произошедшее в действительности событие. И, тем не менее, ни один человек не решался заикнуться о ней с наступлением темноты.

Но однажды в город вновь вошел незнакомец. Он хромал на левую ногу.

В данном примере первый абзац текста не содержит отступа первой строки, а для остальных он установлен.

		Вторник, 21.05.2024
	Заработок в интернете!