Главная страница   /   4.4. Меры длины в CSS (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

4.4. Меры длины в CSS

Для многих свойства CSS требуется указание длины. В нескольких примерах мы работаем со свойством width, которое используется для определения ширины элемента, и со свойством font-size, которое используется для указания размера шрифта, используемого для отображения содержимого элемента. В листинге 4-19 показан стиль, который использует оба этих свойства.

Листинг 4-19: Указание единиц измерения для свойств
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<style type="text/css">
		p {
			background: grey;
			color: white;
			width: 5cm;
			font-size: 20pt;
		}
	</style>
</head>
<body>
	<a href="http://apress.com">Visit the Apress website</a>
	<p>I like <span>apples</span> and oranges.</p>
	<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>

Когда вы указываете длину, вы объединяете число единиц и идентификатор единиц без пробелов и других символов между ними. В листинге я указал значение свойства width равное 5cm, что обозначает 5 единиц, представленных идентификатором cm (сантиметров). Таким же образом я указал значение свойства font-size в 20pt, что обозначает 20 единиц, представленных идентификатором pt (пунктов, о которых мы поговорим в следующих разделах). CSS определяет два вида единиц длины: абсолютные и относительные (по отношению к другому свойству). Я объясню их в следующих разделах.

Работа с абсолютными единицами измерения длины

В предыдущем листинге я использовал величины cm и pt, которые являются примером абсолютных единиц измерения (абсолютных величин). Эти величины являются реальными средствами измерения. CSS поддерживает пять типов абсолютных величин, которые описаны в таблице 4-6.

Таблица 4-6: Абсолютные единицы измерения в CSS
Идентификатор единицы измерения Описание
in дюймы
cm сантиметры
mm миллиметры
pt пункты (1 пункт равен 1/72 дюйма)
pc пики (1 пика равна 12 пунктам)

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

Совет

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

Работа с относительными единицами измерения длины

Относительные единицы измерения длины более сложно определить и реализовать, нежели абсолютные, и они требуют жесткого и краткого языка, чтобы их смысл был определен однозначно. Относительные единицы измеряются в рамках других единиц (в соотношении к другим единицам). К сожалению, язык спецификации CSS не является достаточно точным (проблема, которая преследует CSS многие годы). Это обозначает, что CSS определяет широкий спектр интересных и полезных относительных единиц измерения, но вы не можете использовать некоторые из них, потому что они не имеют широкой и последовательной поддержки браузеров. В таблице 4-7 показаны относительные единицы измерения, определенные в CSS, которые работают в основных браузерах.

Таблица 4-7: Относительные единицы измерения в CSS
Идентификатор единицы измерения Описание
em Относительно размера шрифта элемента
ex Относительно x-высоты шрифта элемента
rem Относительно размера шрифта корневого элемента
px Число CSS пикселей (предположительно на дисплее с 96dpi)
% Процент от значения другого свойства

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

Работа с относительными единицами измерения размера шрифта

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

Листинг 4-20: Использование относительных единиц измерения
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<style type="text/css">
		p {
			background: grey;
			color: white;
			font-size: 15pt;
			height: 2em;
		}
	</style>
</head>
<body>
	<a href="http://apress.com">Visit the Apress website</a>
	<p>I like <span>apples</span> and oranges.</p>
	<p style="font-size: 12pt">I also like mangos and cherries.</p>
	<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>

В этом примере я указал значение для свойства height равное 2em, что обозначает, что р элементы должны обрабатываться таким образом, что высота элемента на экране в два раза больше размера шрифта. Эта величина рассчитывается для каждого отображаемого элемента. Я определил размер шрифта (font-size) по умолчанию в 15pt в элементе style и указал внутреннее значение в 12pt для второго элемента р в документе. Вы можете увидеть, как браузер отображает эти элементы, на рисунке 4-15.

Рисунок 4-15: Результат использования относительных единиц измерения

Вы можете использовать относительную единицу, чтобы выразить величину другой относительной единицы. В листинге 4-21 показан пример, где свойство height выражается в единицах em. Эти единицы em являются производными от значения свойства font-size, которое я выразил, используя единицы rem.

Листинг 4-21: Использование единиц измерения, которые являются производными от других относительных единиц измерения
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<style type="text/css">
		html {
			font-size: 0.2in;
		}

		p {
			background: grey;
			color: white;
			font-size: 2rem;
			height: 2em;
		}
	</style>
</head>
<body style="font-size: 14pt">
	<a href="http://apress.com">Visit the Apress website</a>
	<p>I like <span>apples</span> and oranges.</p>
	<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>

Единица измерения rem относительна к размеру шрифта элемента html, также известного как корневой элемент. В этом примере я назначил абсолютный размер шрифта 0,2 дюйма, используя стиль (хотя я также мог бы создать внутренний стиль, определив атрибут style для элемента html напрямую). Значение для font-size в другом стиле выражается в 2rem, что обозначает, что размер шрифта в каждом элементе, для которого применяется это значение, будет в два раза больше, чем размер шрифта корневого элемента, то есть 0,4 дюйма. Свойство height в том же стиле определяется как 2em, то есть снова в два раза больше. Это обозначает, что браузер будет отображать p элемент, используя шрифт высотой в 0,4 дюйма, а в целом весь элемент будет 0,8 дюйма высотой. Вы можете увидеть, как браузер обрабатывает эти стили, на рисунке 4-16.

Рисунок 4-16: Определение относительных единиц измерения в рамках других относительных единиц

Третья связанная со шрифтами относительная единица – это ex, которая является текущей х-высотой шрифта. Это расстояние от базовой линии (основания) шрифта до средней линии, но часто за эталон берут высоту символа х (отсюда и название). Как правило, 1ex это приблизительно 0.5em.

Работа с пикселями

Пиксели в CSS – это, возможно, не то, чего вы ожидали. Обычное значение термина пиксель относится к самой маленькой видимой величине на дисплее: одному элементу (или точке) изображения. CSS же определяет пиксель следующим образом:

Эталонный пиксель – это визуальное отображение одного пикселя на устройстве с плотностью пикселей 96dpi на дистанции вытянутой руки от читателя.

Это пример еще одного смутного объяснения, "бича" CSS. Я не хочу быть пафосным, но спецификации, которые зависят от длины руки пользователя, для меня сомнительны. К счастью, основные браузеры игнорируют разницу между пикселями, как определено в CSS, и пикселями на дисплее и рассматривают 1 пиксель как 1/96 дюйма. (Это стандартная плотность пикселей для Windows; браузеры для других платформ с отличной от этой плотностью пикселей, используют пересчет из одних единиц в другие, поэтому там пиксель тоже приблизительно равен 1/96 дюйма).

Совет

Хотя от этого и не будет слишком много пользы, но вы можете прочесть о CSS пикселях на www.w3.org/TR/CSS21/syndata.html#length-units.

Результат этого таков, что, хоть и предполагается, что CSS пиксели будут обрабатываться как относительные единицы измерения, браузеры работают с ними как с абсолютными величинами. В листинге 4-22 показано использование пикселей в стиле CSS.

Листинг 4-22: Использование пикселей в стиле
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<style type="text/css">
		p {
			background: grey;
			color: white;
			font-size: 20px;
			width: 200px;
		}
	</style>
</head>
<body>
	<a href="http://apress.com">Visit the Apress website</a>
	<p>I like <span>apples</span> and oranges.</p>
	<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>

В этом примере я выразил оба свойства, font-size и width, в пикселях (свойство width является дополнением к свойству height и устанавливает ширину элемента). На рисунке 4-17 можно увидеть, как браузер применил эти стили.

Рисунок 4-17: Определение величин в пикселях

Совет

Хотя я часто использую пиксели как единицы измерения в CSS, все же я остаюсь человеком привычки. Я считаю, что единицы измерения em более гибкие. Это потому, что мне приходится менять размер шрифта только тогда, когда я вношу изменение, а остальная часть стиля работает без проблем. Важно запомнить, что хотя пиксели CSS были задуманы как относительные величины, на практике они абсолютные величины, и как следствие, они могут быт негибкими.

Работа с процентами

Можно выразить единицу измерения в процентном соотношении к другой величине (к значению другого свойства). Это можно сделать, используя величину, выраженную в % (процентах), как показано в листинге 4-23.

Листинг 4-23: Использование процентного соотношения при выражении значения свойства
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<style type="text/css">
		p {
			background: grey;
			color: white;
			font-size: 200%;
			width: 50%;
		}
	</style>
</head>
<body>
	<a href="http://apress.com">Visit the Apress website</a>
	<p>I like <span>apples</span> and oranges.</p>
	<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>

Есть две сложности в работе с процентными величинами. Первое заключается в том, что не все свойства могут быть выражены таким образом. А второе заключается в том, что для каждого свойства, которое может быть выражено в процентном соотношении, определяется по-своему, от какого другого свойства будет исчисляться это процентное соотношение. Например, свойство font-size использует унаследованное значение font-size родительского элемента, а свойство width использует значение width содержащего блока.

Это не так запутано, как может показаться. Я объясню, что такое содержащий блок в главе 16. (Это важная и повторяющаяся концепция). Я также расскажу вам, какие свойства CSS поддерживают процентные единицы измерения и как рассчитывается процент каждого из свойства CSS, о которых пойдет речь, начиная с главы 19.

Единицы измерения CSS без широкой браузерной поддержки

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

Таблица 4-8: Относительные единицы измерения в CSS без браузерной поддержки
Идентификатор единицы измерения Описание
gd Относительна к сетке; не имеет широкой поддержки, поскольку зависит от ряда свойства, которые не определены в спецификации CSS.
vw Относительна к ширине окна; для документов каждый vw является 1/100й ширины области дисплея (как правило, окно браузера).
vh Относительна к высоте окна; для документов каждый vw является 1/100й высоты области дисплея
vm Каждая единица измерения vm является 1/100й кратчайшей оси просмотра (высоты или ширины, в зависимости от того, какая меньше).
ch Относительна к средней ширине символов, отображенных с помощью текущего шрифта. Она плохо определена в спецификациях CSS и реализуется не последовательно.

Единицы vw, vh и wm имеют потенциал быть полезными в самых разных ситуациях, но в настоящее время они реализуются только в Internet Explorer. И даже тут мое неоднократное тестирование показало, что их реализация не совсем соответствует спецификации CSS.

Вычисление CSS единиц

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

Листинг 4-24: Расчет единиц измерения
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<style type="text/css">
		p {
			background: grey;
			color: white;
			font-size: 20pt;
			width: calc(80% - 20px);
		}
	</style>
</head>
<body>
	<a href="http://apress.com">Visit the Apress website</a>
	<p>I like <span>apples</span> and oranges.</p>
	<a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>

Вы можете использовать ключевое слово calc и скобки, в которых содержится вычисление. Вы можете смешивать разные единицы измерения и выполнять основные арифметические операции. Чтобы вы не слишком радовались, я вам скажу, что во время написания этой книги только Internet Explorer реализовал поддержку функции calc(). Я вообще избегаю описания в этой книге таких функциональных возможностей, которые широко не поддерживается, но я надеюсь, это функционал будет успешно развиваться и получит широкое применение.