Псевдоэлемент :first-line
Псевдоэлемент :first-line задает стиль первой строки абзаца, например:
P:first-line { text-transform: uppercase }
Представленное выше правило делает буквы первой строки каждого абзаца заглавными. Селектор Р:first-line не соответствует ни одному реальному элементу HTML. Он сопоставляется псевдоэлементу, который браузеры будут помещать в начало каждого абзаца.
Обратите внимание, что длина первой строки зависит от множества факторов: от ширины страницы, размера шрифта и т. д. Поэтому типичный абзац HTML-документа выглядит так:
<Р>Этот длинный абзац HTML-документа будет разбит на несколько строк.</Р>
Строки этого абзаца будут преобразованы следующим образом:
это длинный абзац HTML-документа, будет разбит на несколько строк.
К псевдоэлементу :first-line применяются свойства шрифтов, цвета, фона,
word-spacing,letter-spacing,text-decoration,vertical-align,text-transform
line-height, text-shadow и clear.
Псевдоэлемент :first-letter
Псевдоэлемент :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
Теперь рассмотрим основные приемы работы с текстом — форматирование и установку стиля, выбор шрифта и задание цвета.
Сразу оговоримся, что при работе со шрифтами следует учитывать, что выбранный вами шрифт должен быть установлен на компьютере клиента. В противном случае пользователь увидит страницу, шрифт текста который задается по умолчанию настройками его браузера.
Выделение текста цветом
Все свойства CSS по работе с цветом наследуемы. Если вы, к примеру, зададите, красный цвет текста для тега <BODY>, то весь текст на странице станет красным.
Если после этого вы зададите синий цвет для таблиц с именем класса bluetext, 0 текст во всех таблицах с классом blue_text будет синим. Если же вы зададите красный цвет для тегов <Р>, а синий - для <BODY>, то цвет текста в таблицах останется синим. Однако если внутри какой-то ячейки вы применяете тег <Р>, то цвет текста в этой ячейке будет красным.
Цвет текста
Для изменения цвета текста используется свойство color, в качестве параметра которого задается его название или в виде кода цвета:
H1
{ color: red;
}
Значение цвета можно задать тремя способами:
□ английским названием цвета (как в приведенном выше примере);
□ шестнадцатиричным значением (например, #ff 0000);
□ rgb-значением (например, г gb (255, 0, 0)).
Свойство color используется для задания цвета ссылкам в документе, например:
A:hover {
color: grey;
}
Цвет фона
Цвет фона задается с помощью свойства background-color.
Для примера выделим заголовки второго уровня (то есть теги <Н2>) на HTML-странице синим цветом. Для этого добавим в файл таблицы стилей такой код:
Н1
{
background-color: blue;
}
теги <Н1>, <р> и др. выделяют цветом всю область. Например, тег <Н1> выделяет строку целиком, а тег <Р> - только прямоугольную область, даже если последняя строка обрывается на середине. Чтобы установить фон для области, занятой только текстом, необходимо внутрь тега <Н1> вложить тег <SPAN> и задать цвет лишь для фона:
Н1 SPAN {
background-color: blue;
}
Теперь, когда вы научились работать с цветом, перейдем к важному подразделу, из которого вы научитесь устанавливать для своего текста вид и размер.
Шрифты
Шрифт — это «лицо» текста, поэтому для начала разберемся, как задавать тексту | нужный шрифт. Далее подробно рассмотрим все возможные варианты работы со шрифтом.
Семейство шрифта
Свойство font-family указывает браузеру шрифт или список шрифтов, которым должен отображаться текст. Не забывайте, что заданный шрифт может быть не установлен на машине клиента. В этом случае браузер отобразит текст на экране шрифтом, который будет найден первым среди установленных шрифтов на компьютере пользователя при просмотре списка слева направо. Если ни один из перечисленных шрифтов не обнаружится, то браузер клиента отобразит текст шрифтом по умолчанию.
Вы можете также указать семейство шрифта. Семейство — это группа шрифтов, созданных по сходным принципам дизайна и внешнего вида. В CSS есть пять основных групп: serif, sans-serif, monospace, fantasy и cursive.
ПРИМЕЧАНИЕ
После задания шрифтов последним в списке лучше указывать название семейства, к которому относится шрифт. Тогда, если не найдется ни один из шрифтов, браузер отобразит текст шрифтом из заданного семейства
Для примера зададим шрифт текста абзацев (Trebuchet MS) и семейство, к которому относится данный шрифт (sans-serif):
P {
font-family: "Trebuchet MS", sans-serif;
}
Вы можете задавать другие шрифты и группы. Ниже приведены несколько групп и их основные шрифты, доступные большинству пользователей с разными браузерами и операционными системами:
serif — Times New Roman, Garamond, Georgia;
sans-serif — Trebuchet, Arial, Verdana;
monospace — Courier, Courier New, Andele Mono.
Помните, что если название шрифта содержит пробелы, то его необходимо заключитьв кавычки.
Стиль шрифта
Стиль шрифта задается свойством font-style, которое может принимать одно из трех значений: normal, oblique или italic. Эти значения имеют следующий смысл:
- normal — при отображении на экране выглядит как обычный текст;
- oblique — такой текст в действительности может генерироваться автоматически путем наклона нормального шрифта;
- italic — определяет курсивный шрифт или, если наклонного шрифта нет, то шрифт oblique.
Стиль ob I i qu е используется в тех случаях, когда курсивный шрифт не установлен. Он также наклонный, однако выглядит неэстетично.
■ .■>■■■■..1 ■*.'
Вид шрифта
Свойство font-variant может принимать одно из двух значений: normal или small-caps. Если задается значение small-caps, то текст будет выводиться шрифтом малых заглавных букв. Если задается значение normal, то текст отображается обычным образом.
ПРИМЕЧАНИЕ
Следует отметить, что если свойство font-variant имеет значение small-caps, а шрифт недоступен, то браузер будет симулировать такой шрифт, например, замещением букв нижнего регистра обычного шрифта пересчитанными символами верхнего регистра. В крайнем случае, весь текст будет воспроизводиться буквами верхнего регистра.