❗ Вебсайт в стадии бета-тестирования. Возможны ошибки.

Символы языка разметки CSS

Язык разметки стиля CSS использует набор специальных символов для указания стиля элементов гипертекста, разделения правил и создания селекторов.

Основные символы синтаксиса

Правило CSS включает селектор и блок объявлений. Для этого применяют следующие символы:

  • фигурные скобки { } — заключают блок правил (стилей) для указанного селектора;
  • двоеточие (:) — отделяет наименование свойства от значения свойства.

Пример использования двоеточия для отделения свойства color от значения blue:

color: blue;

Символы селектора

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

  • точка (.) — выбор элемента по атрибуту класса (например, .intro);
  • решётка (#) — выбор уникального элемента по его идентификатору (например, #header);
  • звёздочка (*) — универсальный селектор, выбор всех элементов;
  • квадратные скобки [ ] — указывают на атрибут селектора (например, [type = “text”])
  • запятая (,) — группировка множества селекторов одного стиля (например, h1, h2, p);
  • пробел — комбинатор каскадных потомков; выбор элемента, который состоит потомков другого элемента (например, div p).

Символы комбинаторов

Комбинаторы определяют взаимосвязь между элементами селектора:

  • знак больше (>) — указывает на дочерний комбинатор; выбор непосредственных потомков элемента (например, ul > li);
  • знак плюс (+) — указывает на соседний родственный комбинатор; выбор элемента, предшествующего другому элементу (например, h2 + p);
  • тильда (~) — общий комбинатор; выбор всех родственных элементов, следующих за указанным элементом (например, h2 ~ p).

Символы псевдоклассов и псевдоэлементов

Символы псевдоклассов и псевдоэлементов используют для указания на определённые состояния или определённые части элемента:

  • одинарное двоеточие (:) — указывает на псевдокласс, который выбирает элемент в зависимости от состояния (например, :hover, :visited);
  • двойное двоеточие (::) — указывает на псевдоэлемент, который выбирает определённую часть элемента (например, ::before, ::first-line).

Другие символы

В правилах CSS можно встретить символы:

  • коммерческое Аt (@) — для определения операторов (например, @media, @import, or @keyframes);
  • восклицательный знак (!) — который используют совместно с important для придания приоритета (например, color: red !important;);
  • обратная косая черта (\) — для экранирования специальных символов CSS или добавления символов Юникода (\uXXXX).