recursal/MDN huggingface dataset:
initial
=======

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

**Примечание:** На наследуемые свойства действие значения initial может быть непредвиденным. Вы должны рассмотреть возможность использования ключевых слов `inherit`, `unset` (en-US) или `revert` вместо него.

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

#### HTML


```html
<p>
  <span>This text is red.</span>
  <em>This text is in the initial color (typically black).</em>
  <span>This is red again.</span>
</p>
```


#### CSS


```css
p {
  color: red;
}

em {
  color: initial;
}
```

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # initial |

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

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

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

* Используйте `unset` (en-US), чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.
* Используйте `revert` для сброса свойства до значения, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).
* Используйте свойство `inherit`, чтобы установить свойство элемента таким же значением, как у его родителя.
* Свойство `all` позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращённого (reverted) или неустановленного (unset) состояния.
flex-wrap
=========

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 **`flex-wrap`** задаёт правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.

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

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

Подробнее о свойствах и дополнительную информацию смотрите Основные понятия Flexbox.

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


```css
flex-wrap: nowrap; /\* Default value \*/
flex-wrap: wrap;
flex-wrap: wrap-reverse;

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


Свойство `flex-wrap` может содержать одно из следующих ниже значений.

### Значения

Допускаются следующие значения:

`nowrap`

Расположение в одну линию, может привести к переполнению контейнера. Свойство **cross-start** эквивалентно **start** или **before** в зависимости от значения `flex-direction`.

`wrap`

Расположение в несколько линий. Свойство **cross-start** эквивалентно **start** или **before** в зависимости от значения `flex-direction` и свойство **cross-end** противоположно **cross-start**.

`wrap-reverse`

Ведёт себя так же, как и `wrap`, но **cross-start** и **cross-end** инвертированы.

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

flex-wrap =   
  nowrap        | (en-US)  
  wrap          | (en-US)  
  wrap-reverse    
  
```

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

### HTML


```html
<h4>This is an example for flex-wrap:wrap</h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap</h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse</h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
```

### CSS


```css
/\* Common Styles \*/
.content,
.content1,
.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 50%;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}

/\* Flexbox Styles \*/
.content {
  display: flex;
  flex-wrap: wrap;
}
.content1 {
  display: flex;
  flex-wrap: nowrap;
}
.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
}
```

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

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

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

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

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

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

* Using CSS flexible boxes (en-US)
:right
======

The **`:right`** CSS page pseudo-class matches any right page when printing a page. It allows you to describe the styling of right-side pages.


```css
/\* Selects the content on the right-hand pages while printing \*/
@page :right {
  margin: 2in 3in;
}
```


Whether the page is left or right is decided by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a `:right` page and if it has a major writing direction of right-to-left then it will be a ``:left`` page.

**Примечание:** Вы можете не менять все CSS-свойства, а поменять только margin, padding, border, и background для страницы. Все остальные CSS-свойства будут проигнорированы и изменения будут применены только для страницы, но не для её содержимого.

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

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


```css
@page :right {
  margin: 2in 3in;
}
```

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

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

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

* `@page`, `:first`, `:left`
Селектор по типу
================

Краткое описание
----------------

CSS селекторы по типу выбирают элементы по имени узла. Используются отдельно, поэтому, селектор типа для конкретного имени тега выбирает все элементы этого типа, то есть с этим именем узла в документе.

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

element { style properties }
```

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

### CSS


```css
span {
  background-color: DodgerBlue;
  color: #ffffff;
}
```

### HTML


```html
<span>Здесь тег span с каким-то текстом.</span>
<p>Здесь тег p с каким-то текстом.</p>
```

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

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

| Specification |
| --- |
| Selectors Level 4 # type-selectors |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
text-decoration-skip
====================

The **`text-decoration-skip`** CSS property specifies what parts of the element's content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.


```css
/\* Single keyword \*/
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: ink;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;

/\* Multiple keywords \*/
text-decoration-skip: objects spaces;
text-decoration-skip: ink edges box-decoration;

/\* Global keywords \*/
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;
```


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

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

### Значения

`none`

Nothing is skipped, i.e. text decoration is drawn for all text content and across atomic inline-level boxes.

`objects`

The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.

`spaces`

All spacing is skipped, i.e. all Unicode white space characters and all word separators, plus any adjacent `letter-spacing` or `word-spacing`.

`ink`

The text decoration is only drawn where it does not touch or closely approach a glyph. I.e. it is interrupted where it would otherwise cross over a glyph.
 ![An example of "text-decoration-skip: ink;".](/ru/docs/Web/CSS/text-decoration-skip/decoration-skip-ink.png)

`edges`

The start and end of the text decoration is placed slightly inward (e.g. by half of the line thickness) from the content edge of the decorating box. E.g. two underlined elements side-by-side do not appear to have a single underline. (This is important in Chinese, where underlining is a form of punctuation.)
 ![An example of "text-decoration-skip: edges;".](/ru/docs/Web/CSS/text-decoration-skip/decoration-skip-edges.png)

`box-decoration`

The text decoration is skipped over the box's margin, border and padding areas. This only has an effect on decorations imposed by an ancestor; a *decorating box* never draws over its own box decoration.

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

text-decoration-skip =   
  none  | (en-US)  
  auto    
  
```

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

### HTML content


```html
<p>Hey, grab a cup of coffee!</p>
```

### CSS content


```css
p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: ink;
}
```

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

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

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-skipping |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Смежные селекторы
=================

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

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

former_element + target_element { style properties }
```

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


```css
li:first-of-type + li {
  color: red;
}
```



```html
<ul>
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
</ul>
```


Так же может использоваться для задания стиля определённого класса "caption span" следующих `<img>` вложенных элементов:


```css
img + span.caption {
  font-style: italic;
}
```


сработает только на тех тегах span, для которых задан класс caption:


```html
<img src="photo1.jpg" /><span class="caption">Первая фотка</span>
<img src="photo2.jpg" /><span class="caption">Вторая</span>
```

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

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

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

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

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

* Селекторы следующего элемента
:out-of-range
=============

Summary
-------

CSS псевдокласс `:out-of-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">Your value is </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-out-of-range |
| Selectors Level 4 # out-of-range-pseudo |

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

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

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

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

Ключевое слово CSS **`inherit`** заставляет в элементе использовать вычисленное значение свойства из родительского элемента. Это значение можно применить к любому CSS-свойству, включая также `all`.

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

Наследование всегда начинается от родительского элемента в дереве документа, даже если родительский элемент не является содержащим блоком.

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

### Наследование значения родительского элемента


```css
/\* Делает все заголовки второго уровня зелёными... \*/
h2 {
  color: green;
}

/\* ...кроме тех, что находятся в сайдбаре, которые унаследуют цвет родительского элемента \*/
#sidebar h2 {
  color: inherit;
}
```


В этом примере элементы `h2` внутри сайдбара могут быть разных цветов. Например, если бы один из них находится в div со следующим правилом...


```css
div#current {
  color: blue;
}
```


...тогда этот заголовок был бы синего цвета.

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # inherit |

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

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

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

* Наследование
* Используйте `initial`, чтобы установить свойство в его начальное значение.
* Используйте `unset` (en-US) чтобы установить свойство в его унаследованное значение, если оно является наследуемым, или в его начальное значение в противном случае.
* Используйте `revert`, чтобы установить свойству значение, установленного изначально таблицей стилей браузера (или стилями пользователя, если они есть).
* Свойство `all` позволяет установить все свойства сразу до начального (initial), унаследованного (inherited), возвращённого (reverted) или неустановленного (unset) состояния.
:focus
======

CSS псевдокласс **`:focus`** применяется, когда элемент (такой как input формы) получает фокус. Обычно он активируется при клике мышью пользователем или при выборе элемента с использованием клавиши "tab" на клавиатуре.


```css
/\* Selects any <input> when focused \*/
input:focus {
  color: red;
}
```


**Примечание:** Этот псевдокласс применяется только тогда, когда в фокусе находится сам элемент. Используйте `:focus-within`, если вы хотите выбрать элемент, в котором находится сфокусированный элемент.

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

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

### HTML


```html
<input class="red-input" value="Я буду красным, если на меня попадёт фокус" />
<input class="lime-input" value="Я буду лаймовым при фокусе" />
```

### CSS


```css
.red-input:focus {
  color: red;
}

.lime-input:focus {
  color: lime;
}
```

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

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

Убедитесь что визуальный индикатор фокусировки хорошо виден людям с плохим зрением. Это также поможет любым другим людям, которые используют экран в ярко освещённом месте (например, на солнце). WCAG 2.1 SC 1.4.11 Non-Text Contrast (*WCAG 2.1 SC 1.4.11 Нетекстовой контраст*) требует, чтобы контраст визуального индикатора фокуса должен быть не менее 3 к 1.

* Доступность визуальных индикаторов фокуса: Добавьте на ваш сайт фокус! Советы по разработке полезных и удобных индикаторов фокуса
### `:focus { outline: none; }`

**Никогда** не удаляйте фокусный outline (видимый индикатор фокуса), не заменяя его фокусным контуром подходящим под требования WCAG 2.1 SC 1.4.11 Non-Text Contrast

* Небольшой совет: Никогда не удаляйте CSS контуры
Спецификации
------------

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

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

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

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

* `:focus-visible` 
Экспериментальная возможность
* `:focus-within`
margin-bottom
=============

Свойство CSS **`margin-bottom`** устанавливает внешний отступ внизу элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.

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

![Влияние CSS-свойства margin-bottom на блок элемента](/ru/docs/Web/CSS/margin-bottom/margin-bottomru.png)

Это свойство не имеет воздействия на незамещаемые элементы, такие как `<span>` или `<code>`.

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


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

/\* Числовые значения \*/
margin-bottom: 10px; /\* Абсолютная длина \*/
margin-bottom: 1em; /\* относительно размера текста \*/
margin-bottom: 5%; /\* относительно длины родительского блока \*/

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


Свойство `margin-bottom` может быть выражено как ключевое слово `auto`, или как `<число>`, или как `<процент>`. Значение может быть положительным, нулевым или отрицательным.

### Значения

`<length>`

Размер отступа - фиксированная величина.

`<percentage>`

Размер отступа в процентах - размер относительно длины родительского блока.

`auto`

Браузер сам выбирает, какое значение использовать. Смотрите `margin`.

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

margin-bottom =   
  <length-percentage>  | (en-US)  
  auto                   
  
<length-percentage> =   
  <length>      | (en-US)  
  <percentage>    
  
```

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

### HTML


```html
<div class="container">
  <div class="box0">Блок 0</div>
  <div class="box1">Блок 1</div>
  <div class="box2">Отрицательное значение margin Блока 1 тянет меня вверх</div>
</div>
```

### CSS

CSS устанавливает нижний отступ и высоту для элементов `div`.


```css
.box0 {
  margin-bottom: 1em;
  height: 3em;
}
.box1 {
  margin-bottom: -1.5em;
  height: 4em;
}
.box2 {
  border: 1px dashed black;
  border-width: 1px 0;
  margin-bottom: 2em;
}
```


Несколько дополнений к свойствам элемента `div` и элемента класса container сделают более наглядным эффект использования свойства `margin`.


```css
.container {
  background-color: orange;
  width: 320px;
  border: 1px solid black;
}
div {
  width: 320px;
  background-color: gold;
}
```

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

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
:nth-last-child
===============

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

CSS псевдокласс `:nth-last-child(an+b)` находит элемент, имеющий `an+b-1` потомков после данной позиции в дереве документа, значение для `n` может быть положительным или нулевым, а также имеющий родительский элемент.

В результате, он функционирует так же, как и `:nth-child`, кроме того, что выбирает элементы, считая в обратном порядке, с **конца** списка потомков, не с начала.

Смотрите `:nth-child` для более тщательного описания синтаксиса его аргументов.

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

element:nth-last-child(an + b) { стили }
```

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

### Пример селекторов

`tr:nth-last-child(-n+4)`

Находит последние 4 строки HTML таблицы.

`span:nth-last-child(even)`

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

### Использование

Этот CSS ...


```css
table {
  border: 1px solid blue;
}
tr:nth-last-child(-n + 3) {
  /\* последние 3 потомка \*/
  background-color: lime;
}
```


... с этим HTML ...


```html
<table>
  <tbody>
    <tr>
      <td>Первая</td>
    </tr>
    <tr>
      <td>Вторая строка</td>
    </tr>
    <tr>
      <td>Третья</td>
    </tr>
    <tr>
      <td>Четвёртая</td>
    </tr>
    <tr>
      <td>Пятая строчка</td>
    </tr>
  </tbody>
</table>
```


... будет выглядеть, как :

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

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

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

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

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

* `:nth-child`
Кастомные свойства (--\*): CSS переменные
=========================================

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
Имена свойств с префиксом `--`, например `--example-name`, представляют собой *кастомные свойства*, содержащие значения, которые можно переиспользовать в прочих декларациях, при помощи функции (`var()`).

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

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

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


```css
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
```


`<declaration-value>`

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


**Примечание:** Имена кастомных свойств чувствительны к регистру — таким образом `--my-color` и `--My-color` будут определены, как два различных кастомных свойства.

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

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

### HTML


```html
<p id="firstParagraph">Этот параграф должен иметь синий фон и жёлтый текст.</p>
<p id="secondParagraph">Этот параграф должен иметь жёлтый фон и синий текст.</p>
<div id="container">
  <p id="thirdParagraph">
    Этот параграф должен иметь зелёный фон и жёлтый текст.
  </p>
</div>
```

### CSS


```css
:root {
  --first-color: #16f;
  --second-color: #ff7;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #290;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}
```

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

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

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

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

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

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

* Использование переменных в CSS
* Функция `var()`