Справочник CSS

Используйте этот справочник CSS, чтобы просмотреть алфавитный указатель всех стандартных свойств CSS, псевдоклассов, псевдоэлементов, типов данных, функциональных обозначений и директив. Также можно просмотреть ключевые понятия CSS и список селекторов, сгруппированных по типам. В справочник также включён краткий справочник DOM-CSS / CSSOM.

Базовый синтаксис правил

Синтаксис стилевых правил

style-rule ::=
    selectors-list {
      properties-list
    }

Где:

selectors-list ::=
    selector[:pseudo-class] [::pseudo-element]
    [, selectors-list]

properties-list ::=
    [property : value] [; properties-list]

См. указатель селекторов, псевдоклассов и псевдоэлементов ниже. Синтаксис каждого указанного значения зависит от типа данных, определённого для каждого указанного свойства.

Примеры стилевых правил

strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}

Вводное руководство по синтаксису селекторов для начинающих см. в нашем руководстве по селекторам CSS. Обратите внимание: любая синтаксическая ошибка в определении правила делает недействительным всё правило. Браузер игнорирует недействительные правила. Следует отметить, что определения правил CSS полностью текстовые (в кодировке Unicode), тогда как DOM-CSS / CSSOM (система управления правилами) основана на объектах.

Синтаксис директив

Поскольку структура директив может значительно различаться, см. раздел Директивы, чтобы узнать синтаксис нужной вам директивы.

Указатель

Селекторы

Ниже приведены различные селекторы, позволяющие применять стили в зависимости от различных характеристик элементов в DOM.

Базовые селекторы

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

• Универсальный селектор *
• Селектор типа elementname
• Селектор класса .classname
• Селектор идентификатора #idname
• Селектор атрибута [attr=value]

Группировка селекторов

Список селекторов A, B

Указывает, что выбираются как элементы A, так и элементы B. Это способ группировки для выбора нескольких совпадающих элементов.

Комбинаторы

Комбинаторы — это селекторы, устанавливающие связь между двумя или более простыми селекторами, например «A является дочерним элементом B» или «A находится непосредственно перед B», и образующие сложный селектор.

Комбинатор следующего соседнего элемента A + B

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

Комбинатор последующих соседних элементов A ~ B

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

Комбинатор дочернего элемента A > B

Указывает, что элемент, выбранный с помощью B, является непосредственным дочерним элементом элемента, выбранного с помощью A.

Комбинатор потомка A B

Указывает, что элемент, выбранный с помощью B, является потомком элемента, выбранного с помощью A, но не обязательно его непосредственным дочерним элементом.

Комбинатор столбца A || B Экспериментальная функция

Указывает, что элемент, выбранный с помощью B, находится в столбце таблицы, заданном с помощью A. Элементы, охватывающие несколько столбцов, считаются принадлежащими каждому из этих столбцов.

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

Псевдоклассы :

Задает особое состояние выбранного элемента или элементов.

Псевдоэлементы ::

Представляют сущности, не включённые в HTML.

[!CALLOUT]

См. также селекторы в спецификации Selectors и спецификацию псевдоэлементов.

Понятия

Синтаксис и семантика

• Синтаксис CSS
• Директивы
• Каскад
• Комментарии
• Дескриптор
• Наследование
• Сокращённые свойства
• Специфичность
• Значения
• Синтаксис определения значений
• Значения и единицы CSS
• Функциональные обозначения CSS

Значения

• Фактическое значение
• Вычисленное значение
• Начальное значение
• Разрешённое значение
• Заданное значение
• Используемое значение

Макет

• Контекст блочного форматирования
• Блочная модель
• Контейнерный блок
• Режим макета
• Схлопывание внешних отступов
• Замещаемые элементы
• Контекст наложения
• Модель визуального форматирования

DOM-CSS / CSSOM

Основные типы объектов

• Document.styleSheets
• HTMLElement.style
• Element.className
• Element.classList
• StyleSheetList
• CSSRuleList
• CSSRule
• CSSStyleRule
• CSSStyleDeclaration

Важные методы

• CSSStyleSheet.insertRule()
• CSSStyleSheet.deleteRule()

См. также

• Расширения CSS от Mozilla (с префиксом -moz-)
• Расширения CSS от WebKit (в основном с префиксом -webkit-)

Внешние ссылки

• Указатели CSS (w3.org)