» Css
» Главная
страница
» Вернуться
к содержанию
Псевдо-классы и псевдо-элементы.
В CSS1 стиль обычно применяется к элементу в соответствии с его
позицией в структуре документа. Эта простая модель достаточна для широкого
спектра стилей, но она не покрывает несколько типичных эффектов. Концепция
псевдо-классов и псевдо-элементов расширяет механизм адресации в CSS1, чтобы
позволить информации, внешней по отношению к документу, оказывать влияние на
процесс форматирования.
Псевдо-классы и псевдо-элементы могут использоваться в
селекторах CSS, но они не существуют в исходном тексте HTML. Напротив, они
"вставляются" UA в соответствии с некоторыми условиями. Их поведение можно
описать с помощью фиктивной последовательности тэгов.
Псевдо-элементы используются для адресации подчастей элементов,
в то время как псевдо-классы позволяют различать различные типы элементов.
2.1 Псевдо-классы ссылок
UA часто отображают недавно посещенные ссылки не так как не
посещенные или посещенные давно.. В CSS1 эти ситуации обрабатываются с помощью
псевдо-классов элемента 'A': A:link { color: red } /* unvisited link */
A:visited { color: blue } /* visited links */
A:active { color: lime } /* active links */
Все элементы 'A' с атрибутом 'HREF' будут помещены в одну и
только одну из этих групп (т.е. псевдо-классы не влияют на ссылки-якоря). UA
могут по собственному усмотрению перемещать элемент из 'visited' в 'link' после
некоторого периода времени. Ссылка типа 'active' - это ссылка, которая в данный
момент выбрана (например нажатием на кнопку мыши) читателем.
Форматирование псевдо-класса ссылки происходит также, как если
бы класс был указан вручную. UA не обязан переформатировать уже отображаемый
документ при переходе ссылки из одного псевдо-класса в другой. Например таблица
стилей может законно указывать, что 'font-size' ссылки типа 'active' должен быть
больше, чем у ссылки типа 'visited', но UA не обязан динамически
переформатировать документ, когда читатель выбирает ссылку типа 'visited'.
Селекторы псевдо-класса не соответствуют обычным классам и
наоборот. Правило в следующем примере не будет оказывать никакого влияния: A:link { color: red }
<A CLASS=link NAME=target5> ... </A>
В CSS1 псевдо-классы ссылок не оказывают влияния ни на один
элемент, кроме 'A'. Поэтому тип элемента в селекторе можно опускать: A:link { color: red }
:link { color: red }
Эти два селектора будут идентичны в CSS1.
Имена псевдо-классов не зависят от регистра.
Псевдо-классы могут использоваться в контекстных селекторах: A:link IMG { border: solid blue }
Псевдо-классы также могут комбинироваться с простыми классами: A.external:visited { color: blue }
<A CLASS=external HREF="http://out.side/">
external link</A>
Если ссылка в этом примере была посещена, то она будет синей.
Обратите внимание, что имя обычного класса предшествует имени псевдо-класса в
селекторе.
Типографские псевдо-элементы
Некоторые распространенные типографские эффекты связаны не со
структурными элементами, а с элементами форматирования на холсте. В CSS1
определены два таких типографских элемента, которые можно адресовать с помощью
псевдо-элементов: первая строка элемента и первая буква.
Ядро CSS1: UA могут игнорировать все правила с ':first-line'
или ':first-letter' в селекторе, или поддерживать только подмножество свойств
псевдо-элементов. (см. раздел 7)
Псевдо-элемент 'first-line'
Псевдо-элемент 'first-line' используется для применения особых
стилей к первой строке элемента в соответствии с форматированием на холсте: <STYLE TYPE="text/css">
P:first-line { font-style: small-caps }
</STYLE>
<P>The first line of an article in Newsweek.
В текстовом UA это могло бы быть отформатировано так: THE FIRST LINE OF AN
article in Newsweek.
Фиктивная последовательность тэгов в этом случае такова: <P>
<P:first-line>
The first line of an
</P:first-line>
article in Newsweek.
</P>
Концевой тэг 'first-line' вставляется в конец первой строки в
соответствии с тем, как документ форматируется на холсте.
Псевдо-элемент 'first-line' может применяться только к блочным
элементам.
Псевдо-элемент 'first-line' соответствует строчным элементам за
некоторыми исключениями. Только следующие свойства могут быть применены к
элементу 'first-line': свойства шрифтов (5.2), свойства цвета и фона (5.3),
'word-spacing' (5.4.1), 'letter-spacing' (5.4.2), 'text-decoration' (5.4.3),
'vertical-align (5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8) и
'clear' (5.5.26).
Псевдо-элемент 'first-letter'
Псевдо-элемент 'first-letter' используется для создания эффекта
буквицы, являющимся распространенным типографским эффектом. Он соответствует
строчному элементу, если его свойство 'float' равно 'none', иначе он
соответствует плавающему элементу. К псевдо-элементу 'first-letter' применимы
следующие свойства: свойства шрифтов (5.2), свойства цвета и фона (5.3),
'text-decoration' (5.4.3), 'vertical-align (только если 'float' равно 'none',
5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), свойства границ
(5.5.1-5.5.5), свойства отступов (5.5.6-5.5.10), свойства рамки (5.5.11-5.5.22),
'float' (5.5.25), 'clear' (5.5.26).
Следующий пример позволяет создать эффект буквицы, когда высота
первой буквы равна высоте двух строк: <HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words
of an article in The Economist.</P>
</BODY>
</HTML>
Если некий текстовый UA поддерживает псевдо-элемент
'first-letter' (что скорее всего не так), предыдущий пример мог бы быть
отформатирован следующим образом: ___
| HE FIRST few
| words of an
article in the
Economist.
Фиктивная последовательность тэгов в этом случае выглядит
так: <P>
<SPAN>
<P:first-letter>
T
</P:first-letter>he first
</SPAN>
few words of an article in the Economist.
</P>
Обратите внимание, что тэг псевдо-элемента 'first-letter'
заключает контент (т.е. первую букву), в то время как начальный тэг
псевдо-элемента 'first-line' вставляется сразу после тэга элемента, к которому
он применяется.
UA сам определяет, какие символы включаются в элемент
'first-letter'. Обычно кавычки, предшествующие первой букве, должны
включаться: || /\ bird in
/ \ the hand
/----\ is worth
/ \ two in
the bush," says an
old proverb.
Когда параграф начинается с другого знака пунктуации (например
скобка) или других символов, которые не являются буквами (например цифры или
математические знаки), псевдо-элементы 'first-letter' обычно игнорируются.
Некоторые языки могут иметь специфические правила, как
обрабатывать определенные комбинации букв. В голландском, например, если слово
начинается с "ij", то обе буквы считаются принадлежащими псевдо-элементу
'first-letter'.
Псевдо-элемент 'first-letter' может применяться только к
блочным элементам.
Псевдо-элементы в селекторах
В контекстных селекторах псевдо-элементы допускаются только в
конце селектора: BODY P:first-letter { color: purple }
Псевдо-элементы могут в селекторах комбинироваться с
классами: P.initial:first-letter { color: red }
<P CLASS=initial>First paragraph</A>
Этот пример позволит сделать темно красными первые буквы всех
параграфов, имеющих класс initial. При комбинировании с классами или
псевдо-классами псевдо-элементы должны указываться в конце селектора. В одном
селекторе может быть указан только один псевдо-элемент.
Множество псевдо-элементов
Можно комбинировать несколько псевдо-элементов: P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Some text that ends up on two lines</P>
В этом примере первая буква каждого элемента 'P' будет зеленой
с размером шрифта 24pt. Остаток первой строки (в соответствии с форматированием
на холсте) будет синим, в то время как весь остальной параграф будет красным.
Предположив, что перенос строки произойдет перед словом "ends", фиктивная
последовательность тэгов будет такова: <P>
<P:first-line>
<P:first-letter>
S
</P:first-letter>ome text that
</P:first-line>
ends up on two lines
</P>
Обратите внимание, что элемент 'first-letter' находится внутри
элемента 'first-line'. Свойства, установленные в 'first-line' будут унаследованы
'first-letter', но будут переопределены, если то же свойство установлено в
'first-letter'.
Если псевдо-элемент разрывает настоящий элемент должны быть
сгенерированны дополнительные тэги в фиктивной последовательности тэгов.
Например, если элемент SPAN длится дальше тэга </P:first-line>, должен
быть сгенерирован дополнительный набор тэгов SPAN, т.е. фиктивная
последовательность тэгов примет следующий вид: <P>
<P:first-line>
<SPAN>
This text is inside a long
</SPAN>
</P:first-line>
<SPAN>
span элемент
</SPAN>
Следующий
урок
|