В элемент H1 включаем элемент SPAN:
<h1><span>Форматирование текста средствами CSS</span></h1>
В результате синим цветом будет выделена только строка заголовка.
Теперь, когда вы научились работать с цветами, перейдем к следующему важному разделу, где вы научитесь придавать тексту нужный вид и размер.
8.2. Шрифты
Шрифт – это лицо текста, поэтому для начала научимся задавать нашему тексту нужный шрифт. Двигаясь дальше, подробно рассмотрим все возможные варианты работы со шрифтом текста. Итак, начнем с семейства шрифта.
Семейство шрифта
Свойство font-family указывает браузеру шрифт или список шрифтов, которыми должен отображаться текст. Не надо забывать, что заданный вами шрифт может быть не установлен на машине клиента. Тогда браузер отобразит текст на экране первым шрифтом, который найдет установленным при просмотре списка слева направо. Если не будет найден ни один из перечисленных шрифтов, то браузер клиента отобразит текст шрифтом по умолчанию. Вы также можете задать семейство шрифта.
Семейство – это группа шрифтов, созданных с использованием сходных принципов дизайна и внешнего вида. В CSS есть пять основных групп: serif, sans-serif, monospace, fantasy, cursive.
Примечание
После задания шрифтов последним в списке лучше указывать название семейства, к которому относится шрифт. Тогда, если не будет найден ни один из шрифтов, браузер отобразит текст шрифтом из заданного семейства, что позволит сохранить стиль оформления.
Для примера зададим шрифт текста абзацев Trebuchet MS и группу, к которой относится данный шрифт, sans-serif (рис. 8.4):
p {
font-family: "Trebuchet MS", sans-serif;
}
В примере, изображенном на рис. 8.4, показано окно браузера в системе, где установлен шрифт Trebuchet MS.
Рис. 8.4. Установка шрифта
Внимание!
Необходимо помнить, что если название шрифта содержит пробелы, то его необходимо заключить в кавычки.
Вы можете попробовать работать и с другими шрифтами и группами. Ниже приведены несколько групп и их основные шрифты, которые доступны для большинства пользователей с разными браузерами и операционными системами:
• serif – Times New Roman, Garamond, Georgia;
• sans-serif – Trebuchet, Arial, Verdana;
• monospace – Courier, Courier New, Andale Mono.
Старайтесь не использовать экзотических шрифтов, и тогда вы сможете быть уверенными, что страница у клиента будет отображена так, как вы задумали.
Стиль шрифта
Стиль шрифта задается свойством font-style, которое может принимать одно из трех значений: normal, oblique или italic. Эти значения имеют следующий смысл.
• normal – определяет шрифт, который классифицируется как Normal. При отображении на экране он выглядит как обычный текст.
• oblique – задает шрифт, который классифицируется как Oblique. К нему, как правило, относятся шрифты со словами Oblique, Slanted или Incline в названиях. Такой текст может в действительности генерироваться электронным наклоном нормального шрифта.
• italic – определяет шрифт, который классифицируется как Italic и, если это недоступно, шрифт, помеченный как Oblique. К Italic, как правило, относятся шрифты со словами Italic, Cursive или Kursiv в названиях.
Для примера изменим стиль элементов P класса namek в нашем примере на курсив:
p.namek {
font-style: italic;
}
На рис. 8.5. видно что текст Намек: добивается успеха только тот, кто старается теперь записан курсивом.
Рис. 8.5. Стиль шрифта
Вы также можете сделать весь текст на странице курсивом, используя такой код:
body {
font-style: oblique;
}
Вид шрифта
Свойство font-variant может принимать одно из двух значений: normal или small-caps. Если задано значение small-caps, то текст будет выведен шрифтом из малых прописных букв. Если задано значение normal, то текст отображается, как обычно.
Лучше всего это понятно на примере. Применим свойство small-caps для наших заголовков второго уровня:
h2 {
font-variant: small-caps;
}
Результат просмотра страницы браузером Internet Explorer 6 показан на рис. 8.6.
Рис. 8.6. Вариант шрифта
Примечание
Следует отметить, что если font-variant имеет значение small-caps, а шрифт недоступен, то браузер будет симулировать такой шрифт, например, замещением букв нижнего регистра обычного шрифта пересчитанными символами верхнего регистра. В крайнем случае весь текст будет воспроизведен буквами верхнего регистра.
Ширина шрифта
Свойство font-weight определяет ширину шрифта. Значение может быть задано числом от 100 до 900 (в сотнях), где каждый номер обозначает шрифт, который темнее своего предшественника. В других случаях значение может быть следующим.
• normal – текст будет отображен обычным шрифтом. В числовом выражении соответствует значению 4 0 0.
• bold – текст будет отображен более широким шрифтом, чем обычно. Численно оно равно значению 7 0 0.
• bolder – определяет более темный вес шрифта, чем наследуемый. Если наследуемое значение равно 9 0 0, то результат будет также 9 0 0.
• lighter – задает вес шрифта, который светлее, чем наследуемый. Если наследуемое значение равно 10 0, то результат будет также 10 0.
Для примера установим значение свойства font-weight для класса w_600 элемента P, равное 600.
p.w_600 {
font-weight: 600;
}
Результат приведен на рис. 8.7.
Рис. 8.7. Вес шрифта
В качестве эксперимента вы можете попробовать задать элементу BODY значение свойства font-weight равным normal, а потом изменить его на 400. Вы увидите, что толщина шрифта основного текста в обоих случаях осталась одинаковой и вид текста на странице не изменился.
Размер шрифта
Теперь изменим размер шрифта основного текста. Для этого существует свойство font-size. Размер шрифта задается с помощью значения и единицы измерения, выбранной в одной из двух разных групп: абсолютной и относительной.
Абсолютные единицы:
• in – дюйм, примерно равен 2,5 см;
• mm – миллиметр;
• cm – сантиметр;
• pt – пункт, примерно равен 1/7 дюйма;
• pc – пика (равна 12 пунктам).
Относительные единицы:
• em – высота шрифта элемента;
• ex – высота буквы x;
• px – пиксел;
• % – процентное соотношение.
Группу относительных единиц удобно использовать, чтобы сохранить первозданный вид документа на любом устройстве (на экране, при печати).
Для нашего примера сделаем размер шрифта текста, равный 14 пунктам:
p {
font-size: 14pt;
}
Результат можно увидеть на рис. 8.8.
Рис. 8.8. Размер шрифта 14 pt
Мы рассмотрели основные возможности CSS по работе со шрифтами. Теперь приступим к изучению форматирования текста.
8.3. Форматирование текста
В этом разделе вы познакомитесь с впечатляющими средствами CSS для отображения текста. Начнем изучение форматирования текста с отступов.
Отступы
Представьте, что вы форматируете несколько HTML-страниц размером с небольшую книгу. Язык HTML не предоставляет специальных средств для задания отступа абзаца, и отступ приходится делать с помощью пробелов. Согласитесь, не очень-то удобно в начале каждого абзаца набирать пробелы, да еще и следить, чтобы их было одинаковое количество в начале всех абзацев. Еще хуже, если, выполнив часть или всю работу, вы обнаружите, что отступы недостаточны или слишком большие. CSS предоставляет замечательное свойство text-indent для решения данной проблемы. Размер отступа может задаваться как абсолютными, так и относительными единицами. В том числе и процентами. В качестве 100 % считается ширина всей страницы.
Зададим в нашем примере отступ 25 пикселов (рис. 8.9):
p {
text-indent: 25px;
}
Рис. 8.9. Задание отступа 25 пикселов
Для данного свойства остается порекомендовать поэкспериментировать с разными значениями и единицами измерений, чтобы лучше разобраться в них.
Выравнивание текста
Выравнивание текста задается с помощью свойства text-align, значения которого такие же, как и значения свойства align у элемента P. Следующие значения указывают, что текст будет выровнен:
• left – по левому краю;
• right – по правому краю;
• center – по центру;
• justify – по формату.
Для примера зададим для заголовков выравнивание по центру, а для вступительного намека – по правой стороне (рис. 8.10):
h1 {
text-align: center;
}
p.namek {
text-align: right;
}
Рис. 8.10. Выравнивание текста
Декоративное оформление
С помощью CSS можно изменять или добавлять декоративное оформление текста. Для этого существует свойство text-decoration. Ниже перечислены все возможные значения данного свойства и их описания: