HTML, XHTML и CSS на 100%
Шрифт:
<p:first-line><SPAN class="test"> Это
довольно длинный абзац HTML-документа, </span></p:first-line><span class="test"> который будет разбит на несколько строк. </span> Первая строка будет отмечена последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.
Псевдоэлемент: first-line может прикрепляться только к элементам уровня блока. Он подобен строковому элементу, но с некоторыми ограничениями. К псевдоэлементу: first-line применяются следующие
Псевдоэлемент first-letter
Псевдоэлемент: first-letter может использоваться для создания таких простых типографических эффектов, как заглавные буквы и буквицы. Тип начальной буквы аналогичен строковому элементу, если его свойству float присвоено значение none, в противном случае он аналогичен перемещаемому объекту.
К псевдоэлементам: 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 }
Например, рассмотрим этот CSS код применительно к такому абзацу:
Некоторый текст, разделенный на две строки
Допустим, что разрыв строки произойдет до слова «разделенный», тогда последовательность функциональных тегов для данного фрагмента может быть следующей:
<p:first-line>
<p:first-letter>
Не
</p:first-letter>который текст,
</p:first-line>
разделенный на две строки
Обратите внимание, что элемент: first-letter находится внутри элемента: first-line. Свойства, установленные для элемента: first-line, наследуются: first-letter, но могут быть переназначены, если в элементе: first-letter этому же свойству присваивается значение.
Псевдоэлементы :before и: after
Псевдоэлементы: before и: after можно использовать для вставки генерируемого содержимого до или после содержимого элемента.
h1:before {content: counter(chapno, upper-roman) ". "}
Когда псевдоэлементы: first-letter и: first-line сочетаются с псевдоэлементами: before и: after, они применяются к первой букве или строке элемента, включая вставляемый текст.
p.special:before {content: "Важно! "}
p.special:first-letter {color: gold}
Буква В слова Важно! будет представлена золотистым цветом.
7.5. Правило @media
Правило @media позволяет задавать правила CSS для различных устройств в пределах одной таблицы стилей, разделенных запятыми. Иными словами, вы можете задать для одного и того же элемента один размер шрифта для печати, а другой для просмотра на экране.
Например:
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
В примере при просмотре документа на экране размер шрифта будет 10 пунктов, а при печати 12 пунктов.
Рассмотрим еще один пример:
@media screen, print {
body { font-size: 14pt }
}
В этом примере и при печати, и при просмотре размер шрифта будет одинаковый – 14 пунктов.
Рассмотрим список всех устройств, поддерживаемых CSS. Значение указывает, что документ предназначен:
• all – для всех устройств;
• aural – речевых синтезаторов;
• braille – устройств чтения азбуки Брайля;
• embossed – печати азбуки Брайля;