3. Каскадные таблицы стилей

• Общин правила построения каскадны таблиц стилей
• Шрифты
• Цвет и фон
• Форматирование текста
• Блоки
• Визуальное форматирование
• Визуальные эффекты

3.2. Шрифты

Выбор подходящего шрифта для отдельных частей документа является одним из наиболее часто выполняемых действий в процессе разработки HTML-документа. Шрифты различаются по своему внешнему виду (начертанию), по размеру, по стилю (прямой, курсив или наклонный) и по "жирности" отображения (нормальный, полужирный). Каскадные таблицы стилей предоставляют в распоряжение разработчика набор свойств для установки всех перечисленных параметров шрифтов.

Свойство font-family задает приоритетный список шрифтов. Если использовать для отображения страницы один определенный шрифт, то может оказаться, что этот шрифт не поддерживает некоторые символы, содержащиеся на странице, или на компьютере пользователя нет вообще этого шрифта. Для разрешения подобных проблем это свойство позволяет разработчику страницы задать список шрифтов одного стиля и размера, перечисленных через запятую, среди которых браузер может искать необходимый символ:

При интерпретации HTML-страницы браузер сначала ищет на компьютере пользователя шрифт Impact. Если такой шрифт отсутствует, то браузер пытается применить шрифт Times New Roman, а если и он не найден, то используется любой шрифт из семейства шрифтов serif – одного из типовых семейств шрифтов компьютера.

Понятие типовых семейств шрифтов введено в каскадные таблицы стилей с целью реализации наихудшего варианта отображения страницы, если не найдены специально использованные автором шрифты. В любой реализации каскадных таблиц стилей должны существовать пять типовых семейств шрифтов, которые соответствуют реальным шрифтам, обычно устанавливаемым на большинстве компьютеров:

• serif (например, Times);
• sans-serif (например, Helvetica);
• cursive (например, Zapf-Chancery);
• fantasy (например, Western);
• monospace (например, Courier).

Все установленные гарнитуры должны ссылаться на точные названия семейств, найденные в библиотеках шрифтов клиентских узлов с учетом заглавных букв, версий начертания обозначений кодирования, если они присутствуют. К примеру, Arial и Arial Unicode MS – это два совершенно разных семейства. Имена шрифтов, состоящих из нескольких слов, должны обязательно заключаться в кавычки.

Свойство font-style определяет стиль шрифта из выбранного семейства: нормальный (normal), курсивный (italic) или наклонный (oblique).

Нормальный шрифт – это обычный прямой шрифт, используемый для печати документов. Курсивный стиль шрифта напоминает каллиграфические этюды в прописях первоклассников и близок к рукописному. Наклонные шрифты генерируются из обычных прямых шрифтов небольшим наклоном символов.

Каскадные таблицы стилей реализуют еще одну вариацию шрифта выбранного семейства – капитель (small-caps). В шрифте этого стиля все строчные буквы выглядят как прописные, но меньшего размера и с немного измененными пропорциями. Для этого используется свойство font-variant.

Свойство font-weight выбирает из заданного семейства шрифт определенной жирности. В рекомендациях регламентируется 9 градаций жирности шрифта, задаваемых числами 100, 200 и так далее до 900. Значение 100 соответствует самому "бледному" шрифту, тогда как 900 – самому "жирному".

Для задания нормального шрифта используется ключевое слово normal, что соответствует цифровому значению 400. Значение bold применяется для выбора общепринятого полужирного начертания шрифта и его цифровым эквивалентом является 700.

Выбор определенной градации жирности шрифта не означает, что в семействе существует шрифт с заданной жирностью. Единственное, что гарантируется, – это то, что шрифт с большим значением жирности не светлее предыдущего значения. Некоторые семейства имеют только две градации жирности: нормальную и полужирную.

Свойство font-size определяет размер шрифта. Его значение может быть абсолютным или относительным.

Абсолютное значение можно задать одним из следующих ключевых слов: xx-small, х-small, small, medium, large, x-large, xx-large, которые являются индексами в таблице размеров шрифтов, поддерживаемой браузером. Масштабирующий множитель соседних значений в уровне 1 каскадных таблицах стилей определялся как 1.5, а в уровне 2 его значение рекомендовано равным 1.2. Это означает, что шрифт размера large в 1.2 раза выше шрифта medium и в 1.2 ниже шрифта x-large. По умолчанию браузер использует значение medium.

Абсолютное значение можно задать и в виде абсолютного значения длины, например 10 pt, но в этом случае высота шрифта не зависит от хранимой таблицы размеров шрифтов браузера.

Ключевые слова для задания относительного размера шрифта интерпретируются относительно таблицы размеров шрифтов и размера шрифта элемента-родителя. Возможными значениями могут быть: larger и smaller. На пример, если родитель имеет размер шрифта medium, то значение larger сделает шрифт текущего элемента равным large.

Относительный размер шрифта можно задать также в процентах к размеру шрифта родителя или в относительных единицах длины:

Два последние правила для выделенного в абзаце элемента em определяют одинаковую высоту шрифта 12 pt.

Для сочетания всех возможных стилей для шрифта используется свойство font. Все значения свойств задаются через пробелы в порядке font-style, font-variant, font-weight, font-size, line-height и font-family. Первые три свойства могут не задаваться, что соответствует установке их значений в normal. Размер шрифта и высота строки (свойство line-height) задаются через косую черту. Элементы списка семейств шрифтов свойства font-family задаются через запятую:

В этом примере для абзаца задается наклонный шрифт Times Cyr высотой 12 pt. Высота строк – 14 pt. Если не найден шрифт Times Cyr, то применяется любой шрифт типового семейства serif.

Свойство @font-face предназначено для задания семейства шрифта. Если указанный шрифт отсутствует на компьютере пользователя, то он загружается из сети по заданному вторым параметром URL-адресу: