Установка свойства font-size
Свойство font-size устанавливает высоту шрифта, используемого для отображения текста элемента. Вы можете присваивать этому свойству четыре различных типа значений.
- Значение, задающее размер относительно размера шрифта браузера. Вы можете задать размер шрифта относительно текущего размера шрифта браузера, присвоив свойству font-size одно из значений в виде ключевых слов, представленных в таблице 7.2. Для Internet Explorer 5 значение small заставит браузер использовать текущий выбранный размер шрифта; другие значения масштабируются с увеличением или уменьшением относительно этого размера.
Таблица 7.2.
Ключевое слово для font-size: xx-small Пример правила CSS: TITLE {font-size:xx-small} Описание: Наименьший размер шрифта, который может задаваться с помощью ключевого слова Ключевое слово для font-size: x-small Пример правила CSS: TITLE {font-size:x-small} Описание: Приблизительно в 1,5 раза больше, чем xx-small Ключевое слово для font-size: Small Пример правила CSS: TITLE {font-size:small} Описание: Приблизительно в 1,5 раза больше, чем x-small . Это значение предписывает Internet Explorer 5 использовать его текущий размер шрифта Ключевое слово для font-size: Medium Пример правила CSS: TITLE {font-size:medium} Описание: Приблизительно в 1,5 раза больше, чем small Ключевое слово для font-size: large Пример правила CSS: TITLE {font-size:large} Описание: Приблизительно в 1,5 раза больше, чем medium Ключевое слово для font-size: x-large Пример правила CSS: TITLE {font-size:x-large} Описание: Приблизительно в 1,5 раза больше, чем large Ключевое слово для font-size: xx-large Пример правила CSS: TITLE {font-size:xx-large} Описание: Приблизительно в 1,5 раза больше, чем x-large Примечание. Спецификация CSS рекомендует использовать масштабный коэффициент 1,5. Однако в Internet Explorer 5 реальное соотношение между различными значениями размера отличается в меньшей степени. Например, medium в действительности составляет примерно 1,15 от small .
- Значение, задающее размер относительно размера родительского шрифта. Вы можете задать размер шрифта относительно текущего размера шрифта для родительского элемента, присвоив свойству font-size одно из следующих значений с помощью ключевых слов из таблицы 7.3.
<Таблица 7.3.
Ключевое слово для font-size: smaller Пример правила CSS: TITLE {font-size:smaller} Описание: Размер шрифта, приблизительно на 33 % меньше размера шрифта для родительского элемента (или, для корневого элемента, на 33 % меньше размера шрифта браузера) Ключевое слово для font-size: larger Пример правила CSS: 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%}
Заметим, что для корневого элемента проценты берутся относительно размера шрифта браузера. (Более подробная информация содержится на вставке "Задание значений в процентах".)
- Задание численных значений размера. Вы также можете задать размер шрифта для элемента, присвоив свойству font-size абсолютное значение. (См. вставку "Задание значений в размерных единицах" далее в этой лекции.) Например, следующее правило устанавливает размер шрифта в 12 пунктов: TITLE {font-size:12 pt}
А это правило устанавливает размер шрифта в два раза больше, чем размер шрифта родительского элемента:
TITLE {font-size:2 em}
(Этот пример эквивалентен записи TITLE {font-size:200%} .)
Задание значений в процентах
Вы можете задавать для определенных свойств значения в процентах. Это необходимо, если вы имеете дело с относительными размерами, а не с действительными абсолютными размерами.
Значение в процентах задает размер для некоторого свойства как процент от какого-либо значения. Какое это будет значение, зависит от того свойства, для которого выполняется назначение. Обычно это размер шрифта самого элемента. Например, следующее назначение устанавливает высоту строки в два раза большей, чем высота текущего шрифта элемента, в результате получаются строки с двойным интервалом:
SECTION {line-height:200%}
Для свойства font-size , однако, значение в процентах берется относительно текущего размера шрифта родительского элемента. Например, следующее правило устанавливает для элемента высоту шрифта, составляющую три четверти от высоты текущего шрифта его родительского элемента:
PARAGRAPH {font-size:75%}
Заметим, что если элемент наследует значение свойства в процентах. Наследуется вычисленный результат, но не сама величина в процентах. (Другими словами, если ряд нисходящих элементов наследует значение в процентах, то размер для каждого последующего уровня будет уменьшаться или увеличиваться.)
Задание значений в размерных единицах
Для многих свойств CSS могут, или должны, быть присвоены значения, выраженные в единицах размеров. Такие значения задают размеры шрифтов, положения фоновых изображений, расстояния между символами, отступы, междустрочные интервалы, величины полей и рамок, высоту и ширину элементов, и другие свойства. Вы можете присвоить абсолютное или относительное численное значение любому свойству, принимающему численное значение.
Абсолютное значение размера определяет точный размер с использованием стандартных единиц измерения, таких как дюймы, пункты или миллиметры. В таблице 7.4 приведен список различных единиц измерения, которыми вы можете пользоваться. Для каждой единицы представлена аббревиатура, которую вы должны применить для указания единиц измерения в правиле. Здесь же даны эквивалентные значения в других единицах измерения.
Таблица 7.4.
Например, следующие два правила присваивают абсолютные значения размеров:АббревиатураСантиметрыДюймыМиллиметрыПикиПункты Cm 1 0,3937 10,0 2,3622 28,3465 In 2,54 1 25,4 6 72 mm 0,1 0,03937 1 0,23622 2,83465 pc 0,42333 0,16667 4,23333 1 12 pt 0,03528 0,01389 0,35278 0,08333 1
STANZA {font-size:12pt} PARAGRAPH {margin-top:.25in}
Относительное значение задает размер относительно высоты текущего шрифта элемента, или относительно размера пикселя на экране монитора, который используется для отображения документа. (Пиксель есть элемент изображения – одна из отдельных точек, составляющих изображение на мониторе компьютера или экране телевизора.) В таблице 7.5 представлены различные виды относительных единиц размера, которые вы можете использовать.
Таблица 7.5.
Имеется одно исключение: когда вы присваиваете свойству font-size значение в единицах em или ex , оно берется относительно размеров шрифта родительского элемента.ЕдиницаРазмерность единицы em Высота текущего шрифта элемента ex Высота строчной буквы x текущего шрифта элемента px Размер пикселя на мониторе
Например, следующее правило добавляет к элементу отступ сверху. Высота поля отступа будет равна высоте шрифта элемента:
BOOK {margin-top:1em}
Следующее правило создает верхнее поле высотой 15 пикселей:
SECTION {margin-top:15px}
А это правило устанавливает высоту шрифта элемента в три четверти от высоты шрифта его родительского элемента:
PARAGRAPH {font-size:.75em}
(Это последнее правило эквивалентно правилу PARAGRAPH {font-size:75%} .)
Заметим, что если дочерний элемент наследует относительное значение, наследуется результат вычисления, а не само относительное значение.
