5.11. Задание ключевых слов css в качестве значений

Для многих свойств CSS вы можете — или должны - присваивать значение с использованием предопределенных ключевых слов CSS. Специфические ключевые слова, которые можно использовать, определяются особенностью свойства. Например, можно назначить свойству display одно из трех ключевых слов: block, inline или none. Свойству color можно назначить одно из 16 ключевых слов, которые описывают основные цвета, такие как red (красный), green (зеленый), yellow (желтый) или fuchsia (фуксия), как в следующем примере:

PARA {color: fuchsia}

Свойству border-style можно назначить одно из девяти ключевых слов: solid, dotted, dashed, double, groove, ridge, inset, outset или none. Пример:

SECTION (border-style:solid)

5.12. Установка свойства font-family

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

• font-family;

• font-size;

• font-style;

• font-weight;

• font-variant.

Все эти свойства наследуются дочерними элементами.

Свойство font-family определяет имя шрифта (гарнитуру), используемого для отображения текста элемента. Например:

BOOK {font-family: Arial}

Можно задавать любое имя шрифта. (Имена шрифтов не являются ключевыми словами CSS.) Если браузер не может найти требуемый шрифт, он заменит его на другой доступный шрифт.

Если имя шрифта содержит пробелы, заключите название в кавычки, как в следующем примере:

BOOK {font-family: "Times New Roman"}

Можно расширить возможность выбора и привести несколько вариантов допустимых к использованию шрифтов в порядке приоритета, разделяя их запятыми. Например:

BOOK {font-family: Arial, Helvetica}

Если шрифт Arial недоступен, браузер использует шрифт Helvetica. Если шрифт Helvetica также недоступен, он заменит его на какой-либо другой имеющийся шрифт.

Можно еще больше расширить возможность выбора нужного шрифта, включив в описание ключевое слово CSS - обычно в конце списка -указывающее на общий тип шрифта, который нужно использовать. Например:

BOOK {font-family: Arial, Helvetica, sans-serif}

В этом случае, если браузер не найдет шрифтов Arial или Helvetica, он использует какой-либо другой шрифт без засечек (sans-serif).

5.13. Установка свойства font-size

Свойство font-size устанавливает высоту шрифта, используемого для отображения текста элемента. Этому свойству можно присваивать четыре различных типа значений.

• Значение, задающее размер относительно размера шрифта браузера. Вы можете задать размер шрифта относительно текущего размера шрифта браузера, присвоив свойству font-size одно из значений в виде ключевых слов, представленных в таблице 7.2. Для Internet Explorer 5 значение small заставит браузер использовать текущий выбранный размер шрифта; другие значения масштабируются с увеличением или уменьшением относительно этого размера.

Таблица 5.1

Задание размера шрифта относительно размера шрифта браузера

Ключевое слово для font-size	Пример правила CSS	Описание	Образец
xx-small	TITLE {font-size: xx-small}	Наименьший размер шрифта, который может задаваться с помощью ключевого слова	Шрифт
x-small	TITLE {font-size: x-small}	Приблизительно в 1,5 раза больше, чем xx-small	Шрифт
small	TITLE {font-size: small}	Приблизительно в 1,5 раза больше, чем xx-small. Это значение предписывает IE использовать его текущий размер шрифта	Шрифт
medium	TITLE {font-size: medium}	Приблизительно в 1,5 раза больше, чем small	Шрифт
large	TITLE {font-size: large}	Приблизительно в 1,5 раза больше, чем medium	Шрифт
x-large	TITLE {font-size: x- large}	Приблизительно в 1,5 раза больше, чем medium large	Шрифт
xx-large	TITLE {font-size: xx- large}	Приблизительно в 1,5 раза больше, чем medium x-large	Шрифт

Спецификация CSS рекомендует использовать масштабный коэффициент 1,5. Однако в Internet Explorer реальное соотношение между различными значениями размера отличается в меньшей степени. Например, medium в действительности составляет примерно 1,15 от small.

• Значение, задающее размер относительно размера родительского шрифта. Можно задать размер шрифта относительно текущего размера шрифта для родительского элемента, присвоив свойству font-size одно из следующих значений с помощью ключевых слов из таблицы 5.2.

Таблица 5.2

Задание размера шрифта относительно размера родительского шрифта

Ключевое слово для font-size	Пример правила CSS	Описание	Образец
smaller	TITLE {font-size: smaller}	Размер шрифта приблизительно на 33% меньше размера шрифта для родительского элемента (или для корневого элемента, на 33% меньше размера шрифта браузера)	Шрифт
larger	TITLE {font-size: larger}	Размер шрифта приблизительно на 50% больше размера шрифта для родительского элемента (или для корневого элемента, на 50% больше размера шрифта браузера)	Шрифт

Значения 33 % и 50 %, приведенные в таблице, основаны на масштабном коэффициенте 1,5, рекомендованном спецификацией CSS. В действительности результат может оказаться иным.

• Задание размера в процентах от размера родительского шрифта. Вместо того, чтобы использовать ключевые слова smaller или larger, можно задать размер шрифта в процентах относительно текущего размера шрифта родительского элемента с большей степенью точности, задав свойству font-size значение в процентах. Например, следующее правило устанавливает размер шрифта, в полтора раза больше, чем размер шрифта родительского элемента:

TITLE {font-size: 150%}

(Если браузер использует рекомендуемый масштабный коэффициент 1,5, это правило будет эквивалентно правилу TITLE {font-size: larger}.)

Следующее правило устанавливает размер шрифта немного больше, чем установленный предыдущим правилом:

TITLE {font-size: 160%}

Заметим, что для корневого элемента проценты берутся относительно размера шрифта браузера. (Более подробная информация содержится па вставке «Задание значений в процентах».)

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

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

SECTION {line-height: 200%}

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

PARAGRAPH {font-size: 75%}

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

• Задание численных значений размера. Можно также задать размер шрифта для элемента, присвоив свойству font-size абсолютное значение. Например, следующее правило устанавливает размер шрифта в 12 пунктов:

TITLE {font-size:12pt}

А это правило устанавливает размер шрифта в два раза больше, чем размер шрифта родительского элемента:

TITLE (font-size:2 em}

(Этот пример эквивалентен записи TITLE {font-size:200%}.)

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

Абсолютное значение размера определяет точный размер с использованием стандартных единиц измерения, таких как дюймы, пункты или миллиметры. В таблице 7.4 приведен список различных единиц измерения, которыми можно пользоваться. Для каждой единицы представлена аббревиатура, которую необходимо применить для указания единиц измерения в правиле. Здесь же даны эквивалентные значения в других единицах измерения.

Таблица 5.3

Список абсолютных единиц измерения

Аббревиатура		Сантиметры		Дюймы		Миллиметры		Пики	Пункты
	cm		1		0,3937		10,0	2,3622	28,3465
	in		2,54		1		25,4	6	72
	mm		0,1		0,0393		1	0,2362	2,8346
	pc		0,4233		0,1666		4,2333	1	12
	pt		0,0352		0,0138		0,3527	0,0833	1

cm - сантиметры; in — дюймы; mm - миллиметры; рс - пики; pt - пункты

Например, следующие два правила присваивают абсолютные значения размеров:

STANZA (font-size: 12pt}

PARAGRAPH {margin-top: 25in}

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

Таблица 5.4

Список относительных единиц измерения

Единица	Размерность единицы
em	Высота текущего шрифта элемента
ex	Высота строчной буквы х текущего шрифта элемента
px	Размер пикселя на мониторе

Имеется одно исключение: когда вы присваиваете свойству font-size значение в единицах еm или ех, оно берется относительно размеров шрифта родительского элемента.

Например, следующее правило добавляет к элементу отступ сверху. Высота поля отступа будет равна высоте шрифта элемента:

BOOK (margin-top: 1em}

Следующее правило создает верхнее поле высотой 15 пикселей:

SECTION {margin-top: 15px}

А это правило устанавливает высоту шрифта элемента в три четверти от высоты шрифта его родительского элемента:

PARAGRAPH {font-size:.75em}

(Это последнее правило эквивалентно правилу PARAGRAPH {font-size: 75%}.)

Заметим, что если дочерний элемент наследует относительное значение, наследуется результат вычисления, а не само относительное значение.