Руководство по CSS

Данный справочник по CSS перечисляет все стандартные свойства, псевдоклассы и псевдоэлементы, @-правила, единицы измерения и селекторы CSS в алфавитном порядке. Справочник позволит вам быстро найти подробную информацию о каждом из них. Он не только перечисляет свойства CSS 1 и CSS 2.1, но является и справочником по CSS3 со ссылками на описание каждого стандартизированного или уже стабилизированного свойства CSS3. Также включает в себя краткое руководство DOM-CSS / CSSOM.

Заметьте, что определения CSS правил полностью (ASCII)  тексто-ориентированы, в то время как определения правил DOM-CSS / CSSOM объектно-ориентированы.

Смотрите также  Mozilla CSS Extensions для Gecko-специфичных свойств с префиксом -moz; и  WebKit CSS Extensions для WebKit-специфичных свойств. Смотрите  Обзор CSS-префиксов для разных браузеров от Peter Beverloo для всех свойств с префиксами.

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

 Имейте в виду, что любая синтаксическая ошибка в задании правил сделает некорректным всё правило.

Стили

selectorlist { property: value; [more property:value; pairs] }

...где selectorlist: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]


Смотрите списки селекторов, псевдоэлементов и псевдоклассов ниже.

Примеры

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

Больше о примерах: #1, #2

@-правила

Так как у них есть много различных структурных форматов, смотрите нужный синтаксис @-правил.

Справочный указатель

Селекторы

• Базовые селекторы
  • По тегу elementname
  • По классу .classname
  • По ID #idname
  • Универсальные * ns|* *|*
  • По атрибутам [attr=value]
• Комбиционные
  • смежный селектор A + B
  • следующего элемента A ~ B
  • потомков A > B
  • дочерних элементов A B
• Псевдоэлементы    (больше информации)
  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection
  • ::backdrop
  • ::placeholder
  • ::marker
  • ::spelling-error
  • ::grammar-error
• Псевдоклассы    (больше информации)
  • :active
  • :any
  • :checked
  • :default
  • :dir()
  • :disabled
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :fullscreen
  • :focus
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :valid
  • :visited

Полный список селекторов в спецификации Selectors Level 3.

Обучение CSS3

Эти маленькие страницы описывают технологии, появившиеся в CSS3 или CSS2.1, но с плохой поддержкой браузерами до недавнего времени:

• Медиа-запросы
• Счётчики
• Градиенты
• Трансформации
• Анимации
• Переходы
• Множественные фоны
• Flexbox
• Многоколоночные макеты

Концепции

• CSS синтаксис
• @-правила
• Комментарии
• Специфичность
• Начальное значение
• Наследование
• Указанное значение 
• Высчитанное значение
• Используемое значение
• Актуальное значение
• Вычисленное значение (почти то же, что высчитанное)
• Box-модель
• Замещаемый элемент
• Синтаксис определения значений
• Сокращенные свойства
• Объединение отступов
• Модель визуального форматирования
• Слои

DOM-CSS / CSSOM

Важнейшие типы объектов:

• document . styleSheets
• styleSheets[x] . cssRules
• cssRules[x] . cssText (селекторы и стили)
• cssRules[x] . selectorText
• elem . style
• elem . style . cssText (только стили)
• elem . className
• elem . classList

важные методы:

• CSSStyleSheet.insertRule
• CSSStyleSheet.deleteRule