• 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 – по центру;