Свойства и значения

CSS-правило состоит из селектора и блока объявлений, где каждое объявление — пара «свойство: значение»; значения бывают ключевыми словами, числами с единицами, функциями, цветами и глобальными ключевыми словами.

Зачем нужно

Понимание типов значений CSS помогает читать и писать корректные стили, понимать документацию MDN и объяснять, почему одно значение подходит для свойства, а другое — нет. Это фундамент для всего остального в CSS.

Где используется

  • Любой CSS-файл — свойства и значения везде
  • Понимание допустимых значений при чтении документации
  • Корректное использование inherit, initial, unset
  • CSS Custom Properties (переменные)

Структура правила

/* селектор { свойство: значение; } */
.button {
  color: white;
  background-color: #007bff;
  padding: 8px 16px;
  border-radius: 4px;
}

Типы значений

Ключевые слова

display: block;
visibility: hidden;
cursor: pointer;
text-align: center;

Числа с единицами измерения

/* Абсолютные */
width: 200px;
border: 1pt solid;

/* Относительные */
font-size: 1.5em;    /* от font-size родителя */
padding: 1.5rem;     /* от font-size корня */
width: 50%;          /* от ширины родителя */
height: 100vh;       /* от высоты вьюпорта */
gap: 1ch;            /* от ширины символа '0' */

Функции

width: calc(100% - 32px);
background: linear-gradient(to right, #007bff, #00c6ff);
background: url('image.jpg');
font-size: clamp(1rem, 2vw, 1.5rem);
color: rgb(0, 123, 255);
color: hsl(210deg 100% 50%);

Цвета

color: red;                    /* keyword */
color: #007bff;                /* hex */
color: rgb(0, 123, 255);       /* rgb */
color: rgba(0, 123, 255, 0.5); /* с прозрачностью */
color: hsl(210 100% 50%);      /* hsl */
color: oklch(60% 0.2 240);     /* современный широкий охват */
color: transparent;            /* прозрачный */
color: currentColor;           /* текущий color родителя */

Глобальные ключевые слова

.reset() {
  all: unset;      /* сбросить все свойства */
}

.inherit-color {
  color: inherit;  /* наследовать от родителя */
  color: initial;  /* значение по умолчанию браузера */
  color: unset;    /* inherit если наследуется, иначе initial */
  color: revert;   /* к User Agent Stylesheet */
}

CSS Custom Properties (переменные)

:root {
  --color-primary: #007bff;
  --spacing-md: 16px;
}

.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
  /* Fallback: */
  color: var(--color-text, #333);
}

Частые ошибки

  1. Единица после нуля — 0px, 0em — лишние символы; просто 0 всегда корректно.
  2. Пробел в calc — calc(100%-32px) невалидно; операторы должны быть окружены пробелами: calc(100% - 32px).
  3. color: currentColor — полезный трюк, но наследуется по-другому в Shadow DOM; в компонентах лучше использовать явные переменные.

Связанные темы

Ресурсы