recursal/MDN huggingface dataset:
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)
: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 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
=========

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`
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()
======

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

**`: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
====================

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

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

Свойство **`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 свойства** – модуль CSS, который позволяет создавать переиспользуемые переменные (кастомные свойства).

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

### Свойства

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

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


 Книга рецептов CSS объединяет примеры большинства наиболее распространённых лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.

 В дополнение к представленным примерам кода, - которые вы вполне можете использовать в качестве отправной точки для своих проектов, - эти рецепты иллюстрируют нестандартные способы применения существующих лейаут (layout) спецификаций. Паттерны, представленные ниже, должны помочь вам увидеть новые варианты решения проблем, встречающихся в жизни разработчика.
 **Примечание.** Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведённых здесь рецептов.

The Recipes
-----------

| Recipe | Description | Layout Methods |
| --- | --- | --- |
| Media Objects (en-US) | A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. | CSS Grid, `float` fallback, `fit-content` (en-US) sizing |
| Columns (en-US) | When to choose multi-column layout, flexbox or grid for your columns | CSS Grid, Multicol (en-US), Flexbox |
| Center an element (en-US) | How to center an item horizontally and vertically | Flexbox, Box Alignment |
| Sticky footers | Creating a footer which sits at the bottom of the container or viewport when the content is shorter. | CSS Grid, Flexbox |
| Split Navigation | A navigation pattern where some links are visually separated from the others. | Flexbox, `margin` |
| Breadcrumb Navigation | Creating a list of links to allow the visitor to navigate back up through the page hierarchy. | Flexbox |

Contribute a Recipe
-------------------

As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. See this page for a template and guidelines for writing your own example.
Селектор следующего элемента
============================

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

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

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

element ~ element { style properties }
```

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


```css
p ~ span {
  color: red;
}
```



```html
<span>Это не красный.</span>
<p>Здесь параграф.</p>
<code>Тут какой-то код.</code>
<span>А здесь span.</span>
```

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

| Specification |
| --- |
| Selectors Level 4 # general-sibling-combinators |

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

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

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

* Смежные селекторы
:visited
========

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

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

**Примечание:** Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только `color` (en-US), `background-color`, `border-color` (en-US), `border-bottom-color` (en-US), `border-left-color` (en-US), `border-right-color` (en-US), `border-top-color` (en-US), `outline-color`, `column-rule-color`, `fill` и `stroke`. Компонент альфа-канала в доступных стилях будет игнорироваться. Вместо него будет использоваться альфа-канал, используемый для непосещённых ссылок. Если в цвете альфа-канала для посещённых ссылок задан `0`, то в этом случае будет использоваться цвет непосещённых ссылок.Несмотря на то, что цвет может меняться, метод `getComputedStyle` наврёт и всегда будет давать значение цвета непосещённых ссылок.Для дополнительной информации об ограничениях и их причин, смотрите Приватность и селектор :visited (en-US).

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


```css
a:visited {
  color: #4b2f89;
}
a:visited {
  background-color: white;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-visited |
| Selectors Level 4 # link |

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

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

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

* Приватность и селектор :visited (en-US)
* Относящиеся к ссылкам псевдоклассы: `:link`, `:active` и `:hover`.
Наследование
============

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

Описание каждого CSS-свойства говорит наследуется ли оно по умолчанию ("Наследуется: да/нет"). Наследование контролирует, что происходит, если значение свойства элемента не определено.

Наследуемые свойства
--------------------

Когда никакого значения для **свойства, которое наследуется**, у элемента не установлено, элемент получает вычисленное значение этого свойства от его родителя. Только корневой элемент документа получает начальное значение из описания свойства.

Типичный пример наследуемого свойства `color` (en-US). Стили:


```css
p {
  color: green;
}
```


и разметка:


```html
<p>В этом параграфе <em>подчёркнутый текст</em>.</p>
```


слова "подчёркнутый текст" станут зелёными, т.к. тег `em` унаследовал значение свойства `color` (en-US) от элемента `p`, а не получают начальное значение свойства (цвет, который используется для корневого элемента, когда страница не определяет цвет).

Ненаследуемые свойства
----------------------

Когда значения **свойства** элемента, которое **не наследуется**, не указано(иногда называемое Mozilla - **сброшенное свойство**), элемент получает начальное значение этого свойства (как указано в описании свойства).

Пример ненаследуемого свойства `border`. Стили:


```css
p {
  border: medium solid;
}
```


и разметка:


```html
<p>В этом параграфе <em>подчёркнутый текст</em>.</p>
```


у слов "подчёркнутый текст" не будет рамки (т.к. начальное значение `border-style` (en-US): `none`).

Замечание
---------

Ключевое слово `inherit` позволяет нам явно задать наследование. Это работает и на наследуемых, и на ненаследуемых свойствах.

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

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

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

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

Для позиционированного элемента (т.е. если у него задано свойство `position` со значением, отличающимся от `static`) свойство `z-index` отвечает за:

1. Порядок наложения в текущем контексте наложения.
2. Возможность создания локального контекста наложения.
Синтаксис
---------


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

/\* Значения типа <integer> \*/
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /\* Отрицательные значения понижают приоритет \*/

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


Значением свойства `z-index` может быть либо `auto`, либо целое число (`<integer>`).

### Значения

`auto`

Элемент не будет создавать нового локального контекста наложения. Порядок наложения блока в текущим контексте наложения будет равен `0`.

`<integer>`

Порядок наложения блока, заданный в виде целого числа (`<integer>`) в текущем контексте наложения. При этом элемент создаёт новый локальный контекст наложения. Таким образом значения z-index дочерних элементов внутри нового контекста наложения не будут сравниваться со значениями z-index элементов за пределами этого блока.

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

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

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

z-index =   
  auto       | (en-US)  
  <integer>  | (en-US)  
  inherit      
  
```

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

### Визуальное наложение элементов

#### HTML


```html
<div class="wrapper">
  <div class="dashed-box">Пунктирный блок</div>
  <div class="gold-box">Блок золотого цвета</div>
  <div class="green-box">Зелёный блок</div>
</div>
```


#### CSS


```css
.wrapper {
  position: relative;
}

.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box {
  position: absolute;
  z-index: 3; /\* помещаем .gold-box поверх .green-box и .dashed-box \*/
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2; /\* помещаем .green-box поверх .dashed-box \*/
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}
```


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

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # z-index |

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

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

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

* CSS-свойство `position`
* Понимание CSS z-index
CSS Table
=========

**CSS Table** - модуль в CSS, который определяет, как размещать данные в таблицах.

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

### Свойства

* `border-collapse` (en-US)
* `border-spacing` (en-US)
* `caption-side` (en-US)
* `empty-cells` (en-US)
* `table-layout` (en-US)
* `vertical-align`
Руководства
-----------

*Нет.*

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

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