grid - CSS: каскадные таблицы стилей

grid
====

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
Общие сведения
--------------

Свойство CSS **`grid`** является сокращённой формой записи, которая устанавливает значения для всех явных свойств сетки (grid) (`grid-template-rows`, `grid-template-columns`, и `grid-template-areas`), всех неявных свойств сетки (grid) (`grid-auto-rows` (en-US), `grid-auto-columns` (en-US), и `grid-auto-flow`), и свойств для промежутков между рядами и столбцами сетки (`grid-column-gap` (en-US) и `grid-row-gap` (en-US)) в одной строчке.

**Примечание:** В одной строке grid могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращённых формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращённой формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установлены в сокращённой форме записи.

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `grid-template-rows`: `none`
* `grid-template-columns`: `none`
* `grid-template-areas`: `none`
* `grid-auto-rows` (en-US): `auto`
* `grid-auto-columns` (en-US): `auto`
* `grid-auto-flow`: `row`
* `grid-column-gap` (en-US): `0`
* `grid-row-gap` (en-US): `0`
* `column-gap`: `normal`
* `row-gap`: `normal`
 |
| Применяется к | сеточные контейнеры |
| Наследуется | нет |
| Проценты | как и у каждого из подсвойств этого свойства:* `grid-template-rows`: относятся к соответствующему размеру области содержимого
* `grid-template-columns`: относятся к соответствующему размеру области содержимого
* `grid-auto-rows` (en-US): относятся к соответствующему размеру области содержимого
* `grid-auto-columns` (en-US): относятся к соответствующему размеру области содержимого
 |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `grid-template-rows`: как указано, но с относительной длиной, конвертируемой в абсолютные длины
* `grid-template-columns`: как указано, но с относительной длиной, конвертируемой в абсолютные длины
* `grid-template-areas`: как указано
* `grid-auto-rows` (en-US): процент, как указан, или абсолютная длина
* `grid-auto-columns` (en-US): процент, как указан, или абсолютная длина
* `grid-auto-flow`: как указано
* `grid-column-gap` (en-US): процент, как указан, или абсолютная длина
* `grid-row-gap` (en-US): процент, как указан, или абсолютная длина
* `column-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
* `row-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
 |
| Animation type | как и у каждого из подсвойств этого свойства:* `grid-template-rows`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-columns`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-areas`: discrete
* `grid-auto-rows` (en-US): by computed value type
* `grid-auto-columns` (en-US): by computed value type
* `grid-auto-flow`: discrete
* `grid-column-gap` (en-US): длина
* `grid-row-gap` (en-US): длина
* `column-gap`: длина, проценты или calc();
* `row-gap`: длина, проценты или calc();
 |

Синтаксис
---------

```css
/\* <'grid-template'> значения\*/
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/\* <'grid-template-rows'> /
 [ auto-flow && dense? ] <'grid-auto-columns'>? values \*/
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/\* [ auto-flow && dense? ] <'grid-auto-rows'>? /
 <'grid-template-columns'> values \*/
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/\* Global values \*/
grid: inherit;
grid: initial;
grid: unset;
```

### Значения

`<'grid-template'>`

Определяет `grid-template` (шаблон сетки) включая `grid-template-columns` (столбцы), `grid-template-rows` (ряды) и `grid-template-areas` (области).

`<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?`

Устанавливает auto-flow явно задавая размещение по рядам с помощью свойства `grid-template-rows` (и устанавливая свойство `grid-template-columns` в значение `none`) и уточняет, как должно работать авто-повторение столбцов при помощи свойства `grid-auto-columns` (en-US) (и устанавливая `grid-auto-rows` (en-US) в значение `auto`). Свойство `grid-auto-flow` может быть так же установлено для столбцов со свойством `dense` если оно определено.Все остальные подсвойства grid сбрасываются в их начальные значения .

`[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`

Устанавливает auto-flow явно задавая размещение по столбцам с помощью свойства `grid-template-columns` (и устанавливая свойство `grid-template-rows` в значение `none`) и уточняет, как должно работать авто-повторение рядов при помощи свойства `grid-auto-rows` (en-US) (и устанавливая `grid-auto-columns` (en-US) в значение `auto`). Свойство `grid-auto-flow` может быть так же установлено для рядов со свойством `dense` если оно определено.Все остальные подсвойства grid сбрасываются в их начальные значения .

### Formal syntax
```

grid =
  <'grid-template'>                                   | (en-US)
  <'grid-template-rows'> / [ (en-US) auto-flow && (en-US) dense? (en-US) ] (en-US) <'grid-auto-columns'>? (en-US)  | (en-US)
  [ (en-US) auto-flow && (en-US) dense? (en-US) ] (en-US) <'grid-auto-rows'>? (en-US) / <'grid-template-columns'>

```

Example
-------

### HTML Content

```html
<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```

### CSS Content

```css
#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}
```

### Результат

Спецификация
------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-shorthand |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Связанные свойства CSS: `grid-template`, `grid-template-rows`, `grid-template-columns`, `grid-template-areas`, `grid-auto-columns` (en-US), `grid-auto-rows` (en-US), `grid-auto-flow`
* Руководство по разметке сетки: *Line-based placement with CSS Grid*
* Руководство по разметке сетки: *Grid template areas - Grid definition shorthands*


padding-right - CSS: каскадные таблицы стилей

padding-right
=============

Summary
-------

CSS свойство **`padding-right`** элемента устанавливает значение поля от правого края элемента. Поля элемента (padding area) это область, расположенная между контентом и границей элемента. Отрицательное значение не валидно.

|  |  |
| --- | --- |
| Начальное значение | `0` |
| Применяется к | все элементы, кроме `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` и `table-column`. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, как указан, или абсолютная длина |
| Animation type | длина |

Syntax
------

```css
/\* <length> значения \*/
padding-right: 0.5em;
padding-right: 0;
padding-right: 2cm;

/\* <percentage> значения \*/
padding-right: 10%;

/\* Общие значения \*/
padding-right: inherit;
padding-right: initial;
padding-right: unset;
```

### Values

<length>

Устанавливает положительную фиксированную ширину. Подробнее: `<length>`.

<percentage>

Процент по отношению к ширине контейнера.

### Formal syntax
```

padding-right =
  <length-percentage [0,∞]>

<length-percentage> =
  <length>      | (en-US)
  <percentage>

```

Examples
--------

```css
.content {
  padding-right: 5%;
}
.sidebox {
  padding-right: 10px;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


:empty - CSS: каскадные таблицы стилей

:empty
======

Описание
--------

`Псевдокласс` `:empty` находит любой элемент, у которого нет потомков. Учитываются элементы и текст (включая пробелы). Комментарии не повлияют на то, что элемент будет рассматриваться как не пустой.

Синтаксис
---------
```

<element>:empty { /* стили */ }
```

Примеры
-------

```css
.box {
  background: red;
  height: 200px;
  width: 200px;
}

.box:empty {
  background: lime;
}
```

```html
<div class="box"><!-- Я буду лаймовым --></div>
<div class="box">Я буду красным</div>
<div class="box">
  <!-- Я буду красным, так как перед комментарием стоят пробелы -->
</div>
```

Спецификации
------------

| Specification |
| --- |
| Selectors Level 4 # the-empty-pseudo |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Действительное значение - CSS: каскадные таблицы стилей

Действительное значение
=======================

Описание
--------

**Действительное значение** CSS-свойства - используемое после всех приближений значение. Например, браузер может отображать рамки только с целым значением пикселей и будет принудительно округлять ширину.

Спецификации
------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # actual-value |

Смотрите также
--------------

* Руководство по CSS
* Ключевые концепции CSS
    + Синтаксис CSS
    + @-правила
    + комментарии
    + специфичность
    + наследование
    + блочная модель
    + режимы компоновки
    + модели визуального форматирования
    + Схлопывание отступов
    + Значения
        - начальные
        - вычисленные
        - используемые
        - действительные
    + Синтаксис определения значений (en-US)
    + Сокращённые свойства
    + Замещаемые элементы


touch-action - CSS: каскадные таблицы стилей

touch-action
============

Css-свойство touch-action указывает как элемент будет управляться через тачскрин (например, при помощи возможности приближения (zooming), встроенной в браузер).

```css
/\* Keyword values \*/
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation;

/\* Global values \*/
touch-action: inherit;
touch-action: initial;
touch-action: unset;
```

По умолчанию, жесты панорамирование, прокрутка и сужающий обрабатываются исключительно браузером. Приложение, использующие Pointer events получит событие `pointercancel` (en-US), когда браузер начнёт обрабатывать тач жест. Явно указывая жесты обрабатываемые браузером, приложение может иметь своё поведение для оставшихся жестов благодаря прослушиванию событий `pointermove` (en-US) и `pointerup` (en-US). Приложения, использующие Touch events, отключают обработку жестов браузером вызовом `preventDefault()`, но также следует использовать `touch-action`, чтобы убедиться, что веб-обозреватель знает о намерениях приложения до того, как "проснутся" обработчики событий.

When a gesture is started, the browser intersects the **touch-action** values of the touched element and all its ancestors up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, **touch-action** is typically applied only to individual elements which have some custom behavior, without needing to specify **touch-action** explicitly on any of that element's descendants. After a gesture has started, changes to **touch-action** values will not have any impact on the behavior of the current gesture.

Syntax
------

The `touch-action` property may be specified as either:

* any one of the keywords `auto`, `none`, `manipulation`, *or*
* one of the keywords `pan-x`, `pan-left`, `pan-right`, and/or one of the keywords `pan-y`, `pan-up`, `pan-down`, plus optionally the keyword `pinch-zoom`.
### Значения

`auto`

Enable browser handling of all panning and zooming gestures.

`none`

Disable browser handling of all panning and zooming gestures.

`pan-x`

Enable single-finger horizontal panning gestures. May be combined with **pan-y, pan-up,** **pan-down** and/or **pinch-zoom**.

`pan-y`

Enable single-finger vertical panning gestures. May be combined with **pan-x, pan-left,** **pan-right** and/or **pinch-zoom**.

`manipulation`

Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of **click** events when the user taps the screen. This is an alias for "**pan-x pan-y pinch-zoom**" (which, for compatibility, is itself still valid).

`pan-left`, `pan-right,pan-up,pan-down`
Экспериментальная возможность

Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling "up" (**pan-up**) means that the user is dragging their finger downward on the screen surface, and likewise **pan-left** means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, **"pan-left pan-right**" is invalid since "**pan-x**" is simpler, but "**pan-left pan-down**" is valid).

`pinch-zoom`

Enable multi-finger panning and zooming of the page. This may be combined with any of the **pan-** values.

### Formal syntax
```

touch-action =
  auto                                                | (en-US)
  none                                                | (en-US)
  [ (en-US) [ (en-US) pan-x | (en-US) pan-left | (en-US) pan-right ] (en-US) || (en-US) [ (en-US) pan-y | (en-US) pan-up | (en-US) pan-down ] (en-US) || (en-US) pinch-zoom ] (en-US)  | (en-US)
  manipulation

```

Примеры
-------

The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface.

```css
#map {
  touch-action: none;
}
```

Another common pattern is that of an image carousel which uses pointer events to handle horizontal panning, but doesn't want to interfere with vertical scrolling or zooming of the document.

```css
.image-carousel {
  width: 100%;
  height: 150px;
  touch-action: pan-y pinch-zoom;
}
```

**touch-action** is also often used to completely disable the delay of **click** events caused by support for the double-tap to zoom gesture.

```css
html {
  touch-action: manipulation;
}
```

Спецификации
------------

| Specification |
| --- |
| Compatibility Standard # touch-action |
| Pointer Events # the-touch-action-css-property |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Pointer Events`
* WebKit Blog More Responsive Tapping on iOS


var() - CSS: каскадные таблицы стилей

var()
=====

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

* Learn more
* See full compatibility
* Report feedback
Функция (en-US) CSS **`var()`** используется для вставки значения кастомного свойства (также известного как "CSS-переменная") в другое свойство.

Интерактивный пример
--------------------

Функцию `var()` нельзя использовать в именах свойств, селекторах или где-либо ещё, кроме как в качестве значений для свойств.

Синтаксис
---------

Функции в качестве первого аргумента обязательно нужно передать имя кастомного свойства, значение которого нужно получить. Необязательный второй аргумент функции используется в качестве резервного значения. Если кастомное свойство, указанное в первом аргументе, оказалось недоступным, функция вернёт второе значение.
```

<var()> =
  var( <custom-property-name> , <declaration-value>? (en-US) )

```

**Примечание:** синтаксис резервного значения, как и синтаксис кастомного свойств, допускает использование запятых. Например, `var(--foo, red, blue)` задаёт резервное значение `red, blue`; таким образом всё, что находится между первой запятой и закрывающей скобкой, считается резервным значением.

### Значения

`<custom-property-name>`

Имя кастомного свойства, начинающиеся с двух дефисов. Кастомные свойства предназначены исключительно для разработчиков и пользователей; CSS никак не влияет на них.

`<declaration-value>`

Резервное значение кастомного свойства. Используется в случае, если кастомное свойство не определено или не может быть использовано в текущем контексте. Резервное значение может содержать любой символ, кроме некоторых спецсимволов, вроде символа новой строки, непарных закрывающих скобок (т.е. `)`, `]`, или `}`), точку с запятой или восклицательный знак.

Примеры
-------

### Использование кастомного свойства, определенного внутри :root

```css
:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}
```

### Кастомные свойства с резервным значением, когда свойство не было установлено

```css
/\* Резервное значение \*/
/\* Стили для элементов компонента: \*/
.component .header {
  color: var(
    --header-color,
    blue
  ); /\* header-color не существует, поэтому используется blue \*/
}

.component .text {
  color: var(--text-color, black);
}

/\* Стили для самого компонента: \*/
.component {
  --text-color: #080;
}
```

Спецификации
------------

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1 # using-variables |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `env(…)` (en-US) – доступные только для чтения переменные среды, контролируемые браузером
* Использование CSS-переменных


background-blend-mode - CSS: каскадные таблицы стилей

background-blend-mode
=====================

CSS-свойство **`background-blend-mode`** описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.

Интерактивный пример
--------------------

Режимы наложения должны быть определены в том же порядке, что и CSS-свойство `background-image`. Если количество режимов наложения будет больше или меньше количества фоновых изображений, то последние режимы будут либо отброшены, либо повторены до совпадения количества соответственно.

Cинтаксис
---------

```css
/\* Одно значение \*/
background-blend-mode: normal;

/\* Два значения, по одному на каждый фон \*/
background-blend-mode: darken, luminosity;

/\* Глобальные значения \*/
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: revert;
background-blend-mode: unset;
```

### Значения

`<blend-mode>` (en-US)

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

Формальное определение
----------------------

|  |  |
| --- | --- |
| Начальное значение | `normal` |
| Применяется к | Все элементы. В SVG это применяется к контейнерам, графическим элементам и элементам графической отсылки.. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | Not animatable |

Формальный синтаксис
--------------------
```

background-blend-mode =
  <mix-blend-mode># (en-US)

```

Примеры
-------

### Простой пример

```css
.item {
  width: 300px;
  height: 300px;
  background: url("image1.png"), url("image2.png");
  background-blend-mode: screen;
}
```

### Попробуйте разные режимы смешивания
```

<div id="div"></div>
<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
```

```
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```

```
document.getElementById("select").onchange = function (event) {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
```

Спецификации
------------

| Specification |
| --- |
| Compositing and Blending Level 2 # background-blend-mode |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `<blend-mode>` (en-US)
* `mix-blend-mode`


grid-area - CSS: каскадные таблицы стилей

grid-area
=========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
CSS-свойство `grid-area` - это сокращённая форма записи для свойств `grid-row-start`, `grid-column-start` (en-US), `grid-row-end` (en-US) и `grid-column-end` (en-US). Определяет размер и местоположение грид-элемента в пределах grid row (en-US). Задаёт края грид-области (en-US) грид-элемента.

```css
/\* Ключевые слова \*/
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;

/\* <custom-ident> значения \*/
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;

/\* <integer> && <custom-ident>? значения \*/
grid-area: some-grid-area 4;
grid-area: some-grid-area 4 / 2 another-grid-area;

/\* span && [ <integer> || <custom-ident> ] значения \*/
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;

/\* Global values \*/
grid-area: inherit;
grid-area: initial;
grid-area: unset;
```

Если заданы четыре значения `<grid-line>` , то первое значение определяет `grid-row-start` , второе значение - `grid-column-start` , третье значение - `grid-row-end` и четвёртое значение - `grid-column-end`.

Если `grid-column-end` опущено, а `grid-column-start` в значении `<custom-ident>`, `grid-column-end` устанавливается в это значение `<custom-ident>`; иначе оно устанавливается в значение `auto`.

Когда `grid-row-end` опущено, а `grid-row-start` в значении `<custom-ident>`, то `grid-row-end` устанавливается в это значение `<custom-ident>`; иначе оно устанавливается в значение `auto`.

Когда `grid-column-start` опущено, а `grid-row-start` в значении `<custom-ident>`, все четыре свойства длинной записи устанавливаются в это значение, иначе они устанавливаются в значение `auto`.

Свойство grid-area также может быть установлено в значение `<custom-ident>` , которое действует, как имя области. В дальнейшем разместить область в гриде по имени можно с помощью свойства `grid-template-areas`.

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `grid-row-start`: `auto`
* `grid-column-start` (en-US): `auto`
* `grid-row-end` (en-US): `auto`
* `grid-column-end` (en-US): `auto`
 |
| Применяется к | элементы сетки и абсолютно-позиционированные блоки, находящиеся в сеточном контейнере |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `grid-row-start`: как указано
* `grid-column-start` (en-US): как указано
* `grid-row-end` (en-US): как указано
* `grid-column-end` (en-US): как указано
 |
| Animation type | discrete |

Синтаксис
---------

### Значения

`auto`

- ключевое слово, говорящее о том, что свойство не вносит никаких изменений в размещение грид-элемента. На элемент действует авторазмещение или размер элемента по умолчанию `1`. *(то есть, элемент занимает одну ячейку грид-сетки в заданном направлении)*

`<custom-ident>`

если есть именованная линия с именем '`<custom-ident>-start`'/'`<custom-ident>-end`', то грид-элемент привязывается к первой из таких линий.

**Примечание:** Именованные грид-области автоматически генерируют неявные именованные линии с именами подобного формата, поэтому запись `grid-area: foo;` выберет начальный/конечный край этой именованной грид-области (если, конечно, другая линия с именем `foo-start`/`foo-end` не была явно определена раньше).В противном случае, значение расценивается, как если бы число `1` было задано вместе с `<custom-ident>`.

`<integer> && <custom-ident>?`

Contributes the *n*th grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.An `<integer>` value of `0` is invalid.

`span && [ <integer> || <custom-ident> ]`

Contributes a grid span to the grid item's placement such that the corresponding edge of the grid item's grid area is *n* lines from the opposite edge.If a name is given as a `<custom-ident>`, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.If the `<integer>` is omitted, it defaults to `1`. Negative integers or 0 are invalid.

### Formal syntax
```

grid-area =
  <grid-line> [ (en-US) / <grid-line> ] (en-US){0,3} (en-US)

<grid-line> =
  auto                                                | (en-US)
  <custom-ident>                                      | (en-US)
  [ (en-US) [ (en-US) <integer [-∞,-1]> | (en-US) <integer [1,∞]> ] (en-US) && (en-US) <custom-ident>? (en-US) ] (en-US)  | (en-US)
  [ (en-US) span && (en-US) [ (en-US) <integer [1,∞]> || (en-US) <custom-ident> ] (en-US) ] (en-US)

```

Example
-------

### HTML content

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>
```

### CSS content

```css
#grid {
  display: grid;
  height: 100px;
  grid-template: repeat(4, 1fr) / 50px 100px;
}

#item1 {
  background-color: lime;
  grid-area: 2 / 2 / auto / span 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # propdef-grid-area |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related CSS properties: `grid-row` (en-US), `grid-row-start`, `grid-row-end` (en-US), `grid-column`, `grid-column-start` (en-US), `grid-column-end` (en-US), `grid-template-areas`
* Grid Layout Guide: *Grid template areas*
* Video tutorial: *Grid Template Areas*


Решённое значение - CSS: каскадные таблицы стилей

Решённое значение
=================

**Решённое значение** CSS-свойства - значение, возвращаемое `getComputedStyle()`. Для многих свойств, это `вычисленное значение`, но для старых свойств (включая `width` и `height`), это `используемое значение`. Смотрите ссылку спецификации ниже для дополнительной информации.

Спецификации
------------

| Specification |
| --- |
| CSS Object Model (CSSOM) # resolved-values |

Смотрите также
--------------

* Справка по CSS
* Ключевые концепции CSS
    + Синтаксис CSS
    + @-правила
    + комментарии
    + специфичность
    + наследование
    + блочная модель
    + режимы компоновки
    + модели визуального форматирования
    + Схлопывание отступов
    + Значения
        - начальные
        - вычисленные
        - используемые
        - действительные
    + Синтаксис определения значений (en-US)
    + Сокращённые свойства
    + Замещаемые элементы
* `window.getComputedStyle`


backdrop-filter - CSS: каскадные таблицы стилей

backdrop-filter
===============

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS свойство **`backdrop-filter`** позволяет вам использовать визуальные эффекты - такие как размытие или смещение цвета фона - за элементом. Так как это применяется ко всему *за* элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными.

```css
/\* Keyword value \*/
backdrop-filter: none;

/\* фильтр URL в SVG \*/
backdrop-filter: url(commonfilters.svg#filter);

/\* значения <filter-function> \*/
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/\* Несколько фильтров \*/
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/\* Глобальные значения \*/
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;
```

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | все элементы; в SVG, это применяется к контейнерам, исключая элемент `defs` и все графические элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | a filter function list |

Синтаксис
---------

### Значения

`none`

Фильтр отключён для фона

`<filter-function-list>`

Перечень фильтров, разделённых пробелами функций `<filter-function>` или SVG фильтра (en-US), которые применены для фона.

### Формальный синтаксис
```

backdrop-filter =
  none                 | (en-US)
  <filter-value-list>

<filter-value-list> =
  [ (en-US) <filter-function> | (en-US) <url> ] (en-US)+ (en-US)

<filter-function> =
  <blur()>         | (en-US)
  <brightness()>   | (en-US)
  <contrast()>     | (en-US)
  <drop-shadow()>  | (en-US)
  <grayscale()>    | (en-US)
  <hue-rotate()>   | (en-US)
  <invert()>       | (en-US)
  <opacity()>      | (en-US)
  <sepia()>        | (en-US)
  <saturate()>

<url> =
  <url()>  | (en-US)
  <src()>

<blur()> =
  blur( <length>? (en-US) )

<brightness()> =
  brightness( [ (en-US) <number> | (en-US) <percentage> ] (en-US)? (en-US) )

<contrast()> =
  contrast( [ (en-US) <number> | (en-US) <percentage> ] (en-US)? (en-US) )

<drop-shadow()> =
  drop-shadow( [ (en-US) <color>? (en-US) && (en-US) <length>{2,3} (en-US) ] (en-US) )

<grayscale()> =
  grayscale( [ (en-US) <number> | (en-US) <percentage> ] (en-US)? (en-US) )

<hue-rotate()> =
  hue-rotate( [ (en-US) <angle> | (en-US) <zero> ] (en-US)? (en-US) )

<invert()> =
  invert( [ (en-US) <number> | (en-US) <percentage> ] (en-US)? (en-US) )

<opacity()> =
  opacity( [ (en-US) <number> | (en-US) <percentage> ] (en-US)? (en-US) )

<sepia()> =
  sepia( [ (en-US) <number> | (en-US) <percentage> ] (en-US)? (en-US) )

<saturate()> =
  saturate( [ (en-US) <number> | (en-US) <percentage> ] (en-US)? (en-US) )

<url()> =
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)
  <url-token>

<src()> =
  src( <string> (en-US) <url-modifier>\* (en-US) )

```

Примеры
-------

### CSS

```css
.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url("anemones.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}
```

### HTML

```html
<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>
```

### Результат

Спецификации
------------

| Specification |
| --- |
| Filter Effects Module Level 2 # BackdropFilterProperty |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `filter`
* Building iOS-like transparency effects in CSS with backdrop-filter


:default - CSS: каскадные таблицы стилей

:default
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
CSS псевдокласс **`:default`** находит элемент формы, установленный по умолчанию для группы связанных элементов.

Этот селектор используется для элементов: `<button>`, `<input type="checkbox">` (en-US), `<input type="radio">`, и `<option>` .

```css
/\* Выбрать установленный по умолчанию среди <input> \*/
input:default {
  background-color: lime;
}
```

Сгруппированные элементы, поддерживающие множественный выбор, также могут иметь несколько элементов, выбранных по умолчанию. В этом случае псевдокласс `:default` найдёт *все* эти элементы. Например, можно стилизовать чекбоксы по умолчанию в группе чекбоксов.

Синтаксис
---------
```

:default
```

Пример
------

### HTML

```html
<input type="radio" name="season" id="spring" />
<label for="spring">Spring</label>

<input type="radio" name="season" id="summer" checked />
<label for="summer">Summer</label>

<input type="radio" name="season" id="fall" />
<label for="fall">Fall</label>

<input type="radio" name="season" id="winter" />
<label for="winter">Winter</label>
```

### CSS

```css
input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: coral;
}
```

### Результат

Спецификация
------------

| Specification |
| --- |
| HTML Standard # selector-default |
| Selectors Level 4 # default-pseudo |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


CSS Images - CSS: каскадные таблицы стилей

CSS Images
==========

**CSS Images** - модуль в CSS, который определяет, какие типы изображений можно использовать (тип `<image>` (en-US), содержащий URL, градиенты и другие типы изображений), как изменять их размер и как они, и другие замещённые элементы, взаимодействуют с другими моделями макетов.

Справка
-------

### Свойства

* `image-orientation` (en-US)
* `image-rendering` (en-US)
* `object-fit`
* `object-position`
### Функции

* `linear-gradient()` (en-US)
* `radial-gradient()` (en-US)
* `repeating-linear-gradient()` (en-US)
* `repeating-radial-gradient()` (en-US)
* `element()` (en-US)
### Типы данных

* `<image>` (en-US)
* `<uri>()` (en-US)
Руководства
-----------

Использование CSS градиентов

Представляют собой особый тип CSS изображений, *градиенты*, как создавать и использовать их.

Создание спрайтов в CSS (en-US)

Описывает общую технику группировки нескольких изображений в один документ, чтобы сократить количество запросов и скорость загрузки страницы.

Спецификации
------------

| Specification |
| --- |
| CSS Images Module Level 3  |
| Compatibility Standard # css-%3Cimage%3E-type |
| CSS Values and Units Module Level 4 # urls |


<custom-ident> - CSS: каскадные таблицы стилей

<custom-ident>
==============

CSS тип данных **`<custom-ident>`** включает любые определённые пользователем строки, используемые в качестве идентификатора. Они чувствительны к регистру, некоторые значения запрещены в разных контекстах, чтобы избежать неоднозначности.

Синтаксис
---------

Синтаксис `<custom-ident>` похож на синтаксис CSS идентификаторов (таких, как названия свойств), за исключением того, что значения `<custom-ident>` чувствительны к регистру. Они состоят из одного или более следующих символов:

* буквы латинского алфавита(от `A` до `Z`, от `a` до `z`),
* десятеричные цифры (от `0` до `9`),
* дефис (`-`),
* нижнее подчёркивание (`_`),
* экранированный символ (символ с бэкслешем перед ним, `\`),
* символ Unicode (бэкслеш, `\`, после которого идут от одной до шести шестнадцатеричных цифр, обозначающих кодовую точку этого символа в Unicode)

Обратите внимание, что `id1`, `Id1`, `iD1` и `ID1` — это разные идентификаторы, поскольку они чувствительны к регистру. С другой стороны, так как существует несколько способов экранировать символ, `toto\?` и `toto\3F` — это один и тот же идентификатор.

### Запрещённые значения

`<custom-ident>` не может быть заключён в одинарные или двойные кавычки, потому что иначе он не был бы отличим от значения типа `<string>` (en-US). Более того, первый символ не должен быть цифрой или дефисом (`-`), если после него идёт ещё одна цифра или ещё один дефис.

Чтобы избежать неоднозначности, каждое свойство, использующее тип `<custom-ident>`, запрещает использование некоторых значений:

`animation-name``counter-reset` (en-US)`counter-increment` (en-US)

Запрещают глобальные значения CSS (`unset`, `initial` и `inherit`), а также `none`.

`@counter-style``list-style-type` (en-US)

Запрещает глобальные значения CSS (`unset`, `initial` и `inherit`), а также значения `none`, `inline` и `outside`. Также довольно много предопределённых значений используются в разных браузерах: `disc`, `circle`, `square`, `decimal`, `cjk-decimal`, `decimal-leading-zero`, `lower-roman`, `upper-roman`, `lower-greek`, `lower-alpha`, `lower-latin`, `upper-alpha`, `upper-latin`, `arabic-indic`, `armenian`, `bengali`, `cambodian`, `cjk-earthly-branch`, `cjk-heavenly-stem`, `cjk-ideographic`, `devanagari`, `ethiopic-numeric`, `georgian`, `gujarati`, `gurmukhi`, `hebrew`, `hiragana`, `hiragana-iroha`, `japanese-formal`, `japanese-informal`, `kannada`, `katakana`, `katakana-iroha`, `khmer`, `korean-hangul-formal`, `korean-hanja-formal`, `korean-hanja-informal`, `lao`, `lower-armenian`, `malayalam`, `mongolian`, `myanmar`, `oriya`, `persian`, `simp-chinese-formal`, `simp-chinese-informal`, `tamil`, `telugu`, `thai`, `tibetan`, `trad-chinese-formal`, `trad-chinese-informal`, `upper-armenian`, `disclosure-open`, and `disclosure-close`.

`grid-row-start`
`grid-row-end` (en-US)
`grid-column-start` (en-US)
`grid-column-end` (en-US)

Запрещают значение `span`.

`will-change`

Запрещают глобальные значения CSS (`unset`, `initial` и `inherit`), а так же значения `will-change`, `auto`, `scroll-position` и `contents`.

Примеры
-------

### Действительные идентификаторы
```

nono79            Состоит из букв и цифр
ground-level      Состоит из букв, цифр и дефиса
-test             Буквы, следующие за одним дефисом
_internal         Буквы, следующие за нижним подчёркиванием
\22 toto          Буквы, следующие за символом Unicode
bili\.bob         Буквы и экранированная точка
```

### Недействительные идентификаторы
```

34rem             Не может начинаться с цифры
-12rad            Не может начинаться с дефиса, за которым следует цифра
bili.bob          Только буквы, цифры, _ и - можно не экранириовать
--toto            Не может начинаться с двух дефисов подряд
'bilibob'         Это тип <string>.
"bilibob"         Это тип <string>.
```

Спецификации
------------

| Specification |
| --- |
| CSS Values and Units Module Level 4 # custom-idents |
| CSS Will Change Module Level 1 # valdef-will-change-custom-ident |
| CSS Counter Styles Level 3 # typedef-counter-style-name |
| CSS Lists and Counters Module Level 3 # counter-properties |

Совместимость с браузерами
--------------------------

*Поскольку этот тип не является реальным типом, а служит соглашением, используемым для упрощения описания допустимых значений, информация о совместимости браузера как таковая отсутствует.*

Смотрите также
--------------

* <ident> (en-US)
* <dashed-ident> (en-US)


border-image-repeat - CSS: каскадные таблицы стилей

border-image-repeat
===================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

* Learn more
* See full compatibility
* Report feedback
Описание
--------

The **`border-image-repeat`** CSS property defines how the middle part of a border image is handled so that it can match the size of the border. It has a one-value syntax that describes the behavior of all the sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.

|  |  |
| --- | --- |
| Начальное значение | `stretch` |
| Применяется к | все элементы, кроме внутренних табличных элементов, когда `border-collapse` (en-US):`collapse`. Это также применяется к `::first-letter`. |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |

Синтаксис
---------

```css
/\* border-image-repeat: type \*/
border-image-value: stretch;

/\* border-image-repeat: horizontal vertical \*/
border-image-width: round stretch;

/\* Глобальные значения \*/
border-image-repeat: inherit;
border-image-repeat: initial;
border-image-repeat: unset;
```

### Значения

*type*

One of the `stretch`, `repeat`, or `round` keywords denoting how the image is treated both horizontally and vertically.

*horizontal*

One of the `stretch`, `repeat`, or `round` keywords denoting how the image is treated horizontally.

*vertical*

One of the `stretch`, `repeat`, or `round` keywords denoting how the image is treated vertically.

`stretch`

Keyword indicating that the image must be stretched to fill the gap between the two borders.

`repeat`

Keyword indicating that the image must be repeated until it fills the gap between the two borders.

`round`

Keyword indicating that the image must be repeated until it fills the gap between the two borders. If the image doesn't fit after being repeated for an integral number of times, the image is rescaled to fit.

`space`

The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.

### Формальный синтаксис
```

border-image-repeat =
  [ (en-US) stretch | (en-US) repeat | (en-US) round | (en-US) space ] (en-US){1,2} (en-US)

```

Примеры
-------

See `border-image` (en-US) for examples of what repeat values will do.

Спецификации
------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image-repeat |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* css-tricks border-image


list-style-image - CSS: каскадные таблицы стилей

list-style-image
================

CSS-свойство **`list-style-image`** устанавливает изображение, используемое в качестве маркера списка.

Чаще, удобнее использовать общее свойство `list-style` (en-US).

Интерактивный пример
--------------------

**Примечание:** Это свойство применяется к элементам списка, т.е. к элементам с ``display`: list-item;` по умолчанию оно включает элементы `<li>`. Т.к. это свойство наследуется, его можно задать для родительского элемента (обычно `<ol>` или `<ul>`), что позволит применить его ко всем элементам списка.

Синтаксис
---------

```css
/\* Ключевые слова \*/
list-style-image: none;

/\* <url> значения \*/
list-style-image: url("starsolid.gif");

/\* Глобальные значения \*/
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;
```

### Значения

`<url>()` (en-US)

Расположение элемента для использования в качестве маркера.

`none`

Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определённый в `list-style-type` (en-US).

### Формальный синтаксис
```

list-style-image =
  <image>  | (en-US)
  none

<image> =
  <url>       | (en-US)
  <gradient> (en-US)

<url> =
  <url()>  | (en-US)
  <src()>

<url()> =
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)
  <url-token>

<src()> =
  src( <string> (en-US) <url-modifier>\* (en-US) )

```

Пример
------

### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```

### CSS

```css
ul {
  list-style-image: url("starsolid.gif");
}
```

### Результат

Спецификации
------------

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # image-markers |

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | список элементов |
| Наследуется | да |
| Обработка значения | The keyword `none` or the computed <image> |
| Animation type | discrete |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `list-style` (en-US), `list-style-type` (en-US), `list-style-position` (en-US)


Режимы письма CSS - CSS: каскадные таблицы стилей

Режимы письма CSS
=================

**Режимы письма CSS** (CSS Writing Modes) - это CSS модуль, который определяет различные международные режимы письма, такие как:

* слева направо (left-to-right), например, используется в латинском и индийском языках;
* справа налево (right-to-left), например, используется в иврите или арабском языках;
* двунаправленный (bidirectional), используется, когда смешиваются языки с письмом слева направо и справа налево;
* вертикальный (vertical), например, используется в некоторых азиатских языках.
Ссылки
------

### Свойства

* `direction`
* `glyph-orientation-horizontal`
* `text-combine-upright` (en-US)
* `text-orientation` (en-US)
* `unicode-bidi` (en-US)
* `writing-mode`
Спецификации
------------

| Specification |
| --- |
| CSS Writing Modes Level 4  |


flex-shrink - CSS: каскадные таблицы стилей

flex-shrink
===========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
**`flex-shrink`** — свойство CSS, которое определяет фактор сжатия flex-элемента. Flex-элементы будут заполнять контейнер в зависимости от значения `flex-shrink`, когда стандартная ширина flex-элементов шире, чем flex-контейнер.

flex-shrink используется вместе со свойствами flex `flex-grow` и `flex-basis`. Обычно определяется с помощью сокращения `flex`.

Интерактивный пример
--------------------

Синтаксис
---------

```css
/\* <number> значения \*/
flex-shrink: 2;
flex-shrink: 0.6;

/\* Глобальные значения \*/
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;
```

`flex-shrink` свойство определятся одним `<number>`.

### Значения

`<number>`

Смотри `<number>`. Отрицательные значения не валидны.

### Формальный синтаксис
```

flex-shrink =
  <number [0,∞]>

```

Пример
------

### HTML

```html
<p>Ширина контента 500px; flex-basis для flex элементов 120px.</p>
<p>A, B, C имеют flex-shrink:1 значение. А у D и E - flex-shrink:2</p>
<p>Ширина D и E меньше других.</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>
```

### CSS

```css
#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}
```

### Результат

Спецификации
------------

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-shrink-property |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Using CSS flexible boxes (en-US)


perspective - CSS: каскадные таблицы стилей

perspective
===========

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Описание
--------

Свойство CSS **`perspective`** определяет расcтояние между плоскостью z = 0 и пользователем для того чтобы придать 3D-позиционируемому элементу эффект переспективы. Каждый трансформируемый элемент с z > 0 станет больше, с z < 0 соответственно меньше.

Элементы части которые находятся за пользователем, т.е. z-координата этих элементов больше чем значение свойства `perspective, не отрисовываются.`

*`Точка схождения`* по умолчанию расположена в центре элемента, но её можно переместить используя свойство `perspective-origin` (en-US).

При использовании данного свойства со значениями отличными от 0 или none создаётся новый stacking context.

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | трансформируемые элементы |
| Наследуется | нет |
| Обработка значения | абсолютная длина или `none` |
| Animation type | длина |
| Создаёт контекст наложения | да |

Синтаксис
---------

```css
/\* Keyword value \*/
perspective: none;

/\* Значения <length> \*/
perspective: 20px;
perspective: 3.5em;

/\* Глобальные значения \*/
perspective: inherit;
perspective: initial;
perspective: unset;
```

### Значения

`none`

Указывает что трансформация перспективы к элементу применяться не будет.

`<length>`

`<length>` устанавливает растояние от пользователя до плоскости z = 0. Применяет трасформацию к элементу и его содержимому. Если значение отрицательно или равно 0, то преобразование не применяется.

### Формальный синтаксис
```

perspective =
  none            | (en-US)
  <length [0,∞]>

```

Примеры
-------

### Три куба

#### HTML Content

```html
<table>
  <tbody>
    <tr>
      <th><code>perspective: 250px;</code></th>
      <th><code>perspective: 350px;</code></th>
      <th><code>perspective: 500px;</code></th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pers250">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers350">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers500">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
```

#### CSS Content

```css
/\* Короткие классы для различных значений perspective \*/
.pers250 {
  perspective: 250px;
  -webkit-perspective: 250px;
}
.pers350 {
  perspective: 350px;
  -webkit-perspective: 350px;
}
.pers500 {
  perspective: 500px;
  -webkit-perspective: 500px;
}

/\* Определяем div.container, div.cube, и свойства граней куба \*/
.container {
  width: 200px;
  height: 200px;
  margin: 75px 0 0 75px;
  border: none;
}
.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  -webkit-perspective-origin: 150% 150%;
  -webkit-transform-style: preserve-3d;
}
.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/\* Определяем каждую грань в зависимости от направления \*/
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
  -webkit-transform: translateZ(50px);
}
.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
  -webkit-transform: rotateY(180deg) translateZ(50px);
}
.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
  -webkit-transform: rotateY(90deg) translateZ(50px);
}
.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
  -webkit-transform: rotateY(-90deg) translateZ(50px);
}
.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
  -webkit-transform: rotateX(90deg) translateZ(50px);
}
.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
  -webkit-transform: rotateX(-90deg) translateZ(50px);
}

/\* Делаем таблицу немного лучше \*/
th,
p,
td {
  background-color: #eeeeee;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
}
```

#### Результат

Спецификации
------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # perspective-property |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Using CSS Transforms (en-US)


:nth-of-type - CSS: каскадные таблицы стилей

:nth-of-type
============

CSS псевдокласс **`:nth-of-type()`** находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов.

```css
/\* Выбирает каждый четвёртый элемент <p>
 среди любой группы соседних элементов. \*/
p:nth-of-type(4n) {
  color: lime;
}
```

Синтаксис
---------

Псевдокласс `nth-of-type` указывается с единственным аргументом, описывающим паттерн для выбора элементов.

Более детальное описание синтаксиса может быть найдено на странице псевдокласса `:nth-child`.

### Формальный синтаксис

Error: could not find syntax for this itemПримеры
-------

### Базовый пример

#### HTML

```html
<div>
  <div>Этот элемент не учитывается.</div>
  <p>Первый параграф.</p>
  <p>Второй параграф.</p>
  <div>Этот элемент не учитывается.</div>
  <p>Третий параграф.</p>
  <p>Четвёртый параграф.</p>
</div>
```

#### CSS

```css
/\* Нечётные параграфы \*/
p:nth-of-type(2n + 1) {
  color: red;
}

/\* Чётные параграфы \*/
p:nth-of-type(2n) {
  color: blue;
}

/\* Первый параграф \*/
p:nth-of-type(1) {
  font-weight: bold;
}
```

#### Результат

Спецификации
------------

| Specification |
| --- |
| Selectors Level 4 # nth-of-type-pseudo |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `:nth-child`, `:nth-last-of-type`


CSS Text - CSS: каскадные таблицы стилей

CSS Text
========

**CSS Text** – модуль в CSS, который определяет, как совершать манипуляции с текстом, такие как разрыв строки, выравнивание, переносы и преобразование текста.

Справка
-------

### Свойства

* `hanging-punctuation`
* `hyphens`
* `letter-spacing`
* `line-break`
* `overflow-wrap`
* `tab-size`
* `text-align`
* `text-align-last`
* `text-indent`
* `text-justify`
* `text-size-adjust`
* `text-transform` (en-US)
* `white-space`
* `word-break`
* `word-spacing`
Спецификации
------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1  |
| CSS Text Module Level 3  |
| CSS Text Module Level 4  |


direction - CSS: каскадные таблицы стилей

direction
=========

The **`direction`** CSS property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages).

Интерактивный пример
--------------------

Заметьте, что направление текста обычно задано в документе (т.е. с помощью HTML's `dir` attribute (en-US)), а не посредством прямого использования свойства `direction`.

The property sets the base text direction of block-level elements and the direction of embeddings created by the `unicode-bidi` (en-US) property. It also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row.

Unlike the `dir` attribute in HTML, the `direction` property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of rows but not inside of columns.

The `direction` and `unicode-bidi` (en-US) properties are the two only properties which are not affected by the `all` shorthand property.

Syntax
------

```css
/\* Keyword values \*/
direction: ltr;
direction: rtl;

/\* Global values \*/
direction: inherit;
direction: initial;
direction: unset;
```

### Values

`ltr`

Text and other elements go from left to right. This is the default value.

`rtl`

Text and other elements go from right to left.

For the `direction` property to have any effect on inline-level elements, the `unicode-bidi` (en-US) property's value must be `embed` or `override`.

Formal definition
-----------------

|  |  |
| --- | --- |
| Начальное значение | `ltr` |
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | Not animatable |

Formal syntax
-------------
```

direction =
  ltr  | (en-US)
  rtl

```

Examples
--------

### Setting right-to-left direction

```css
blockquote {
  direction: rtl;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Writing Modes Level 4 # direction |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `unicode-bidi` (en-US)
* `writing-mode`


background-color - CSS: каскадные таблицы стилей

background-color
================

CSS-свойство **`background-color`** CSS устанавливает цвет фона элемента.

Интерактивный пример
--------------------

Синтаксис
---------

```css
/\* Словесные значения \*/
background-color: red;

/\* Шестнадцатеричное значение \*/
background-color: #bbff00;

/\* Шестнадцатеричное значение с alpha-каналом \*/
background-color: #11ffee00; /\* 00 - полностью прозрачный \*/
background-color: #11ffeeff; /\* ff - непрозрачный \*/

/\* RGB-значение \*/
background-color: rgb(255, 255, 128);

/\* RGBA-значение или RGB с alpha-каналом \*/
background-color: rgba(117, 190, 218, 0); /\* 0.0 - полностью прозрачный \*/
background-color: rgba(117, 190, 218, 0.5); /\* 0.5 - полупрозрачный \*/
background-color: rgba(117, 190, 218, 1); /\* 1.0 - непрозрачный \*/

/\* HSLA-значение \*/
background-color: hsla(50, 33%, 25%, 0.75);

/\* Специальные словесные значения \*/
background-color: currentColor;
background-color: transparent;

/\* Общие значения \*/
background-color: inherit;
background-color: initial;
background-color: unset;
```

Свойство `background-color` определяется единственным значением `<color>`.

### Значения

`<color>`

Является CSS `<color>`, которое описывает цвет фона. Даже если заданы одно или несколько `background-image`, цвет может отрендерится, если изображения прозрачны.

### Формальный синтаксис
```

background-color =
  <color>

```

Примеры
-------

### HTML

```html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>
```

### CSS

```css
.exampleone {
  background-color: teal;
  color: white;
}

.exampletwo {
  background-color: rgb(153, 102, 153);
  color: rgb(255, 255, 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}
```

### Результат

Проблемы доступности
--------------------

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

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Спецификации
------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-color |

|  |  |
| --- | --- |
| Начальное значение | `transparent` |
| Применяется к | все элементы. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | нет |
| Обработка значения | вычисленный цвет |
| Animation type | цвет |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Множественные фоны
* Тип данных `<color>`
* Другие свойства, связанные с цветом: `color` (en-US), `border-color` (en-US), `outline-color`, `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow`, `caret-color` (en-US), и `column-rule-color`
* Применение цвета к HTML элементам с помощью CSS


Руководство по CSS - CSS: каскадные таблицы стилей

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

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

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

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

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

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

### Стили
```

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

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

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

#### Примеры

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

Больше о примерах: #1 (en-US), #2 (en-US)

### @-правила

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

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

### -

* `--*`
* `-webkit-line-clamp` (en-US)

### A

* `abs()` (en-US)
* `accent-color`
* `acos()` (en-US)
* `:active`
* `additive-symbols (@counter-style)`
* `::after (:after)`
* `align-content`
* `align-items`
* `align-self`
* `align-tracks` (en-US)
* `all`
* `<an-plus-b>`
* `<angle>`
* `<angle-percentage>` (en-US)
* `animation`
* `animation-composition` (en-US)
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-range` (en-US)
* `animation-range-end` (en-US)
* `animation-range-start` (en-US)
* `animation-timeline` (en-US)
* `animation-timing-function`
* `@annotation`
* `:any-link`
* `appearance`
* `ascent-override (@font-face)` (en-US)
* `asin()` (en-US)
* `aspect-ratio` (en-US)
* `atan()` (en-US)
* `atan2()` (en-US)
* `attr()`

### B

* `::backdrop`
* `backdrop-filter`
* `backface-visibility`
* `background`
* `background-attachment`
* `background-blend-mode`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-position-x`
* `background-position-y` (en-US)
* `background-repeat`
* `background-size`
* `base-palette (@font-palette-values)` (en-US)
* `<basic-shape>` (en-US)
* `::before (:before)`
* `:blank`
* `bleed (@page)`
* `<blend-mode>` (en-US)
* `block-size`
* `blur()`
* `border`
* `border-block` (en-US)
* `border-block-color` (en-US)
* `border-block-end` (en-US)
* `border-block-end-color` (en-US)
* `border-block-end-style` (en-US)
* `border-block-end-width` (en-US)
* `border-block-start` (en-US)
* `border-block-start-color` (en-US)
* `border-block-start-style` (en-US)
* `border-block-start-width` (en-US)
* `border-block-style` (en-US)
* `border-block-width` (en-US)
* `border-bottom`
* `border-bottom-color` (en-US)
* `border-bottom-left-radius` (en-US)
* `border-bottom-right-radius` (en-US)
* `border-bottom-style` (en-US)
* `border-bottom-width` (en-US)
* `border-collapse` (en-US)
* `border-color` (en-US)
* `border-end-end-radius` (en-US)
* `border-end-start-radius` (en-US)
* `border-image` (en-US)
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-inline` (en-US)
* `border-inline-color` (en-US)
* `border-inline-end` (en-US)
* `border-inline-end-color` (en-US)
* `border-inline-end-style` (en-US)
* `border-inline-end-width` (en-US)
* `border-inline-start` (en-US)
* `border-inline-start-color` (en-US)
* `border-inline-start-style` (en-US)
* `border-inline-start-width` (en-US)
* `border-inline-style` (en-US)
* `border-inline-width` (en-US)
* `border-left` (en-US)
* `border-left-color` (en-US)
* `border-left-style` (en-US)
* `border-left-width` (en-US)
* `border-radius`
* `border-right` (en-US)
* `border-right-color` (en-US)
* `border-right-style` (en-US)
* `border-right-width` (en-US)
* `border-spacing` (en-US)
* `border-start-end-radius` (en-US)
* `border-start-start-radius` (en-US)
* `border-style` (en-US)
* `border-top` (en-US)
* `border-top-color` (en-US)
* `border-top-left-radius` (en-US)
* `border-top-right-radius` (en-US)
* `border-top-style` (en-US)
* `border-top-width` (en-US)
* `border-width`
* `bottom`
* `@bottom-center`
* `box-decoration-break` (en-US)
* `box-shadow`
* `box-sizing`
* `break-after` (en-US)
* `break-before` (en-US)
* `break-inside` (en-US)
* `brightness()` (en-US)

### C

* `calc()`
* `caption-side` (en-US)
* `caret`
* `caret-color` (en-US)
* `caret-shape`
* `@character-variant`
* `@charset` (en-US)
* `:checked`
* `circle()` (en-US)
* `clamp()`
* `clear`
* `clip` (en-US)
* `clip-path`
* `<color>`
* `color` (en-US)
* `color-scheme`
* `column-count`
* `column-fill`
* `column-gap`
* `column-rule`
* `column-rule-color`
* `column-rule-style`
* `column-rule-width` (en-US)
* `column-span` (en-US)
* `column-width` (en-US)
* `columns` (en-US)
* `conic-gradient()` (en-US)
* `contain` (en-US)
* `contain-intrinsic-block-size` (en-US)
* `contain-intrinsic-height` (en-US)
* `contain-intrinsic-inline-size` (en-US)
* `contain-intrinsic-size` (en-US)
* `contain-intrinsic-width` (en-US)
* `container` (en-US)
* `container-name` (en-US)
* `container-type` (en-US)
* `content`
* `content-visibility` (en-US)
* `contrast()` (en-US)
* `cos()` (en-US)
* `<counter>` (en-US)
* `counter-increment` (en-US)
* `counter-reset` (en-US)
* `counter-set` (en-US)
* `@counter-style`
* `counters()` (en-US)
* `cross-fade()` (en-US)
* `cubic-bezier()` (en-US)
* `::cue`
* `::cue-region` (en-US)
* `:current` (en-US)
* `cursor`
* `<custom-ident>`
* `length#cap`
* `length#ch`
* `length#cm`

### D

* `angle#deg`
* `<dashed-ident>` (en-US)
* `:default`
* `:defined`
* `descent-override (@font-face)` (en-US)
* `<dimension>` (en-US)
* `:dir`
* `direction`
* `:disabled`
* `display`
* `<display-box>` (en-US)
* `<display-inside>` (en-US)
* `<display-internal>` (en-US)
* `<display-legacy>` (en-US)
* `<display-listitem>`
* `<display-outside>`
* `drop-shadow()` (en-US)
* `resolution#dpcm` (en-US)
* `resolution#dpi` (en-US)
* `resolution#dppx` (en-US)

### E

* `<easing-function>` (en-US)
* `element()` (en-US)
* `ellipse()` (en-US)
* `:empty`
* `empty-cells` (en-US)
* `:enabled`
* `env()` (en-US)
* `exp()` (en-US)
* `length#em`
* `length#ex`

### F

* `fallback (@counter-style)` (en-US)
* `filter`
* `<filter-function>`
* `:first`
* `:first-child`
* `::first-letter (:first-letter)`
* `::first-line (:first-line)`
* `:first-of-type`
* `fit-content()` (en-US)
* `<flex>`
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `flex_value#fr`
* `float`
* `:focus`
* `:focus-visible`
* `:focus-within`
* `font`
* `font-display (@font-face)`
* `@font-face`
* `font-family`
* `font-family (@font-face)`
* `font-family (@font-palette-values)` (en-US)
* `font-feature-settings` (en-US)
* `font-feature-settings (@font-face)` (en-US)
* `@font-feature-values`
* `font-kerning` (en-US)
* `font-language-override` (en-US)
* `font-optical-sizing` (en-US)
* `font-palette` (en-US)
* `@font-palette-values` (en-US)
* `font-size`
* `font-size-adjust` (en-US)
* `font-stretch` (en-US)
* `font-stretch (@font-face)` (en-US)
* `font-style`
* `font-style (@font-face)` (en-US)
* `font-synthesis` (en-US)
* `font-synthesis-position` (en-US)
* `font-synthesis-small-caps` (en-US)
* `font-synthesis-style` (en-US)
* `font-synthesis-weight` (en-US)
* `font-variant` (en-US)
* `font-variant-alternates` (en-US)
* `font-variant-caps` (en-US)
* `font-variant-east-asian` (en-US)
* `font-variant-emoji` (en-US)
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position` (en-US)
* `font-variation-settings` (en-US)
* `font-variation-settings (@font-face)` (en-US)
* `font-weight`
* `font-weight (@font-face)` (en-US)
* `forced-color-adjust` (en-US)
* `format()` (en-US)
* `<frequency>` (en-US)
* `<frequency-percentage>` (en-US)
* `:fullscreen`
* `:future` (en-US)

### G

* `angle#grad`
* `gap`
* `<gradient>` (en-US)
* `::grammar-error`
* `grayscale()` (en-US)
* `grid`
* `grid-area`
* `grid-auto-columns` (en-US)
* `grid-auto-flow`
* `grid-auto-rows` (en-US)
* `grid-column`
* `grid-column-end` (en-US)
* `grid-column-start` (en-US)
* `grid-row` (en-US)
* `grid-row-end` (en-US)
* `grid-row-start`
* `grid-template`
* `grid-template-areas`
* `grid-template-columns`
* `grid-template-rows`

### H

* `frequency#Hz` (en-US)
* `hanging-punctuation`
* `:has`
* `height`
* `@historical-forms`
* `:host()`
* `:host-context()`
* `:hover`
* `hsl()`
* `hsla()`
* `hue-rotate()` (en-US)
* `hwb()`
* `hyphenate-character` (en-US)
* `hyphenate-limit-chars` (en-US)
* `hyphens`
* `hypot()` (en-US)

### I

* `<ident>` (en-US)
* `<image>` (en-US)
* `image()` (en-US)
* `image-orientation` (en-US)
* `image-rendering` (en-US)
* `image-resolution` (en-US)
* `image-set()` (en-US)
* `@import` (en-US)
* `:in-range`
* `:indeterminate`
* `inherit`
* `inherits (@property)` (en-US)
* `initial`
* `initial-letter` (en-US)
* `initial-letter-align` (en-US)
* `initial-value (@property)` (en-US)
* `inline-size`
* `input-security`
* `inset`
* `inset()` (en-US)
* `inset-block` (en-US)
* `inset-block-end` (en-US)
* `inset-block-start` (en-US)
* `inset-inline` (en-US)
* `inset-inline-end` (en-US)
* `inset-inline-start` (en-US)
* `<integer>`
* `:invalid`
* `invert()`
* `:is`
* `isolation`
* `length#ic`
* `length#in`

### J

* `justify-content`
* `justify-items`
* `justify-self` (en-US)
* `justify-tracks` (en-US)

### K

* `frequency#kHz` (en-US)
* `@keyframes` (en-US)

### L

* `lab()`
* `:lang`
* `:last-child`
* `:last-of-type`
* `@layer`
* `layer()`
* `layer() (@import)`
* `lch()`
* `leader()`
* `:left`
* `left` (en-US)
* `@left-bottom`
* `<length>`
* `<length-percentage>` (en-US)
* `letter-spacing`
* `light-dark()`
* `line-break`
* `line-clamp`
* `line-gap-override (@font-face)` (en-US)
* `line-height`
* `line-height-step` (en-US)
* `<line-style>` (en-US)
* `linear-gradient()` (en-US)
* `:link`
* `list-style` (en-US)
* `list-style-image`
* `list-style-position` (en-US)
* `list-style-type` (en-US)
* `local()` (en-US)
* `:local-link` (en-US)
* `log()` (en-US)

### M

* `length#mm`
* `margin`
* `margin-block` (en-US)
* `margin-block-end` (en-US)
* `margin-block-start` (en-US)
* `margin-bottom`
* `margin-inline` (en-US)
* `margin-inline-end`
* `margin-inline-start`
* `margin-left`
* `margin-right`
* `margin-top`
* `margin-trim` (en-US)
* `::marker`
* `marks (@page)`
* `mask` (en-US)
* `mask-border` (en-US)
* `mask-border-mode` (en-US)
* `mask-border-outset` (en-US)
* `mask-border-repeat` (en-US)
* `mask-border-slice` (en-US)
* `mask-border-source` (en-US)
* `mask-border-width` (en-US)
* `mask-clip` (en-US)
* `mask-composite` (en-US)
* `mask-image` (en-US)
* `mask-mode` (en-US)
* `mask-origin` (en-US)
* `mask-position` (en-US)
* `mask-repeat` (en-US)
* `mask-size` (en-US)
* `mask-type` (en-US)
* `masonry-auto-flow` (en-US)
* `math-depth` (en-US)
* `math-shift` (en-US)
* `math-style` (en-US)
* `matrix()` (en-US)
* `matrix3d()` (en-US)
* `max()` (en-US)
* `max-block-size`
* `max-height`
* `max-inline-size` (en-US)
* `max-lines`
* `max-width`
* `@media`
* `min()` (en-US)
* `min-block-size` (en-US)
* `min-height`
* `min-inline-size` (en-US)
* `min-width`
* `minmax()`
* `mix-blend-mode`
* `mod()` (en-US)
* `time#ms`

### N

* `@namespace`
* `negative (@counter-style)` (en-US)
* `:not`
* `:nth-child`
* `:nth-last-child`
* `:nth-last-of-type`
* `:nth-of-type`
* `<number>`

### O

* `object-fit`
* `object-position`
* `offset` (en-US)
* `offset-anchor` (en-US)
* `offset-distance` (en-US)
* `offset-path` (en-US)
* `offset-position` (en-US)
* `offset-rotate` (en-US)
* `:only-child`
* `:only-of-type`
* `opacity`
* `opacity()` (en-US)
* `:optional`
* `order`
* `@ornaments`
* `orphans`
* `:out-of-range`
* `outline`
* `outline-color`
* `outline-offset`
* `outline-style`
* `outline-width`
* `<overflow>`
* `overflow-anchor` (en-US)
* `overflow-block`
* `overflow-clip-margin` (en-US)
* `overflow-inline` (en-US)
* `overflow-wrap`
* `overflow-x` (en-US)
* `overflow-y` (en-US)
* `overlay` (en-US)
* `override-colors (@font-palette-values)` (en-US)
* `overscroll-behavior`
* `overscroll-behavior-block` (en-US)
* `overscroll-behavior-inline` (en-US)
* `overscroll-behavior-x` (en-US)
* `overscroll-behavior-y` (en-US)

### P

* `Pseudo-classes`
* `Pseudo-elements`
* `length#pc`
* `length#pt`
* `length#px`
* `pad (@counter-style)` (en-US)
* `padding`
* `padding-block` (en-US)
* `padding-block-end` (en-US)
* `padding-block-start` (en-US)
* `padding-bottom` (en-US)
* `padding-inline` (en-US)
* `padding-inline-end` (en-US)
* `padding-inline-start` (en-US)
* `padding-left`
* `padding-right`
* `padding-top` (en-US)
* `@page`
* `page` (en-US)
* `page-break-after` (en-US)
* `page-break-before` (en-US)
* `page-break-inside` (en-US)
* `page-orientation (@page)` (en-US)
* `paint()` (en-US)
* `paint-order`
* `::part` (en-US)
* `:past` (en-US)
* `path()` (en-US)
* `:paused` (en-US)
* `<percentage>`
* `perspective`
* `perspective()` (en-US)
* `perspective-origin` (en-US)
* `:picture-in-picture` (en-US)
* `place-content` (en-US)
* `place-items`
* `place-self` (en-US)
* `::placeholder`
* `:placeholder-shown`
* `:playing` (en-US)
* `pointer-events`
* `polygon()` (en-US)
* `<position>` (en-US)
* `position`
* `pow()` (en-US)
* `prefix (@counter-style)` (en-US)
* `print-color-adjust` (en-US)
* `@property` (en-US)

### Q

* `length#Q`
* `quotes` (en-US)

### R

* `angle#rad`
* `length#rem`
* `radial-gradient()` (en-US)
* `range (@counter-style)` (en-US)
* `<ratio>`
* `ray()` (en-US)
* `:read-only`
* `:read-write`
* `rect()` (en-US)
* `rem()` (en-US)
* `repeat()` (en-US)
* `repeating-conic-gradient()` (en-US)
* `repeating-linear-gradient()` (en-US)
* `repeating-radial-gradient()` (en-US)
* `:required`
* `resize` (en-US)
* `<resolution>` (en-US)
* `reversed()`
* `revert`
* `rgb()`
* `rgba()`
* `:right`
* `right`
* `@right-bottom`
* `:root`
* `rotate` (en-US)
* `rotate()`
* `rotate3d()`
* `rotateX()` (en-US)
* `rotateY()` (en-US)
* `rotateZ()` (en-US)
* `round()` (en-US)
* `row-gap`
* `ruby-align`
* `ruby-merge`
* `ruby-position` (en-US)

### S

* `saturate()` (en-US)
* `scale` (en-US)
* `scale()` (en-US)
* `scale3d()`
* `scaleX()` (en-US)
* `scaleY()` (en-US)
* `scaleZ()` (en-US)
* `:scope` (en-US)
* `@scope` (en-US)
* `scroll()` (en-US)
* `scroll-behavior`
* `scroll-margin` (en-US)
* `scroll-margin-block` (en-US)
* `scroll-margin-block-end` (en-US)
* `scroll-margin-block-start` (en-US)
* `scroll-margin-bottom` (en-US)
* `scroll-margin-inline` (en-US)
* `scroll-margin-inline-end` (en-US)
* `scroll-margin-inline-start` (en-US)
* `scroll-margin-left` (en-US)
* `scroll-margin-right` (en-US)
* `scroll-margin-top` (en-US)
* `scroll-padding` (en-US)
* `scroll-padding-block` (en-US)
* `scroll-padding-block-end` (en-US)
* `scroll-padding-block-start` (en-US)
* `scroll-padding-bottom` (en-US)
* `scroll-padding-inline` (en-US)
* `scroll-padding-inline-end` (en-US)
* `scroll-padding-inline-start` (en-US)
* `scroll-padding-left` (en-US)
* `scroll-padding-right` (en-US)
* `scroll-padding-top` (en-US)
* `scroll-snap-align` (en-US)
* `scroll-snap-stop` (en-US)
* `scroll-snap-type`
* `scroll-timeline` (en-US)
* `scroll-timeline-axis` (en-US)
* `scroll-timeline-name` (en-US)
* `scrollbar-color` (en-US)
* `scrollbar-gutter` (en-US)
* `scrollbar-width` (en-US)
* `::selection`
* `selector()`
* `sepia()` (en-US)
* `<shape>` (en-US)
* `shape-image-threshold` (en-US)
* `shape-margin` (en-US)
* `shape-outside` (en-US)
* `sign()` (en-US)
* `sin()` (en-US)
* `size (@page)` (en-US)
* `size-adjust (@font-face)` (en-US)
* `skew()`
* `skewX()` (en-US)
* `skewY()` (en-US)
* `::slotted`
* `speak-as (@counter-style)` (en-US)
* `::spelling-error` (en-US)
* `sqrt()` (en-US)
* `src (@font-face)` (en-US)
* `@starting-style` (en-US)
* `steps()` (en-US)
* `<string>` (en-US)
* `@styleset`
* `@stylistic`
* `suffix (@counter-style)` (en-US)
* `@supports`
* `supports() (@import)`
* `@swash`
* `symbols (@counter-style)` (en-US)
* `symbols()` (en-US)
* `syntax (@property)` (en-US)
* `system (@counter-style)` (en-US)
* `time#s`

### T

* `angle#turn`
* `tab-size`
* `table-layout` (en-US)
* `tan()` (en-US)
* `:target`
* `target-counter()`
* `target-counters()`
* `::target-text` (en-US)
* `target-text()`
* `:target-within` (en-US)
* `text-align`
* `text-align-last`
* `text-combine-upright` (en-US)
* `text-decoration` (en-US)
* `text-decoration-color` (en-US)
* `text-decoration-line` (en-US)
* `text-decoration-skip`
* `text-decoration-skip-ink` (en-US)
* `text-decoration-style` (en-US)
* `text-decoration-thickness` (en-US)
* `text-emphasis` (en-US)
* `text-emphasis-color` (en-US)
* `text-emphasis-position` (en-US)
* `text-emphasis-style` (en-US)
* `text-indent`
* `text-justify`
* `text-orientation` (en-US)
* `text-overflow` (en-US)
* `text-rendering` (en-US)
* `text-shadow`
* `text-size-adjust`
* `text-transform` (en-US)
* `text-underline-offset` (en-US)
* `text-underline-position` (en-US)
* `text-wrap` (en-US)
* `<time>`
* `<time-percentage>` (en-US)
* `timeline-scope` (en-US)
* `top`
* `@top-center`
* `touch-action`
* `transform`
* `transform-box` (en-US)
* `<transform-function>` (en-US)
* `transform-origin` (en-US)
* `transform-style`
* `transition`
* `transition-behavior` (en-US)
* `transition-delay` (en-US)
* `transition-duration`
* `transition-property` (en-US)
* `transition-timing-function` (en-US)
* `translate` (en-US)
* `translate()` (en-US)
* `translate3d()` (en-US)
* `translateX()` (en-US)
* `translateY()` (en-US)
* `translateZ()` (en-US)
* `type()`

### U

* `unicode-bidi` (en-US)
* `unicode-range (@font-face)` (en-US)
* `unset` (en-US)
* `<url>` (en-US)
* `url()` (en-US)
* `:user-invalid` (en-US)
* `user-select`
* `:user-valid` (en-US)

### V

* `length#vh`
* `length#vmax`
* `length#vmin`
* `length#vw`
* `:valid`
* `var()`
* `vertical-align`
* `view()`
* `view-timeline` (en-US)
* `view-timeline-axis` (en-US)
* `view-timeline-inset` (en-US)
* `view-timeline-name` (en-US)
* `::view-transition` (en-US)
* `::view-transition-group` (en-US)
* `::view-transition-image-pair` (en-US)
* `view-transition-name` (en-US)
* `::view-transition-new` (en-US)
* `::view-transition-old` (en-US)
* `visibility`
* `:visited`

### W

* `:where`
* `white-space`
* `white-space-collapse` (en-US)
* `widows`
* `width`
* `will-change`
* `word-break`
* `word-spacing`
* `word-wrap` (en-US)
* `writing-mode`

### X

* `resolution#x` (en-US)

### Z

* `z-index`

### Others

* `--*`

Селекторы
---------

* Базовые селекторы
    + По тегу `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` (en-US)
    Экспериментальная возможность
    + `::grammar-error`
    Экспериментальная возможность
* Псевдоклассы (больше информации)
    + `:active`
    + `:any` (en-US)
    + `: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` (en-US)
    + `:target`
    + `:valid`
    + `:visited`

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

Обучение CSS3
-------------

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

* Медиавыражения (en-US)
* Счётчики (en-US)
* Градиенты (en-US)
* Трансформации (en-US)
* Анимации (en-US)
* Переходы (en-US)
* Множественные фоны (en-US)
* Flexbox (en-US)
* Многоколоночные макеты
Концепции
---------

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

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

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

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

* `CSSStyleSheet.insertRule` (en-US)
* `CSSStyleSheet.deleteRule` (en-US)


outline-offset - CSS: каскадные таблицы стилей

outline-offset
==============

CSS-свойство **`outline-offset`** задаёт расстояние между обводкой и краем или рамкой элемента.

Интерактивный пример
--------------------

Синтаксис
---------

```css
/\* Значения <length> \*/
outline-offset: 3px;
outline-offset: 0.2em;

/\* Глобальные значения \*/
outline-offset: inherit;
outline-offset: initial;
outline-offset: revert;
outline-offset: revert-layer;
outline-offset: unset;
```

### Значения

``<length>``

Размер расстояния между элементом и его обводкой. При отрицательном значении обводка располагается внутри элемента. Значение `0` размещает обводку вплотную к элементу.

Описание
--------

Обводка — это линия вокруг элемента за пределами рамки. Расстояние между элементом и его обводкой прозрачно. Другими словами, оно будет таким же, как и фон родительского элемента.

Формальное определение
----------------------

|  |  |
| --- | --- |
| Начальное значение | `0` |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как указано, но с относительной длиной, конвертируемой в абсолютные длины |
| Animation type | длина |

Формальный синтаксис
--------------------
```

outline-offset =
  <length>

```

Примеры
-------

### Расстояние обводки в пикселях

#### HTML

```html
<p>Gallia est omnis divisa in partes tres.</p>
```

#### CSS

```css
p {
  outline: 1px dashed red;
  outline-offset: 10px;
  background: yellow;
  border: 1px solid blue;
  margin: 15px;
}
```

#### Результат

Спецификации
------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-offset |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `outline`
* `outline-color`
* `outline-style`
* `outline-width`


:dir() - CSS: каскадные таблицы стилей

:dir()
======

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

**`:dir()`** — это псевдокласс CSS, который выбирает элементы на основе направления текста в них.

```css
/\* Выбирает все элементы с текстом справа-налево \*/
:dir(rtl) {
  background-color: red;
}
```

`:dir()` учитывает только *семантическое* направление, т.е. заданное в самом документе. Он не учитывает *стилизованное* направление, т.е. заданное CSS-правилами, например `direction`.

**Примечание:** помните о том, что псевдокласс `:dir()` **не эквивалентен** выбору по атрибуту `[dir=…]`. Последний применяется только к тем элементам HTML, у которых есть атрибут `dir`, игнорируя те, у которых он не задан — даже если они унаследовали его значение. (Похожим образом `[dir=rtl]` и `[dir=ltr]` не будут включать `auto`.) `:dir()`, же, напротив, соответствует значению вычисленному user agent, даже унаследованному.

**Примечание:** В HTML, направление задаётся атрибутом `dir`. В других форматах могут использоваться иные методы.

Синтаксис
---------

`:dir()` требует одного параметра, представляющего желаемое направление.

### Parameters

`ltr`

Выбирает элементы с направлением текста слева-направо.

`rtl`

Выбирает элементы с направлением текста справа-налево.

### Formal syntax

Error: could not find syntax for this itemПример
------

### HTML

```html
<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">
    test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>
```

### CSS

```css
:dir(ltr) {
  background-color: yellow;
}

:dir(rtl) {
  background-color: powderblue;
}
```

### Result

Спецификации
------------

| Specification |
| --- |
| HTML Standard # selector-ltr |
| Selectors Level 4 # the-dir-pseudo |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Языково-специфичные селекторы CSS: `:lang`, `:dir`


animation-play-state - CSS: каскадные таблицы стилей

animation-play-state
====================

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Описание
--------

Свойство **`animation-play-state`** определяет состояние анимации, паузы или проигрыша. Это можно использовать, чтобы определить текущее состояние анимации, например, в скриптах.

Если возобновить приостановленную анимацию, то она запустит её с того места, где она была поставлена на паузу, а не начнётся с начала.

|  |  |
| --- | --- |
| Начальное значение | `running` |
| Применяется к | все элементы, `::before` и `::after` псевдоэлементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | Not animatable |

Синтаксис
---------

```css
/\* Одна анимация \*/
animation-play-state: running;
animation-play-state: paused;

/\* Несколько анимаций \*/
animation-play-state: paused, running, running;

/\* Глобальные значения \*/
animation-play-state: inherited;
animation-play-state: initial;
animation-play-state: unset;
```

### Значения

`running`

Анимация проигрывается.

`paused`

Анимация поставлена на паузу.

### Формальный синтаксис
```

animation-play-state =
  <single-animation-play-state># (en-US)

<single-animation-play-state> =
  running  | (en-US)
  paused

```

Примеры
-------

См. CSS animations.

Спецификации
------------

| Specification |
| --- |
| CSS Animations Level 1 # animation-play-state |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Использование CSS-анимаций
* `AnimationEvent`


Синтаксис - CSS: каскадные таблицы стилей

Синтаксис
=========

Основная задача Каскадных Стилей — это рассказать движку браузера, как отрисовать элементы страницы — каким цветом, как позиционировать их на странице, как украшать, и так далее. Синтаксис CSS построен следуя этой идее, и состоит из следующих основных блоков:
* **Свойство** (*property*) — идентификатор действия, которое будет применено к элементу (например, цвет, или размер границы, и т.д.).
* **Значение** (*value*) — описывает, как именно *свойство* будет обработано браузером. Каждое свойство имеет набор допустимых значений, определённых формальными правилами, а также семантический смысл, реализованный движком браузера.
Объявления CSS
--------------

Задание CSS-свойствам определённых значений — это основная функция CSS. Пара свойство-значение называется *объявлением*. Работа CSS движка заключается в поиске соответствий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.

И свойство, и значения регистрозависимы. Пара свойство-значение разделяется двоеточием, '`:`' (`U+003A COLON`), а пробелы до, между и после свойства или значения игнорируются.

![css syntax - declaration.png](/ru/docs/Web/CSS/Syntax/css_syntax_-_declaration.png)

В CSS существует более ста различных свойств, и бесконечное число допустимых значений. Не все пары свойств и значений допускаются, и каждое свойство определяет, каковы допустимые значения. Когда значение не подходит для данного свойства, объявление считается недействительной и целиком игнорируются CSS-движком.

Блоки объявлений CSS
--------------------

Объявления группируются в **блоки**, структура которых состоит из открывающейся , '`{`' (`U+007B LEFT CURLY BRACKET`), и закрывающейся, '`}`' (`U+007D RIGHT CURLY BRACKET`) фигурных скобок.

![](/ru/docs/Web/CSS/Syntax/css_syntax_-_block.png)

Такие блоки называются **блоками объявлений**, и объявления в них разделяются точкой с запятой, '`;`' (`U+003B SEMICOLON`). Блок объявлений может быть пустым, т.е. не содержать объявлений. Пробелы между объявлениями игнорируются. Последнее объявление блока не нуждается в точке с запятой, хотя считается хорошим тоном добавить её для того, чтобы не допустить упущение этого знака при добавлении другого объявления в будущем.

![](/ru/docs/Web/CSS/Syntax/css_syntax_-_declaration.png)

**Примечание:** Содержимое блока объявлений CSS, т. е. объявления, разделённые точкой с запятой. Блок объявлений может быть помещён внутри атрибута style HTML-документа без фигурных скобок.

CSS rulesets
------------

If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.

CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by a *selector* which is a condition selecting some elements of the page. The pair selector-declarations block is called a **ruleset**, or often simply a **rule**.

![](/ru/docs/Web/CSS/Syntax/ruleset.png)

As an element of the page may be matched by several selectors, and therefore by several rules eventually containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the cascade algorithm.

**Примечание:** It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.

This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole *selector* is invalid and therefor the entire rule is ignored (as invalid too).

CSS statements
--------------

Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.

A **statement** is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).

![](/ru/docs/Web/CSS/Syntax/css_syntax_-_statements_venn_diag.png)

There are different kinds of statements:

* **Rulesets** (or *rules*) that, as seen, associate a collection of CSS declarations to a condition described by a selector.
* **At-rules** that start with an at sign, '`@`' (`U+0040 COMMERCIAL AT`), followed by an identifier and then continuing up the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of at-rules, defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like `@charset` (en-US) or `@import` (en-US)), conditional information (like `@media` or `@document`), or descriptive information (like `@font-face`).

Any statement which isn't a rule or an at-rule is invalid and ignored.

There is another group of statements, the **nested statements**, these are statements that can be used in a specific subset of at-rules, the *conditional group rules*. These statements only apply if a specific condition is matched: the `@media` at-rule content is applied only if the device on which runs the browser matches the expressed condition; the `@document` at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only *rulesets* could be used inside a conditional group rules. That was very restrictive and this restriction was lifted in *CSS Conditionals Level 3*. Now, though it still is experimental and not supported by every browser, a conditional group rules can contain a wider range of content, rulesets but also some, but not all, at-rules.

See also
--------

* Ключевые концепции CSS
    + Синтаксис CSS
    + @-правила
    + комментарии
    + специфичность
    + наследование
    + блочная модель
    + режимы компоновки
    + модели визуального форматирования
    + Схлопывание отступов
    + Значения
        - начальные
        - вычисленные
        - используемые
        - действительные
    + Синтаксис определения значений (en-US)
    + Сокращённые свойства
    + Замещаемые элементы


Кастомные CSS свойства - CSS: каскадные таблицы стилей

Кастомные CSS свойства
======================

**Кастомные CSS свойства** – модуль CSS, который позволяет создавать переиспользуемые переменные (кастомные свойства).

Справка
-------

### Свойства

* `--*`
Спецификации
------------

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1  |