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

text-shadow
===========

CSS-свойство **`text-shadow`** добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам `decorations` (en-US). Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.

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

Syntax
------

```css
/\* смещение-x | смещение-y | радиус-размытия | цвет \*/
text-shadow: 1px 1px 2px black;

/\* цвет | смещение-x | смещение-y | радиус-размытия \*/
text-shadow: #fc0 1px 0 10px;

/\* смещение-x | смещение-y | цвет \*/
text-shadow: 5px 5px #558abb;

/\* цвет | смещение-x | смещение-y \*/
text-shadow: white 2px 5px;

/\* смещение-x | смещение-y
/\* Используем значения по умолчанию для цвета и радиуса-размытия \*/
text-shadow: 5px 10px;

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

Это свойство определено как разделённый запятыми список теней.

Каждая тень определена как два или три значения `<длина>`, за которыми следует необязательное значение `<цвет>`. Первые два значения `<длина>` определяют параметры `<смещение-x>` и `<смещение-y>`. Третье необязательное значение `<длина> задаёт` `<радиус-размытия>`. Значение `<цвет>` определяет цвет тени.

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

Это свойство можно применить к псевдо-элементам `::first-line` и `::first-letter`.

### Значения

`<цвет>`

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

`<смещение-x> <смещение-y>`

Обязательные. Эти величины `<длина>` задают расстояние тени от текста. `<смещение-x>` определяет горизонтальное расстояние; отрицательное значение размещает тень левее от текста. `<смещение-y>` определяет вертикальное расстояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в `0`, тень будет располагаться прямо за текстом, она может быть видна из-за эффекта `<радиус-размытия>`.

`<радиус-размытия>`

Необязательный. Это величина `<длина>`. Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию `0`, в случае когда параметр не определён.

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

text-shadow =
  none                            | (en-US)
  [ (en-US) <color>? (en-US) && (en-US) <length>{2,3} (en-US) ] (en-US)# (en-US)

```

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

### Простая тень

```css
.red-text-shadow {
  text-shadow: red 0 -2px;
}
```

```html
<p class="red-text-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>
```

### Множественные тени

```css
.white-text-with-blue-shadow {
  text-shadow:
    1px 1px 2px black,
    0 0 1em blue,
    0 0 0.2em blue;
  color: white;
  font:
    1.5em Georgia,
    serif;
}
```

```html
<p class="white-text-with-blue-shadow">
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>
```

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-shadow-property |

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

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

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

### Примечание Quantum CSS

* В движке Gecko есть программная ошибка в результате которой метод перехода (`transition`) не будет производить переход от элемента со свойством `text-shadow` с заданным цветом к элементу со свойством `text-shadow` без заданного цвета (Firefox bug 726550). Данная ошибка была исправлена в параллельной ветке движка CSS для Firefox (так же известном как Quantum CSS или Stylo, выпуск которого запланирован уже в версии Firefox 57).
Также смотрите
--------------

* Text Shadow CSS Generator - Интерактивный генератор теней CSS.
* `box-shadow`
* Тип данных `<color>` (для определения цвета теней)
* Определение цвета для элемента HTML посредством CSS


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

padding-left
============

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

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

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

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

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

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

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

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

### Значения

`<length>`

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

`<percentage>`

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

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

padding-left =
  <length-percentage [0,∞]>

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

```

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

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

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

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

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

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

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


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

flex-grow
=========

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-grow`** определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»). Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. Если все sibling-элементы (sibling items — элементы одного уровня вложенности, состоящие по отношению друг к другу в родственной связи как брат или сестра), имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определённым различными коэффициентами flex-grow.

На практике flex-grow используется вместе с другими flex-свойствами `flex-shrink` и `flex-basis`, и обычно определяется с помощью сокращения (shorthand) `flex`, чтобы убедиться, что все значения заданы.

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

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

```css
/\* Значения типа <number>\*/
flex-grow: 3;
flex-grow: 0.6;

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

Свойство `flex-grow` указывается одним числом — значением типа `<number>`.

### Значения

`<number>`

См. `<number>`. Отрицательные значения недопустимы. По умолчанию 0.

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

flex-grow =
  <number [0,∞]>

```

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

### HTML

```html
<h4>Это — Flex-Grow</h4>
<h5>
  A,B,C и F имеют коэффициент увеличения flex-grow:1, а D и E — flex-grow:2 .
</h5>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
  <div class="box" style="background-color:brown;">F</div>
</div>
```

### CSS

```css
#content {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
}

.box {
  flex-grow: 1;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0, 0, 0, 0.2);
}
```

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

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

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

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

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

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

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

* Руководство по CSS Flexbox: *Basic Concepts of Flexbox*
* Руководство по CSS Flexbox: *Controlling Ratios of flex items along the main axis (en-US)*
* `flex-grow` is weird. Or is it? статья Мануэля Матузовича (Manuel Matuzovic) на CSS-Tricks, которая показывает как работает flex-grow


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

<flex>
======

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

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

* Learn more
* See full compatibility
* Report feedback
CSS тип данных **`<flex>`** определяет гибкую длину в сеточном контейнере. Он используется в таких свойствах, как `grid-template-columns`, `grid-template-rows`.

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

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

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

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

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

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

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

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

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

* CSS Grid Layout


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

right
=====

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

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

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

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

Когда заданы оба свойства `left` (en-US) и `right`, и элемент не может растянуться, чтобы им соответствовать, то позиционированние элемента is *overspecified*. В этом случае значение `left` имеет приоритет, when the container is left-to-right; и наоборот, значение `right` имеет приоритет, when the container is right-to-left.

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

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

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

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

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

### Значения

`<length>`

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

* for *absolutely positioned elements*, the distance to the right edge of the containing block.
* for *relatively positioned elements*, the distance that the element is moved to the left of its normal position.

`<percentage>`

A `<percentage>` of the containing block's width.

`auto`

Specifies that:

* for *absolutely positioned elements*, the position of the element is based on the `left` (en-US) property, while `width: auto` is treated as a width based on the content; or if `left` is also `auto`, the element is positioned where it should horizontally be positioned if it were a static element.
* for *relatively positioned elements*, the distance of the element from its normal position is based on the `left` (en-US) property; or if `left` is also `auto`, the element is not moved horizontally at all.

`inherit`

Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a `<length>`, `<percentage>`, or the `auto` keyword.

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

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

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

```

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

```css
#example\_3 {
  width: 100px;
  height: 100px;
  background-color: #ffc7e4;
  position: relative;
  top: 20px;
  left: 20px;
}

#example\_4 {
  width: 100px;
  height: 100px;
  background-color: #ffd7c2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}
```

```html
<div id="example\_3">Example 3</div>
<div id="example\_4">Example 4</div>
```

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

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

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | позиционированные элементы |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | если указано как длина - абсолютная длина; если указано как проценты - заданное значение; в противном случае `auto` |
| Animation type | длина, проценты или calc(); |

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

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

See also
--------

* `position`, `left` (en-US), `top`, `bottom`


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

column-rule
===========

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

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

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

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

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

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

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

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

### Значения

`<'column-rule-width'>`

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

`<'column-rule-style'>`

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

`<'column-rule-color'>`

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

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

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

```

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

### Example 1

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

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

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

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

### Example 2

#### HTML

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

#### CSS

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

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

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

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

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

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

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


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

At-rules
========

**At-rules** (@-правила) это CSS выражения, которые показывают CSS как себя вести. Они начинаются со знака '`@`' (`U+0040 КОММЕРЧЕСКОЕ AT`), сопровождается идентификатором, и включает в себя всё до следующей точки с запятой, '`;`' (`U+003B ТОЧКА С ЗАПЯТОЙ`), или до следующего CSS блока, в зависимости от того, что наступит раньше.

```css
/\* Общая структура \*/
@идентификатор (ПРАВИЛО);

/\* Пример: говорит браузеру использовать UTF-8 кодировку символов \*/
@charset "utf-8";
```

Существует несколько @-правил, обозначаемые идентификаторами, каждое из которых имеет свой синтаксис:

* `@charset` (en-US) — Определяет кодировку символов, используемый таблицей стилей.
* `@import` (en-US) — Сообщает движку CSS включить внешнюю таблицу стилей.
* `@namespace` — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имён XML.
* ***Вложенные @-правила*** — Подмножество вложенных операторов, которые могут использоваться как оператор таблицы стилей, а также внутри правил условной группы.
    + `@media` — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определённого с помощью медиавыражения.
    + `@supports` — Условное групповое правило, которое будет применять его содержимое, если браузер соответствует критериям данного условия.
    + `@document`
    Экспериментальная возможность
     — Условное групповое правило, которое будет применять его содержимое, если документ, в котором применяется таблица стилей, соответствует критериям данного условия.
    + `@page` — Описывает аспект изменений макета, который будет применён при печати документа.
    + `@font-face` — Описывает аспект внешнего шрифта для загрузки.
    + `@keyframes` (en-US) — Описывает аспект промежуточных шагов в последовательности анимации CSS.
    + `@counter-style` — Определяет конкретные counter-styles, которые не являются частью предопределённого набора стилей.
    + `@font-feature-values` (плюс `@swash`, `@ornaments`, `@annotation`, `@stylistic`, `@styleset` и `@character-variant`)
     — Определите общие имена в `font-option-alternates` для функции, которая по-разному активируется в OpenType *(at the Candidate Recommendation stage, but only implemented in Gecko as of writing)*
Условные групповые правила
--------------------------

Как и значения свойств, каждое @-правило имеет свой синтаксис. Тем не менее, некоторые из них могут быть сгруппированы в специальную категорию, называемую Условные групповые правила. Эти операторы имеют общий синтаксис, и каждый из них может включать вложенные операторы - либо наборы правил, либо вложенные правила. Кроме того, все они передают общее семантическое значение - все они связывают некоторый тип условия, которое в любой момент оценивается как истинное или ложное. Если условие оценивается как истинное, то будут применяться все операторы в группе. Условные групповые правила описываются в CSS Conditionals Level 3 и в:

* `@media`,
* `@supports`,
* `@document`. *(deferred to Level 4 of CSS Spec)*

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

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

| Specification |
| --- |
| CSS Conditional Rules Module Level 3  |
| Compatibility Standard # css-at-rules |

Читайте также
-------------

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


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

::grammar-error
===============

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

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

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

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

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

::grammar-error
```

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

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

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

#### HTML

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

#### CSS

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

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

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

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

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

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

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

* `::spelling-error` (en-US)


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

Поточная раскладка CSS
======================

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

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

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

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

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

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

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

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

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

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

* Block (CSS)

1. CSS
2. CSS Reference


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

@page
=====

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

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

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

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

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

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

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

`size` (en-US)

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

`marks`

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

`bleed`

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

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

@page =
  @page <page-selector-list>? (en-US) { <declaration-rule-list> }

<page-selector-list> =
  <page-selector># (en-US)

<page-selector> =
  [ (en-US) <ident-token>? (en-US) <pseudo-page>\* (en-US) ]!

<pseudo-page> =
  ':' [ (en-US) left | (en-US) right | (en-US) first | (en-US) blank ] (en-US)

```

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

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

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

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

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

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

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

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


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

animation-duration
==================

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

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

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

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

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

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

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

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

### Примеры

`<time>`

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

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

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

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

```

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

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

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

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

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

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

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

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


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

max-height
==========

Свойство CSS **`max-height`** устанавливает максимальную высоту элемента. Оно предотвращает используемое значение свойства `height` от становления больше, чем значение, указанное для `max-height`.

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

`max-height` перекрывает `height`, но `min-height` перекрывает `max-height`.

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

```css
/\* Ключевые слова \*/
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fill-available;

/\* Значения длины \*/
max-height: 3.5em;

/\* <percentage> значения \*/
max-height: 75%;

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

### Значения

`<length>`

Максимальная высота выражается как `<length>`.

`<percentage>`

Максимальная высота выражается как `<percentage>` от высоты родительского блока.

#### Значения-ключевые слова

`none`

Высота не имеет максимального значения.

`max-content`
Экспериментальная возможность

Внутренняя предпочтительная высота.

`min-content`
Экспериментальная возможность

Внутренняя минимальная высота.

`fill-available`
Экспериментальная возможность

Высота родительского блока минус вертикальные `margin`, `border`, и `padding`. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., `available`.)

`fit-content`
Экспериментальная возможность

То же что и `max-content.`

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

max-height =
  none                                      | (en-US)
  <length-percentage [0,∞]>                 | (en-US)
  min-content                               | (en-US)
  max-content                               | (en-US)
  fit-content( <length-percentage [0,∞]> )

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

```

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

```css
table {
  max-height: 75%;
}

form {
  max-height: none;
}
```

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

Убедитесь, что элементы с `max-height` не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Спецификации
------------

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | все элементы, кроме незаменяемых строчных элементов, табличных колонок и групп колонок |
| Наследуется | нет |
| Проценты | Процент для генерируемого блока рассчитывается по отношению к высоте содержащего блока. Если высота содержащего блока не задана явно (т.е. зависит от высоты содержимого), и этот элемент позиционирован не абсолютно, процентное значение интерпретируется как `none`. |
| Обработка значения | проценты, как указаны, абсолютная длина или `none` |
| Animation type | длина, проценты или calc(); |

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

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

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

* Блочная модель (en-US)
* `max-width`, `box-sizing`, `height`, `min-height`


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

:last-child
===========

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

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

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

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

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

### HTML

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

### CSS

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

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

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

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

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

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

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


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

flex
====

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`** - это сокращённое свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis.

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `flex-grow`: `0`
* `flex-shrink`: `1`
* `flex-basis`: `auto`
 |
| Применяется к | flex-элементы, в том числе в потоке псевдоэлементов |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `flex-grow`: как указано
* `flex-shrink`: как указано
* `flex-basis`: как указано, но с относительной длиной, конвертируемой в абсолютные длины
 |
| Animation type | как и у каждого из подсвойств этого свойства:* `flex-grow`: число
* `flex-shrink`: число
* `flex-basis`: длина, проценты или calc();
 |

Для более полной информации читайте Использование flex-контейнеров CSS (en-US).

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

```css
/\* 0 0 auto \*/
flex: none;

/\* Одно значение, число без единиц: flex-grow \*/
flex: 2;

/\* Одно значение, ширина/высота: flex-basis \*/
flex: 10em;
flex: 30%;
flex: min-content;

/\* Два значения: flex-grow | flex-basis \*/
flex: 1 30px;

/\* Два значения: flex-grow | flex-shrink \*/
flex: 2 2;

/\* Три значения: flex-grow | flex-shrink | flex-basis \*/
flex: 2 2 10%;

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

### Значения

`<'flex-grow'>`

Определяет ``flex-grow`` для флекс элемента. Смотри `<number>` для большей информации. Негативные значения считаются недействительными. Значение по умолчанию `0`, если не указано.

`<'flex-shrink'>`

Определяет ``flex-shrink`` для флекс элемента. Смотри `<number>` для большей информации. Негативные значения считаются недействительными. Значение по умолчанию `1`, если не указано.

`<'flex-basis'>`

Определяет ``flex-basis`` для флекс элемента. Любое корректное значение для высоты(height) и ширины(width) - корректно и для данного свойства. Предпочтительный размер 0 должен иметь единицу измерения, чтобы не восприниматься как гибкий. Значение по умолчанию `0%`, если не указано.

`none`

Размер элемента устанавливается в соответствии с его свойствами `width` и `height`. Он полностью негибкий: не сжимается и не увеличивается по отношению к гибкому контейнеру. Эквивалентно значению "`flex: 0 0 auto`".

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

flex =
  none                                                | (en-US)
  [ (en-US) <'flex-grow'> <'flex-shrink'>? (en-US) || (en-US) <'flex-basis'> ] (en-US)

```

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

```css
#flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}

#flex-container > .flex-item {
  -webkit-flex: auto;
  flex: auto;
}

#flex-container > .raw-item {
  width: 5rem;
}
```

```html
<div id="flex-container">
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>
```

```
var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function () {
  raw.style.display = raw.style.display == "none" ? "block" : "none";
});
```

```
#flex-container {
  width: 100%;
  font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
  border: 1px solid #f00;
  padding: 1rem;
}

#flex-container > .raw-item {
  border: 1px solid #000;
}
```

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

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

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

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

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

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

* Using CSS flexible boxes (en-US)


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

grid-template-columns
=====================

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-свойство **`grid-template-columns`** определяет имена линий и размеры грид-колонок.

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

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

```css
/\* Ключевые слова \*/
grid-template-columns: none;

/\* Значения типа <track-list> \*/
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);
grid-template-columns: subgrid;
grid-template-columns: masonry;

/\* Значения типа <auto-track-list> \*/
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-columns:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-columns:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

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

### Значения

`none`

Указывает на отсутствие явной грид-раскладки. Все колонки будут создаваться неявным образом, а их размер будет определяться свойством `grid-auto-columns` (en-US).

`[linename]`

`<custom-ident>` задаёт имя для линии. Идентификатором может быть любая строка, кроме зарезервированных слов `span` и `auto`. У линий может быть несколько имён, перечисленных через пробел внутри квадратных скобок, например, `[line-name-a line-name-b]`.

`<length>`

Неотрицательная длина, задающая ширину колонки.

`<percentage>`

 Неотрицательное значение в виде процента (`<percentage>`), вычисляющегося относительно встроенного размера грид-контейнера. Если размер грид-контейнера зависит от размера его полос, то процент будет рассматриваться как значение `auto`.
 Собственные размеры полосы могут быть скорректированы до размера грид-контейнера, что приведёт к увеличению конечного размера полосы на минимальную величину, необходимую для соблюдения процентного соотношения.

`<flex>`

Неотрицательное значение с единицей измерения `fr`, определяющая показатель расширения. Каждая грид-полоса, заданная значением `<flex>`, занимает оставшееся свободное пространство пропорционально указанному показателю расширения.

При использовании вне функции `minmax()`, предполагается использование автоматического минимума (т.е. равнозначно `minmax(auto, <flex>)`).

`max-content` (en-US)

Ключевое слово, представляющее наибольший размер максимального содержимого среди всех грид-элементов в грид-полосе. Например, если в первом элементе грид-полосы будет находиться одно предложение: *"Repetitio est mater studiorum"*, а во втором — *"Dum spiro, spero"*, то максимальное содержимое будет определяться размером самого длинного предложения среди всех грид-элементов — *"Repetitio est mater studiorum"*.

`min-content` (en-US)

Ключевое слово, представляющее наибольший размер минимального содержимого среди всех грид-элементов в грид-полосе. Например, если в первом элементе грид-полосы будет находиться одно предложение: "Repetitio est mater studiorum", а во втором — "Dum spiro, spero", то минимальное содержимое будет определяться размером самого длинного слова среди всех предложений в грид—элементах — "studiorum".

`minmax(min, max)`

Функция, определяющая диапазон размеров грид-элемента, больший или равный *min* и меньший или равный *max*. Если *max* меньше *min*, то *max* игнорируется и функция будет использовать *min*. Можно задать показатель расширения `<flex>` в качестве максимально значения, но для минимального его использование недопустимо.

`auto`

При использовании в качестве максимального значения представляет собой размер наибольшего элемента среди всех элементов грид-полосы, что равнозначно `max-content` (en-US).

При использовании в качестве минимального значения представляет собой минимальный размер элемента среди всех элементов в грид-полосе (определённый свойствами `min-width`/`min-height` у элементов). Часто, хотя и не всегда, идентичен размеру `min-content` (en-US).

При использовании вне функции `minmax()`, `auto` представляет диапазон между минимумом и максимумом, описанным выше. В большинстве случаев это то же самое, что и `minmax(min-content,max-content)`.

**Примечание:** размеры полос, заданные значением `auto` (и только `auto`) могут быть растянуты с помощью свойств `align-content` и `justify-content`. Поэтому по умолчанию грид-полоса с размером `auto` будет занимать всё оставшееся свободное пространство в грид-контейнере.

``fit-content( [ <length> | <percentage> ] )` (en-US)`

Может быть выражен формулой `max(minimum, min(limit, max-content))`, где `minimum` представляет собой `auto`-минимум (который часто, но не всегда представляет наименьший размер минимального содержимого) и `limit` — любое значение или функция для определения размера полосы, переданная в качестве аргумента в `fit-content()`. По-другому можно сказать, что `fit-content()` получается выбором наименьшего значения среди `minmax(auto, max-content)`, `minmax(auto, limit)`.

`repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )` (en-US)

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

`masonry` (en-US)
Экспериментальная возможность

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

`subgrid`

Значение `subgrid` указывает, что грид-раскладка примет размеры родительского грид-контейнера на соответствующих осях. Таким образом размеры колонок и рядов не задаются явно, а берутся из определения родительской грид-раскладки.

**Предупреждение:** Значение `masonry` появилось в CSS-спецификации Grid Level 3 и на данный момент в качестве эксперимента реализовано в Firefox и активируется через флаг в настройках.

Значение `subgrid` представлено в CSS-спецификации Grid Level 2 и пока что реализовано только в Firefox с 71 версии.

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

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | сеточные контейнеры |
| Наследуется | нет |
| Проценты | относятся к соответствующему размеру области содержимого |
| Обработка значения | как указано, но с относительной длиной, конвертируемой в абсолютные длины |
| Animation type | simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |

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

grid-template-columns =
  none                       | (en-US)
  <track-list>               | (en-US)
  <auto-track-list>          | (en-US)
  subgrid <line-name-list>? (en-US)

<track-list> =
  [ (en-US) <line-names>? (en-US) [ (en-US) <track-size> | (en-US) <track-repeat> ] (en-US) ] (en-US)+ (en-US) <line-names>? (en-US)

<auto-track-list> =
  [ (en-US) <line-names>? (en-US) [ (en-US) <fixed-size> | (en-US) <fixed-repeat> ] (en-US) ] (en-US)\* (en-US) <line-names>? (en-US) <auto-repeat> [ (en-US) <line-names>? (en-US) [ (en-US) <fixed-size> | (en-US) <fixed-repeat> ] (en-US) ] (en-US)\* (en-US) <line-names>? (en-US)

<line-name-list> =
  [ (en-US) <line-names> | (en-US) <name-repeat> ] (en-US)+ (en-US)

<line-names> =
  '[' <custom-ident>\* (en-US) ']'

<track-size> =
  <track-breadth>                                   | (en-US)
  minmax( <inflexible-breadth> , <track-breadth> )  | (en-US)
  fit-content( <length-percentage [0,∞]> )

<track-repeat> =
  repeat( [ (en-US) <integer [1,∞]> ] (en-US) , [ (en-US) <line-names>? (en-US) <track-size> ] (en-US)+ (en-US) <line-names>? (en-US) )

<fixed-size> =
  <fixed-breadth>                                   | (en-US)
  minmax( <fixed-breadth> , <track-breadth> )       | (en-US)
  minmax( <inflexible-breadth> , <fixed-breadth> )

<fixed-repeat> =
  repeat( [ (en-US) <integer [1,∞]> ] (en-US) , [ (en-US) <line-names>? (en-US) <fixed-size> ] (en-US)+ (en-US) <line-names>? (en-US) )

<auto-repeat> =
  repeat( [ (en-US) auto-fill | (en-US) auto-fit ] (en-US) , [ (en-US) <line-names>? (en-US) <fixed-size> ] (en-US)+ (en-US) <line-names>? (en-US) )

<name-repeat> =
  repeat( [ (en-US) <integer [1,∞]> | (en-US) auto-fill ] (en-US) , <line-names>+ (en-US) )

<track-breadth> =
  <length-percentage [0,∞]>  | (en-US)
  <flex [0,∞]>               | (en-US)
  min-content                | (en-US)
  max-content                | (en-US)
  auto

<inflexible-breadth> =
  <length-percentage [0,∞]>  | (en-US)
  min-content                | (en-US)
  max-content                | (en-US)
  auto

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

<fixed-breadth> =
  <length-percentage [0,∞]>

```

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

### Определение грид-колонок с размерами

#### HTML

```html
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}
```

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

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # track-sizing |
| CSS Grid Layout Module Level 2 # subgrids |
| CSS Grid Layout Module Level 3 # masonry-layout |

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

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

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

* Связанные CSS-свойства: `grid-template-rows`, `grid-template-areas`, `grid-template`
* Руководство по грид-раскладке: *Основы грид-раскладки - грид-полосы*
* Обучающее видео: *Defining a Grid*
* Subgrid


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

CSS Fonts
=========

**CSS Fonts** - модуль в CSS, который определяет свойства связанные со шрифтами и как шрифтовые ресурсы загружаются. Модуль позволяет вам задать стиль шрифта, вроде font-family, font-size и font-weight, lineheight и варианты отображения знаков, когда для одного доступны сразу несколько

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

Следующий пример показывает простое использование шрифтовых свойств, стилизующих тэг <p>.

```css
p {
  width: 600px;
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  font-weight: 100;
  font-variant-ligatures: normal;
  font-size: 2rem;
  letter-spacing: 1px;
}
```

```html
<p>
  Three hundred years ago<br />
  I thought I might get some sleep<br />
  I stretched myself out onna antique bed<br />
  An' my spirit did a midnite creep
</p>
```

Вывод на экран будет следующим:

Различные примеры шрифтов
-------------------------

Вы можете найти множество вариантов шрифтов на v-fonts.com и axis-praxis.org; так же смотрите наше руководство Variable fonts (en-US) для большей информации по использованию.

Отсылки
-------

### Свойства

* `font`
* `font-family`
* `font-feature-settings` (en-US)
* `font-kerning` (en-US)
* `font-language-override` (en-US)
* `font-optical-sizing` (en-US)
* `font-size`
* `font-size-adjust` (en-US)
* `font-stretch` (en-US)
* `font-style`
* `font-synthesis` (en-US)
* `font-variant` (en-US)
* `font-variant-alternates` (en-US)
* `font-variant-caps` (en-US)
* `font-variant-east-asian` (en-US)
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position` (en-US)
* `font-variation-settings` (en-US)
* `font-weight`
* `line-height`
### @-правила

`@font-face`
`font-family`
* `font-feature-settings` (en-US)
* `font-style` (en-US)
* `font-variant` (en-US)
* `font-weight` (en-US)
* `font-stretch` (en-US)
* `src` (en-US)
* `unicode-range` (en-US)
* `@font-feature-values`

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

Fundamental text and font styling

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

OpenType font features guide (en-US)

Особенности шрифтов или их варианты ссылаются на различные стили символов или букв, содержащиеся в OpenType. Руководство описывает такие вещи как лигатура (специальные символы объединяющие буквы вроде 'fi' или 'ffl'), кернинг (то, как свободное место распределяется между различными символами) и другое. Всё перечисленное относится к особенностям OpenType и позволяет использовать в вебе специальные свойства и свойства контроля нижнего уровня `font-feature-settings` (en-US). В статье есть всё, что вам нужно знать об особенностях OpenType шрифтов в CSS.

Variable fonts guide (en-US)

**Variable fonts** are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.

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

| Specification |
| --- |
| CSS Fonts Module Level 4  |


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

align-content
=============

Свойство `CSS` **`align-content`** устанавливает распределение пространства между и вокруг элементами контента вдоль поперечной оси `flexbox` контейнера или вдоль блочной оси `grid` контейнера.

The interactive example below use Grid Layout to demonstrate some of the values of this property.

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

Это свойство не влияет на однострочные flex-контейнеры (т.е. с `flex-wrap: nowrap`)

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

```css
/\* Основное позиционное выравнивание \*/
/\* align-content не принимает значения left и right \*/
align-content: center; /\* Расположить элементы вокруг центра \*/
align-content: start; /\* Расположить элементы в начале \*/
align-content: end; /\* Расположить элементы в конце \*/
align-content: flex-start; /\* Расположить элементы flex в начале \*/
align-content: flex-end; /\* Расположить элементы flex в конце \*/

/\* Нормальное выравнивание \*/
align-content: normal;

/\* Выравнивание по базовой линии \*/
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/\* Распределённое выравнивание \*/
align-content: space-between; /\* Распределить элементы равномерно
 Первый элемент находится на одном уровне с началом,
 последней - совпадает с концом \*/
align-content: space-around; /\* Распределить элементы равномерно
 Элементы имеют половинное пространство
 на каждом конце \*/
align-content: space-evenly; /\* Распределить элементы равномерно
 Элементы имеют одинаковое пространство вокруг них \*/
align-content: stretch; /\* Распределить элементы равномерно
 Растянуть 'auto'-размерные элементы, чтобы заполнить
 контейнер \*/

/\* Выравнивание переполнения (overflow) \*/
align-content: safe center;
align-content: unsafe center;

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

### Значения

`start`

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

`end`

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

`flex-start`

 Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны начала (cross-start) контейнера flex.
 Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как `start`.

`flex-end`

 Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны конца (cross-end) контейнера flex.
 Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как `end`.

`center`

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

`normal`

Элементы расположены в их дефолтной позиции как если бы `align-content` не было определено.

`baseline first baseline`
`last baseline`

![базовая линия - это линия, на которой «сидит» большинство букв и ниже которой располагаются нижние выносные элементы (свисания).](https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png)Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии.
 Резервное выравнивание для `first baseline` равно `start`, для `last baseline` - `end`.

`space-between`

Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов одинаков. Первый элемент находится на одном уровне с начальной кромкой контейнера выравнивания на поперечной оси, а последний элемент находится на одном уровне с конечной кромкой контейнера выравнивания на поперечной оси.

`space-around`

Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних предметов одинаков. Пустое пространство до первого и после последнего элемента равно половине пространства между каждой парой смежных элементов.

`space-evenly`

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

`stretch`

Если объединённый размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, размер любого `auto`-размерного элемента увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые `max-height`/`max-width` (или эквивалентной функциональности), так что объединённый размер точно заполняет контейнер выравнивания вдоль поперечной оси.

`safe`

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

`unsafe`

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

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

align-content =
  normal                                   | (en-US)
  <baseline-position>                      | (en-US)
  <content-distribution>                   | (en-US)
  <overflow-position>? (en-US) <content-position>

<baseline-position> =
  [ (en-US) first | (en-US) last ] (en-US)? (en-US)  && (en-US)
  baseline

<content-distribution> =
  space-between  | (en-US)
  space-around   | (en-US)
  space-evenly   | (en-US)
  stretch

<overflow-position> =
  unsafe  | (en-US)
  safe

<content-position> =
  center      | (en-US)
  start       | (en-US)
  end         | (en-US)
  flex-start  | (en-US)
  flex-end

```

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

### CSS

```css
#container {
  height: 200px;
  width: 240px;
  align-content: center; /\* Can be changed in the live sample \*/
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}
```

### HTML

```html
<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-content: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="stretch">stretch</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="space-between">space-between</option>
    <option value="space-around">space-around</option>
    <option value="space-evenly">space-evenly</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="baseline">baseline</option>
    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>
```

```
var values = document.getElementById("values");
var display = document.getElementById("display");
var container = document.getElementById("container");

values.addEventListener("change", function (evt) {
  container.style.alignContent = evt.target.value;
});

display.addEventListener("change", function (evt) {
  container.className = evt.target.value;
});
```

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

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-justify-content |
| CSS Flexible Box Layout Module Level 1 # align-content-property |

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-justify-content |
| CSS Flexible Box Layout Module Level 1 # align-content-property |

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

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

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

* Использование гибких блоков CSS (en-US)


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

:in-range
=========

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

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

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

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

### HTML

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

### CSS

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

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

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

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

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

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

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


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

text-align-last
===============

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

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

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

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

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

Formal syntax (en-US):
```

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

```

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

text-align-last: inherit
```

### Значения

`auto`

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

`start`

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

`end`

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

`left`

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

`right`

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

`center`

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

`justify`

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

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

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

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

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

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

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

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

* `text-align`


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

@counter-style
==============

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

The **`@counter-style`** CSS at-rule lets authors define specific counter styles that are not part of the predefined set of styles. A `@counter-style` rule defines how to convert a counter value into a string representation.

Initial version of CSS defined a set of useful counter styles. Although more styles where added to this set of predefined styles over the years, this restrictive way proved unable to fulfill the needs of worldwide typography. The `@counter-style` at-rule addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.

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

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

Each `@counter-style` is identified by a name and has a set of descriptors.

`system` (en-US)

Specifies the algorithm to be used for converting the integer value of a counter to a string representation.

`negative` (en-US)

Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative.

`prefix` (en-US)

Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, so in the final representation of the counter, it comes before the negative sign.

`suffix` (en-US)

Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Prefixes come after the marker representation.

`range` (en-US)

Defines the range of values over which the conter style is applicable. If a counter style is used to represent a counter value outside of its ranges, the counter style will drop back to its fallback style.

`pad` (en-US)

Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start start at 01 and go through 02, 03, 04 etc, then the pad descriptor is to be used. For representations larger than the specified pad value, the marker is constructed as normal.

`fallback` (en-US)

Specifies a system to fall back into if either the specified system is unable to construct the representation of or a counter value or if the counter value outside the specified range. If the specified fallback also fails to represent the value, then the fallback style's fallback is used, if one is specified. If there are either no fallback systems described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style.

`symbols` (en-US)

Specifies the symbols that are to be used for the marker representations. Symbols can contain string, images or custom identifiers. How the symbols are used to construct the marker representation is up to the algorithm specified in the system descriptor. For example, if the system specified is fixed, then each of the N symbols specified in the descriptor will be used to represent the first N counter symbols. Once the specified set of symbols have exhausted, the fallback style will be used for the rest of the list.

The below @counter-style rule uses images instead of character symbols.

```css
@counter-style winners-list {
  system: fixed;
  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
  suffix: " ";
}
```

`additive-symbols`

While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on *additive tuples* described in this descriptor. Each additive tuple consists of a counter symbol and a non negative integer weight. The additive tuples must be specified in the descending order of their weights.

`speak-as` (en-US)

Describes how to read out the counter style in speech synthesizers, such as screen readers. For example, the value of the marker symbol can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.

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

@counter-style =
  @counter-style <counter-style-name> { <declaration-list> }

```

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

```css
@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}
```

The above counter style rule can be applied to lists like this:

```css
.items {
  list-style: circled-alpha;
}
```

Which will produce lists like this:

 Ⓐ One
 Ⓑ Two
 Ⓒ Three
 Ⓓ Four
 Ⓔ FIve
 ....
 ...
 Ⓨ Twenty Five
 Ⓩ Twenty Six

 27 Twenty Seven
 28 Twenty Eight
 29 Twenty Nine
 30 Thirty

Checkout more examples on the demo page.

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # the-counter-style-rule |

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

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

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

* `list-style` (en-US), `list-style-image`, `list-style-position` (en-US)
* `symbols()` (en-US), the functional notation creating anonymous counter styles.


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

Media queries
=============

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

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

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

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

Reference
---------

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

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

Using media queries

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

Testing media queries

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

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

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


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

scroll-behavior
===============

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

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

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

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

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

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

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

### Значения

`auto`

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

`smooth`

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

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

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

```

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

### HTML

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

### CSS

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

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

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

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

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

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


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

clear
=====

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

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

При применении к неплавающим блокам он перемещает границу края border edge (en-US) элемента до тех пор, пока не окажется ниже края margin edge (en-US) поля всех соответствующих поплавков. Вертикальный край неплавающего блока сжимается.

Вертикальные поля между двумя плавающими элементами, с другой стороны, не будут разрушаться. При применении к плавающим элементам - margin edge (en-US) нижнего элемента перемещается ниже margin edge (en-US) всех соответствующих поплавков. Это влияет на положение более поздних поплавков, поскольку более поздние поплавки не могут быть расположены выше предыдущих.

Поплавки, которые имеют отношение к очистке, - это более ранние поплавки в одном и том же контексте форматирования блоков (en-US).

**Примечание:** Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется **clearfix,** и один из способов сделать это - это заменит `clear` заменённый `::after` псевдоэлемент на нем.```css
 #container::after {
 content: "";
 display: block;
 clear: both;
 }

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

```css
/\* Ключевые слова \*/
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/\* Global values \*/
clear: inherit;
clear: initial;
clear: unset;
```

### Значения

`none`

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

`left`

Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы очистить *левые* поплавки.

`right`

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

`both`

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

`inline-start`

Является ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков *в начале содержащего его блока*, то есть *левые* поплавки на скриптах **ltr** и *правые* поплавки на скриптах **rtl**.

`inline-end`

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

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

clear =
  inline-start  | (en-US)
  inline-end    | (en-US)
  block-start   | (en-US)
  block-end     | (en-US)
  left          | (en-US)
  right         | (en-US)
  top           | (en-US)
  bottom        | (en-US)
  both-inline   | (en-US)
  both-block    | (en-US)
  both          | (en-US)
  none

```

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

### clear: left

#### HTML

```html

    Давай лучше "бёзди хэппи" затянем, нежели Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius
    dui. Suspendisse eget dolor.

    Пусть бегут неуклюже пешеходы по лужам, Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit.

Этот абзац очищается слева.

```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}
```

### clear: right

#### HTML

```html

    Лучше нести бред и околесицу, но более осмысленную, чем Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit.

    - Так я ж намедни намекал, что Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit.

Этот абзац очищается справа.

```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.right {
  border: 1px solid black;
  clear: right;
}
.black {
  float: right;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}
```

### clear: both

#### HTML

```html

    Лучше нести осмысленную белиберду, чем "Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius
    dui. Suspendisse eget dolor.

    Вот я и говорю, что "Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget
    dolor".

Этот абзац очищает оба.

```

#### CSS

```css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.both {
  border: 1px solid black;
  clear: both;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 45%;
}
```

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-clear |
| CSS Logical Properties and Values Level 1 # float-clear |

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

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

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

* Box model (en-US)


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

Комбинатор столбцов
===================

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

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

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

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

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

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

### HTML

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

### CSS

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

### Result

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

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

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

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

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

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


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

CSS Colors
==========

**CSS Colors** - модуль в CSS, который работает с цветами, типами цветов и прозрачностью.

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

### Свойства

* `color` (en-US)
* `opacity`
### Типы данных в CSS

`<color>`Руководства
-----------

*Нет.*

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

| Specification |
| --- |
| CSS Color Module Level 4  |
| CSS Color Module Level 5  |

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

{{Compat}}Смотрите также
--------------

* В CSS градиенты не цвета, а изображения.


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

margin-right
============

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

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

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

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

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

/\* Значения длины \*/
margin-right: 20px; /\* абсолютная длина \*/
margin-right: 1em; /\* относительно размера текста \*/
margin-right: 5%; /\* относительно ширины родительского блока \*/

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

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

### Значения

`<length>`

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

`<percentage>`

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

`auto`

Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения `margin-left` и `margin-right` одновременно установлены как `auto`, расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные:

| Значение `display` | Значение `float` | Значение `position` | Расчётное значение `auto` | Комментарий |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`, `inline-table` | *любое* | `static` или `relative` | `0` | Строчный способ разметки |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | *любое* | `static` или `relative` | `0`, кроме случаев, когда `margin-left` и `margin-right` установлены как `auto`. В этом случае устанавливается значение, центрирующее элемент внутри его родителя | Блочный способ разметки |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | `left` или `right` | `static` или `relative` | `0` | Блочный способ разметки (плавающие элементы) |
| *любое* `table-*`*, кроме* `table-caption` | *любое* | *любое* | `0` | Внутренние `table-*` элементы не имеют отступов, вместо этого используйте `border-spacing` (en-US) |
| *любое, кроме `flex`,* `inline-flex`*, или* `table-*` | *любое* | *`fixed`* или `absolute` | `0`, кроме случаев, когда `margin-left` и `margin-right` установлены как `auto`. В этом случае, устанавливается значение центрирующее границы области внутри доступной `width` (ширины), если значение фиксировано. | Способ разметки абсолютным позиционированием |
| `flex`, `inline-flex` | *любое* | *любое* | `0`, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным `auto` отступам. | Способ разметки с помощью flexbox |

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

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

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

```

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

```css
.content {
  margin-right: 5%;
}
.sidebox {
  margin-right: 10px;
}
.logo {
  margin-right: -5px;
}
```

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

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

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

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

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


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

min-width
=========

Свойство CSS **`min-width`** устанавливает минимальную ширину элемента. Оно предотвращает используемое значение свойства `width` от становления меньше, чем значение, указанное для `min-width`.

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

Ширина элемента принимает значение `min-width` когда `min-width` больше чем `max-width` или `width`.

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

```css
/\* Ключевые слова \*/
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;

/\* <length> значение \*/
min-width: 3.5em;

/\* <percentage> значение \*/
min-width: 10%;

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

### Значения

`<length>`

Минимальная ширина выражается как `<length>`. Отрицательные значения делают свойство недействительным.

`<percentage>`

Минимальная ширина выражается как `<percentage>` от ширины родительского блока. Отрицательные значения делают свойство недействительным.

#### Значения-ключевые слова

`auto`

Минимальная ширина для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.

`max-content`
Экспериментальная возможность

Внутренняя предпочтительная ширина.

`min-content`
Экспериментальная возможность

Внутренняя минимальная ширина.

`fill-available`
Экспериментальная возможность

Ширина родительского блока минус горизонтальные `margin`, `border`, и `padding`. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., `available`.)

`fit-content`
Экспериментальная возможность

Определяет как `min(max-content, max(min-content, fill-available))`.

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

min-width =
  auto                                      | (en-US)
  <length-percentage [0,∞]>                 | (en-US)
  min-content                               | (en-US)
  max-content                               | (en-US)
  fit-content( <length-percentage [0,∞]> )

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

```

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

```css
table {
  min-width: 75%;
}

form {
  min-width: 0;
}
```

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # min-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | все элементы, кроме незаменяемых строчных элементов, табличных строк и групп строк |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, как указан, или абсолютная длина |
| Animation type | длина, проценты или calc(); |

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

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

See also
--------

* `width`, `max-width`
* Блочная модель (en-US), `box-sizing`


Использование переменных в CSS - CSS: каскадные таблицы стилей

Использование переменных в CSS
==============================

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

**CSS переменные** (**пользовательские CSS-свойства**) это сущности, определяемые автором CSS, хранящие конкретные значения, которые можно повторно использовать в документе. Они устанавливаются с использованием custom property нотации (например. **`--main-color: black;`**) и доступны через функцию var() (например. `color: var(--main-color);`) .

Сложные веб-сайты имеют очень большое количество CSS, часто с множеством повторяющихся значений. Например, один и тот же цвет может использоваться в сотнях разных мест, что требует глобального поиска и замены, если этот цвет необходимо изменить. CSS переменные позволяют сохранять значение в одном месте, а затем многократно использовать его в любом другом месте. Дополнительным преимуществом являются семантические идентификаторы. Для примера: запись `--main-text-color` более понятна, чем `#00ff00`, особенно если этот же цвет используется и в другом контексте.

CSS переменные подчиняются каскаду и наследуют значения от своих родителей.

Основное использование
----------------------

Объявление переменной:

```css
element {
  --main-bg-color: brown;
}
```

Использование переменной:

```css
element {
  background-color: var(--main-bg-color);
}
```

**Примечание:** В более ранней спецификации префикс для переменных был `var-` , но позже был изменён на `--`. Firefox 31 и выше следуют новой спецификации.(Firefox bug 985838)

Первый шаг с CSS Переменными
----------------------------

Начнём с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:

```css
.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}
```

Мы применим его к этому HTML:

```html
<div>
  <div class="one"></div>
  <div class="two">Text <span class="five">- more text</span></div>
  <input class="three" />
  <textarea class="four">Lorem Ipsum</textarea>
</div>
```

что приводит нас к этому:

Обратите внимание на повторения в CSS. Коричневый фон установлен в нескольких местах. Для некоторых CSS объявлений можно указать этот цвет выше в каскаде и наследование CSS решит эту проблему. Но для нетривиальных проектов это не всегда возможно. Объявив переменную в псевдоклассе :root, автор CSS может избежать ненужных повторений, используя эту переменную.

```css
:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}
```

```
<div>
  <div class="one"></div>
  <div class="two">Text <span class="five">- more text</span></div>
  <input class="three" />
  <textarea class="four">Lorem Ipsum</textarea>
</div>
```

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

Наследование переменных в CSS и возвращаемые значения
-----------------------------------------------------

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

```html
<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>
```

со следующим CSS:

```css
.two {
  --test: 10px;
}

.three {
  --test: 2em;
}
```

В результате `var(--test) будет:`

* для элемента с классом `class="two"`: `10px`
* для элемента с классом `class="three"`: `2em`
* для элемента с классом `class="four"`: `10px` (унаследовано от родителя)
* для элемента с классом `class="one"`: *недопустимое значение*, что является значением по умолчанию для любого пользовательского свойства.

Используя var() вы можете объявить множество **возвращаемых значений** когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow DOM.

Первый аргумент функции это имя пользовательского свойства. Второй аргумент функции, если имеется, это возвращаемое значение, который используется в качестве замещающего значения, когда пользовательское свойство является не действительным. Например:

```css
.two {
  color: var(--my-var, red); /\* red если --my-var не определена \*/
}

.three {
  background-color: var(
    --my-var,
    var(--my-background, pink)
  ); /\* pink если --my-var и --my-background не определены \*/
}

.three {
  background-color: var(
    --my-var,
    --my-background,
    pink
  ); /\* "--my-background, pink" будет воспринят как значение в случае, если --my-var не определена \*/
}
```

**Примечание:** В замещаемых значениях можно использовать запятые по аналогии с пользовательскими свойствами. Например, var(--foo, red, blue) определить red, blue как замещающее значение (от первой запятой и до конца определения функции)

**Примечание:** Данный метод также вызывает проблемы с производительностью. Он отображает страницу медленнее чем обычно, т.к. требует время на разбор.

Обоснованность и полезность
---------------------------

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

К сожалению, эти значения могут использоваться через функциональную запись `var()` , в контексте где они, возможно, не имеют смысла. Свойства и пользовательские переменные могут привести к невалидным выражениям CSS, что приводит к новой концепции *валидности во время исполнения.*

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

{{Compat}}