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

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

Абсолютные единицы:

1. Миллиметр - mm, сантиметр - cm и дюйм – in. Само собой разумеется, что это абсолютные единицы измерения. Одинcm= 0.39370in, 1in= 2.54cmи 10mm= 1cm. Компьютерные дисплеи плохо вычисляют данные единицы измерения, таким образом у этих величин ограниченное применение и обычно их используют при указании размера для вывода страниц на печать.

2. Пиксели – px. Пиксель это маленькая точка на экране.Пиксели определяют размер элемента. Использование пикселей дает вам точный контроль над размером элемента, позволяя вам точно вычислить его ширину и высоту, это будет полезным для точной разметки дизайна страницы. Однако, есть несколько минусов использования пикселей, вы должны быть осведомлены о них:

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

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

3. Точки - pt и пики – pc.Эти единицы измерения чаще всего используются для указания именно размера шрифта, например, в обычном блокноте, мы часто указываем размер текста равный 14, это значение как раз и есть единицы измерения pt.

Точка (1pt) равна 1/72 дюйма, в то время как пика (1pc) равна 1/6 дюйма (1pc = 12pt). Документы, предназначенные для печати будут иметь возможность сообщить устройству именно тот размер шрифта, который следует использовать при печати. Цифровым дисплеям, однако, придется самим догадываться, как конвертировать эти единицы в пиксели, и нет никаких реальных универсальных способов узнать, как это будет сделано. Поскольку точки (pt) были использованы с первых дней Интернета, большинство браузеров автоматически могут установить соотношения между пикселями и точками, но это по сути неправильно. Помните, что небольшие дисплеи сегодня могут иметь высокое разрешение, так что определить то, насколько большой «дюйм на экране» будет практически невозможно на устройствах. Для указания размера элементов на веб-страницах следует избегать использования этих единиц.

Относительные единицы:

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

2. Вычисляемая x-высота – ex.Единица измерения ex используется достаточно редко. В качестве основы для размера 1ex используется высота символа "x" в нижнем регистре указанного шрифта. Большинство браузеров не поддерживает эту единицу измерения должным образом, и она не рекомендуется для использования в документах, предназначенных для браузеров.

3. Вычисляемая единица – em.Em является относительной единицей измерения. Один em равен 16px. Если em используется для определенного элемента, то за 1em принимается размер шрифта его родителя.

Примеры использованияедениц измерения.

Пример.Использование относительных единиц

<style type="text/css">

.em, .ex, .px, .percent {

font-family: Verdana, Arial, sans-serif;

}

.em { font-size: 2em; }

.ex { font-size: 2ex; }

.px { font-size: 30px; }

.percent { font-size: 200%; }

</style>

</head>

<body>

<p class="em">Размер 2 em</p>

<p class="ex">Размер 2 ex</p>

<p class="px">Размер 30 пикселов</p>

<p class="percent">Размер 200%</p>

</body>

Пример. Использование абсолютных единиц

<style type="text/css">

.in, .mm, .pt {

font-family: Verdana, Arial, sans-serif;

}

.in { font-size: 0.5in; }

.mm { font-size: 8mm; }

.pt { font-size: 24pt; }

</style>

</head>

<body>

<p class="in">Размер 0.5 дюйма</p>

<p class="mm">Размер 8 миллиметров</p>

<p class="pt">Размер 24 пункта</p>

</body>