recursal/MDN huggingface dataset:
padding-left
============

Свойство CSS **`padding-left`** определяет ширину левого внутреннего отступа элемента.

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

Внутренний отступ элемента (англ. "padding") - это пространство между его содержимым и его границей.

**Примечание:** Свойство `padding` можно использовать для установки внутренних отступов на всех четырёх сторонах элемента одним значением.

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


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

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

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

### Значения

`<length>`

Фиксированный размер заполнения отступа. Не может быть отрицательным.

`<percentage>`

Размер заполнения зависит от ширины блока. Не может быть отрицательным.

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

padding-left =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      | (en-US)  
  <percentage>    
  
```

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


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

Определения
-----------

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

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

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

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

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 тип данных **`<flex>`** определяет гибкую длину в сеточном контейнере. Он используется в таких свойствах, как `grid-template-columns`, `grid-template-rows`.

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

Тип данных `<flex>` определяется как `<number>` с единицей измерения `fr`. Единица измерения `fr` представляет собой долю оставшегося в сетке пространства. Как и все CSS размеры, между числом и единицей измерения нет пробела.

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


```css
1fr    /\* Целочисленное значение \*/
2.5fr  /\* Дробное значение \*/
```

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # fr-unit |

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

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

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

* CSS Grid Layout
column-rule
===========

Краткая форма записи CSS свойств **`column-rule`** устанавливает ширину, стиль и цвет линии, находящейся между колонками в мультиколоночной вёрстке.

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

Эта краткая форма записи задаёт индивидуальные `column-rule-*` свойства, обычно задаваемые: `column-rule-width` (en-US), `column-rule-style`, и `column-rule-color`.

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

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


```css
column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;

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


Свойство `column-rule` указывается в виде одного, двух или трёх значений, перечисленных ниже, в любом порядке.

### Значения

`<'column-rule-width'>`

`<length>` или одно из трёх ключевых свойств, `thin`, `medium`, или `thick`. См. подробно - `border-width`.

`<'column-rule-style'>`

См. подробно `border-style` (en-US) .

`<'column-rule-color'>`

Значение `<color>` .

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

column-rule =   
  <'column-rule-width'>  || (en-US)  
  <'column-rule-style'>  || (en-US)  
  <'column-rule-color'>    
  
```

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

### Example 1


```css
/\* Аналогично "medium dotted currentColor" \*/
p.foo {
  column-rule: dotted;
}

/\* Аналогично "medium solid blue" \*/
p.bar {
  column-rule: solid blue;
}

/\* Аналогично "8px solid currentColor" \*/
p.baz {
  column-rule: solid 8px;
}

p.abc {
  column-rule: thick inset blue;
}
```

### Example 2

#### HTML


```html
<p class="content-box">
  This is a bunch of text split into three columns. Take note of how the
  `column-rule` property is used to adjust the style, width, and color of the
  rule that appears between the columns.
</p>
```


#### CSS


```css
.content-box {
  padding: 0.3em;
  background: #ff7;
  column-count: 3;
  column-rule: inset 2px #33f;
}
```


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

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # column-rule |

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `column-rule-width` (en-US): `medium`
* `column-rule-style`: `none`
* `column-rule-color`: `currentcolor`
 |
| Применяется к | мультиколоночные элементы |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `column-rule-color`: вычисленный цвет
* `column-rule-style`: как указано
* `column-rule-width` (en-US): абсолютная длина; `0`, если `column-rule-style` - `none` или `hidden`
 |
| Animation type | как и у каждого из подсвойств этого свойства:* `column-rule-color`: цвет
* `column-rule-style`: discrete
* `column-rule-width` (en-US): длина
 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
::grammar-error
===============

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

CSS псевдо-элемент **`::grammar-error`** представляет сегмент текста, который user agent пометил как грамматически неверный.

Доступные свойства
------------------

Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом `::grammar-error` :

* `color` (en-US)
* `background-color`
* `cursor`
* `caret-color` (en-US)
* `outline` и его полные формы
* `text-decoration` (en-US) и связанные свойства
* `text-emphasis-color` (en-US)
* `text-shadow`
Синтаксис
---------
```

::grammar-error
```

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

### Простая проверка грамматики документа

В этом примере браузеры, поддерживающие псевдоэлемент, выделят грамматические ошибки, применив к ним заданные стили.

#### HTML


```html
<p>My friends is coming to the party tonight.</p>
```


#### CSS


```css
::grammar-error {
  text-decoration: underline red;
  color: red;
}
```


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

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-grammar-error |

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

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

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

* `::spelling-error` (en-US)
Поточная раскладка CSS
======================

*Нормальный поток (normal flow)* или поточная раскладка (flow layout), это способ отображения блочных (block) и строчных (inline) элементов на странице. Сначала раскладка этих элементов происходит согласно правилам потока, после чего в неё могут быть внесены изменения, например, относительное позиционирование.

По сути поток представляется собой набор сущностей, которые работают вместе и знают друг о друге. Когда некоторая сущность *вынимается из потока (out of flow)*, то она работает независимо.

В нормальном потоке **строчные (inline)** элементы отображаются в направлении строки (inline direction), то есть в том же направлении, как идут слова в предложении в соответствии с режимом письма (writing mode) документа. **Блочные (block)** элементы отображаются один за другим, также как параграфы в соответствии с режимом письма документа. Поэтому в английском языке строчные элементы отображаются один за другим, начиная слева, а блочные элементы выкладываются на странице сверху вниз.

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

Следующий пример показывает боксы уровня блока (block level) и уровня строки (inline level). Боксы уровня блока участвуют в блочном контексте форматирования, а боксы уровня строки в строчном контексте форматирования.

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

Первое предложение также содержит элемент span с голубым фоном. Он создаёт бокс уровня строки и, следовательно, размещается внутри предложения.

Руководства
-----------

* Блочная и строчная раскладки в нормальном потоке (Block and Inline Layout in Normal Flow (en-US)).
* В потоке и вне потока (In Flow and Out of Flow (en-US)).
* Объяснение контекстов форматирования (Formatting Contexts Explained (en-US)).
* Поточная раскладка и режимы письма (Flow Layout and Writing Modes (en-US)).
* Поточная раскладка и переполнение (Flow Layout and Overflow (en-US)).
Ссылки
------

### Записи глоссария

* Block (CSS)

1. CSS
2. CSS Reference
@page
=====

Правило CSS **`@page`** используется для модификации некоторых свойств CSS при печати документа. Вы не можете изменить все CSS-свойства с `@page`. Вы можете изменить только margin, orphans, widows, и разрывы страницы документа. Попытки изменить любые другие свойства CSS будут игнорироваться.


```css
@page {
  margin: 1cm;
}

@page :first {
  margin: 2cm;
}
```


Правило `@page` доступно через интерфейс объектной модели CSS `CSSPageRule` (en-US).

**Примечание:** В W3C обсуждают, как обрабатывать связанные с областью просмотра единицы `<length>` такие как, `vh`, `vw`, `vmin`, и `vmax`. Тем временем не используя их с правилом `@page`.

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

### Дескрипторы

`size` (en-US)

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


`marks`

Добавляет обрезку и/или регистрационные отметки в документ.


`bleed`

Определяет степень заступа за пределы поля страницы, при котором отображаемая область страницы отрезается.

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

@page =   
  @page <page-selector-list>? (en-US) { <declaration-rule-list> }    
  
<page-selector-list> =   
  <page-selector># (en-US)    
  
<page-selector> =   
  [ (en-US) <ident-token>? (en-US) <pseudo-page>\* (en-US) ]!    
  
<pseudo-page> =   
  ':' [ (en-US) left | (en-US) right | (en-US) first | (en-US) blank ] (en-US)    
  
```

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

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

* `:blank`
* `:first`
* `:left`
* `:right`
* `:recto` 
Экспериментальная возможность
* `:verso` 
Экспериментальная возможность
Спецификации
------------

| Specification |
| --- |
| CSS Paged Media Module Level 3 # at-page-rule |
| CSS Logical Properties and Values Level 1 # page |

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

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

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

* Смотрите тикет [META] CSS Paged Media Module Level 3 в Bugzilla для отслеживания прогресса по теме (базовый страничный счётчик, и т.д.)
animation-duration
==================

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

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

Свойство **`animation-duration`** устанавливает длительность анимации во времени за один цикл.

Значение по умолчанию **`0s`** определяет, что анимация не должна выполняться.

Удобно использовать сокращённое свойство `animation` чтобы установить сразу все свойства анимации.

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

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


```css
animation-duration: 6s;
animation-duration: 120ms;
animation-duration: 1s, 15s;
animation-duration: 10s, 30s, 230ms;
```

### Примеры

`<time>`

Длительность анимации определяется в секундах `s` или в миллисекундах `ms`. По умолчанию стоит значение `0s`. Отрицательные значения являются недействительными.


**Примечание:** Отрицательные значения являются недействительными и отменяют объявление. Некоторые старые реализации считают отрицательные значения равнозначными `0s`.

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

animation-duration =   
  <time [0s,∞]># (en-US)    
  
```

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

Смотрите для примеров CSS-анимации.

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-duration |

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

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

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

* Использование CSS-анимации
* `AnimationEvent`
:last-child
===========

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

CSS псевдокласс `:last-child` находит любой элемент, являющийся последним в его родителе.

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

element:last-child { style properties }
```

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

### HTML


```html
<ul>
  <li>Этот элемент не лаймовый.</li>
  <li>И этот тоже.</li>
  <li>А этот да! :)</li>
</ul>
```

### CSS


```css
li:last-child {
  background-color: lime;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # the-last-child-pseudo |

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

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

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

* `:first-child`
* `:nth-child`
* `:last-of-type`
:in-range
=========

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

CSS псевдокласс `:in-range` находит элементы, значение которых соответствует указанному для них диапазону ограничений. Он позволяет странице показывать, когда значение элемента находится в допустимом диапазоне.

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

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

### HTML


```html
<form action="" id="form1">
    <ul>Приминаются значения между 1 и 10.
        <li>
            <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
            <label for="value1">Ваше значение </label>
        </li>
</form>
```

### CSS


```css
li {
  list-style: none;
  margin-bottom: 1em;
}
input {
  border: 1px solid black;
}
input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}
input:in-range + label::after {
  content: " НОРМАЛЬНОЕ";
}
input:out-of-range + label::after {
  content: "вне диапазона!";
}
```

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

| Specification |
| --- |
| HTML Standard # selector-in-range |
| Selectors Level 4 # in-range-pseudo |

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

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

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

* `:out-of-range`
* Руководство валидации данных в формах (en-US)
text-align-last
===============

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

Кратко
------

`text-align-last` CSS-свойство описывает как выравнивается последняя строка в блоке или строка, идущая сразу перед принудительным разрывом строки.

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

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

Formal syntax (en-US): 
```

text-align-last =   
  auto          | (en-US)  
  start         | (en-US)  
  end           | (en-US)  
  left          | (en-US)  
  right         | (en-US)  
  center        | (en-US)  
  justify       | (en-US)  
  match-parent    
  
```



```css
text-align-last: auto
text-align-last: start
text-align-last: end
text-align-last: left
text-align-last: right
text-align-last: center
text-align-last: justify

text-align-last: inherit
```

### Значения

`auto`

Затронутая строка выравнивается в зависимости от значения `text-align`, за исключением `text-align` со значением `justify`, в этом случае эффект такой же как установить `text-align-last` равным `left`.

`start`

Подобно `left` если направление слева направо, и `right` если направление справа налево.

`end`

Подобно `right` если направление слева направо, и `left` если направление справа налево.

`left`

Линейное содержимое выравнивается по левому краю линейного блока.

`right`

Линейное содержимое выравнивается по правому краю линейного блока.

`center`

Линейное содержимое центрируется внутри линейного блока.

`justify`

Текст выравнивается по ширине. Тексту следует выстраивать свои левые и правые границы по левым и правым границам содержимого параграфа.

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


```css
div {
  text-align: justify;
  -moz-text-align-last: center;
  text-align-last: center;
}
```

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

| Specification |
| --- |
| CSS Text Module Level 3 # text-align-last-property |

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

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

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

* `text-align`
Media queries
=============

**Медиавыражения (media queries)** являются ключевым компонентом отзывчивого дизайна (en-US), который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, медиавыражение может применить различные стили, если экран меньше определённого размера, или в зависимости от того находится устройство в портретном или альбомном режиме. `@media` @-правило используется чтобы задать условия применения стилей к документу.

Кроме того, синтаксис медиавыражений используется в других контекстах, таких как атрибут `media` элемента `<source>`, для определения, нужно или нет использовать этот источник, когда выбирается определённое изображение для использования в элементе `<picture>`.

In addition, the `Window.matchMedia()` method can be used to test the window against a media query. You can also use `MediaQueryList.addListener()` (en-US) to be notified whenever the state of the queries changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.

You can learn more about programmatically using media queries in Testing media queries.

Reference
---------

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

* `@import` (en-US)
* `@media`
Guides
------

Using media queries

Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.

Testing media queries

Describes how to test media queries from your JavaScript code, programmatically, to determine the state of the device, and to set up listeners that let your code be notified when the results of media queries change (such as when the user rotates the screen, causing an orientation change).

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

| Specification |
| --- |
| Media Queries Level 4  |
| CSS Conditional Rules Module Level 3  |
scroll-behavior
===============

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

**`scroll-behavior`** - CSS-свойство, которое определяет поведение прокрутки для любого элемента на странице. Отрабатывается в момент автоматической прокрутки навигационных элементов, либо CSSOM прокручивается API. Любые другие прокручивания, например, те, которые выполняются пользователем, не затрагиваются этим свойством. Если это свойство указано на корневой элемент, оно относится ко всему *viewport* пространству.

Юзер-агенты могут игнорировать это свойство.

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

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


```css
/\* Ключевые слова \*/
scroll-behavior: auto;
scroll-behavior: smooth;

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

### Значения

`auto`

Стандартное поведение прокрутки без эффекта плавности.

`smooth`

Элемент прокручивается плавно; используется функция тайминга, определяемая юзер-агентом через период времени, отмеченный в нем. Юзер-агенты должны следовать соглашениям платформы, если таковые имеются.

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

scroll-behavior =   
  auto    | (en-US)  
  smooth    
  
```

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

### HTML


```html
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>
```

### CSS


```css
a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav,
scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
```

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

Характеристики
--------------

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Комбинатор столбцов
===================

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

**Комбинатор столбцов** (`||`) помещается между двумя селекторами CSS. Он соответствует только тем элементам, которым соответствует второй селектор, которые принадлежат элементам столбца, соответствующим первому.


```css
/\* Ячейки таблицы, принадлежащие к столбцу "выделено" \*/
col.selected||td {
  background: gray;
}
```

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

column-selector || cell-selector {
  /* свойства стиля */
}
```

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

### HTML


```html
<table border="1">
  <colgroup>
    <col span="2" />
    <col class="selected" />
  </colgroup>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td colspan="2">D</td>
      <td>E</td>
    </tr>
    <tr>
      <td>F</td>
      <td colspan="2">G</td>
    </tr>
  </tbody>
</table>
```

### CSS


```css
col.selected||td {
  background: gray;
  color: white;
  font-weight: bold;
}
```

### Result

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

| Specification |
| --- |
| Selectors Level 4 # the-column-combinator |

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

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

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

* `<col>`
* `<colgroup>` (en-US)
* `grid`