recursal/MDN huggingface dataset:
Селектор потомков
=================

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

Комбинатор " " (пробел) представляет собой 2 или более селекторов, найдёт элементы соответствующие обоим селекторам. Селекторы по потомкам похожи на селекторы дочерних элементов, но они не учитывают вложенность элементов и применяют свои свойства ко всем элементам данного типа, находящимся внутри родительского элемента, независимо от глубины вложенности.

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

selector1 selector2 {стили }
```

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


```css
span {
  background-color: white;
}
div span {
  background-color: DodgerBlue;
}
```



```html
<div>
  <span
 >Span 1
    <span>Span 2</span>
  </span>
</div>
<span>Span 3</span>
```

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

| Specification |
| --- |
| Selectors Level 4 # descendant-combinators |

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

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

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
CSS свойство **`order`** определяет порядок, используемый для размещения flex элементов в их flex контейнере. Элементы располагаются в восходящем порядке по значению `order`. Элементы с одинаковым значением `order` располагаются в том порядке, в каком они находятся в исходном коде.

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

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


```css
/\* Числовые значения, в том числе отрицательные \*/
order: 5;
order: -5;

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


**Примечание:** `order` воздействует только на **визуальный порядок** элементов, но не логический порядок или табуляцию. **`order`** не должен применяться к невизуальным медиаданным, таким как речь.

Посмотрите Используем CSS flexible boxes (en-US) для более подробной информации и дополнительных свойствах.

### Значения

`<integer>`

Представляет порядковую группу, которая присвоена flex элементу.

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

order =   
  [ (en-US) <'layout-order'> <'reading-order'>? (en-US) ] (en-US)  | (en-US)  
  [ (en-US) [ (en-US) reading || (en-US) layout ] (en-US) && (en-US) <integer> ] (en-US)     
  
```

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

Имеется базовый отрывок HTML кода:


```html
<header>...</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>...</footer>
```


Следующий CSS код должен создать классический блок контента окружённый боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.


```css
main {
  display: flex;
  text-align: center;
}
main > article {
  flex: 1;
  order: 2;
}
main > nav {
  width: 200px;
  order: 1;
}
main > aside {
  width: 200px;
  order: 3;
}
```

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

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

| Specification |
| --- |
| CSS Display Module Level 3 # order-property |

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

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

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

* Используя CSS flexible boxes
tab-size
========

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

CSS-свойство **`tab-size`** используется для настройки ширины символа табуляции (`U+0009`).


```css
/\* <integer> значения \*/
tab-size: 4;
tab-size: 0;

/\* <length> значения \*/
tab-size: 10px;
tab-size: 2em;

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


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

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

### Значения

`<integer>`

Количество пробелов в табе. Должно быть неотрицательным.

`<length>`

Ширина таба. Должно быть неотрицательным.

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

tab-size =   
  <number [0,∞]>  | (en-US)  
  <length [0,∞]>    
  
```

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


```css
pre {
  tab-size: 4; /\* Установит размер таба в 4 пробела \*/
}
```



```css
pre {
  tab-size: 0; /\* Удалит отступ \*/
}
```



```css
pre {
  tab-size: 2; /\* Установит размер таба в 2 пробела \*/
}
```

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

| Specification |
| --- |
| CSS Text Module Level 3 # tab-size-property |

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

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

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

* Управление размером символа табуляции (U+0009), электронное письмо Anne van Kesteren в CSSWG.
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
======

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

`Псевдокласс` `: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-свойства - используемое после всех приближений значение. Например, браузер может отображать рамки только с целым значением пикселей и будет принудительно округлять ширину.

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

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

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

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

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

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

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

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

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

Чаще, удобнее использовать общее свойство `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 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  |