|
||
|
aranea.ru || Спецификация CSS2 | 5.12. Псевдо-элементы.
5.12. Псевдо-элементы.5.12.1. Псевдо-элемент :first-line.5.12.2. Псевдо-элемент :first-letter. 5.12.3. Псевдо-элементы :before и :after. 5.12.1. Псевдо-элемент :first-line.Псевдо-элемент :first-line применяется для специальных стилей первой отформатированной строки параграфа. Например:
P:first-line { text-transform: uppercase }
Выше указанное правило означает: "изменение букв первой строки каждого параграфа на буквы верхнего регистра". Но, селектор "P:first-line" не согласуется с реальным элементом HTML. Он согласуется с псевдо-элементом, который согласующиеся устройства вывода будут вставлять в начале каждого параграфа. Обратите внимание на то, что длина первой строки зависит от ряда факторов, включая ширину страницы, размера шрифта, и т.д. Таким образом, обычный параграф в HTML такой, как: <P>This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph. </P>строки которого будут разбиваться следующим образом: THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph. может быть "перезаписан" устройствами вывода для включения последовательности фиктивных тегов для :first-line. Последовательность фиктивных тегов помогает показать, как наследуются свойства. <P><P:first-line> This is a somewhat long HTML paragraph that will </P:first-line> be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph. </P> Если псевдо-элемент разбивает реальный элемент, то желаемый эффект можно часто описать последовательностью фиктивных тегов, которая закрывает и затем повторно открывает элемент. Таким образом, если мы разметим предыдущий параграф с элементом SPAN: <P><SPAN class="test"> This is a somewhat long HTML paragraph that will be broken into several lines. </SPAN> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph. </P> то устройство вывода сможет сгенерировать соответствующие начальный и конечный теги для SPAN, когда вставлена последовательность фиктивных тегов для :first-line. <P><P:first-line><SPAN class="test"> This is a somewhat long HTML paragraph that will </SPAN></P:first-line><SPAN class="test"> be broken into several lines. </SPAN> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph. </P> Псевдо-элемент :first-line может только прикрепляться к элементам блокового уровня (block-level). Псевдо-элемент :first-line похож на элементы строкового уровня (inline-level), но с определенными ограничениями. Только следующие свойства применяются к псевдо-элементу :first-line: font properties, color properties, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' и 'clear'. 5.12.2. Псевдо-элемент :first-letter.Псевдо-элемент :first-letter может использоваться для "начальной заглавной буквы" и "буквицы", что является обычным типографическим эффектом. Этот тип начальной буквы похож на элемент строкового уровня, если его свойство 'float' является 'none', иначе он похож на элемент со свободным перемещением. Существуют свойства, которые применяются к псевдо-элементу :first-letter: font properties, color properties, background properties, 'text-decoration', 'vertical-align' (только если 'float' является 'none'), 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'text-shadow' и 'clear'. Следующий пример CSS2 создает буквицу, размером в две строки:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Drop cap initial letter</TITLE>
<STYLE type="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; font-style: italic;
font-weight: bold; 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>
Этот пример может быть отформатирован следующим образом:  [D]Последовательность фиктивных тегов: <P> <SPAN> <P:first-letter> T </P:first-letter>he first </SPAN> few words of an article in the Economist. </P> Обратите внимание на то, что теги псевдо-элемента :first-letter примыкают к содержанию (т.е. к начальному символу), в то же время начальный тег псевдо-элемента :first-letter вставляется справа после начального тега элемента, к которому первый прикрепляется. Чтобы достигнуть традиционного форматирования буквиц, устройства вывода могут аппроксимировать размеры шрифта, например, для выравнивания базовых строк. Кроме этого, может быть взят в расчет контур глифа при форматировании. Пунктуация (т.е. символы, определенные в Unicode в пунктуационных классах "open" (Ps), "close" (Pe), и "other" (Po)), предшествующая первой букве должна быть включена, как видно в примере ниже:  [D]Псевдо-элемент :first-letter согласуется только с частями элементов блокового уровня. Некоторые языки могут иметь определенные правила, как обращаться с комбинациями букв. В голландском языке, например, если комбинация букв "ij" появляется в начале слова, то обе буквы следует рассматривать внутри псевдо-элемента :first-letter. Следующий пример иллюстрирует, как перекрывающиеся псевдо-элементы могут взаимодействовать. Первая буква элемента Р будет зеленой с размером шрифта '24pt'. Далее первая отформатированная строка будет голубой ('blue'), а остальной параграф будет красный ('red').
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>
Допустим, что разрыв строки произойдет перед словом "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. 5.12.3. Псевдо-элементы :before и :after.Псевдо-элементы ':before' и ':after' могут использоваться для встраивания сгенерированного содержания перед или после содержания элемента. Это объясняется в разделе по генерированному тексту. H1:before {content: counter(chapno, upper-roman) ". "}
Когда псевдо-элементы :first-letter и :first-line комбинируются с :before и :after, они применяются к первой букве или к первой строке элемента, включенного во встроенный текст.
P.special:before {content: "Special! "}
P.special:first-letter {color: #ffd800}
Это сформирует изображение "S" в "Special!" золотым цветом. |
