border-bottom - CSS: каскадные таблицы стилей

border-bottom
=============

Сокращённое свойство CSS **`border-bottom`** описывает нижнюю границу элемента border. Оно устанавливает значения `border-bottom-width` (en-US), `border-bottom-style` (en-US) и `border-bottom-color` (en-US).

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

Как и все сокращённые свойства, `border-bottom` устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что ...

```css
border-bottom-style: dotted;
border-bottom: thick green;
```

... это то же самое, что ...

```css
border-bottom-style: dotted;
border-bottom: none thick green;
```

... и значение `border-bottom-style` (en-US), указанное перед `border-bottom` игнорируется. Поскольку значением по умолчанию для `border-bottom-style` (en-US) является `none`, то без указания `border-style` граница не будет показана.

Constituent properties
----------------------

This property is a shorthand for the following CSS properties:

* `border-bottom-color` (en-US)
* `border-bottom-style` (en-US)
* `border-bottom-width` (en-US)
Syntax
------

```css
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed blue;
```

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

### Values

`<br-width>`

See `border-bottom-width` (en-US).

`<br-style>`

See `border-bottom-style` (en-US).

`<color>`

See `border-bottom-color` (en-US).

Formal definition
-----------------

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

Formal syntax
-------------
```

border-bottom =
  <line-width>  || (en-US)
  <line-style>  || (en-US)
  <color>

<line-width> =
  <length [0,∞]>  | (en-US)
  thin            | (en-US)
  medium          | (en-US)
  thick

<line-style> =
  none    | (en-US)
  hidden  | (en-US)
  dotted  | (en-US)
  dashed  | (en-US)
  solid   | (en-US)
  double  | (en-US)
  groove  | (en-US)
  ridge   | (en-US)
  inset   | (en-US)
  outset

```

Examples
--------

### Applying a bottom border

#### HTML

```html
<div>This box has a border on the bottom side.</div>
```

#### CSS

```css
div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

#### Results

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |

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

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

See also
--------

* `border`
* `border-block` (en-US)
* `outline`


all - CSS: каскадные таблицы стилей

all
===

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

Сокращённое свойство CSS **`all`** сбрасывает все свойства, кроме `unicode-bidi` (en-US) и `direction`, до их начального или унаследованного значения.

|  |  |
| --- | --- |
| Начальное значение | На практике начального значения нет |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как указанное значение, применяется к каждому свойству этой короткой записи. |
| Animation type | как у каждого из подсвойств этого свойства (все свойства, кроме `unicode-bidi` (en-US) и `direction`) |

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

```css
all: initial;
all: inherit;
all: unset;

/\* CSS Cascading and Inheritance Level 4 \*/
all: revert;
```

### Значения

`initial`

Это ключевое слово указывает на изменение всех свойств, применяемых к элементу или родительскому элементу. Значения `unicode-bidi` (en-US) и `direction` не затрагиваются.

`inherit`

Это ключевое слово указывает на изменение всех свойств, применяемых к элементу или родительскому элементу, на значение их родителя. Значения `unicode-bidi` (en-US) и `direction` не затрагиваются.

`unset`

Это ключевое слово указывает на изменение всех свойств, применимых к элементу или родительскому элементу, на значение их родителя, если они наследуются или на их начальное значение, если нет. Значения `unicode-bidi` (en-US) и `direction` не затрагиваются.

`revert`

Если каскадным значением свойства является ключевое слово revert, поведение зависит от источника, которому принадлежит объявление:

user-agent origin

Эквивалент unset.

user origin

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

author origin

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

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

all =
  initial       | (en-US)
  inherit       | (en-US)
  unset         | (en-US)
  revert        | (en-US)
  revert-layer

```

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

### HTML

```html
<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

### CSS

```css
html {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}

blockquote {
  background-color: skyblue;
  color: red;
}
```

Результат:

#### No `all` property
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
html {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
```

`<blockquote>` использует стили браузера по умолчанию вместе с определённым фоном и цветом текста. Он также ведёт себя как *block* элемент : текст, который следует за ним, находится под ним.

#### `all:unset`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
html {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
blockquote {
  all: unset;
}
```

`<blockquote>` не использует стили браузера по умолчанию: теперь это *inline* элемент (начальное значение), его `background-color` является `transparent` (начальное значение), но его `font-size` по-прежнему `small` унаследованное значение) и его `color` (en-US) является `blue` (унаследованное значение).

#### `all:initial`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
html {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
blockquote {
  all: initial;
}
```

`<blockquote>` не использует стили браузера по умолчанию: теперь это *inline* элемент(начальное значение), его `background-color` является `transparent` (начальное значение), его `font-size` является `normal` (начальное значение) и его `color` (en-US) является `black` (начальное значение).

#### `all:inherit`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

```
html {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
blockquote {
  all: inherit;
}
```

`<blockquote>` не использует стили браузера по умолчанию: теперь это *block* элемент (унаследованное значение от содержащего его `<div>`), его `background-color` является `transparent` (унаследованное значение), его `font-size` является `small` (унаследованное значение) и его `color` (en-US) является `blue` (унаследованное значение).

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # all-shorthand |

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

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

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

Значения свойств в масштабе CSS: `initial`, `inherit`, `unset` (en-US), и `revert`.


row-gap - CSS: каскадные таблицы стилей

row-gap
=======

Свойство CSS **`row-gap`** задаёт отступ (gutter (en-US)) между рядами.

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

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

```css
/\* <length> values \*/
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/\* <percentage> value \*/
row-gap: 10%;

/\* Global values \*/
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;
```

Обратите внимание, что `grid-row-gap` является псевдонимом для этого свойства.

### Значения

`<length-percentage>`

Ширина отступа, разделяющего ряды. `Процентные` значения рассчитываются относительно размера грид-элемента.

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

|  |  |
| --- | --- |
| Начальное значение | `normal` |
| Применяется к | multi-column elements, flex containers, grid containers |
| Наследуется | нет |
| Проценты | относятся к соответствующему размеру области содержимого |
| Обработка значения | as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements |
| Animation type | длина, проценты или calc(); |

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

row-gap =
  normal                     | (en-US)
  <length-percentage [0,∞]>

<length-percentage> =
  <length>      | (en-US)
  <percentage>

```

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

### Флексбокс-раскладка

#### HTML

```html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```

#### CSS

```css
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}
```

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

### Грид-раскладка

#### HTML

```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```

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

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # column-row-gap |

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

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

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

* Похожие CSS-свойства: `column-gap`, `gap`
* Руководство по грид-раскладке: *Основы грид-раскладки - Отступы*


orphans - CSS: каскадные таблицы стилей

orphans
=======

Свойство CSS `orphans` устанавливает *минимальное* число строк в блочном контейнере, которое должно быть показано *внизу* страницы, региона или столбца (en-US).

```css
/\* <integer> значения \*/
orphans: 2;
orphans: 3;

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

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

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

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

### Значения

`<integer>`

Минимальное число строк, которое можно оставить внизу фрагмента перед разрывом фрагмента. Значение должно быть положительным.

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

orphans =
  <integer [1,∞]>

```

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

### HTML

```html
<div>
  <p>This is the first paragraph containing some text.</p>
  <p>
    This is the second paragraph containing some more text than the first one.
    It is used to demonstrate how widows work.
  </p>
  <p>
    This is the third paragraph. It has a little bit more text than the first
    one.
  </p>
</div>
```

### CSS

```css
div {
  background-color: #8cffa0;
  height: 150px;
  columns: 3;
  orphans: 3;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}
```

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

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

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |

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

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

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

* `widows`
* Paged media


:indeterminate - CSS: каскадные таблицы стилей

:indeterminate
==============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
CSS псевдокласс **`:indeterminate`** находит элементы в неопределённом состоянии.

```css
/\* Выбирает все элементы <input>, которые находятся в неопределённом состоянии \*/
input:indeterminate {
  background: lime;
}
```

Селектор находит следующие элементы:

* Элементы `<input type="checkbox">` (en-US), свойство `indeterminate` которых было установлено в `true` через JavaScript
* Элементы `<input type="radio">`, когда все радио переключатели в одной группе (с одинаковым атрибутом `name`) не выбраны
* Элементы `<progress>` в неопределённом состоянии
Синтаксис
---------

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

### Чекбокс и радио переключатели

В этом примере специальные стили применяются к меткам, которые привязаны к неопределённым полям формы.

#### HTML

```html
<div>
  <input type="checkbox" id="checkbox" />
  <label for="checkbox">Эта метка будет зелёной.</label>
</div>
<div>
  <input type="radio" id="radio" />
  <label for="radio">Эта метка будет зелёной.</label>
</div>
```

#### CSS

```css
input:indeterminate + label {
  background: lime;
}
```

#### JavaScript

```js
var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}
```

### Полоса прогресса

#### HTML

```html
<progress></progress>
```

#### CSS

```css
progress {
  margin: 4px;
}

progress:indeterminate {
  opacity: 0.5;
  background-color: lightgray;
  box-shadow: 0 0 2px 1px red;
}
```

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

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

| Specification |
| --- |
| HTML Standard # selector-indeterminate |
| Selectors Level 4 # indeterminate |

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

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


animation-name - CSS: каскадные таблицы стилей

animation-name
==============

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

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

CSS свойство **`animation-name`** задаёт список анимаций, чтобы применить к элементу. Каждое имя является правилом `@keyframes` (en-US), которое задаёт значения свойств для последовательности анимации.

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

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

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

```css
/\* Single animation \*/
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/\* Multiple animations \*/
animation-name: test1;
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;

/\* Global values \*/
animation-name: initial
animation-name: inherit
animation-name: unset
```

### Значения

`none`

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

`<custom-ident>`

Строка, идентифицирующая анимацию. Этот идентификатор состоит из комбинации букв без учёта регистра от `a` до `z`, цифр от `0` до `9`, подчёркивания (`_`), и/или черты (`-`). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть `none`, `unset`, `initial`, или `inherit` в любой комбинации случаев.

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

animation-name =
  [ (en-US) none | (en-US) <keyframes-name> ] (en-US)# (en-US)

<keyframes-name> =
  <custom-ident>  | (en-US)
  <string> (en-US)

```

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

См. CSS animations.

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

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

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

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

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

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


revert - CSS: каскадные таблицы стилей

revert
======

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

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

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

**Примечание:** Ключевое слово `revert` отличается от `initial`, поэтому его не следует с ним путать. `initial` использует начальное значение, которое определено отдельно для каждого свойства CSS-спецификацией. Для сравнения, браузеры устанавливают значения по умолчанию в зависимости от CSS селектора.Например, начальное значение для свойства `display` — `inline`, тогда как браузер устанавливает значение по умолчанию свойства `display` элемента `<div>` как `block`, а элемента `<table>` (en-US) как `table`, и т.д

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

### HTML

```html
<section>
  <p>Это секция!</p>

  <aside class="widget">
    <p>А это маленький виджет.</p>
  </aside>
</section>
```

### CSS

```css
section {
  color: blue;
  font-family: sans-serif;
  font-weight: bold;
}

.widget {
  all: revert;
}
```

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

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

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

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

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

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

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


:required - CSS: каскадные таблицы стилей

:required
=========

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

CSS псевдокласс `:required` находит любые `<input>` элементы, имеющие атрибут `required`. Он позволяет формам легко сообщать, что поля должны быть корректно заполнены перед отправкой формы.

Псевдо-класс `:optional` может использоваться, чтобы дать особый внешний вид полям, не обязательным для заполнения.

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

Смотрите `:invalid`.

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

| Specification |
| --- |
| HTML Standard # selector-required |
| Selectors Level 4 # opt-pseudos |

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

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

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

* `:optional`, `:invalid`, `:valid`


grid-auto-flow - CSS: каскадные таблицы стилей

grid-auto-flow
==============

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

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

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

```css
/\* Ключевые слова \*/
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

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

Свойство можно использовать в двух вариантах:

* с одним ключевым значением: `row`, `column`, или `dense`.
* с двумя значениями: `row dense` или `column dense`.
### Значения

`row`

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

`column`

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

`dense`

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

### Formal syntax
```

grid-auto-flow =
  [ (en-US) row | (en-US) column ] (en-US)  || (en-US)
  dense

```

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

### HTML Content

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="direction" onchange="changeGridAutoFlow()">
  <option value="column">column</option>
  <option value="row">row</option>
</select>
<input id="dense" type="checkbox" onchange="changeGridAutoFlow()" />
<label for="dense">dense</label>
```

### CSS Content

```css
#grid {
  height: 200px;
  width: 200px;
  display: grid;
  grid-gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: column; /\* or 'row', 'row dense', 'column dense' \*/
}

#item1 {
  background-color: lime;
  grid-row-start: 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  grid-column-start: 2;
  background-color: red;
}

#item5 {
  background-color: aqua;
}
```

```
function changeGridAutoFlow() {
  var grid = document.getElementById("grid");
  var direction = document.getElementById("direction");
  var dense = document.getElementById("dense");
  var gridAutoFlow = direction.value === "row" ? "row" : "column";

  if (dense.checked) {
    gridAutoFlow += " dense";
  }

  grid.style.gridAutoFlow = gridAutoFlow;
}
```

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-auto-flow-property |

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

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

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

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

* Related CSS properties: `grid-auto-rows` (en-US), `grid-auto-columns` (en-US), `grid`
* Grid Layout Guide: *Auto-placement in grid layout (en-US)*
* Video tutorial: *Introducing Grid auto-placement and order*


:only-of-type - CSS: каскадные таблицы стилей

:only-of-type
=============

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

CSS псевдокласс `:only-of-type` выбирает такой элемент, который является единственным потомком такого типа.

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

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

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

#### HTML

```html
<main>
  <div>Я <code>div</code> №1.</div>
  <p>Я тут единственный <code>p</code> элемент.</p>
  <div>Я <code>div</code> №2.</div>
  <div>
    Я <code>div</code> №3.
    <i>Я единственный потомок типа <code>i</code>.</i>
    <em>Я <code>em</code> №1.</em>
    <em>Я <code>em</code> №2.</em>
  </div>
</main>
```

#### CSS

```css
main :only-of-type {
  color: red;
}
```

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

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

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

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

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

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

* `:nth-of-type`, `:first-of-type`, `:last-of-type`


CSS-селекторы - CSS: каскадные таблицы стилей

CSS-селекторы
=============

**Селектор** определяет, к какому элементу применять то или иное CSS-правило.

Обратите внимание - не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.

Базовые селекторы
-----------------

Универсальный селектор

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

**Синтаксис:** `*` `ns|*` `*|*`

**Пример:** `*` будет соответствовать всем элементам на странице.

Селекторы по типу элемента

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

**Синтаксис:** `элемент`

**Пример:** селектор `input` выберет все элементы `<input>`.

Селекторы по классу

Этот базовый селектор выбирает элементы, основываясь на значении их атрибута `class`.

**Синтаксис:** `.имяКласса`

**Пример:** селектор `.index` выберет все элементы с соответствующим классом (который был определён в атрибуте `class="index"`).

Селекторы по идентификатору

Этот базовый селектор выбирает элементы, основываясь на значении их `id` атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе.

**Синтаксис:** `#имяИдентификатора`

**Пример:** селектор `#toc` выберет элемент с идентификатором toc (который был определён в атрибуте `id="toc"`).

Селекторы по атрибуту

Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.

**Синтаксис:** `[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]`

**Пример:** селектор `[autoplay]` выберет все элементы, у которых есть атрибут `autoplay` (независимо от его значения).

**Ещё пример**: a[href$=".jpg"] выберет все ссылки, у которых адрес заканчивается на ".jpg".

**Ещё пример**: a[href^="https"] выберет все ссылки, у которых адрес начинается на "https".

Комбинаторы
-----------

Комбинатор запятая

Комбинатор `,` это способ группировки, он выбирает все совпадающие узлы.

**Синтаксис:** `A, B`

**Пример:** `div, span` выберет оба элемента - и `<div>` и `<span>`.

Комбинатор потомков

Комбинатор `' '` (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).

**Синтаксис:** `A B`

**Пример:** селектор `div span` выберет все элементы `<span>`, которые находятся внутри элемента `<div>`.

Дочерние селекторы

Комбинатор `'>'` в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.

**Синтаксис:** `A > B`

**Пример:** селектор `ul > li` выберет только дочерние элементы `<li>`, которые находятся внутри, на первом уровне вложенности по отношению к элементу `<ul>`.

Комбинатор всех соседних элементов

Комбинатор `'~'` выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.

**Синтаксис:** `A ~ B`

**Пример:** `p ~ span` выберет все элементы `<span>`, которые находятся после элемента `<p>` внутри одного родителя.

Комбинатор следующего соседнего элемента

Комбинатор `'+'` выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.

**Синтаксис:** `A + B`

**Пример:** селектор `h2 + p` выберет первый элемент `<p>`, который находится *непосредственно* после элемента `<h2>` (en-US).

Псевдо
------

Псевдоклассы

Знак `:` позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.

**Пример:** `a:visited` соответствует всем элементам `<a>` которые имеют статус "посещённые".

**Ещё пример**: `div:hover` соответствует элементу, над которым проходит указатель мыши.

**Ещё пример**: `input:focus` соответствует полю ввода, которое получило фокус.

Псевдоэлементы

Знак `::` позволяет выбрать вещи, которых нет в HTML.

**Пример:** `p::first-line` соответствует первой линии абзаца `<p>`.

Версии CSS
----------

| Specification |
| --- |
| Selectors Level 4  |

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

CSS специфичность


::-moz-progress-bar - CSS: каскадные таблицы стилей

::-moz-progress-bar
===================

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

Представляет собой индикатор прогресса внутри `<progress>` (Бар, отражающий текущий прогресс).

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

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

### HTML

```html
<progress value="30" max="100">30%</progress>
<progress max="100">Неопределённый бар прогресса</progress>
```

### CSS

```css
::-moz-progress-bar {
  background-color: red;
}

/\* Задаёт неопределённым барам нулевую ширину \*/
:indeterminate::-moz-progress-bar {
  width: 0;
}
```

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

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

* `<progress>`
* `::-ms-fill`
* `::-webkit-progress-bar` (en-US)
* `::-webkit-progress-value` (en-US)
* `::-webkit-progress-inner-element` (en-US)


:lang() - CSS: каскадные таблицы стилей

:lang()
=======

Псевдо-класс CSS **`:lang()`** выбирает элементы основываясь на языке, на котором они определены.

```css
/\* Выбирает все <p>, что на английском (en) \*/
p:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
```

**Примечание:** В HTML язык определяется комбинацией атрибута `lang`, элемента `<meta>` и иногда информацией из протокола (такой, как заголовки HTTP ). Для других типов документов могут быть другие методы определения языка.

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

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

Error: could not find syntax for this item### Параметр

`<language-code>`

`<string>` (en-US), представляющая язык, который вы хотите отобрать. Допустимые значения указаны в документации HTML.

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

In this example, the `:lang()` pseudo-class is used to match the parents of quote elements (`<q>` (en-US)) using child combinators. Note that this doesn't illustrate the only way to do this, and that the best method to use depends on the type of document. Also note that Unicode (en-US) values are used to specify some of the special quote characters.

### HTML

```html
<div lang="en">
  <q>This English quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="fr">
  <q>This French quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="de">
  <q>This German quote has a <q>nested</q> quote inside.</q>
</div>
```

### CSS

```css
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "« " " »";
}
:lang(de) > q {
  quotes: "»" "«" "\2039" "\203A";
}
```

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

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

| Specification |
| --- |
| Selectors Level 4 # lang-pseudo |

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

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

Также смотрите
--------------

* Language-related pseudo-classes: `:lang`, `:dir`
* HTML `lang` attribute
* BCP 47 - Tags for Identifying Languages


:first-of-type - CSS: каскадные таблицы стилей

:first-of-type
==============

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

CSS псевдокласс `:first-of-type` находит первого потомка своего типа среди детей родителя.

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

```css
element:first-of-type {
  /\* стили \*/
}
```

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

Этот пример показывает, как применится универсальный селектор, если простой селектор не написан.

```css
div :first-of-type {
  background-color: lime;
}
```

```html
<div>
  <span>Это span первый!</span>
  <span>Это span нет. :(</span>
  <span>что насчёт этого <em>вложенного элемента</em>?</span>
  <strike>Это другой тег</strike>
  <span>Грустно, это тоже нет...</span>
</div>
```

...сработает так:

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

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

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

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

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

* `:nth-of-type`, `:last-of-type`


:read-only - CSS: каскадные таблицы стилей

:read-only
==========

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 псевдокласс `:read-only` находит элементы, недоступные для редактирования пользователем.

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

```css
input:-moz-read-only {
  background: #eee;
}
input:read-only {
  background: #eee;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-read-only |
| Selectors Level 4 # rw-pseudos |

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

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

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

* `:read-write`
* HTML атрибут `contenteditable` (en-US)


CSS Flexible Box Layout - CSS: каскадные таблицы стилей

CSS Flexible Box Layout
=======================

**Способ CSS раскладки Flexible Box** (CSS Flexible Box Layout или **Flexbox**) — это способ CSS раскладки, означающий блочную модель CSS (en-US), оптимизированную для построения пользовательских интерфейсов. Во флекс-модели потомки флекс-контейнера могут выстраиваться в любом направлении (право/лево, верх/низ), растягиваться, заполняя свободное пространство, или сжиматься во избежание переполнения родительского контейнера. Доступно различное выравнивание потомков по горизонтали и вертикали. Комбинация из родительского и вложенных блоков позволяют создавать такой layout, при котором элементы автоматически выстраиваются в столбы или строки.

Базовый пример
--------------

В следующем примере контейнер объявлен как `display: flex`, таким образом его три потомка становятся флекс-элементами. Свойству `justify-content` присвоено значение `space-between` для того, чтобы, во-первых, задать между элементами равные интервалы по основной оси, и, во-вторых, «примагнитить» первый и последний элементы к левому и правому краям контейнера соответственно. Также можно заметить, что флекс-элементы растянуты перпендикулярно оси; это происходит из-за того, что дефолтным значением `align-items` является `stretch`. Так как высота родительского контейнера не задана, элементы растягиваются по высоте и принимают значение высоты самого высокого из них.

Reference
---------

### CSS Properties

* `align-content`
* `align-items`
* `align-self`
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `justify-content`
* `order`
Guides
------

Using CSS flexible boxes (en-US)

Step-by-step tutorial about how to build layouts using this feature.

Using flexbox to lay out Web applications (en-US)

Tutorial explaining how to use flexbox in the specific context of Web applications.

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1  |


background-attachment - CSS: каскадные таблицы стилей

background-attachment
=====================

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

Если указано `background-image`, CSS свойство `background-attachment` определяет, является ли позиция этого изображения фиксированной в области просмотра, или прокручивается вместе с содержащим его блоком.

|  |  |
| --- | --- |
| Начальное значение | `scroll` |
| Применяется к | все элементы. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |

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

```css
/\* Ключевые слова \*/
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

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

Значение свойства `background-attachment` задаётся одним из ключевых значений из списка ниже.

### Значения

`fixed`

Фон фиксируется относительно области просмотра. Даже если элемент имеет механизм прокрутки, фон не перемещается вместе с элементом. (Это значение несовместимо с `background-clip: text`.)

`local`

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

`scroll`

Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплён к границе элемента.)

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

background-attachment =
  <attachment># (en-US)

<attachment> =
  scroll  | (en-US)
  fixed   | (en-US)
  local

```

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

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

#### HTML

```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
</p>
```

#### CSS

```css
p {
  background-image: url("starsolid.gif");
  background-attachment: fixed;
}
```

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

### Поддержка нескольких фоновых изображений

Это свойство поддерживает несколько фоновых изображений. Вы можете указать разные `<attachment>` для каждого фона, разделённых запятыми. Каждое изображение сопоставляется с соответствующим типом вложения, от первого указанного до последнего.

#### HTML

```html
<p>
  There were doors all round the hall, but they were all locked; and when Alice
  had been all the way down one side and up the other, trying every door, she
  walked sadly down the middle, wondering how she was ever to get out again.
  Suddenly she came upon a little three-legged table, all made of solid glass;
  there was nothing on it except a tiny golden key, and Alice's first thought
  was that it might belong to one of the doors of the hall; but, alas! either
  the locks were too large, or the key was too small, but at any rate it would
  not open any of them. However, on the second time round, she came upon a low
  curtain she had not noticed before, and behind it was a little door about
  fifteen inches high: she tried the little golden key in the lock, and to her
  great delight it fitted!
</p>
```

#### CSS

```css
p {
  background-image: url("starsolid.gif"), url("startransparent.gif");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat-y;
}
```

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

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-attachment |

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

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

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

* Несколько фонов (en-US)


border-image-source - CSS: каскадные таблицы стилей

border-image-source
===================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

* Learn more
* See full compatibility
* Report feedback
Описание
--------

The **`border-image-source`** CSS property defines the `<image>` (en-US) to use instead of the style of the border. If this property is set to `none`, the style defined by `border-style` (en-US) is used instead.

**Примечание:** Though any `<image>` (en-US) can be used with this CSS property, browser support is still limited and some browsers support only images defined using the `url()` functional notation.

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | все элементы, кроме внутренних табличных элементов, когда `border-collapse` (en-US):`collapse`. Это также применяется к `::first-letter`. |
| Наследуется | нет |
| Обработка значения | `none` или изображение с абсолютным URI |
| Animation type | discrete |

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

```css
/\* no border-image, use the specified border-style \*/
border-image-source: none;

/\* the image.jpg is used as image \*/
border-image-source: url(image.jpg);

/\* a gradient is used as image \*/
border-image-source: linear-gradient(to top, red, yellow);

/\* Global values \*/
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;
```

### Значения

`none`

Specifies that no image should be used for the border. Instead the style defined by `border-style` (en-US) is used.

`<image>`

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

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

border-image-source =
  none     | (en-US)
  <image>

<image> =
  <url>       | (en-US)
  <gradient> (en-US)

<url> =
  <url()>  | (en-US)
  <src()>

<url()> =
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)
  <url-token>

<src()> =
  src( <string> (en-US) <url-modifier>\* (en-US) )

```

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

See `border-image` (en-US) for examples of what the various source values will do.

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image-source |

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

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


:left - CSS: каскадные таблицы стилей

:left
=====

Псевдокласс CSS **`:left`** используется с @-правилом `@page`, предоставляет все левые страницы печатного документа.

```css
/\* Выбирает все левые страницы при печати \*/
@page :left {
  margin: 2in 3in;
}
```

Является ли данная страница "левой" или "правой" определяется основным направлением документа. Например, если первая страница имеет основное направление слева направо, то это будет страница с page `:right` ; если первая страница имеет основное направление справа налево, то это будет страница с page `:left`.

**Примечание:** Этот псевдокласс можно использовать только для изменений следующих свойств элементов страницы: `margin`, `padding`, `border`, и`background` . Все остальные свойства будут игнорироваться; изменены будут только свойства элементов страницы без изменения содержимого документа.

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

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

### Выставляем отступы для левых страниц

```css
@page :left {
  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`
* Другие псевдоклассы, связанные с @page: `:first`, `:right`


initial - CSS: каскадные таблицы стилей

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 - CSS: каскадные таблицы стилей

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)


animation-fill-mode - CSS: каскадные таблицы стилей

animation-fill-mode
===================

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

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

CSS свойство **`animation-fill-mode`** определяет, как нужно применять стили к объекту анимации до и после её выполнения.

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

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

```css
/\* Ключевые слова \*/
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/\* Несколько значений могут быть заданы через запятую. \*/
/\* Каждое значение соответствует для анимации в animation-name. \*/
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
```

### Значения

`none`

Стили анимации не будут применены к элементу до и после её выполнения.

`forwards`

По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями `animation-direction` и `animation-iteration-count`:

| `animation-direction` | `animation-iteration-count` | последний ключевой кадр |
| --- | --- | --- |
| `normal` | любое | `100%` или `to` |
| `reverse` | любое | `0%` или `from` |
| `alternate` | чётное | `0%` или `from` |
| `alternate` | нечётное | `100%` или `to` |
| `alternate-reverse` | чётное | `100%` или `to` |
| `alternate-reverse` | нечётное | `0%` или `from` |

`backwards`

Элемент сохранит стиль первого ключевого кадра (en-US) на протяжении периода `animation-delay`. Первый ключевой кадр определяется значением `animation-direction`:

| `animation-direction` | первый ключевой кадр |
| --- | --- |
| `normal` или `alternate` | `0%` или `from` |
| `reverse` или `alternate-reverse` | `100%` или `to` |

`both`

Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.

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

animation-fill-mode =
  <single-animation-fill-mode># (en-US)

<single-animation-fill-mode> =
  none       | (en-US)
  forwards   | (en-US)
  backwards  | (en-US)
  both

```

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

Вы можете посмотреть эффект animation-fill-mode в следующем примере. По умолчанию, по окончании анимации стиль элемента возвращается к исходному. Значение forwards сохранит для элемента стиль последнего ключевого кадра.

### HTML

```html
<p>Наведите курсор мыши на серый блок</p>
<div class="demo">
  <div class="grows">Этот просто растёт</div>
  <div class="growsandstays">Этот растёт и остаётся большим</div>
</div>
```

### CSS

```css
.demo {
  border-top: 100px solid #ccc;
  height: 300px;
  font-family: sans-serif;
}
@keyframes grow {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 40px;
  }
}
@-webkit-keyframes grow {
  0% {
    font-size: 0;
  }
  100% {
    font-size: 40px;
  }
}
.demo:hover .grows {
  animation-name: grow;
  animation-duration: 3s;
  -webkit-animation-name: grow;
  -webkit-animation-duration: 3s;
}
.demo:hover .growsandstays {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  -webkit-animation-name: grow;
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
}
```

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-fill-mode |

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

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

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

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


:right - CSS: каскадные таблицы стилей

: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: каскадные таблицы стилей

Селектор по типу
================

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

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.


top - CSS: каскадные таблицы стилей

top
===

CSS свойство **`top`** частично определяет вертикальную позицию позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. **`top`** не применится, если задано `position: static`).

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

Эффект свойства `top` зависит от того, как позиционируется элемент (то есть от значения свойства `position`):

* Когда задано `position: absolute` или `fixed` — значение свойства `top` устанавливается как расстояние между верхней гранью элемента и верхней гранью родительского контейнера.
* Когда задано `position: relative` — значение свойство `top` устанавливается как расстояние, на которое смещается верхний край элемента от нормальной позиции.
* Когда задано `position: sticky` — свойство `top` работает так, как при `position: relative` во время нахождения элемента внутри области просмотра, и как `position: fixed` вне области просмотра.
* Когда задано `position: static` — свойство `top` *не имеет никакого эффекта*.

Когда заданы оба свойства `top` и `bottom`, а свойство `position` установлено как `absolute` или `fixed`, то оба свойства `top` и `bottom` учитываются. Во всех остальных ситуациях, если `height` как-либо ограничена или `position` установлено как `relative`, то свойство `top` будет учтено, а `bottom` — проигнорировано.

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

```css
/\* Значения величин \*/
top: 3px;
top: 2.4em;

/\* Процентные значения от высоты родительского блока \*/
top: 10%;

/\* Ключевое слово \*/
top: auto;

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

### Значения

`<length>`

Отрицательная, нулевая или положительная величина, которая представляет:

* для *абсолютно позиционируемых элементов* &mdash расстояние от верхнего края содержащего их блока;
* для *относительно позиционируемых элементов* &mdash расстояние, на которое элемент смещается вниз, относительно своего положения в нормальном потоке.

`<percentage>`

Процент от высоты родительского блока.

`auto`

Это ключевое слово, которое означает:

* для *абсолютно спозиционированных элементов* — позиция элемента опирается на свойство `bottom`, пока `height: auto` обрабатывается как высота в зависимости от содержимого; если так же и `bottom: auto`, то элемент располагается так же, как при статическом позиционировании.
* для *относительно спозиционированных элементов* — расстояние элемента от его обычной позиции основано на свойстве `bottom`; если значение `bottom` также `auto`, элемент вообще не перемещается по вертикали.

`inherit`

Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как `<length>`, `<percentage>` или ключевое слово `auto`.

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

top =
  auto                 | (en-US)
  <length-percentage>

<length-percentage> =
  <length>      | (en-US)
  <percentage>

```

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

```css
/\* Для body могут быть использованы единицы px, также и для div \*/
body {
  width: 100%;
  height: 100%;
}

/\* div теперь может использовать значения в процентах (body ширина и высота установлены) \*/
div {
  position: absolute;
  left: 15%;
  top: 30%;
  bottom: 30%;
  width: 70%;
  height: 40%;
  text-align: left;
  border: 3px rgb(0, 0, 0) solid;
}
```

```html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml" />
    <title>Mozilla.org height top left width percentage CSS</title>
    <style type="text/css">
 /\* Для body могут быть использованы единицы px, также и для div \*/
 body {
 width: 100%;
 height: 100%;
 }
 /\* div теперь может использовать значения в процентах (body ширина и высота установлены) \*/
 div {
 position: absolute;
 left: 15%;
 top: 30%;
 bottom: 30%;
 width: 70%;
 height: 40%;
 text-align: left;
 border: 3px rgb(0, 0, 0) solid;
 }
 </style>
  </head>
  <body>
    <center>
      <div>...Some content...</div>
    </center>
  </body>
</html>
```

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

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

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


text-decoration-skip - CSS: каскадные таблицы стилей

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.


font-family - CSS: каскадные таблицы стилей

font-family
===========

CSS-свойство **`font-family`** определяет приоритетный список из одного или нескольких названий семейства шрифтов и/или общее имя шрифта для выбранного элемента.

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

Значения разделены запятыми, чтобы указать, что они являются альтернативами. Браузер выберет из списка первый шрифт, который установлен или может быть скачан используя правило `@font-face` .

Часто удобно использовать сокращённое свойство `font`, чтобы задать `font-size` и другие свойства, которые относятся к шрифту.

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

Свойство `font-family` определяет список шрифтов в приоритете от высшего к низшему. Процесс выбора шрифта не останавливается после первого шрифта, найденного в системе пользователя. Скорее, выбор шрифта выполняется *по одному символу за раз*, поэтому если в доступном шрифте нет глифы для нужного символа, пробуются следующие по списку шрифты. (Однако, это не работает в Internet Explorer 6 и ранее.) Когда шрифт доступен только в некоторых `стилях`, `видах` (en-US) или `размерах`, эти свойства могут так же влиять на выбор шрифта.

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

```css
/\* Имя шрифта и общие семейства шрифтов \*/
font-family:
  Gill Sans Extrabold,
  sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/\* Только общие семейства \*/
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: emoji;
font-family: math;
font-family: fangsong;

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

Свойство `font-family` получает список из одного или более семейства шрифтов, разделённые запятыми. Каждое семейство шрифтов определяется как `<family-name>` или `<generic-name>`.

В приведённом ниже примере перечислены два семейства шрифтов, первое `<family-name>`, а второе как `<generic-name>`:

```css
font-family:
  Gill Sans Extrabold,
  sans-serif;
```

### Значения

`<family-name>`

Имя семейства шрифтов. К примеру, "Times" и "Helvetica" это семейства шрифтов. Названия семейства шрифтов, которые содержат пробелы, должны быть взяты в кавычки.

`<generic-name>`

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

`serif`

 Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся концы, или имеют фактически зазубренные окончания.
 Например, "Lucida Bright", "Lucida Fax", Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.

`sans-serif`

 Глифы имеют гладкие окончания.
 Например, "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.

`monospace`

 Все глифы имеют одинаковую фиксированную ширину.
 Например, "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace.

`cursive`

Глифы в курсивных шрифтах обычно имеют либо соединительные штрихи, либо другие рукописные характеристики, отличные от наклонных (italic) шрифтов. Глифы частично или полностью связаны, и результат больше напоминает рукописное перо или кисть, чем печатные буквы. Например, "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.

`fantasy`

Фэнтезийные шрифты - это прежде всего декоративные шрифты, которые содержат игривое представление персонажей. Например, Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

`system-ui`

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

`math`

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

`emoji`

Шрифты, специально предназначенные для отображения эмодзи.

`fangsong`

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

### Валидные имена семейства шрифтов

Имена семейств шрифтов должны быть указаны либо в виде строк в кавычках, либо в виде последовательности одного или нескольких идентификаторов без кавычек. Если имя семейства шрифтов содержит цифры или знаки пунктуации, такое имя должно быть заключено в кавычки.

Например, следующие объявления являются валидными:

```css
font-family:
  Gill Sans Extrabold,
  sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;
```

Следующие объявления являются **не валидными**:

```css
font-family:
  Goudy Bookletter 1911,
  sans-serif;
font-family: Red/Black, sans-serif;
font-family:
  "Lucida" Grande,
  sans-serif;
font-family: Ahem!, sans-serif;
font-family:
  test @foo,
 sans-serif;
font-family: #POUND, sans-serif;
font-family:
  Hawaii 5-0,
  sans-serif;
```

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

font-family =
  [ (en-US) <family-name> | (en-US) <generic-family> ] (en-US)# (en-US)

<family-name> =
  <string> (en-US)         | (en-US)
  <custom-ident>+ (en-US)

<generic-family> =
  generic( <custom-ident>+ (en-US) )  | (en-US)
  <string> (en-US)                    | (en-US)
  <custom-ident>+ (en-US)

```

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

### Некоторые общие семейства шрифтов

```css
.serif {
  font-family:
    Times,
    Times New Roman,
    Georgia,
    serif;
}

.sansserif {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.monospace {
  font-family:
    Lucida Console,
    Courier,
    monospace;
}

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

.emoji {
  font-family: emoji;
}

.math {
  font-family: math;
}

.fangsong {
  font-family: fangsong;
}
```

```
<div class="serif">This is an example of a serif font.</div>

<div class="sansserif">This is an example of a sans-serif font.</div>

<div class="monospace">This is an example of a monospace font.</div>

<div class="cursive">This is an example of a cursive font.</div>

<div class="fantasy">This is an example of a fantasy font.</div>

<div class="math">This is an example of a math font.</div>

<div class="emoji">This is an example of an emoji font.</div>

<div class="fangsong">This is an example of a fangsong font.</div>
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # generic-font-families |
| CSS Fonts Module Level 4 # font-family-prop |

|  |  |
| --- | --- |
| Начальное значение | зависит от браузера |
| Применяется к | all elements and text. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | discrete |

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

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

[1] `system-ui` в данный момент не реализовано, смотри Firefox bug 1226042.

[2] `system-ui` реализовано в Safari (wkbug.com/151493), возможно будет выпущено в ближайшем времени.

[3] префиксный алиас `-apple-system` поддерживается в Safari, начиная с OS X 10.11 и iOS 9, а также в Firefox 43 на macOS (Firefox bug 1201318).


Смежные селекторы - CSS: каскадные таблицы стилей

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

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

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

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.

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

* Селекторы следующего элемента


@font-face - CSS: каскадные таблицы стилей

@font-face
==========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Learn more
* See full compatibility
* Report feedback
CSS @-правило **`@font-face`** позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция `local()`, с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции `url()`. `@font-face` позволяет разрабатывать контент не ограничиваясь набором "безопасных" шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом.Распространённым случаем является одновременное использование `url()` и `local()`, чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого @-правила (en-US).

```css
@font-face {
  font-family: "Open Sans";
  src:
    url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
```

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

### Descriptors

`font-display`

Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.

`font-family`

Указывает имя шрифта, которое будет использоваться для задания свойств шрифта.

`font-stretch` (en-US)

Значение `font-stretch` (en-US).

`font-style` (en-US)

Значение `font-style`.

`font-weight` (en-US)

Значение `font-weight`.

`font-variant` (en-US)

Значение `font-variant` (en-US).

`font-feature-settings` (en-US)

Позволяет контролировать другие расширенные особенности OpenType-шрифтов.

`font-variation-settings` (en-US)

Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.

`src` (en-US)

Задаёт ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удалённого файла шрифта или имя шрифта на компьютере пользователя.

 Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции `format()`:
 src: url(ideal-sans-serif.woff) format("woff"),
 url(basic-sans-serif.ttf) format("opentype");Список доступных форматов: `"woff"`, `"woff2"`, `"truetype"`, `"opentype"`, `"embedded-opentype"`, и `"svg"`.

`unicode-range` (en-US)

Диапазон Unicode кодов, который будет использоваться в шрифте.

MIME-типы шрифтов
-----------------

| Формат | MIME-тип |
| --- | --- |
| TrueType | `font/ttf` |
| OpenType | `font/otf` |
| Web Open File Format | `font/woff` |
| Web Open File Format 2 | `font/woff2` |

Примечания
----------

* Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью CORS.
* `@font-face` не может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:

```css
.className {
  @font-face {
    font-family: "MyHelvetica";
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
      url("MgOpenModernaBold.ttf");
    font-weight: bold;
  }
}
```

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

@font-face =
  @font-face { <declaration-list> }

```

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

### Использование загружаемого шрифта

Этот пример указывает загружаемый шрифт для использования и применяет его ко всему телу документа:

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Web Font Sample</title>
    <style media="screen, print">
 @font-face {
 font-family: "Bitstream Vera Serif Bold";
 src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
 }

 body {
 font-family: "Bitstream Vera Serif Bold", serif;
 }
 </style>
  </head>
  <body>
    Это шрифт "Bitstream Vera Serif Bold" (он не поддерживает кириллические
    символы).
  </body>
</html>
```

Результат будет таким:

### Использование локальных шрифтов

В этом примере используется локальный пользовательский шрифт "Helvetica Neue Bold". Если у пользователя этот шрифт не установлен (поиск происходит по полному названию шрифта и по Postscript-названию), тогда вместо него используется загружаемый шрифт "MgOpenModernaBold.ttf":

```css
@font-face {
  font-family: "MyHelvetica";
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url("MgOpenModernaBold.ttf");
  font-weight: bold;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-face-rule |

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

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

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

* WOFF
* Генератор FontSquirrel @font-face
* Красивые шрифты с помощью @font-face
* Библиотека шрифтов


:out-of-range - CSS: каскадные таблицы стилей

: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 **`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) состояния.


::before (:before) - CSS: каскадные таблицы стилей

::before (:before)
==================

В CSS, **`::before`** создаёт псевдоэлемент,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства `content`. По умолчания является инлайновым.

```css
/\* Добавить сердце перед ссылками \*/
a::before {
  content: "♥";
}
```

**Примечание:** Псведоэлементы, созданные с помощью `::before` и `::after` содержатся в блоке форматирования элемента, и поэтому не применяются к *замещаемым элементам*, таким как `<img>` или `<br>`.

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

Error: could not find syntax for this item

**Примечание:** В CSS3 появилась запись `::before` (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись `:before`, введённую в CSS2.

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

### Добавление кавычек

Этот простой пример использования псевдоэлементов `::before` позволяет добавлять кавычки. Здесь используется как псевдоэлемент `::before`, так и ``::after``.

#### HTML

```html
<q>Немного кавычек</q>, как он сказал, <q>лучше чем ничего.</q>
```

#### CSS

```css
q::before {
  content: "«";
  color: blue;
}

q::after {
  content: "»";
  color: red;
}
```

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

### Пример оформления

Можно стилизовать текст или изображения в свойстве `content` практически любым способом.

#### HTML

```html
<span class="ribbon">Посмотрите, где находится оранжевый прямоугольник.</span>
```

#### CSS

```css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::before {
  content: "Посмотрите на этот оранжевый прямоугольник.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```

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

### Список дел

В этом примере мы создадим простой список дел,используя псевдоэлементы. Этот метод часто применяется для добавления небольших штрихов в пользовательский интерфейс и улучшения впечатления пользователей.

#### HTML

```html
<ul>
  <li>Купить молока</li>
  <li>Сходить на прогулку с собакой</li>
  <li>Тренироваться</li>
  <li>Написать код</li>
  <li>Слушать музыку</li>
  <li>Отдыхать</li>
</ul>
```

#### CSS

```css
li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #ccff99;
}

li.done::before {
  content: "";
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}
```

#### JavaScript

```js
var list = document.querySelector("ul");
list.addEventListener(
  "click",
  function (ev) {
    if (ev.target.tagName === "LI") {
      ev.target.classList.toggle("done");
    }
  },
  false,
);
```

Вот живой пример приведённого выше кода. Заметим, что здесь не используются иконки, а зелёная галочка на самом деле является псевдоэлементом `::before`, стилизованном с помощью CSS. Попробуйте выполнить некоторые вещи списка.

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

Примечания
----------

Хотя исправления в Firefox 3.5 не позволяют созданному содержимому вести себя как отдельный предшествующий элемент (согласно спецификации CSS: "Псевдоэлементы :before и :after взаимодействуют с другими элементами... как если бы они были настоящими элементами, добавленными в соответствующий им элемент."), они могут быть использованы для небольшого улучшения в разметке без таблиц (например для центрирования). В предположении, что содержимое, которое необходимо центрировать, уже обёрнуто в некоторый элемент, столбцы перед и после содержимого могут быть добавлены без добавления других элементов (например в данном случае вероятно является более корректным обернуть текст в элемент `<span>`, как в примере ниже, вместо того чтобы добавлять два пустых элемента `<div/>` до и после текста). (И всегда устанавливайте ширину плавающего элемента, иначе он не будет плавающим!)

#### HTML

```html
<div class="example">
  <span id="floatme"
 >"Плавающий перед" будет добавлен слева от текста и не позволит переполнению
    этой строки обтекать его снизу. Аналогично, "Плавающий после" будет добавлен
    справа от текста и не позволит переполнению этой строки обтекать его
    снизу.</span
 >
</div>
```

#### CSS

```css
#floatme {
  float: left;
  width: 50%;
}

/\* Чтобы получить пустой столбец достаточно указать шестнадцатеричный код неразрывного пробела \a0 в качестве содержимого (используйте \0000a0, если за этим пробелом следуют другие символы) \*/
.example::before {
  content: "Плавающий перед";
  float: left;
  width: 25%;
}
.example::after {
  content: "Плавающий после";
  float: right;
  width: 25%;
}

/\* Для стилизации \*/
.example::before,
.example::after {
  background: yellow;
  color: red;
}
```

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

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # generated-content |

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

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

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

* `::after`
* `content`


:focus - CSS: каскадные таблицы стилей

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


content - CSS: каскадные таблицы стилей

content
=======

CSS-свойство **`content`** заменяет элемент сгенерированным значением. Объекты, добавленные с помощью свойства `content` являются *анонимными* property are *anonymous замещаемыми элементами.*

```css
/\* Ключевые слова, которые нельзя комбинировать с другими значениями \*/
content: normal;
content: none;

/\* Значение <url> \*/
content: url("http://www.example.com/test.png");

/\* Значение <image> \*/
content: linear-gradient(#e66465, #9198e5);

/\* Указанные ниже значения могут быть применены только к сгенерированному контенту с использованием ::before и ::after \*/

/\* Значение <string> \*/
content: "prefix";

/\* Значения <counter> \*/
content: counter(chapter_counter);
content: counters(section_counter, ".");

/\* Значение attr() связано со значением атрибута HTML \*/
content: attr(value string);

/\* Значения <quote> \*/
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/\* Несколько значений могут использоваться вместе \*/
content: open-quote chapter_counter;

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

|  |  |
| --- | --- |
| Начальное значение | `normal` |
| Применяется к | All elements, tree-abiding pseudo-elements, and page margin boxes |
| Наследуется | нет |
| Обработка значения | На элементах всегда вычисляется как `normal`. На `::before` и `::after`, если `normal` указано, интерпретируется как `none`. Иначе, для значений URI, абсолютного URI; для значений `attr()` - результирующая строка; для других ключевых слов, как указано. |
| Animation type | discrete |

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

### Значения

`none`

Псевдоэлемент не генерируется.

`normal`

Вычисляется `none` для псевдоэлементов `::before` и`::after`.

`<string>` (en-US)

Любое количество текстовых символов. Нелатинские символы должны быть закодированы с использованием их escape-последовательности Unicode: например, `\000A9` представляет собой символ авторского права.

`<url>()` (en-US)

URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображён, он игнорируется или отображается значение по умолчанию.

`<image>` (en-US)

`<image>` (en-US), указанный типом данных `<url>()` (en-US) или `<gradient>` (en-US), или частью веб-страницы, определяемой функцией `element()` (en-US), указывающей содержимое для обозначения.

`<counter>()` (en-US)

Значение CSS счётчика, как правило число. Его можно отобразить с помощью функций `counter()` (en-US) или`counters()` (en-US).Функция `counter()` имеет две формы записи: 'counter(*имя*)' или 'counter(*имя*, *стиль*)'. Сгенерированный текст - это значение самого вложенного счётчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию `decimal`).Функция `counters()` также имеет две формы записи: 'counters(*name*, *string*)' или 'counters(*name*, *string*, *style*)'. Сгенерированный текст - это значение всех счётчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделённых указанной строкой. Счётчики отображаются в указанном стиле (по умолчанию `decimal`).

`attr(x)`

Значение атрибута `x` элемента в виде строки. Если атрибут `x` отсутствует, вернётся пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.

`open-quote` | `close-quote`

Эти значения заменяются соответствующей строкой из свойства `quotes` (en-US).

`no-open-quote` | `no-close-quote`

Не вводит никакого содержимого, но увеличивает (уменьшает) уровень вложенности для кавычек.

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

content =
  normal                                              | (en-US)
  none                                                | (en-US)
  [ (en-US) <content-replacement> | (en-US) <content-list> ] (en-US) [ (en-US) / [ (en-US) <string> (en-US) | (en-US) <counter> ] (en-US)+ (en-US) ] (en-US)? (en-US)  | (en-US)
  <element()>

<content-replacement> =
  <image>

<content-list> =
  [ (en-US) <string> (en-US) | (en-US) <counter()> | (en-US) <counters()> | (en-US) <content()> | (en-US) <attr()> ] (en-US)+ (en-US)

<counter> =
  <counter()>   | (en-US)
  <counters()>

<element()> =
  element( <id-selector> )

<image> =
  <url>       | (en-US)
  <gradient> (en-US)

<counter()> =
  counter( <counter-name> , <counter-style>? (en-US) )

<counters()> =
  counters( <counter-name> , <string> (en-US) , <counter-style>? (en-US) )

<content()> =
  content( [ (en-US) text | (en-US) before | (en-US) after | (en-US) first-letter | (en-US) marker ] (en-US)? (en-US) )

<attr()> =
  attr( <attr-name> <attr-type>? (en-US) , <declaration-value>? (en-US) )

<id-selector> =
  <hash-token>

<url> =
  <url()>  | (en-US)
  <src()>

<counter-style> =
  <counter-style-name>  | (en-US)
  <symbols()>

<attr-name> =
  [ (en-US) <ident-token> '|' ] (en-US)? (en-US) <ident-token>

<attr-type> =
  string            | (en-US)
  url               | (en-US)
  ident             | (en-US)
  color             | (en-US)
  number            | (en-US)
  percentage        | (en-US)
  length            | (en-US)
  angle             | (en-US)
  time              | (en-US)
  frequency         | (en-US)
  flex              | (en-US)
  <dimension-unit>

<url()> =
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)
  <url-token>

<src()> =
  src( <string> (en-US) <url-modifier>\* (en-US) )

<symbols()> =
  symbols( <symbols-type>? (en-US) [ (en-US) <string> (en-US) | (en-US) <image> ] (en-US)+ (en-US) )

<symbols-type> =
  cyclic      | (en-US)
  numeric     | (en-US)
  alphabetic  | (en-US)
  symbolic    | (en-US)
  fixed

```

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

### Заголовки и двойные кавычки

В этом примере вставляются кавычки вокруг кавычек а добавляет слово "Глава" перед заголовками.

#### HTML

```html
<h1>5</h1>
<p>
  According to Sir Tim Berners-Lee,
  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"
 >I was lucky enough to invent the Web at the time when the Internet already
    existed - and had for a decade and a half.</q
 >
  We must understand that there is nothing fundamentally wrong with building on
  the contributions of others.
</p>

<h1>6</h1>
<p>
  According to the Mozilla Manifesto,
  <q cite="http://www.mozilla.org/en-US/about/manifesto/"
 >Individuals must have the ability to shape the Internet and their own
    experiences on the Internet.</q
 >
  Therefore, we can infer that contributing to the open web can protect our own
  individual experiences on it.
</p>
```

#### CSS

```css
q {
  color: blue;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

h1::before {
  content: "Chapter "; /\* Пробел в конце создаёт разделение
 между добавленным контентом
 и остальным контентом\*/
}
```

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

### Изображение в сочетании с текстом

В этом примере вставляется изображение перед ссылкой. Если изображение не найдено, вставляет текст.

#### HTML

```html
<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>
```

#### CSS

```css
a::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico")
    " MOZILLA: ";
  font:
    x-small Arial,
    sans-serif;
  color: gray;
}
```

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

### Целевые классы

В этом примере вставляется дополнительный текст после указанных элементов списка.

#### HTML

```html
<h2>Paperback Best Sellers</h2>
<ol>
  <li>Political Thriller</li>
  <li class="new-entry">Halloween Stories</li>
  <li>My Biography</li>
  <li class="new-entry">Vampire Romance</li>
</ol>
```

#### CSS

```css
.new-entry::after {
  content: " New!"; /\* Начальный пробел создаёт разделение
 между добавленным контентом
 и остальным контентом \*/
  color: red;
}
```

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

### Атрибуты изображений и элементов

В этом примере вставляется изображение перед каждой ссылкой и добавляет `id` атрибут после.

#### HTML

```html
<ul>
  <li><a id="moz" href="http://www.mozilla.org/"> Mozilla Home Page</a></li>
  <li>
    <a id="mdn" href="https://developer.mozilla.org/">
      Mozilla Developer Network</a
 >
  </li>
</ul>
```

#### CSS

```css
a {
  text-decoration: none;
  border-bottom: 3px dotted navy;
}

a::after {
  content: " (" attr(id) ")";
}

#moz::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");
}

#mdn::before {
  content: url("mdn-favicon16.png");
}

li {
  margin: 1em;
}
```

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

### Замена элемента

В этом примере содержимое элемента заменяется изображением. Вы можете заменить содержимое элемента либо значением <url> или изменить значение <image> . Содержимое, добавленное с помощью ::before или ::after не будет сгенерировано, поскольку содержимое элемента будет заменено.

#### HTML

```html
<div id="replaced">Mozilla</div>
```

#### CSS

```css
#replaced {
  content: url("mdn.svg");
}

#replaced::after {
  /\* не будет отображаться, если замена элемента поддерживается \*/
  content: " (" attr(id) ")";
}
```

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

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

Сгенерированный CSS контент не включён в DOM. Из-за этого он не будет представлен в accessibility tree и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить её в основной документ.

* Accessibility support for CSS generated content – Tink
* Explanation of WCAG, Guideline 1.3 – MDN (en-US)
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
Спецификации
------------

| Specification |
| --- |
| CSS Generated Content Module Level 3 # content-property |

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

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

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

* `::after`
* `::before`
* `quotes` (en-US)