Типографские псевдо-элементы Назад
Некоторые распространенные типографские эффекты связаны не со структурными элементами, а с элементами форматирования на холсте. В CSS1 определены два таких типографских элемента, которые можно адресовать с помощью псевдо-элементов: первая строка элемента и первая буква.
Ядро CSS1: UA могут игнорировать все правила с ":first-line" или ":first-letter" в селекторе, или поддерживать только подмножество свойств псевдо-элементов. (см. этот раздел )
Псевдо-элемент "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": свойства шрифтов, свойства цвета и фона, "word-spacing", "letter-spacing", "text-decoration", "vertical-align, "text-transform" "line-height" и "clear" .
Псевдо-элемент "first-letter" Назад
Псевдо-элемент "first-letter" используется для создания эффекта буквицы, являющимся распространенным типографским эффектом. Он соответствует строчному элементу, если его свойство "float" равно "none", иначе он соответствует плавающему элементу. К псевдо-элементу "first-letter" применимы следующие свойства: свойства шрифтов, свойства цвета и фона, "text-decoration", "vertical-align (только если "float" равно "none"), "text-transform", "line-height", свойства границ, свойства отступов, свойства рамки, "float", "clear".
Следующий пример позволяет создать эффект буквицы, когда высота первой буквы равна высоте двух строк:
<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" может применяться только к блочным элементам.
1 2 3
8 8 8
| |
*
Обратная связь