Cправочник по CSS для бабули

Термины

Вот ключевые термины, которые важно знать при изучении CSS:

  • Селектор Часть CSS, которая указывает, к каким элементам применять стили.
  • Свойство Определяет, какой аспект элемента нужно изменить (например, color, font-size).
  • Значение Указывает, каким должно быть значение свойства (например, red, 16px).
  • Правило Одна пара «селектор — блок свойств», записанная в фигурных скобках.
  • Каскад Принцип приоритета: какой стиль будет применён, если их несколько.
  • Наследование Некоторые свойства CSS передаются от родителя к потомку автоматически.
  • Специфичность Числовая система, которая определяет приоритет селекторов.
  • Псевдокласс Селектор, описывающий особое состояние элемента (например, :hover).
  • Псевдоэлемент Селектор, позволяющий стилизовать часть элемента (например, ::before).
  • Медиа-запрос Условие для применения стилей в зависимости от размера экрана и других параметров.

Цвет

Цвет текста

Свойство color используется для задания цвета текста элементов.

Примеры записи цвета:

  • Именованный цвет: color: red;
  • HEX-код: color: #ff0000;
  • RGB: color: rgb(255, 0, 0);
  • RGBA (с прозрачностью): color: rgba(255, 0, 0, 0.5);
  • HSL: color: hsl(0, 100%, 50%);
  • HSLA: color: hsla(0, 100%, 50%, 0.5);

Пример:

p {
  color: #2c3e50;
}

Замечания:

  • Цвет наследуется от родителя, если явно не переопределён.
  • По умолчанию цвет зависит от темы браузера и настроек.

Цвет фона

Свойство background-color задаёт цвет фона HTML-элемента.

Примеры записи цвета:

  • Именованный цвет: background-color: lightblue;
  • HEX: background-color: #f0f0f0;
  • RGB: background-color: rgb(240, 240, 240);
  • RGBA: background-color: rgba(0, 0, 255, 0.1);
  • HSL: background-color: hsl(200, 100%, 95%);

Пример:

div {
  background-color: #e0e0e0;
}

Особенности:

  • Фон может быть прозрачным по умолчанию (transparent).
  • Если у родителя задан цвет, а у потомка — нет, цвет не наследуется, но остаётся визуально заметным.
  • Цвет фона можно комбинировать с фоновыми изображениями через свойство background.