Символы языка разметки 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).