recursal/MDN huggingface dataset:
<ratio>
=======

Тип данных CSS **`<ratio>`** используется для описания соотношений сторон (en-US) в медиавыражениях, обозначает соотношения между двумя безразмерными значениями.

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

Тип данных `<ratio>` состоит из строго положительного `<integer>`, за которым следует слеш ('/', Unicode `U+002F SOLIDUS`) и второй строго положительный `<integer>`. Пробелы до и после черты не обязательны. Первое число представляет ширину, а второе высоту.

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

### Использование в медиавыражениях


```css
@media screen and (min-aspect-ratio: 16/9) { ... }
```

### Общее соотношение сторон

|  | Ratio | Usage |
| --- | --- | --- |
|  | `4/3` | Традиционный TV-формат 20th века. |
|  | `16/9` | Современный "широкоэкранный" TV-формат. |
|  | `185/100` = `91/50` *(нецелые делимые и делители не допускаются)* | Наиболее распространённый видео-формат в 1960-х. |
|  | `239/100` *(нецелые делимые и делители не допускаются)* | "Широкоэкранный," анаморфный видео-формат. |

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

| Specification |
| --- |
| Media Queries Level 4 # values |

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

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

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

* `aspect-ratio` (en-US) медиа-функция
Постраничные носители
=====================

Свойства **Постраничных носителей** (**Paged media**) контролируют представление содержимого страницы для принтера или любого другого носителя, который делает разбивку контента на отдельные страницы. Это позволяет установить разрыв страницы, контролировать область печати, назначить разные стили для левой и правой страниц, контролировать разрывы внутри элементов. Перечень широко поддерживаемых свойств:

* `page-break-before` (en-US)
* `page-break-after` (en-US)
* `page-break-inside` (en-US)
* `orphans`
* `widows`
* `@page`
:last-of-type
=============

CSS псевдокласс **`:last-of-type`** находит последнего потомка с заданным тегом в списке детей родительского элемента.


```css
/\* Выбирает <p>, являющийся последним элементом
 среди элементов своего типа среди своих соседей \*/
p:last-of-type {
  color: lime;
}
```


**Примечание:** В первоначальном определении выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это не является обязательным.

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

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

### Стилизация последнего параграфа

#### HTML


```html
<h2>Заголовок</h2>
<p>Параграф 1</p>
<p>Параграф 2</p>
```


#### CSS


```css
p:last-of-type {
  color: red;
  font-style: italic;
}
```


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

### Вложенные элементы

Этот пример показывает как можно обратиться к вложенным элементам. Заметим, что в случаях когда не указано ни одного простого селектора, подразумевается универсальный селектор (`*`).

#### HTML


```html
<article>
  <div>Этот `div` первый.</div>
  <div>Этот <span>вложенный `span` является последним</span>!</div>
  <div>
    Этот <em>вложенный `em` первый</em>, а этот
    <em>вложенный `em` последний</em>!
  </div>
  <b>Этот `b` будет выбран!</b>
  <div>Это последний `div`!</div>
</article>
```


#### CSS


```css
article :last-of-type {
  background-color: pink;
}
```


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

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

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

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

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

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

* `:last-child`, `:nth-last-of-type`
<time>
======

Тип данных CSS **`<time>`** представляет значение времени, выраженное в секундах или миллисекундах. Он используется в `animation`, `transition`, и связанных свойствах.

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

Тип данных `<time>` состоит из `<number>`, который следует за одним из нижеперечисленных значений. На выбор, ему может предшествовать символ `+` или `-` символ. Как и во всех измерениях, между символом и числом не допускается пробел.

**Примечание:** Хотя число `0` имеет одно значение, независимо от единиц измерения, они не могут быть опущены. Другими словами `0` недопустимо и представляется `0s` или `0ms`.

### Единицы

**`s`**

Представляет время в секундах. Примеры: `0s`, `1.5s`, `-60s`.

**`ms`**

Представляет время в миллисекундах. Примеры: `0ms`, `150.25ms`, `-60000ms`.


**Примечание:** Преобразование между `s` и `ms` следует из логики `1s` = `1000ms`.

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

### Валидное время
```

12s         Положительное целочисленные
-456ms      Отрицательное целочисленные
4.3ms       Нецелочисленное
14mS        Единица регистронечувствительна, однако, заглавные буквы не рекомендуются
+0s         Ноль с первоначальным + и единица измерения
-0ms        Ноль с первоначальным - и единица измерения
```

### Невалидное время
```

0           Хотя ноль разрешён без единиц измерения для <length>, это невалидно для <time>.
12.0        Это <number>, а не <time>, так как пропущена единица измерения.
7 ms        Пробел между числом и единицей измерения не допускается.
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # time |

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

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

**`<number>`** - тип хранения данных в CSS представляющий собой число: либо целое, либо с дробной частью.

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

Синтаксис `<number>` расширяет синтаксис `<integer>`. Дробное значение представлено с помощью `.`, после которой стоит одна (или более) цифра, и может быть присоединено к целочисленному типу данных. Не существует единицы измерения, связанной с числами.

Интерполяция
------------

Во время анимации, значения типа данных CSS `<number>` являются интерполированными как числа вещественные или с плавающей точкой. Скорость интерполяции определена timing function (en-US), связанной с анимацией.

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

### Корректные числа
```

12          Ряд, состоящий из <integer>, также является <number>.
4.01        Положительное число с плавающей точкой
-456.8      Отрицательно число с плавающей точкой
0.0         Нуль
+0.0        Нуль, с + перед ним
-0.0        Нуль, с - перед ним
.60         Дробное число без присутствия нуля
10e3        Научное обозначение
-3.4e-2     Сложное научное обозначение
```

### Некорректные числа
```

12.         После дробных чисел должна присутствовать как минимум 1 цифра.
+-12.2      Одновременно перед числом допустимо ставить только один из символов +/-.
12.1.1      Разрешена только одна "дробная" точка.
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # numbers |

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

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

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

* `<integer>`
Способ разметки
===============

CSS **способ разметки** (или *раскладки,* или англ. *layout*) — это алгоритм определения позиции и размеров блоков, основанный на способе, которым они взаимодействуют с родственными блоками. Существует несколько типов разметки:

* *Обычная (Normal Flow)* — все элементы являются частью обычного потока до тех пор, пока вы не переопределите это каким-либо образом. Обычный *layout* включает в себя *блочную раскладку*, созданную для расположения отдельных блоков, таких как параграфы, и *линейную*, — для строчных элементов;
* *Табличная*, спроектированная для расположения таблиц;
* *Float layout* — для возможности обозначить элементы *плавающими.* Такой элемент начинает позиционироваться слева или справа относительно содержимого обычного потока, элементы которого начинают обтекать него;
* \_Позиционированная (en-US) \_— для позиционирования элементов без особого взаимодействия с другими элементами;
* *Множественные столбцы (en-US)* — для расположения контента колонками, как в газетах;
* *Флексбокс (CSS Flexible Box Layout)* — для расположения сложных страниц, которые плавно могут изменять свой размер; 
Экспериментальная возможность
* *Сеточная* — для расположения элементов относительно фиксированной сетки. 
Экспериментальная возможность

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

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

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

Псевдокласс **`:active`** соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью - это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.


```css
/\* Любой элемент <a>, который будет активирован \*/
a:active {
  color: red;
}
```


Псевдокласс `:active` чаще используется с элементами `<a>` и `<button>`, но может применяться и к другим элементам – например элементам форм.

Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как `:link`, `:hover` и `:visited`, описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило `:active` после всех других правил, относящихся к ссылке, как определено правилом *LVHA-порядком*: `:link` — `:visited` — `:hover` — `:active`.

**Примечание:** В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс `:active` должен применяться только к первой кнопке; для праворуких мышей - это обычно самая левая кнопка.

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

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

### Активные ссылки

#### HTML


```html
<p>
  Этот абзац содержит ссылку:
  <a href="#">Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.</a>
  У абзаца фон станет серым при нажатии на него или на ссылку.
</p>
```


#### CSS


```css
/\* Непосещённые ссылки \*/
a:link {
  color: blue;
}
/\* Посещённые ссылки \*/
a:visited {
  color: purple;
}
/\* Ссылки при наведении \*/
a:hover {
  background: yellow;
}
/\* Активные ссылки \*/
a:active {
  color: red;
}

/\* Активные абзацы \*/
p:active {
  background: #eee;
}
```


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

### Активные элементы формы

#### HTML


```html
<form>
  <label for="my-button">Моя кнопка: </label>
  <button id="my-button" type="button">
    Попробуй Нажать Меня или Мою подсказку!
  </button>
</form>
```


#### CSS


```css
form :active {
  color: red;
}

form button {
  background: white;
}
```


#### Result

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

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

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

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

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

* Псевдоклассы, связанные с ссылками: `:link`, `:visited` и `:hover`.
:only-child
===========

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

CSS псевдокласс `:only-child` находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и `:first-child:last-child` или `:nth-child(1):nth-last-child(1)`, но с меньшей специфичностью.

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

parent child:only-child {
  property: value;
}
```

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

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


```css
span:only-child {
  color: red;
}
```



```html
<div>
  <span>Этот span единственный ребёнок своего папы:(</span>
</div>

<div>
  <span>Этот span один из потомков родителя</span>
  <span>Этот span один из детей отца</span>
</div>
```


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

### Пример со списком


```css
li li {
  list-style-type: disc;
}
li:only-child {
  color: #6699ff;
  font-style: italic;
  list-style-type: square;
}
```



```html
<ol>
  <li>
    Первый
    <ul>
      <li>Это единственный ребёнок</li>
    </ul>
  </li>
  <li>
    Второй
    <ul>
      <li>Этот список с двумя элементами</li>
      <li>Этот список с двумя элементами</li>
    </ul>
  </li>
  <li>
    Третий
    <ul>
      <li>Этот список с тремя элементами</li>
      <li>Этот список с тремя элементами</li>
      <li>Этот список с тремя элементами</li>
    </ul>
  </li>
  <ol></ol>
</ol>
```


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

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

| Specification |
| --- |
| Selectors Level 4 # only-child-pseudo |

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

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

CSS-свойство **`paint-order`** позволяет вам контролировать порядок, в котором отрисовываются заливка и обводка (и нарисованные маркеры) текстового содержимого и фигур.

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


```css
/\* Нормальный \*/
paint-order: normal;

/\* Единичное значение \*/
paint-order: stroke; /\* отрисовывает сначала обводку, затем заливку и маркеры \*/
paint-order: markers; /\* отрисовывает сначала маркеры, затем заливку и обводку \*/

/\* Множественные значения \*/
paint-order: stroke fill; /\* отрисовывает сначала обводку, затем заливку, затем маркеры \*/
paint-order: markers stroke fill; /\* отрисовывает маркеры, затем обводку, затем заливку \*/

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


Если значение не указано, значением по умолчанию является следующий порядок `fill`, `stroke`, `markers`.

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

> 
> **Note:** в контексте этого свойства, маркеры отрисовываются только при рисовании форм SVG, включающих использование свойств `marker-*` (например `marker-start` (en-US)) и элемента `<marker>` (en-US). Они не применяются к тексту HTML, в этом случае вы можете определить только порядок `stroke` и `fill`.
> 
> 
> 

### Значения

`normal`

Окрасит различные части в обычном порядке.

`stroke`,
 `fill`,
 `markers`

Указываются некоторые или все эти значения в том порядке, в котором вы хотите увидеть отрисовку.

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

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

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

paint-order =   
  normal                         | (en-US)  
  [ (en-US) fill || (en-US) stroke || (en-US) markers ] (en-US)    
  
```

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

### Изменение порядка отрисовки обводки и заливки на противоположный

#### SVG


```html
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <text x="10" y="75">stroke in front</text>
  <text x="10" y="150" class="stroke-behind">stroke behind</text>
</svg>
```


#### CSS


```css
text {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  fill: black;
  stroke: red;
  stroke-width: 4px;
}

.stroke-behind {
  paint-order: stroke fill;
}
```


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

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PaintOrder |

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

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

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

* CSS Tricks: paint-order
CSS Animations
==============

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

**CSS Анимации** - это модуль CSS, который позволяет анимировать изменение значений CSS-свойств, используя опорные кадры (*keyframes*). Для управления поведением таких анимаций можно задать хронометражную функцию, длительность, количество повторов и другие атрибуты.

Reference
---------

### Свойства

* `animation`
* `animation`
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-timing-function`
### @-правила

* `@keyframes` (en-US)
Guides
------

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

Пошаговое руководство по созданию анимаций с помощью CSS. Статья описывает все касающиеся анимации CSS-свойства и @-правила и объясняет, как они взаимодействуют друг с другом.

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

| Specification |
| --- |
| CSS Animations Level 2  |
| CSS Animations Level 1  |

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

{{Compat}}See also
--------

* Related to CSS Animations, CSS Transitions (en-US) can trigger animations on user actions.
margin-inline-end
=================

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

CSS Свойство **`margin-inline-end`** определяет отступ логического края элемента, который сопоставляется с физическим отступом в зависимости от режима написания, направленности и расположения текста. То есть оно соответствует `margin-top`, `margin-right`, `margin-bottom` или `margin-left` свойству в зависимости от числа определяющего `writing-mode`, `direction`, и `text-orientation` (en-US).

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

Syntax
------


```css
/\* <length> values \*/
margin-inline-end: 10px; /\* An absolute length \*/
margin-inline-end: 1em; /\* relative to the text size \*/
margin-inline-end: 5%; /\* relative to the nearest block container's width \*/

/\* Keyword values \*/
margin-inline-end: auto;

/\* Global values \*/
margin-inline-end: inherit;
margin-inline-end: initial;
margin-inline-end: unset;
```


It relates to `margin-block-start` (en-US), `margin-block-end` (en-US), and `margin-inline-start`, which define the other margins of the element.

|  |  |
| --- | --- |
| Начальное значение | `0` |
| Применяется к | с таким же `margin` |
| Наследуется | нет |
| Проценты | зависит от модели макета |
| Обработка значения | если указано как длина - абсолютная длина; если указано как проценты - заданное значение; в противном случае `auto` |
| Animation type | длина |

### Values

The `margin-inline-end` property takes the same values as the `margin-left` property.

### Formal syntax
```

margin-inline-end =   
  <'margin-top'>    
  
```

Example
-------

### HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-end: 20px;
  background-color: #c8c800;
}
```

Specification
-------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # margin-properties |

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

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

See also
--------

* `margin-inline-start`
* The mapped physical properties: `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`
* `writing-mode`, `direction`, `text-orientation` (en-US)
:any-link
=========

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

Селектор псевдокласса CSS **`:any-link`** представляет собой элемент, который действует как исходный якорь гиперссылки, независимо от того, была ли она посещена. Другими словами, он соответствует всем элементам `<a>`, `<area>`, или `<link>`, которые имеют атрибут `href`. Таким образом, он соответствует всем элементам, которые используют `:link` или `:visited`.


```css
/\* Выбирает любой элемент, который будет соответствовать:link или :visited \*/
:any-link {
  color: green;
}
```

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

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

### HTML


```html
<a href="https://example.com">External link</a><br />
<a href="#">Internal target link</a><br />
<a>Placeholder link (won't get styled)</a>
```

### CSS


```css
a:any-link {
  border: 1px solid blue;
  color: orange;
}

/\* WebKit browsers \*/
a:-webkit-any-link {
  border: 1px solid blue;
  color: orange;
}
```

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

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

| Specification |
| --- |
| Selectors Level 4 # the-any-link-pseudo |

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

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

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

* Создание гиперссылок
* Соответствует HTML-элементам: `<a>`, `<area>` и `<link>` с атрибутом `href`
* Похожие CSS селекторы:
    + `:visited`
    + `:link`
animation-direction
===================

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

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

CSS-свойство **`animation-direction`** определяет, должна ли анимация воспроизводиться вперёд, назад или переменно вперёд и назад.

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

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

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


```css
/\* Одиночная анимация \*/
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/\* Несколько анимаций \*/
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

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

### Значения

`normal`

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

`reverse`

Анимация проигрывается наоборот, с *последнего* положения до первого и потом снова сбрасывается в *конечное* положение и снова проигрывается.

`alternate`

Анимация меняет направление в каждом цикле, то есть в первом цикле она начинает с *начального* положения, доходит до *конечного*, а во втором цикле продолжает с *конечного* и доходит до *начального* и так далее, в зависимости от количества циклов анимации `animation-iteration-count`.

`alternate-reverse`

Анимация начинает проигрываться с *конечного* положения и доходит до *начального*, а в следующем цикле продолжая с *начального* переходит в *конечное*, в зависимости от количества итераций анимации `animation-iteration-count`.

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

animation-direction =   
  <single-animation-direction># (en-US)    
  
<single-animation-direction> =   
  normal             | (en-US)  
  reverse            | (en-US)  
  alternate          | (en-US)  
  alternate-reverse    
  
```

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

Смотрите примеры CSS анимаций.

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

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

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

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

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

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