Главная страница   /   3.7. Единицы измерения в CSS (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

3.7. Единицы измерения в 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 внутреннего элемента.