ROBOWEB : Документация : CSS1 cpecification : html, perl, cgi, php, css, 3dmax - 3D Studio русская документация с примерами программ, RTFM и описание протоколов, описание dreamweaver, все для вебдизайнера
Разработка сайтов, web дизайн - Центр Русского Дизайна HOD.RU
FLASH
3D Studio MAX
DreamWeawer FAQ
Изучение HTML
META тэги
CSS
Руководство по стилям
Спецификация WML (WAP)
Язык DHTML
Спецификация XML
Руководство по Java
Документация по JavaScript
Язык HOD Text Processor
Интерфейс CGI
Документация по Perl 5
Perl FAQ
Документация по PHP
PHP/FI 2.0
Документация по SQL
Базы данных
Доступ к БД

Рейтинг@Mail.ru Rambler's Top100

Веб дизайнеру
Каталог сайтов Axes.ru


2. Псевдо-классы и псевдо-элементы


В 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>

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

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).

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

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

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

  <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>



Содержание