Псевдоэлемент first-letter. Псевдоэлемент: first-letter может использоваться для создания таких простых типографических эффектов, как заглавные буквы и буквицы. Тип начальной буквы аналогичен строковому элементу, если его свойству float присвоено значение none, в противном случае он аналогичен перемещаемому объекту. К псевдоэлементам: first-letter применяются следующие свойства: свойства шрифтов, цветов, фона, text-decoration, vertical-align (если для свойства float установлено значение none), text-transform, line-height, свойства полей, полей в ячейке таблицы, рамок, float, text-shadow и clear. В следующем примере из листинга 7.8 высота буквицы устанавливается равной высоте двух строк. Листинг 7.8. Стиль заглавной буквы. <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0//EN»> <html> <head> <titlе>Глава 7. Стиль заглавной буквы</titlе> <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> <р><sраn>Первые</sраn> несколько слов из книги. "Самоучитель по HTML и CSS".</p> </body> </html> Пример из листинга 7.8 может быть отформатирован, как показано на рис. 7.1. Рис. 7.1. Стиль заглавной буквы. Приведу последовательность функциональных тегов: <p> <span> <p:first-letter> П. </p:first-lеttеr>ервые. </span> Несколько слов из статьи в журнале "Экономист". </p> Обратите внимание, что теги псевдоэлементов: first-letter примыкают к содержимому (например, к начальному символу), а открывающий тег псевдоэлемента: first-line вставляется сразу после открывающего тега элемента, к которому он прикрепляется. Учтите, что в некоторых языках могут существовать специальные правила обращения с определенными сочетаниями букв. Например, в голландском языке, если сочетание букв «ij» находится в начале слова, то они обе находятся в псевдоэлементе: first-letter. В следующем примере показано, как могут повлиять друг на друга налагающиеся псевдоэлементы. Первая буква каждого элемента P выделяется зеленым цветом, а размер шрифта установлен 24 пункта. Остальные буквы первой форматируемой строки будут представлены синим цветом, а все оставшиеся буквы абзаца – красным. CSS-код примера будет выглядеть следующим образом: P { color: red; font-size: 12pt }. P:first-letter { color: green; font-size: 200% }. P:first-line { color: blue }. Например, рассмотрим этот CSS код применительно к такому абзацу: <р>Некоторый текст, разделенный на две строки</р> Допустим, что разрыв строки произойдет до слова «разделенный», тогда последовательность функциональных тегов для данного фрагмента может быть следующей: <p> <p:first-line> <p:first-letter> Не. </p:first-lеttеr>который текст, </p:first-line> Разделенный на две строки. </p> Обратите внимание, что элемент: first-letter находится внутри элемента: first-line. Свойства, установленные для элемента: first-line, наследуются: first-letter, но могут быть переназначены, если в элементе: first-letter этому же свойству присваивается значение.