Большой архив статей, книг, документации по программированию, вебдизайну, компьютерной графике, сетям, операционным системам и многому другому
 
<Добавить в Избранное>    <Сделать стартовой>    <Реклама на сайте>    <Контакты>
  Главная Документация Программы Обои   Экспорт RSS E-Books
 
 

   Интернет технологии -> CSS -> Псевдо-классы и псевдо-элементы. Спецификация CSS1


Псевдо-классы и псевдо-элементы. Спецификация CSS1

В CSS1 стиль обычно применяется к элементу в соответствии с его позицией в структуре документа. Эта простая модель достаточна для широкого спектра стилей, но она не покрывает несколько типичных эффектов. Концепция псевдо-классов и псевдо-элементов расширяет механизм адресации в CSS1, чтобы позволить информации, внешней по отношению к документу, оказывать влияние на процесс форматирования.

Псевдо-классы и псевдо-элементы могут использоваться в селекторах CSS, но они не существуют в исходном тексте HTML. Напротив, они "вставляются" UA в соответствии с некоторыми условиями. Их поведение можно описать с помощью фиктивной последовательности тэгов.

Псевдо-элементы используются для адресации подчастей элементов, в то время как псевдо-классы позволяют различать различные типы элементов.

2.1 Псевдо-классы ссылок
UA часто отображают недавно посещенные ссылки не так как не посещенные или посещенные давно.. В CSS1 эти ситуации обрабатываются с помощью псевдо-классов элемента 'A':

Все элементы '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>

Если ссылка в этом примере была посещена, то она будет синей. Обратите внимание, что имя обычного класса предшествует имени псевдо-класса в селекторе.

2.2 Типографские псевдо-элементы
Некоторые распространенные типографские эффекты связаны не со структурными элементами, а с элементами форматирования на холсте. В CSS1 определены два таких типографских элемента, которые можно адресовать с помощью псевдо-элементов: первая строка элемента и первая буква.

Ядро CSS1: UA могут игнорировать все правила с ':first-line' или ':first-letter' в селекторе, или поддерживать только подмножество свойств псевдо-элементов. (см. раздел 7)

2.3 Псевдо-элемент '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).

2.4 Псевдо-элемент '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).

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

class=twxt_content><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.

Фиктивная последовательность тэгов в этом случае выглядит так:

class=twxt_content><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' может применяться только к блочным элементам.

2.5 Псевдо-элементы в селекторах
В контекстных селекторах псевдо-элементы допускаются только в конце селектора:

BODY P:first-letter { color: purple }

Псевдо-элементы могут в селекторах комбинироваться с классами:

P.initial:first-letter { color: red }

<P CLASS=initial>First paragraph</A>

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

2.6 Множество псевдо-элементов
Можно комбинировать несколько псевдо-элементов:

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", фиктивная последовательность тэгов будет такова:

class=twxt_content><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, т.е. фиктивная последовательность тэгов примет следующий вид:

class=twxt_content><P>
<P:first-line>
<SPAN>
This text is inside a long
</SPAN>
</P:first-line>
<SPAN>
span элемент
</SPAN>

Источник: www.web-support.ru

 

 
Интересное в сети
 
10 новых программ
CodeLobster PHP Edition 3.7.2
WinToFlash 0.7.0008
Free Video to Flash Converter 4.7.24
Total Commander v7.55
aTunes 2.0.1
Process Explorer v12.04
Backup42 v3.0
Predator 2.0.1
FastStone Image Viewer 4.1
Process Lasso 3.70.4
FastStone Image Viewer 4.0
Xion Audio Player 1.0.125
Notepad GNU v.2.2.8.7.7
K-Lite Codec Pack 5.3.0 Full


Наши сервисы
Рассылка новостей. Подпишитесь на рассылку сейчас и вы всегда будете в курсе последних событий в мире информационных технологий.
Новостные информеры. Поставьте наши информеры к себе и у вас на сайте появится дополнительный постоянно обновляемый раздел.
Добавление статей. Если вы являетесь автором статьи или обзора на тему ИТ присылайте материал нам, мы с удовольствием опубликуем его у себя на сайте.
Реклама на сайте. Размещая рекламу у нас, вы получите новых посетителей, которые могут стать вашими клиентами.
 
Это интересно
 

Copyright © CompDoc.Ru
При цитировании и перепечатке ссылка на www.compdoc.ru обязательна. Карта сайта.