HTML, XHTML и CSS на 100%
Шрифт:
Обратите внимание, что длина первой строки зависит от множества таких факторов, как ширина страницы, размер шрифта и др.
Типичный абзац HTML-документа, как этот:
Это довольно длинный абзац
HTML-документа, который будет разбит на несколько строк. Первая строка будет отмечена последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.
претерпит следующую реорганизацию строк:
!!!
ЭТО
который будет разбит на несколько строк.
Первая строка будет отмечена последовательностью
функциональных тегов. Другие строки
будут обрабатываться как обычные строки абзаца.
Он будет «переписан» браузерами пользователей так, чтобы включить последовательность функциональных тегов для: first-line. Эта фиктивная последовательность помогает показать, как наследуются свойства:
<p:first-line> Это довольно длинный абзац HTML-документа,
</p:first-line> который будет разбит на несколько строк.
Первая строка будет отмечена последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.
Если псевдоэлемент разрывает реальный элемент, то желаемый эффект зачастую может быть достигнут с помощью последовательности функциональных тегов, которая закрывает и повторно открывает этот элемент. Таким образом, если вы используете в предыдущем абзаце элемент SPAN, то получите следующее:
<span class="test"> Это довольно длинный абзац HTML-документа, который будет разбит на несколько строк.</span> Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.
Теперь браузер пользователя сможет сгенерировать соответствующие начальные и конечные теги для SPAN во время вставки последовательности функциональных тегов для: first-line. Получится следующее:
<p:first-line><SPAN class="test"> Это
довольно длинный абзац HTML-документа, </span></p:first-line><span class="test"> который будет разбит на несколько строк. </span> Первая строка будет отмечена последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.
Псевдоэлемент: first-line может прикрепляться только к элементам уровня блока. Он подобен строковому элементу, но с некоторыми ограничениями. К псевдоэлементу: first-line применяются следующие свойства: свойства шрифтов, цветов, фона, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, text-shadow и clear.
Псевдоэлемент first-letter
Псевдоэлемент: first-letter может использоваться для создания таких простых типографических эффектов, как заглавные
К псевдоэлементам: first-letter применяются следующие свойства: свойства шрифтов, цветов, фона, text-decoration, vertical-align (если для свойства float установлено значение none), text-transform, line-height, свойства полей, полей в ячейке таблицы, рамок, float, text-shadow и clear.
В следующем примере из листинга 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>
<span>Первые</span> несколько слов из книги
"Самоучитель по HTML и CSS".
</body>
</html>
Пример из листинга 7.8 может быть отформатирован, как показано на рис. 7.1.
Рис. 7.1. Стиль заглавной буквы
Приведу последовательность функциональных тегов:
<span>
<p:first-letter>
П
</p:first-letter>ервые
</span>
несколько слов из статьи в журнале "Экономист".
Обратите внимание, что теги псевдоэлементов: 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 }