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

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

Таблица 3-8: Некоторые свойства CSS и их значения

Свойство	h1	h2	p
`color`	`black`	`black`	`black`
`background-color`	`transparent`	`transparent`	`transparent`
`font-size`	`2em`	`1.5em`	`16px`
`border`	`none`	`none`	`none`

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

Работа с цветом в CSS

В примерах этой главы я использовал цвета в различных свойствах CSS, включая свойства color и background-color. Самым простым путем назначения цвета является использование названия цвета или использование десятеричного или шестнадцатеричного значения для каждого из красного, зеленого и синего компонентов. Десятеричные значения разделяются запятыми, а перед шестнадцатеричными ставится решетка (#), например #ffffff, что обозначает белый цвет. Некоторые названия цветов и их десятеричные и шестнадцатеричные эквиваленты можно увидеть в таблице 3-9.

Таблица 3-9: Некоторые цвета в CSS

Название цвета	Шестнадцатеричное значение	Десятиричное значение
`black` (черный)	`#000000`	`0,0,0`
`silver` (серебряный)	`#C0C0C0`	`192,192,192`
`grey` (серый)	`#808080`	`128,128,128`
`white` (белый)	`#FFFFFF`	`255,255,255`
`maroon` (бардовый)	`#800000`	`128,0,0`
`red` (красный)	`#FF0000`	`255,0,0`
`purple` (фиолетовый)	`#800080`	`128,0,128`
`fushia` (розовый)	`#FF00FF`	`255,0,255`
`green` (зеленый)	`#008000`	`0,128,0`
`lime` (салатовый)	`#00FF00`	`0,255,0`
`olive` (оливковый)	`#808000`	`128,128,0`
`yellow` (желтый)	`#FFFF00`	`255,255,0`
`navy` (темно-синий)	`#000080`	`0,0,128`
`blue` (синий)	`#0000FF`	`0,0,255`
`teal` (бирюзовый)	`#008080`	`0,128,128`
`aqua` (аква)	`#00FFFF`	`0,255,255`

Эти цвета называют базовыми цветами. В СSS также есть дополнительные цвета. Их слишком много, чтобы описывать здесь, но вы можете найти полный список на www.w3.org/TR/css3-color. Возможны различные вариации в дополнении к базовым цветам. Например, в таблице 3-10 представлен дополнительный набор оттенков серого, которые можно использовать.

Таблица 3-10: Некоторые цвета в CSS

Название цвета	Шестнадцатеричное значение	Десятиричное значение
`darkgrey` (темно-серый)	`#a9a9a9`	`169,169,169`
`darkslategrey` (серо-зеленый)	`#2f4f4f`	`47,79,79`
`dimgrey` (матово-серый)	`#696969`	`105,105,105`
`grey` (серый)	`#808080`	`128,128,128`
`lightgrey` (светло-серый)	`#d3d3d3`	`211,211,211`
`lightslategrey` (синевато-серый)	`#778899`	`119,136,153`
`slategrey` (сине-серый)	`#708090`	`112,128,144`

Назначение более комплексных цветов

Назначать цвета можно не только при помощи указания названия цвета или использования десяти-(шестнадцатеричных) значений. Некоторые функции позволяют также выбрать цвет. В таблице 3-11 представлены эти функции.

Таблица 3-11: Функции для назначения цвета в CSS

Функция	Описание	Пример
`rgb(r, g, b)`	Определяет цвет, используя модель RGB	`color: rgb(112, 128, 144)`
`rgba(r, g, b, a)`	Определяет цвет, используя модель RGB, дополнительно тут используется альфа-канал (или альфа-значение) для определения прозрачности (значение 0 обозначает полную прозрачность, а значение 1 – наоборот)	`color: rgba(112, 128, 144, 0.4)`
`hsl(h, s, l)`	Определяет цвет, используя модель HSL (аббревиатура от слов "цветовой тон, насыщенность, светлость")	`color: hsl(120, 100%, 22%)`
`hsla(h, s, l, a)`	Принцип работы как и у HSL, и дополняется альфа-каналом для определения прозрачности	`color: hsla(120, 100%, 22%, 0.4)`

Можно использовать функцию rgba для назначения цвета с прозрачностью, но если вы хотите представить полностью прозрачный элемент, вы можете использовать цветовое значение transparent.

Единицы измерения длины в CSS

Многие свойства CSS требуют определения длины (length), например, свойство font-size, которое используется для обозначения размера шрифта при представлении содержания элемента. Когда вы определяете длину, вы связываете число единиц измерения и идентификатор единицы измерения, не используя пробелы и другие символы между ними. Например, значение 20pt свойства font-size обозначает 20 единиц измерения, представленных идентификатором pt (т.е. пунктов). CSS определяет два вида единиц измерения длины: это абсолютные единицы измерения длины и относительные (по отношению к другому свойству). Об этом я расскажу в следующих разделах.

Работа с абсолютными величинами

Абсолютные единицы измерения длины – это реальные единицы измерения. CSS поддерживает пять типов таких единиц измерения, они описаны в таблице 3-12.

Таблица 3-12: Абсолютные единицы измерения в CSS

Идентификатор единицы измерения	Описание
`in`	дюймы
`cm`	сантиметры
`mm`	миллиметры
`pt`	пункты (1 пункт равен 1/72 дюйма)
`pc`	пики (1 пика равна 12 пунктам)

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

Совет

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

Работа с относительными величинами

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

Таблица 3-13: Относительные единицы измерения в CSS

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

Если вы используете относительные величины, вы эффективно определите множество других единиц измерения. В листинге 3-14 показан пример, где назначается свойство, относительное свойству font-size.

Листинг 3-14: Использование относительных величин


<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		p.details
		{
			font-size: 15pt;
			height: 3em;
			border: thin solid black;
		}
	</style>
</head>
<body>
	<h1 lang="en">
		New Delivery Service</h1>
	<h2 lang="en">
		Color and Beauty to Your Door</h2>
	<p class="details information">
		We are pleased to announce that we are starting a home delivery service for your
		flower needs. We will deliver within a 20 mile radius of the store for free and
		$1/mile thereafter.</p>
</body>
</html>

В этом примере я определил значение для свойства height (которое задает высоту элементу) в 3em. Это обозначает, что элементы p должны быть представлены так, что высота элемента на экране в три раза превышает размер шрифта (font-size). На рисунке 3-13 видно, как браузер отображает эти элементы. Я добавил рамку (используя свойство border), чтобы лучше была видна высота элемента.

Рисунок 3-13: Результат использования относительной величины

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

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

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

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

Совет

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

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

Листинг 3-15: Использование пикселей в стиле


<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		p.details
		{
			font-size: 20px;
			width: 400px;
			border: thin solid black;
		}
	</style>
</head>
<body>
	<h1 lang="en">
		New Delivery Service</h1>
	<h2 lang="en">
		Color and Beauty to Your Door</h2>
	<p class="details information">
		We are pleased to announce that we are starting a home delivery service for your
		flower needs. We will deliver within a 20 mile radius of the store for free and
		$1/mile thereafter.</p>
</body>
</html>

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

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

Совет

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

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

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

Листинг 3-16: Использование процентного соотношения при выражении значения свойства


<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<style>
		p.details
		{
			font-size: 200%;
			width: 50%;
			border: thin solid black;
		}
	</style>
</head>
<body>
	<h1 lang="en">
		New Delivery Service</h1>
	<h2 lang="en">
		Color and Beauty to Your Door</h2>
	<p class="details information">
		We are pleased to announce that we are starting a home delivery service for your
		flower needs. We will deliver within a 20 mile radius of the store for free and
		$1/mile thereafter.</p>
</body>
</html>

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

3.8. Сокращенные свойства и уникальные значения

или RSS канал: