автордың кітабынан сөз тіркестері  CSS для профи

Кит Грант

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

Создадим панель с текстом, показанную на рис. 2.7. За основу возьмем шрифт размером 14 пикселов и будем использовать относительные измерения.

Предположим, вы хотите установить размер шрифта, по умолчанию равный 14 пикселам. Вместо того чтобы задать значение по умолчанию 10 пикселов, а затем переопределять его по всей странице, присвойте это значение корневому элементу. Желаемое значение разделите на наследуемое значение — в данном случае установленное в браузере по умолчанию — 14 / 16, что равняется 0,875.

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

Листинг 2.12. Установка истинного размера шрифта по умолчанию

Здесь берется установленный по умолчанию размер шрифта браузера 16 пикселов и уменьшается до 10 пикселов. Эту практику упрощает математика: если дизайнер говорит, что нужно сделать шрифт размером 14 пикселов, вы в уме делите это число на 10 и задаете 1,4 rem, все еще используя относительные единицы.

Листинг 2.11. Антишаблон: глобальный сброс значения свойства font-size до 10 пикселов

html {

font-size: .625em;

}

Я не советую так дела

Корневой узел — это предок всех остальных элементов документа. У него есть особый селектор псевдокласса (:root), который используется для его назначения. Этот прием эквивалентен задействованию селектора типа html со специфичностью класса, а не тега.

Rem — это сокращение от root em (корневой em). Единицы rem относительны по отношению не к текущему элементу, а к корневому. Неважно, где вы примените их в документе, 1,2 rem будут иметь одинаковое вычисленное значение — 1,2 от размера шрифта корневого элемента. Листинг 2.10 устанавливает корневой размер шрифта и затем применяет единицы rem, чтобы определить размер шрифта относящихся к нему неупорядоченных списков.

Листинг 2.10. Указание размера шрифта с помощью единиц rem

Когда браузер анализирует HTML-документ, он создает в памяти представление всех элементов на странице. Это представление называется DOM (Document Object Model — объектная модель документа). Оно имеет древовидную структуру, где каждый элемент представлен узлом. Элемент html — это верхний (или корневой) узел. Далее идут дочерние узлы head и body, затем их

Листинг 2.7. Применение значений в единицах em к списку

body {

font-size: 16px;

}

ul {

font-size: 0.8em;

}

В данном примере заданное значение отступа — 1,2 em. Оно умножается на 19,2 пиксела (текущий размер шрифта элемента), и получается вычисленное значение 23,04 пиксела. Хотя свойства font-size и padding имеют одинаковое заданное значение, их вычисленные значения различны.

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

Если вы знаете, какой размер шрифта в пикселах требуется, но хотите указать объявление в em, вот простая формула: разделите желаемый размер в пикселах на родительский (наследуемый) размер в пикселах. Например, если нужно получить размер 10 пикселов, а ваш элемент наследует размер 12 пикселов, формула будет выглядеть так: 16 / 12 = 1,3333 em. В данной главе похожие вычисления мы выполним несколько раз.