[Image] Пятница, 29.03.2024, 00:43 [Image]
SEO, технологии, игры, IT новости
[Image] Главная Регистрация Вход [Image]
[Image] Приветствую Вас, Гость · RSS [Image]
Меню сайта

Форма входа
Логин:
Пароль:
 Блог
Главная » 2010 » Июнь » 16 » Псевдо-классы и псевдо-элементы. Спецификация CSS ДТП
15:01
Псевдо-классы и псевдо-элементы. Спецификация CSS ДТП

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

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

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

Псевдо-классы ссылок

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>

 


В CSS псевдо-классы ссылок не оказывают влияния ни на один элемент, кроме 'A'. Поэтому тип элемента в селекторе можно опускать:

 

  A:link { color: red }
  :link { color: red }

 


Эти два селектора будут идентичны в CSS.

Имена псевдо-классов не зависят от регистра.

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

 

  A:link IMG { border: solid blue }

 


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

 

  A.external:visited { color: blue }

  <A CLASS=external HREF="http://out.side/">
                   external link</A>

 


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

Типографские псевдо-элементы

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

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

Псевдо-элемент '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 длится дальше тэга , должен быть сгенерирован дополнительный набор тэгов SPAN, т.е. фиктивная последовательность тэгов примет следующий вид:

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


Категория: Оптимизация сайта | Просмотров: 1607 | Добавил: witkom8382 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Copyright MyCorp © 2024
Категории
Оптимизация сайта [589]
Создание сайтов [355]
Заработать в интернете [505]
Технологии [44]
Полезное [366]
Услуги и сервисы [308]
Автоблог [100]
Скрипты для Ucoz [39]
Движок на сайт [10]
Все о Joomla и Drupal [20]
Все о PHP [91]
Поиск
Пользовательский поиск
Статистика


Онлайн всего: 7
Гостей: 6
Пользователей: 1
MidSok
Seo сайт, технологии продвижения, мета теги, оптимизация сайтов, новости сео, Скрипты, Ucoz

Рейтинг@Mail.ru