Довідник 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 цілком засновані на тексті (англ.) (ASCII), натомість DOM-CSS / CSSOM (система управління правилами) заснована на об'єктах (англ.).

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

Оскільки структура директив широко відрізняється, шукайте синтаксис конкретних директив на сторінці Директива.

Покажчик

Примітка: Імена властивостей у цьому покажчику не містять імен JavaScript у тій частині, в якій вони відрізняються від стандартних імен CSS.

{{CSS_Ref}}

Селектори

Далі – різні селектори, що дають стилям змогу бути умовними на основі різних можливостей елементів у DOM.

Базові селектори

Базові селектори – фундаментальні селектори; це найбазовіші селектори, котрі часто поєднуються для створення інших, складніших селекторів.

Групування селекторів

Список селекторів 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:

Дивіться також Селектори в специфікації Селектори рівень 4 (англ.).

Концепції

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

Значення

Компонування

DOM-CSS / CSSOM

Головні типи об'єктів

  • Document.styleSheets
  • <a href="/uk/docs/Web/API/StyleSheetList" title="styleSheets">styleSheets</a>[i].<a href="/uk/docs/Web/API/CSSRuleList" title="cssRules">cssRules</a>
  • cssRules[i].<a href="/uk/docs/Web/API/CSSRule/cssText" title="cssText">cssText</a> (селектор і стиль)
  • cssRules[i].<a href="/uk/docs/Web/API/CSSStyleRule/selectorText" title="selectorText">selectorText</a>
  • HTMLElement.style
  • HTMLElement.style.<a href="/uk/docs/Web/API/CSSStyleDeclaration/cssText" title="cssText">cssText</a> (лише стиль)
  • Element.className
  • Element.classList

Важливі методи

Дивіться також

Зовнішні посилання

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.