Псевдоэлемент first-letter

We use cookies. Read the Privacy and Cookie Policy

Псевдоэлемент 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>

<title>Глава 7. Стиль заглавной буквы</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> несколько слов из книги

"Самоучитель по HTML и CSS".</p>

</body>

</html>

Пример из листинга 7.8 может быть отформатирован, как показано на рис. 7.1.

Рис. 7.1. Стиль заглавной буквы

Приведу последовательность функциональных тегов:

<p>

<span>

<p:first-letter>

П

</p:first-letter>ервые

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

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

<p>

<p:first-line>

<p:first-letter>

Не

</p:first-letter>который текст,

</p:first-line>

разделенный на две строки

</p>

Обратите внимание, что элемент: first-letter находится внутри элемента: first-line. Свойства, установленные для элемента: first-line, наследуются: first-letter, но могут быть переназначены, если в элементе: first-letter этому же свойству присваивается значение.

Данный текст является ознакомительным фрагментом.