Девятнадцатый урок. Единицы измерения

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

Пиксели обозначаются как px:

width: 100px;

Это самые простые для понимания единицы, которые совпадают с пикселами экрана при его разрешении 96dpi. Когда мы указывали meta-строчку с viewport, то она заставляет браузер пересчитывать реальные размеры для мониторов с высоким dpi.

Из других абсолютных единиц возможно вы будете встречаться с пунктами pt, который определяется как 1/72 дюйма. Пункты пришли из типографии и сейчас практически не используются. Но на старых сайтах вы можете их ещё встретить.

Аналогично применяются:

Не знаю есть ли вообще в них потребность. :-)

Основная верстка происходит в относительных единицах. И тут есть нюансы.

Единицы em соответствуют процентному указанию размера шрифта. Например font-size: 1em; идентичен font-size: 100%;. То есть 1em = 100%. За точку отсчета берется размер родительского элемента.

<div style="font-size: 20px;">
	<h1 style="font-size: 2em;">Заголовок</h1>
</div>

В данном примере размер заголовка будет 40px. Если у родительского элемента не указан явный размер, то берется размер его родителя и так до корневого элемента, обычно это BODY. Сложности возникают, когда размер указывается у нескольких вложенных блоков:

<div style="font-size: 10px;">
	<div style="font-size: 1.5em;">
		<h1 style="font-size: 2em;">Заголовок</h1>
	</div>
</div>

У второго блока размер будет 15px (10px x 1.5), следовательно у H1 размер будет 30px (15px x 2). То есть при указании em-размера следует учитывать размеры всех контейнеров, что довольно неудобно.

Единицы rem такие же как и em, но всегда расчитываются от корневого элемента страницы (BODY). Если у BODY задан размер шрифта 16px, то font-size: 2rem; всегда будет соответствовать 32px не зависимо от своего расположения.

<body style="font-size: 16px;">
	<div style="font-size: 10px;">
		<div style="font-size: 1.5em;">
			<h1 style="font-size: 2rem;">Заголовок — 32px</h1>
		</div>
	</div>
</body>
Самым верхним корневым элементом принято считать BODY, хотя бывают css-фреймворки, в которых корень — это тэг HTML, что приводит к различным сложностям. Всегда используйте BODY и не создавайте проблем на ровном месте. :-)

Существует группа относительных единиц, которые привязаны к области просмотра браузера:

Они для достаточно специфичных задач, потому редко используются.

У некоторых css-свойств можно указывать не относительные или абсолютные значения, а т.н. множитель. Он указывается без каких-либо единиц обычным числом.

line-height: 1.5;

Сами числа нужно задавать с указанием единиц измерения. Если это число 0, то единицы можно не указывать (кроме указания времени). Если это десятичная дробь, то она указывается через точку. Если у числа ведущий ноль, то его можно опустить.

font-size: .5em;

Цвет

Как правило цвет задается в шестнадцатиричной системе в виде #RRGGBB, где RR — значение красного, GG - зеленого и BB — синего. Если числа попарно равны, то запись можно сократить до #RGB, например #FFAA44 это тоже самое, что и #FA4.

Все браузеры поддерживают некоторые цвета по названиям. Например color: red; это тоже самое, что и color: #f00;. Для верстальщика полезно выучить десяток таких цветов, чтобы использовать при верстке «заглушек» или быстрой отладки кода (или хотя бы 16 основных цветов). Название цвета проще указать текстом, чем помнить его #-код.

В своей работе вы скорее всего не будете пользоваться стандартной палитрой, а цвет будете подбирать индивидуально, например пипеткой с экрана. Все графические программы (например фотошоп) показывают значения в шестнадцатиричной системе, хотя доступна и десятичная, где 0 — это минимум, а 255 - максимум.

Такой цвет задается через функцию rgb().

color: rgb(128, 200, 80);

Такая запись непривычна, поэтому редко используется. Иногда вместо чисел указываются проценты от максимального 255:

color: rgb(80%, 30%, 5%);

Более востребовано задание цвета через функцию rgba(), которая работает как и rgb(), но имеет ещё один параметр — прозрачность (т.н. альфа-канал). Прозрачность задается числом от 0 до 1, где 0 - полная прозрачность, а 1 — полная непрозрачность. Чаще всего такая функция используется для задания полупрозрачного фона.

<div style="background: red; padding: 20px;">
	<div style="background: rgba(0, 0, 0, .3); padding: 10px;"></div>
	<div style="background: rgba(0, 0, 0, .4); padding: 10px;"></div>
	<div style="background: rgba(0, 0, 0, .5); padding: 10px;"></div>
	<div style="background: rgba(0, 0, 0, .6); padding: 10px;"></div>
</div>

Функции hsl() и hsla() позволяют задавать цвет в формате HSL: Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок представляет собой цветовой круг-радугу от 0 до 359 градусов, где 0 градусов — красный цвет. Насыщенность и светлось указывается от 0 до 100%. Данная модель (точнее HSV/HSB) используется дизайнерами в графических программах. С её помощью довольно просто создавать различные цветовые схемы, где достаточно лишь знать градус оттенка.

<div style="background: hsl(230, 50%, 40%); padding: 10px;"></div>
<div style="background: hsl(230, 50%, 50%); padding: 10px;"></div>
<div style="background: hsl(230, 50%, 60%); padding: 10px;"></div>
<div style="background: hsl(230, 50%, 70%); padding: 10px;"></div>
<div style="background: hsl(230, 50%, 80%); padding: 10px;"></div>

Задания

Задания доступны только после авторизации.