В 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>
Задания доступны только после авторизации.