Абсолютные значения

Простейший тип значений — это абсолютные величины, например, пиксели. Они используются для определения размеров элементов, текста и других параметров.

width: 1000px;
font-size: 16px;

Абсолютные значения обладают преимуществом в том, что они представляют собой конечные, понятные и легко воспринимаемые величины.

Относительные значения

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

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

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

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

Помимо процентов есть и другие относительные единицы измерения.

width: 50%;      /* От ширины родителя */
width: 100vw;    /* От ширины вьюпорта */
height: 100vh;   /* От высоты вьюпорта */
font-size: 2em;  /* От размера шрифта родителя */
font-size: 2rem; /* От размера шрифта корневого элемента (html) */

Единицы 'vh' и 'vw' определяют зависимость от размеров области просмотра (вьюпорта), то есть видимой части окна браузера. Единица 'vh' зависит от высоты вьюпорта и часто используется для создания полноэкранных секций.

Единица 'em' определяет зависимость от размера шрифта родительского элемента. Например, если у родителя размер шрифта составляет '20px', а у вложенного элемента размер шрифта задан как '2em', то вычисленный размер шрифта будет равен '40px'.

Подобная единица 'rem' определяет зависимость от размера шрифта так называемого "корневого элемента". В случае обычной веб-страницы корневым элементом является тег 'html'.

Если у корневого элемента страницы размер шрифта составляет '16px', а у определенного тега на странице мы задаем размер шрифта как '2rem', то вычисленный размер шрифта будет равен '32px'.

Значение с ключевыми словами

Следующий тип значений — это ключевые слова. Они достаточно просты и требуют лишь постепенного запоминания.

text-transform: uppercase;
text-align: center;
display: block;
color: red;

Цветовые значения

Ещё один специфический тип значений — это цвета, которые могут быть представлены в нескольких различных формах.

color: #f00;       /* #f  0  0 */
color: #ff0000;    /* #ff 00 00 */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);

Цвета могут быть представлены в нескольких форматах, включая шестнадцатеричную запись, rgb и rgba. В шестнадцатеричной записи, например, #ff0000, каждые две шестнадцатеричные цифры кодируют красный, зеленый и синий каналы с диапазоном от 0 до ff (или от 0 до 255). Сокращенная шестнадцатеричная запись дублирует каждую цифру, например, #f00 соответствует #ff0000.

В форматах rgb и rgba цветовые каналы кодируются десятичными числами от 0 до 255, что упрощает восприятие человеком. Например, color: #ff0000 и color: rgb(255, 0, 0) обозначают один и тот же цвет. В формате rgba добавляется четвертая часть, которая задает степень непрозрачности от 0 до 1, где 0 означает полную прозрачность, а 1 — полную непрозрачность.

Форматы hsl и hsla аналогичны rgb и rgba, но более привычны для дизайнеров-полиграфистов. Кроме того, цвета можно задавать с помощью ключевых слов.

Значения-функции

Следующий тип значений — это функции. Хотя их не так много, среди них особенно полезными являются функции calc и linear-gradient.

/* Получает содержимое атрибута */
content: attr(href);
/* Любые расчёты */
width: calc(100% - 100px);
/* Линейный градиент */
background-image:
linear-gradient(45deg, yellow, green);

С помощью функции calc можно создавать очень сложное поведение. Например, вычислять размер элемента, комбинируя разные единицы измерения: "ширина 200px плюс 10em".

Функция attr используется значительно реже.

CSS директивы и @media запросы

Специальные конструкции, начинающиеся с символа @, называются директивами. Они чаще всего влияют на весь документ, но сами по себе не выполняют стилизацию. Например, директива @font-face позволяет подключать на страницу нестандартные шрифты, которые затем можно использовать в свойстве font-family. Другой пример — директива @media, которая активирует или деактивирует определенные CSS-правила в зависимости от условий, таких как размер экрана.

@font-face {
  font-family: "Open Sans";
  src:
    url("OpenSans-Regular.woff2") format("woff2"),
    url("OpenSans-Regular.woff") format("woff");
}
@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}