2015-01-30
336
Псевдоэлемент:first-letter может использоваться для создания такого простого типографического эффекта, как буквица. Он соответствует строчному элементу, если его свойство float равно none, иначе он соответствует плавающему элементу.
К псевдоэлементам: first-letter применяются свойства шрифтов, цвета, фона, границ, отступов, рамок: text-decoration, vertical-align (только если для свойства float устанавливается значение none), text-trans form, line-height, float, text-shadow и clear.
В следующем примере из листинга 1.65 высота буквицы устанавливается равной высоте двух строк.
Стиль заглавной буквы
<:!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<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>nepвые</SPAN> несколько слов из книги
"Самоучитель по HTML и CSS".</Р> </BODY> </HTML>
Рассмотрим, в какой последовательности должны располагаться функциональ
ные теги.
В следующем примере используются налагающиеся псевдоэлементы. Первая буква каждого элемента Р выделяется зеленым цветом, а размер шрифта устанавливается в 24 пт. Остальные буквы первой форматируемой строки представляются синим цветом, а все оставшиеся буквы абзаца — красным. Приведем CSS-код примера:
Р { color: red; font-size: 12pt } P:first-letter { color: green; font-size: 200% }
P:first-1ine { color: blue }
Псевдоэлементы:before и after
Псевдоэлементы: before и: after можно использовать для вставки содержимого до или после содержимого элемента.
Когда псевдоэлементы:first-letter и:first-line сочетаются с псевдоэлементами: before и: after, то они применяются к первой букве или строке элемента, включая вставляемый текст:
P.special:before {content: "Важно! "} P.special:first-letter {color: gold}
Слово «Важно!» добавится в начало абзаца стиля special, а буква В этого слова, будет золотистого цвета.
Форматирование текста средствами CSS
Теперь рассмотрим основные приемы работы с текстом — форматирование и установку стиля, выбор шрифта и задание цвета.
Сразу оговоримся, что при работе со шрифтами следует учитывать, что выбранный вами шрифт должен быть установлен на компьютере клиента. В противном случае пользователь увидит страницу, шрифт текста который задается по умолчанию настройками его браузера.
