Псевдоклассы, имеющие отношение к дереву документа
Псевдоклассы, определяющие состояние элементов
Псевдоклассы
Наследование
Группирование
При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся параметров. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода [2, 5].
Селекторы группируются в виде списка тегов, разделенных между собой запятыми. В группу могут входить не только селекторы тегов, но также идентификаторы и классы. Общий синтаксис следующий:
Селектор 1, Селектор 2, ... Селектор N { Описание правил стиля }
При такой записи правила стиля применяются ко всем селекторам, перечисленным в одной группе.
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других [2, 5]. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.
Разберем наследование на примере таблицы. Особенностью таблиц можно считать строгую иерархическую структуру тегов. Вначале следует контейнер <TABLE>, внутри которого добавляются теги <TR>, а затем идет тег <TD>. Если в стилях для селектора TABLE задать цвет текста, то он автоматически устанавливается для содержимого ячеек, как показано в примере.
Пример наследования параметров цвета:
…
<head>
…
<style type="text/css">
TABLE {
color: red;
background: #333;
}
</style>
</head>
<body>
<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
</body>…
В данном примере для всей таблицы установлен красный цвет текста, поэтому в ячейках он также применяется, поскольку тег <TD> наследует свойства тега <TABLE>. При этом следует понимать, что не все стилевые атрибуты наследуются. Так, параметр border задает рамку вокруг таблицы в целом, но никак не вокруг ячеек. Аналогично не наследуется значение параметра background. При этом цвет фона у ячеек в данном примере черный, хотя он не наследуется, так как у атрибута background в качестве значения по умолчанию выступает transparent, т.е. прозрачность. Таким образом, если аргумент явно не задан, то цвет фона родительского элемента «проглядывает» сквозь дочерний элемент.
Наследование позволяет задавать значения некоторых параметров единожды, определяя их для родителей верхнего уровня.
Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя, а также положение в дереве документа [5]. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши. При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с их помощью можно получить разные динамические эффекты на странице.
Синтаксис применения псевдоклассов следующий:
Элемент:Псевдокласс { Описание правил стиля }
Вначале следует элемент, к которому добавляется псевдокласс, затем указывается двоеточие, после которого идет имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов (A.menu:hover {color: green}) и контекстным селекторам (.menu A:hover {background: #fc0}).
Условно все псевдоклассы делятся на группы, которые перечислены далее [2, 5].
К этой группе относятся псевдоклассы, которые определяют текущее состояние элемента и применяют стиль к нему только в этом случае [2, 5].
· Active – происходит при активации пользователем элемента (например, при наведении курсора на ссылку и нажатии левой кнопки мыши).
· Link – применяется к непосещенным ссылкам, т.е. ссылкам, на которые пользователь еще не нажимал.
Замечание. Запись A {...} и A:link {...} по своему результату равноценна, поскольку в браузере дает один и тот же эффект, поэтому псевдокласс link можно не указывать.
· Focus – применяется к элементу при получении им фокуса.
Замечание. Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги <A>, <INPUT>, <SELECT> и <TEXTAREA>.
· Hover – псевдокласс hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.
· Visited – данный псевдокласс применяется к посещенным ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно
Псевдоклассы link и visited могут применяться только к ссылкам, а псевдоклассы active и hover также и к другим элементам документа. Это расширяет набор приемов и позволяет создавать эффект перекатывания, когда стиль элемента меняется при наведении на него курсора мыши.
Замечание. Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы active и hover только для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере можно добавлять и к другим элементам.
К этой группе относятся псевдоклассы, которые определяют положение элемента в дереве документа и применяют к нему стиль в зависимости от его статуса. Таких псевдоклассов не так много, но некоторые браузеры расширяют этот список, например, Netscape поддерживает достаточно большое число псевдоклассов, которые можно отнести к данной группе. Примером такого псевдокласса является first-child (применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа).
Псевдоэлементы позволяют задать стиль логических элементов, не определенных в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста [5]. Например, объектная модель документа не предлагает удобного механизма для доступа к первому символу текста, поэтому псевдоэлементы позволяют изменить стиль недоступного иным образом элемента.
Синтаксис использования псевдоэлементов следующий:
Селектор:Псевдоэлемент { Описание правил стиля }
Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже:
.foo:first-letter { color: red }
.foo:first-line { font-style: italic }
Замечание: Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей.
Далее перечислены все псевдоэлементы, их описание и свойства [2, 5]:
· after – применяется для вставки назначенного контента после элемента. Этот псевдоэлемент работает совместно со стилевым свойством content, который определяет содержимое для вставки.
Замечание. Псевдоэлементы after и before, а также стилевое свойство content не поддерживаются браузером Internet Explorer ни в одной его версии.
· before –по своему действию before аналогичен псевдоэлементу after, но вставляет контент до элемента.
· first-letter– определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.
Замечание. Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал – увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.
· first-line– определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д.
Замечание. К псевдоэлементу first-line могут применяться не все стилевые свойства. Допустимо использовать параметры, относящиеся к шрифту, изменению цвет текста и фона, а также: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align и word-spacing.
