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

Одним из основных назначений каскадных таблиц стилей является настройка внешнего
вида тех или иных элементов HTML документа. Работая с HTML документами вы,
наверняка, сталкивались с указанием размеров, например, <TABLE
WIDTH="95%"> или <IMG HSPACE=4 ... > Указания различных размеров
исключительно важны для (более или менее) точного позиционирования элементов на
странице.

Для начала определимся с единицами измерения. Их можно разделить на
абсолютные и относительные.

Абсолютными являются:

• in - дюйм (2.54 см)
• cm - сантиметр
• mm - миллиметр
• pt - пункт (типографская величина - 1/72 дюйма)
• pc - пика (12 пунктов или 1/6 дюйма)
• ex - высота буквы "x" в используемом шрифте (правда, в какой-то мере эту
  величину можно считать относительной - она зависит от шрифта).

К относительным величинам относятся:

• px - пиксел (рассчитывается относительно устройства отображения)
• % - процент (вычисляется относительно элемента-предка)
• em - названия не имеет, вычисляется относительно размера шрифта.

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

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

<LINK
TYPE="text/css" REL="stylesheet" MEDIA="print" HREF="print_style.css">

Теперь давайте повнимательнее присмотримся к относительным величинам. Для
указания размеров шрифтов очень удобно использовать пиксели и величину em.
Пиксели отлично работают, когда вам требуется задать определенный размер шрифта
какого-то элемента, например:

P {font-size: 12px;}

Казалось бы, а зачем
нужна "em", которая все-равно равна размеру шрифта? Но хитрость в том, что при
каскадировании элементы-потомки наследуют свойства элементов-предков. И если вам
потребуется, например, указать размер вложенного элемента относительно родителя,
то использование величины em позволит при изменении дизайна менять только размер
шрифта родителя! Например:

P {font-size: 12px;}
STRONG {font-size:
1.2em;}

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

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

Отличие em и пикселей заключается в том, что пиксели "привязываются" к
устройству вывода. 1 пиксел будет иметь один и тот же размер на данном
устройстве, в то время как размер 1em зависит от размера шрифта в
элементе-предке.

Казалось бы, что пиксел, как и, скажем, миллиметр будет по-разному смотреться
на мониторах с разным разрешением. Действительно, если вы зададите фиксированный
размер шрифта (в пикселах) и переключите монитор, скажем, в режим 640х480, то
обнаружите, что шрифты стали очень уж крупными (так как изменился размер
пиксела). Но прелесть в том, что пользователи сами настраивают для себя
оптимальное разрешение экрана в зависимости от монитора и своего зрения! То
есть, если пользователь не очень хорошо видит, то он обычно устанавливает низкое
разрешение монитора и шрифты начинают казаться крупнее. Пользователь же с
нормальным зрением, скорее всего, установит разрешение в зависимости от
диагонали своего монитора, и опять же размер шрифта "автоматически" подгонится
под его восприятие...

Таким образом, пикселы практически идеально подходят для "жесткой верстки"
документов - примерно также, как абсолютные размеры для полиграфии, а em
является очень удобным инструментом "резиновой верстки".

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