Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
лекции 2005 / P8 / CSS учебник.doc
Скачиваний:
28
Добавлен:
16.04.2013
Размер:
468.99 Кб
Скачать

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

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

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

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

2.4 Псевдо-элемент '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' может применяться только к блочным элементам.