proview.ru → Конструирование сайтов → CSS → Единицы измерения

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

Одним из основных назначений каскадных таблиц стилей является настройка внешнего вида тех или иных элементов 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, можно использовать и проценты, но делают это достаточно редко. Чаще всего в процентах указывают размеры блоков, отступы, высоту строки и т.п.



Источник: www.rupixel.com

Популярное