Языки

Это перевод. Здесь могут содержаться ошибки или страница может быть устаревшей по отношению к Английской версии. Переводчик: Александр/Артлайф

Веб Таблицы Стилей CSS советы & хитрости

Смотрите также индекс всех советов.

На этой странице:

em, px, pt, cm, in

CSS предлагает несколько различных единиц для выражения длины. Некоторые имеют свою историю в печати, такие как знак (pt) и пика (pc), другие, известные из повседневного использования, такие как сантиметр (cm) и дюйм (in). И есть также "пиксель" единица, которая была изобретена специально для CSS: px. Значит ли это, что различные свойства требуют разных единиц?

Нет, единицы не имеют ничего общего со свойствами, но всьо с выводом медиа на экран или бумагу.

Нет ограничений для использования единиц. Если свойство принимает значение в px ('margin: 5px') оно также принимает значения в дюймах или сантиметрах ('margin: 1.2in; margin: 0.5cm') и наоборот.

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

Рекомендуемые Иногда используются Нерекомендованные
Таблицы стилей для вывода на экран em, px, % ex pt, cm, mm, in, pc
Таблицы стилей для печати em, cm, mm, in, pt, pc, % px, ex

Связь между абсолютными единицами выглядит следующим образом: 1in = 2.54cm = 25.4mm = 72pt = 6pc

Если у вас есть линейка вы можете проверить ее точность: здесь окно высотой 1in (2.54cm): 72pt

Так называемые абсолютные единицы (cm, mm, in, pt and pc) в CSS означают то же самое, что и везде. Длина которая выражена в любой из них будет отображаться так же точно, как и размер (в пределах точности оборудования и программного обеспечения). Они не рекомендуются для использования на экране, так как размеры экрана часто меняются. Большой экран может быть 60cm (24in), маленький, переносной экран, может быть, только 8cm. И вы не смотрите на них с одинакового расстояния.

Единицы em и ex зависят от шрифта и могут быть различным для каждого элемента в документе. em это просто размер шрифта. В элемент с шрифтом 2in, 1em означает 2in. Выражения таких размеров, как поля и обивка, в em означает, что они связаны с размером шрифта, и если пользователь имеет крупный шрифт (например, на большом экране) или маленький шрифт (например, на портативном устройстве), размеры будут отображаться пропорционально. Такие величины как 'text-indent: 1.5em' и 'margin: 1em' есть чрезвычайно распространены в CSS.

Единица ex используется редко. Ее назначение состоит в выражении размеров, которые должны быть связаны с х-высотою шрифта. Х-высота, грубо говоря, это высота маленьких букв, таких как, a, c, m, или o. Шрифты, которые имеют одинаковый размер (и, таким же образом em) могут отличаться друг от друга размерами их маленьких букв, и еще, важно, единица ex доступна, когда в некоторых изображениях совпадает х-высота.

Единица px является особой единицей CSS. Она не связана с текущим шрифтом, а также не связана с абсолютными единицами. Единица px определяется как небольшая, но видимая, и такая, что горизонтальная линия шириной 1px может быть отображена с острыми краями (без сглаживания). Что является четким, малым и видимым зависит от устройства и как оно используется: или вы держите его близко к глазам, как мобильный телефон, на расстоянии вытянутой руки, как монитор компьютера, или где-то посередине, как книга? Единица px таким образом не определена как величина постоянной длины, а как нечто, что зависит от типа устройства и его типичного использования.

Чтобы понять откуда появилась единица px (пиксель), представьте себе, CRT монитор компьютера с 1990-х годов: наименьшая точка, которую он мог отображать отмеряется 1/100-той дюйма (0.25мм) или чуть больше. Единица px получила свое название от тех экранных пикселей.

В настоящее время есть устройства, которые могли бы, в принципе отразить меньшие четкие точки (хотя вам может понадобиться лупа, чтобы увидеть их). Но документы из прошлого века, которые использовали px в CSS до сих пор выглядят по-прежнему, независимо от того, какие устройства. Принтеры, в частности, могут отображать четкие линии с гораздо меньшими деталями, чем 1px , но даже на принтерах, линия в 1px выглядит очень похожей на то, как она будет выглядеть на мониторе компьютера. Устройства меняются, но px (пиксели) всегда имеют такой же внешний вид.

CSS также определяет, что растровые изображения (например, фотографии) по стандарту, отражаются в соотношении: 1 пиксель изображения как 1px. Таким образом фотография с расширением 600 на 400 будет иметь ширину 600px и высоту 400px. Пиксели на фотографии при этом не отражают пикселей экрана (Который может быть очень маленьким), но отражают единицы px. Это позволяет выровнять изображение с другими элементами документа, до тех пор, пока вы используете единицу px в вашей таблице стилей, а не единицы pt, cm, и т. д.

Используйте em или px для размеров шрифта

CSS унаследовала из печати такие единицы pt (знак) и pc (пика). Печатники в основном использовали эти и похожие единицы по сравнению с cm (сантиметр) или in (дюйм). В CSS не обязательно использовать pt, используйте любую единицу, которую вы предпочитаете. Но краще не использовать ни pt, ни любую другую абсолютную единицу, а используйте только em и px.

Вот несколько линий разной толщины. Некоторые или все они могут четко выглядеть, по крайней мере линии 1px та 2px должны быть четкими и видимыми:

0.5pt, 1px, 1pt, 1.5px, 2px

Если первые четыре строки выглядят одинаково (или если линия 0.5pt отсутствует) вы, вероятно, смотрите на монитор компьютера, который не может отобразить точку меньше, чем 1 пиксель. Если линии расположены в порядке увеличения толщины, вы, вероятно, смотрите эту страницу на компьютере с высококачественным экраном или на бумаге. И если 1pt выглядит толще, чем 1.5px, то вы, вероятно, имеете портативный экран.

px (пиксель) особая единица CSS, которую часто хорошо использовать, особенно если стиль требует выравнивания текста на изображение, или просто потому, что всьо, что имеет размер 1px или кратно ширине 1px, гарантировано имеет четкий вид.

Но для размеров шрифта лучше использовать единицу em. Идея (1) не задавать размер шрифта BODY (ТЕЛА) элемента (в HTML), а использовать по умолчанию размер устройства, так как это размер, который читатель может легко читать; Идея (2) выражать размеры шрифта элементов в em: 'H1 {font-size: 2.5em} (размер шрифта)' чтобы сделать H1 в 2? раза больше нормального, шрифта body (тела).

Единственное место, где вы могли бы использовать pt (или cm, или in) - для установления размера шрифта в таблицах стилей для печати, если вам необходимо убедиться в точности размера печатного шрифта. Но даже там, как правило, лучше использовать размер шрифта по умолчанию.

Больше единиц CSS в будущем

Чтобы еще больше упростить, нужно сделать правила стилей, которые зависят только от размера шрифта по умолчанию, новая единица находится в стадии разработки: rem. rem (“root em”) (корневой em) это размер шрифта корневого элемента документа. В отличие от em, которая может быть разной для каждого элемента, rem является постоянной для всего документа.

Другие единицы, которые разрабатываются, позволяют указать размеры относительно окна читателя. Это - vw и vh. vw является 1/100-ой ширины окна и vh является 1/100-ой высоты окна.

Bert Bos, style activity lead
Copyright © 1994–2013 W3C®

Создано 31 Января 2011;
Последнее обновление Чтв 12 Дек 2013 06:20:47

Языки

О переводах