Псевдоэлемент :first-line
Псевдоэлемент :first-line используется для применения специальных стилей к первой форматируемой строке абзаца. Например:
P:first-line { text-transform: uppercase }
Представленное выше правило означает «сделать буквы первой строки каждого абзаца заглавными». Однако селектор «P:first-line» не соответствует ни одному реальному элементу HTML. Он сопоставляется псевдоэлементу, который конформные агенты пользователей будут помещать в начало каждого абзаца.
Обратите внимание, что длина первой строки зависит от множества факторов, таких как ширина страницы, размер шрифта и др. Поэтому типичный абзац HTML-документа, такой как
<P>Это довольно длинный абзац
HTML-документа, который будет разбит на несколько строк.
Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки
будут обрабатываться как обычные строки абзаца.</P>
претерпит следующую реорганизацию строк:
ЭТО ДОВОЛЬНО ДЛИННЫЙ АБЗАЦ HTML-ДОКУМЕНТА,
который будет разбит на несколько строк.
Первая строка будет отмечена последовательностью
функциональных тегов. Другие строки
будут обрабатываться как обычные строки абзаца.
и будет «переписан» агентами пользователей так, чтобы включить последовательность функциональных тегов для :first-line. Эта фиктивная последовательность помогает показать, как наследуются свойства.
<P><P:first-line> Это довольно длинный абзац HTML-документа,
</P:first-line> который будет разбит на несколько строк.
Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки
будут обрабатываться как обычные строки абзаца. </P>
Если псевдоэлемент разрывает реальный элемент, то желаемый эффект зачастую может быть достигнут с помощью последовательности функциональных тегов, которая закрывает и повторно открывает этот элемент. Таким образом, если мы используем в предыдущем абзаце элемент SPAN, то получим:
<P><SPAN class="test"> Это довольно длинный абзац HTML-документа,
который будет разбит на несколько строк.</SPAN>
Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки
будут обрабатываться как обычные строки абзаца.</P>
и пользовательский агент сможет сгенерировать соответствующие начальные и конечные теги для SPAN во время вставки последовательности функциональных тэгов для :first-line.
<P><P:first-line><SPAN class="test"> Это
довольно длинный абзац HTML-документа,
</SPAN></P:first-line><SPAN class="test"> который будет разбит
на несколько строк. </SPAN>
Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки
будут обрабатываться как обычные строки абзаца. </P>
Псевдоэлемент :first-line может прикрепляться только к элементам уровня блока.
Псевдоэлемент :first-line подобен строковому элементу только с некоторыми ограничениями. К псевдоэлементу :first-line применяются следующие свойства: свойства шрифтов, цветов, фона, ‘word-spacing’, ‘letter-spacing’, ‘text-decoration’, ‘vertical-align’, ‘text-transform’, ‘line-height’, ‘text-shadow’ и ‘clear’.
Псевдоэлемент :first-letter
Псевдоэлемент :first-letter может использоваться для создания таких простых типографических эффектов, как заглавные буквы и буквицы. Тип начальной буквы аналогичен строковому элементу, если его свойству ‘float’ присвоено значение ‘none’, в противном случае он аналогичен перемещаемому объекту.
К псевдоэлементам :first-letter применяются следующие свойства: свойства шрифтов, цветов, фона, ‘text-decoration’, ‘vertical-align’ (только если для свойства ‘float’ установлено значение ‘none’), ‘text-transform’, ‘line-height’, свойства полей, полей в ячейке таблицы, рамок, ‘float’, ‘text-shadow’ и ‘clear’.
В следующем примере высота буквицы устанавливается равной высоте двух строк:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Начальная буква</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>Первые</SPAN> несколько слов из статьи
в журнале "Экономист".</P>
</BODY>
</HTML>
Данный пример может быть отформатирован следующим образом:
Последовательность функциональных тегов:
<P>
<SPAN>
<P:first-letter>
П
</P:first-letter>ервые
</SPAN>
несколько слов из статьи в журнале "Экономист".
</P>
Обратите внимание, что теги псевдоэлементов :first-letter примыкают к содержимому (например, к начальному символу), а начальный тег псевдоэлемента :first-line вставляется сразу после начального тега элемента, к которому он прикрепляется.
Чтобы добиться традиционного оформления буквиц, агенты пользователей могут устанавливать примерные значения размеров шрифтов, например, для выравнивания базовых строк. Кроме того, во время форматирования можно учитывать контур глифа.
Перед первой буквой должны быть включены имеющиеся знаки пунктуации (т.е. символы, определенные в классах пунктуации «open» (Ps), «close» (Pe) и «other» (Po) Unicode [UNICODE]), как это сделано в следующем примере:
Псевдоэлемент :first-letter сопоставляется только некоторым частям элементов уровня блока.
В некоторых языках могут существовать специальные правила обращения с определенными комбинациями букв. Например, в голландском языке, если сочетание букв «ij» находится в начале слова, то они обе должны находиться в псевдоэлементе :first-letter.
В следующем примере показано, как могут повлиять друг на друга налагающиеся псевдоэлементы. Первая буква каждого элемента P выделяется зеленым цветом, а размер шрифта установлен в ’24pt’. Остальные буквы первой форматируемой строки будут представлены синим цветом, а все оставшиеся буквы абзаца — красным.
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Некоторый текст, разделенный на две строки</P>
Допустим, что разрыв строки произойдет до того, как слово «закончится», тогда последовательность функциональных тегов для данного фрагмента может быть следующей:
<P>
<P:first-line>
<P:first-letter>
Не
</P:first-letter>который текст,
</P:first-line>
разделенный на две строки
</P>
Обратите внимание, что элемент :first-letter находится внутри элемента :first-line. Свойства, установленные для элемента :first-line, наследуются элементом :first-letter, но могут быть переназначены, если в элементе :first-letter этому же свойству присваивается значение.
Псевдоэлементы :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!» будет представлена золотистым цветом.
