Существует более 70 свойств, которые можно использовать для составления стилевых определений. Много! Для практической работы, конечно, необходим справочник, особенно на первых порах. Такой справочник приводится в книге. Однако, для успешной работы необходимо иметь общее представление о том, чем можно управлять в принципе, и выполнить несколько простых учебных заданий. Именно такому вводному (но не полному!) обзору с изрядной долей тренировочных упражнений посвящен второй урок книги.

Рассмотрение свойств структурировано (так же. как и в справочнике) по следующим разделам:

• Шрифт
• Цвет
• Текст
• Поля и рамки
• Вид

Начнем обзор стилевых свойст с единиц измерения, которые в них используются.

Единицы измерения

Шрифт

Можно задавать названия шрифта, стиль, размеры, варианты начертания.

Свойство задает название гарнитуры шрифта (например, Arial) или родовое название:

• serif — шрифт с засечками (серифный)
• sans-serif — шрифт без засечек (рубленый)
• monospace — моноширинный шрифт

Гарнитура — это набор начертаний символов одного шрифта.

Этот набор может включать в себя прямое и курсивное начертание, различаться по степени жирности (толщине штрихов), ширине литер (сжатые, нормальные, растянутые) и кеглю.

Шрифты подразделяются на серифные (с засечками) и рубленые (без засечек). Пример шрифта с засечками — гарнитура Times, без засечек — Helvetica.

Серифные шрифты посредством засечек (серифов) в нижней части литер улучшают читаемость документа. Нижние серифы создают впечатление слитности написания слова, объединяя соседние буквы.

Рубленые шрифты, в отличие от серифных, имеют гладкие края букв и не имеют завитков.

Можно предложить еще одно деление шрифтов на два класса: пропорциональные шрифты и моноширинные.

Моноширинные шрифты имитируют литеры пишущих машинок и матричных принтеров. В этих шрифтах ширина всех литер одинакова. Именно таким шрифтом (если шрифт не задан CSS) браузер выводит текст на экран тегами PRE, CODE, TT, SAMP, KBD.

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

Гарнитуры Times и Helvetica — пропорциональные. К моноширинным шрифтам относится гарнитура Courier.

Любая графическая операционная система имеет три набора стандартных гарнитур, для Windows это:

Times Roman (серифный шрифт)
Arial (рубленый шрифт)
Courier (моноширинный шрифт)

Браузер по умолчанию использует шрифт Times Roman для вывода обычного текста и шрифт Courier для моноширинного.

Если гипертекстовый продукт — сайт, лучше не задавать собственную гарнитуру. Указанный шрифт на компьютере пользователя может не содержать русских букв, и текст станет похож на “древненорвежский”:

Для локальных гипертекстовых приложений можно использовать любые шрифты. Такое приложение передается пользователю вместе с набором шрифтов и инструкцией по их установке.

При помощи свойства font-family можно указать не один, а несколько шрифтов через запятые в порядке предпочтения:

H1,H2,H3,H4,H5,H6
{
  font-family:Arial,Geneva,Helvetica,sans-serif;
}

Сначала браузер будет пытаться найти шрифт Arial, затем Geneva, потом Helvetica и, наконец, в случае полной неудачи, какой-нибудь рубленый шрифт (указание sans-serif).

Если название шрифта состоит из нескольких слов, оно заключается в кавычки.

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

Свойство font-size используется для задания абсолютного или относительного размера текущего шрифта.

В качестве относительного размера используется процентное задание (по отношению к размеру текущего шрифта) или ключевые слова:

• larger — крупнее
• smaller — мельче

В качестве абсолютного размера используется указание числа с одной из следующих единиц измерения: in, cm, mm, px, pt, pc. Можно использовать и такие ключевые слова:

• xx-small — сверхмелкий
• x-small — очень мелкий
• small — мелкий
• medium — средний
• large — крупный
• x-large — очень крупный
• xx-large — сверхкрупный

Следует отдавать предпочтение относительным величинам для того, чтобы пользователь, используя настройки браузера, смог установить для себя комфортный размер текста.

Цвет и фон

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

• ключевое слово, например, white
• шестнадцатеричный RGB-код, например, #EEE5DB
• десятичный RGB-код, например, rgb(255,64,0)

Определяет цвет элемента.

Определяет цвет фона, на который выводится элемент.

Текст

Определяет добавочное расстояние между буквами. Допускается использовать ключевое слово normal или задавать произвольное расстояние. Процентная запись не допускается.

Определяет расстояние между строками (интерлиньяж). Можно задавать в количествах строк (1.4), высотой (14pt) или в процентах от текущей высоты строки (200%). Например, двойной интервал между строками задается line-height:2 или line-height:200%. Допускается задание ключевого слова normal.

Свойство определяет способ горизонтального выравнивания текста. Допустимы следующие значения:

• left — по левому краю
• right — по правому краю
• center — по центру
• justify — по левому и правому краю

К сожалению, приятным значением justify практически невозможно пользоваться на текстах с длинными словами (русский, немецкий язык). Браузер “не умеет” пока переносить слова по слогам, и поэтому на экране при justify-выравнивании часто образуются большие “дыры”:

Поля и рамки

Определяет вид рамки элемента. Допустимы следующие значения:

• none — рамки нет (по умолчанию)
• solid — обычная сплошная граница
• double — двойная линия
• groove — “вдавленная” граница
• ridge — “выпуклая” граница
• inset — “вдавленный” элемент
• outset — “выпуклый” элемент

Определяет цвет рамки. Свойство работает, если задано свойство border-style.

Определяет ширину рамки. Свойство работает, если задано свойство border-style. Ширину можно указывать числовыми единицами (процентной записи нет) или при помощи следующих ключевых слов:

• thin — тонкая
• medium — средняя
• thick — толстая

Задает ширину поля (отступа) элемента от краев блока. Допускается числовая, процентная (от ширины блока) запись или ключевое слово auto. В случае auto предполагается, что браузер будет подыскивать оптимальное значение самостоятельно.

Задает расстояние между содержимым и рамкой элемента. Допускается числовая или процентная (от ширины элемента) запись.

Вид

Устанавливает ширину элемента. Допускаются числовые, процентные значения и auto. Свойство используется для элементов DIV и SPAN. Эти теги используют для объединения элементов в блок. Подробнее о них рассказано в следуюшем уроке.

Устанавливает высоту элемента. Допускаются числовые значения и auto. Свойство используется для элементов DIV и SPAN.

Разработайте код для вывода на экран следующего текста:

Скопируйте этот текст в свой редактор через буфер обмена Windows. Приведенная ниже таблица содержит 7 заданий. Попробуйте получить красивое визуальное представление вашего документа.