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

grid-row-start
==============

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-row-start`** определяет начальную позицию элемента грид в строке, добавляя линию, span или ничего (автоматически) к его расположению в сетке, тем самым определяя начальный край inline-элемента его grid area (en-US).

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

Syntax
------

```css
/\* Keyword value \*/
grid-row-start: auto;

/\* <custom-ident> values \*/
grid-row-start: somegridarea;

/\* <integer> + <custom-ident> values \*/
grid-row-start: 2;
grid-row-start: somegridarea 4;

/\* span + <integer> + <custom-ident> values \*/
grid-row-start: span 3;
grid-row-start: span somegridarea;
grid-row-start: 5 somegridarea span;

/\* Global values \*/
grid-row-start: inherit;
grid-row-start: initial;
grid-row-start: unset;
```

This property is specified as a single `<grid-line>` value. A `<grid-line>` value can be specified as:

* either the `auto` keyword
* or a `<custom-ident>` value
* or an `<integer>` value
* or both `<custom-ident>` and `<integer>`, separated by a space
* or the keyword `span` together with either a `<custom-ident>` or an `<integer>` or both.
### Values

`auto`

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

`<custom-ident>`

Если есть именованная строка с именем '<custom-ident>-start', он вносит первую такую строку в размещение элемента сетки.

**Примечание:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-row-start: foo;` will choose the start edge of that named grid area (unless another line named `foo-start` was explicitly specified before it).В противном случае это обрабатывается так, как если бы целое число 1 было указано вместе с `<custom-ident>`.

`<integer> && <custom-ident>?`

Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчёт, начиная с конечного края явной сетки. Если имя задано как <custom-ident>, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.An `<integer>` value of `0` is invalid.

`span && [ <integer> || <custom-ident> ]`

Contributes a grid span to the grid item's placement; such that the row start edge of the grid item's grid area is n lines from the end edge.If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid, corresponding to the search direction, are assumed to have that name for the purpose of counting this span.If the <integer> is omitted, it defaults to `1`. Negative integers or 0 are invalid.The `<custom-ident>` cannot take the `span` value.

### Formal syntax
```

grid-row-start =
  <grid-line>

<grid-line> =
  auto                                                | (en-US)
  <custom-ident>                                      | (en-US)
  [ (en-US) [ (en-US) <integer [-∞,-1]> | (en-US) <integer [1,∞]> ] (en-US) && (en-US) <custom-ident>? (en-US) ] (en-US)  | (en-US)
  [ (en-US) span && (en-US) [ (en-US) <integer [1,∞]> || (en-US) <custom-ident> ] (en-US) ] (en-US)

```

Examples
--------

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}
```

```
\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}
```

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # line-placement |

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

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

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

See also
--------

* Related CSS properties: `grid-row-end` (en-US), `grid-row` (en-US), `grid-column-start` (en-US), `grid-column-end` (en-US), `grid-column`
* Grid Layout Guide: *Line-based placement with CSS Grid*
* Video tutorial: *Line-based placement*


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

Селекторы по ID
===============

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

В HTML-документах CSS-селекторы по ID производят выборку всех элементов по ID, полностью совпадающих с селектором.

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

#id_value { style properties }
```

То же самое — `селектор по атрибутам`:
```

[id=id_value] { style properties }
```

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

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

```html
<span id="identified">Тут span с каким-то текстом.</span>
<span>Здесь тоже span.</span>
```

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

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

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

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


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

overflow-wrap
=============

CSS свойство **`overflow-wrap`** применяется к строковым элементам, устанавливая должен ли браузер расставлять переносы строк внутри неразрывной строки, чтобы избежать выхода текста за границы элемента.

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

**Примечание:** В отличие от `word-break`, `overflow-wrap` создаёт перенос только, если целое слово не может быть размещено на своей линии без переполнения

Изначально свойство `word-wrap` не было стандартом, хотя и было реализовано большинством браузеров. Впоследствии оно было переименовано в `overflow-wrap` c алиасом `word-wrap`.

Syntax
------

```css
/\* Keyword values \*/
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

/\* Global values \*/
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;
```

Свойство `overflow-wrap` задаётся с помощью ключевого слова и выбирается из списка значений приведённых ниже:

### Values

`normal`

Разрыв строк происходит согласно обычным правилам разрыва (такими как пробел между двумя словами).

`anywhere`

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

`break-word`

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

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

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

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

overflow-wrap =
  normal      | (en-US)
  break-word  | (en-US)
  anywhere

```

Examples
--------

### Сравнение overflow-wrap, word-break, и hyphens

Этот пример сравнивает результаты применения `overflow-wrap`, `word-break`, и `hyphens`, когда разбивается длинное слово.

#### HTML

```html
<p>
  They say the fishing is excellent at Lake
  <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>normal</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: anywhere</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: break-word</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>word-break</code>)
</p>
<p>
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, without
  <code>lang</code> attribute)
</p>
<p lang="en">
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, English rules)
</p>
<p class="hyphens" lang="de">
  They say the fishing is excellent at Lake
  <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though
  I've never been there myself. (<code>hyphens</code>, German rules)
</p>
```

#### CSS

```css
p {
  width: 13em;
  margin: 2px;
  background: gold;
}

.ow-anywhere {
  overflow-wrap: anywhere;
}

.ow-break-word {
  overflow-wrap: break-word;
}

.word-break {
  word-break: break-all;
}

.hyphens {
  hyphens: auto;
}
```

#### Result

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

| Specification |
| --- |
| CSS Text Module Level 3 # overflow-wrap-property |

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

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

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

See also
--------

* `word-break`
* `hyphens`
* `text-overflow` (en-US)


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

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

CSS свойство **`column-rule-style`** устанавливает стиль линии, расположенной между колонками при мультиколоночной вёрстке.

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

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

```css
/\* <'border-style'> значения \*/
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

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

Свойство `column-rule-style` указывается как одиночное `<'border-style'>` значение.

### Значения

`<'border-style'>`

Ключевое слово, определяющее `border-style` (en-US), описывающий стиль для линии, разделяющей столбцы. Стилизация должна быть интерпретирована как разрушающая границы модель.

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

column-rule-style =
  <line-style>

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

```

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

### HTML

```html
<p>
  This is a bunch of text split into three columns. The `column-rule-style`
  property is used to change the style of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>
```

### CSS

```css
p {
  column-count: 3;
  column-rule-style: dashed;
}
```

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

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

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

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

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

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


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

outline-width
=============

CSS-свойство **`outline-width`** задаёт толщину обводки элемента. Обводка — линия вокруг элемента за пределами рамки (`border`).

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

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

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

```css
/\* Ключевые слова \*/
outline-width: thin;
outline-width: medium;
outline-width: thick;

/\* Значения типа <length> \*/
outline-width: 1px;
outline-width: 0.1em;

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

Свойство `outline-width` может быть иметь одно из перечисленных ниже значений.

### Values

`<length>`

Толщина обводки, указанная в значениях типа `<length>`.

`thin`

Зависит от реализации. Как правило, соответствует `1px` в десктопных браузерах (включая Firefox).

`medium`

Зависит от реализации. Как правило, соответствует `3px` в десктопных браузерах (включая Firefox).

`thick`

Зависит от реализации. Как правило, соответствует `5px` в десктопных браузерах (включая Firefox).

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

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

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

outline-width =
  <line-width>

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

```

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

### Демонстрация обводки разных размеров толщины

#### HTML

```html
<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>
```

#### CSS

```css
span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}
```

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

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-width |

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

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

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

* `outline`
* `outline-color`
* `outline-style`


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

border-image-width
==================

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

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

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

he **`border-image-width`** CSS property defines the width of the border image by defining inward offsets from the border edges. If the `border-image-width` is greater than the `border-width`, then the border image extends beyond the padding (and/or content) edge.

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

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

```css
/\* border-image-width: all \*/
border-image-width: 3;

/\* border-image-width: vertical horizontal \*/
border-image-width: 2em 3em;

/\* border-image-width: top horizontal bottom \*/
border-image-width: 5% 15% 10%;

/\* border-image-width: top right bottom left \*/
border-image-width: 5% 2em 10% auto;

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

где:

*width*

Is a value denoting the width of the image used as a border to apply to all four edges. It is used only in the one-value syntax.

*vertical*

Is a value denoting the width of the image used as a border to apply to all vertical edges, that is the top and bottom edges. It is used only in the two-value syntax.

*horizontal*

Is a value denoting the width of the image used as a border to apply to all horizontal edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.

*top*

Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the three- and four-value syntaxes.

*bottom*

Is a value denoting the width of the image used as a border to apply to the bottom edge. It is used only in the three- and four-value syntaxes.

*right*

Is a value denoting the width of the image used as a border to apply to the right edge. It is used only in the four-value syntax.

*left*

Is a value denoting the width of the image used as a border to apply to the left edge. It is used only in the four-value syntax.

`inherit`

Is a keyword indicating that all four values are inherited from their parent's element calculated value.

### Значения

`<length>`

Represents the width of the border. It can be an absolute or relative length. This length must not be negative.

`<percentage>`

Represents the width of the border as a percentage of the element. The percentage must not be negative.

`<number>`

Represents a multiple of the computed value of the element's `border-width` property to be used as the border width. The number must not be negative.

`auto`

Causes the border image width to equal the intrinsic width or height (whichever is applicable) of the corresponding `border-image-slice`. If the image does not have the required intrinsic dimension then the corresponding computed border-width is used instead.

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

border-image-width =
  [ (en-US) <length-percentage [0,∞]> | (en-US) <number [0,∞]> | (en-US) auto ] (en-US){1,4} (en-US)

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

```

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

### HTML Content

```html
<!doctype html>

<html>
  <head></head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
      amet.
    </p>
  </body>
</html>
```

### CSS Content

```css
p {
  border-image-source: url("border.png");
  border-image-slice: 30;
  border-image-width: 20px;
  border-image-repeat: round;
  padding: 40px;
}
```

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

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

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

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


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

:first-child
============

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

```css
>
/\* Выбирает любой <p>, который является первым элементом
 среди своих братьев и сестёр \*/
p:first-child {
  color: lime;
}
```

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

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

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

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

#### HTML

```html
<div>
  <p>This text is selected!</p>
  <p>This text isn't selected.</p>
</div>

<div>
  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text isn't selected.</p>
</div>
```

#### CSS

```css
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```

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

### Стилизация списка

#### HTML

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1</li>
      <li>Item 3.2</li>
      <li>Item 3.3</li>
    </ul>
  </li>
</ul>
```

#### CSS

```css
ul li {
  color: blue;
}

ul li:first-child {
  color: red;
  font-weight: bold;
}
```

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

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

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

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

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

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

* `:-moz-first-node` (en-US)
Non-standard
* `:first-of-type`
* `:last-child`
* `:nth-child()`


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

:optional
=========

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

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

Чтобы задать особый внешний вид обязательным полям формы можно использовать псевдокласс `:required`.

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

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

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

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

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

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

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

* `:required`
* `:invalid`
* `:valid`


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

::first-letter (:first-letter)
==============================

CSS псевдоэлемент **`::first-letter`** применяет стили к первой букве первой строки блочного элемента, но только если нету другого предшествующего содержимого (такого как изображения или инлайн таблицы).

```css
/\* Стили для первой буквы элемента <p> \*/
p::first-letter {
  font-size: 130%;
}
```

Может быть непросто определить первую букву элемента:

* Пунктуация, которая предшествует или следует сразу за первой буквой, включается в селектор. Пунктуация включает любой символ Юникода, определённый в классах *open* (Ps), *close* (Pe), *initial quote* (Pi), *final quote* (Pf), and *other punctuation* (Po).
* В некоторых языках существуют диграфы, которые должны преобразовываться в верхний регистр вместе, например `IJ` в Нидерландском. В этих случаях обе буквы диграфа должны соответствовать псевдоэлементу `::first-letter` (это слабо поддерживается браузерами, смотрите таблицу совместимости ниже).
* Комбинация псевдоэлемента `::before` и свойства `content` может привести к добавлению некоторого текста в начало элемента. В этом случае псевдоэлементу `::first-letter` будет соответствовать первая буква добавленного содержимого.

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

Разрешённые свойства
--------------------

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

* Все свойства, связанные с шрифтами: `font`, `font-style`, `font-feature-settings` (en-US), `font-kerning` (en-US), `font-language-override` (en-US), `font-stretch` (en-US), `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-weight`, `font-size`, `font-size-adjust` (en-US), `line-height` и `font-family`
* Все свойства, связанные с фоном: `background`, `background-color`, `background-image`, `background-clip`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment` и `background-blend-mode`
* Все свойства для внешних отступов: `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`
* Все свойства для внутренних отступов: `padding`, `padding-top` (en-US), `padding-right`, `padding-bottom` (en-US), `padding-left`
* Все свойства, связанные с рамкой: сокращения `border`, `border-style` (en-US), `border-color` (en-US), `border-width`, `border-radius`, `border-image` (en-US) и полные записи свойств
* Свойства `color` (en-US)
* Свойства `text-decoration` (en-US), `text-shadow`, `text-transform` (en-US), `letter-spacing`, `word-spacing` (when appropriate), `line-height`, `text-decoration-color` (en-US), `text-decoration-line` (en-US), `text-decoration-style` (en-US), `box-shadow`, `float`, `vertical-align` (только если `float` равен `none`)
Синтаксис
---------

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

Сделаем первую букву каждого абзаца красной и большой.

### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est.
</p>
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>
<p>
  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
  dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
<p>-Начало специального знака препинания.</p>
<p>_Начало специального знака препинания.</p>
<p>"Начало специального знака препинания.</p>
<p>'Начало специального знака препинания.</p>
<p>*Начало специального знака препинания.</p>
<p>#Начало специального знака препинания.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p>
```

### CSS

```css
p::first-letter {
  color: red;
  font-size: 130%;
}
```

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

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-letter-pseudo |

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

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

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

* `::first-line`


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

:first
======

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

```css
/\* Выбирает первую страницу при печати \*/
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}
```

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

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

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

### HTML

```html
<p>Первая страница.</p>
<p>Вторая страница.</p>
<button>Напечатать</button>
```

### CSS

```css
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}
```

### JavaScript

```js
document.querySelector("button").onclick = function () {
  window.print();
};
```

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

Нажмите кнопку "Напечатать", чтобы напечатать пример. Слова на первой странице должны быть примерно в центре, тогда как на остальных страницах надписи будут на своих обычных местах.

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

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

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

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

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

* `@page`
* Другие связанные псевдоклассы: `:left`, `:right`


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

@supports
=========

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

CSS @-правило **`@supports`** связывает набор вложенных правил в блоке CSS-кода, ограниченном фигурными скобками, с условием, представляющим собой одно или несколько проверочных объявлений в виде пар `свойство: значение`, объединенных операторами `and`, `or` или `not` (логические И, ИЛИ, НЕ). Такое условие называется *supports-условием*.

`@supports` позволяет CSS-коду выполнять *feature query* (запрос на проверку поддержки различных возможностей CSS в браузере).

Правило `@supports` может быть использовано не только на верхнем уровне вложенности CSS, но и внутри блоков любых других @-правил. Доступ к нему можно получить с помощью интерфейса объектной модели CSS `CSSSupportsRule` (en-US).

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

supports-условие состоит из одного или нескольких CSS-объявлений в сочетании с различными логическими операторами. Приоритет операторов может быть переопределён при помощи круглых скобок.

### Синтаксис объявления

В простейшем случае, supports-условие представляет собой одно CSS-объявление, то есть, пару вида `свойство: значение`. Следующее выражение

```css
( transform-origin: 5% 5% )
```

вернёт `true`, если `transform-origin` (en-US) поддерживает синтаксис, в котором значение `5% 5%` является допустимым.

CSS-объявление всегда заключается в круглые скобки.

### Оператор not

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

```css
not ( transform-origin: 10em 10em 10em )
```

вернёт true, если `transform-origin` (en-US) **не** поддерживает синтаксис, в котором значение `10em 10em 10em` является допустимым.

Как и другие операторы, `not` может быть применен к любому составному выражению. Следующие примеры являются синтаксически корректными:

```css
not ( not ( transform-origin: 2px ) )
(display: flexbox) and ( not (display: inline-grid) )
```

**Примечание:** Нет необходимости заключать оператор `not` в круглые скобки на верхнем уровне вложенности. Однако, скобки обязательны, если `not` используается в сочетании с другими операторами (`and` или `or`).

### Оператор and

Оператор `and` (логическое И или *конъюнкция*) объединяет два выражения и возвращает `true` тогда и только тогда, когда оба выражения истинны. В следующем примере всё выражение вернет true только в том случае, если оба выражения в круглых скобках одновременно истинны.

```css
(display: table-cell) and (display: list-item)
```

В одном выражении может использоваться несколько операторов `and`; при этом нет необходимости использовать дополнительные круглые скобки. Так, выражение

```css
(display: table-cell) and (display: list-item) and (display:run-in)
```

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

```css
(display: table-cell) and ((display: list-item) and (display:run-in))
```

### Оператор or

Оператор `or` (логическое ИЛИ или *дизъюнкция*) объединяет два выражения и возвращает `true`, если истинно хотя бы одно из них. В следующем примере вся строка вернёт `true`, если хотя бы одно из выражений, заключенных в круглые скобки, истинно:

```css
( transform-style: preserve ) or ( -moz-transform-style: preserve )
```

В одном выражении может использоваться несколько операторов `or`; при этом нет необходимости использовать дополнительные скобки. Так, выражение

```css
( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  )
```

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

```css
( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  )))
```

>
> **Примечание**: если в выражении используются оба оператора, `and` и `or`, **необходимо использовать скобки**, чтобы указать порядок применения логических операторов. Если скобки не используются, выражение считается некорректным и всё правило `@support` будет полностью проигнорировано.
>
>
>

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

@supports =
  @supports <supports-condition> { <rule-list> }

<supports-condition> =
  not <supports-in-parens>                            | (en-US)
  <supports-in-parens> [ (en-US) and <supports-in-parens> ] (en-US)\* (en-US)  | (en-US)
  <supports-in-parens> [ (en-US) or <supports-in-parens> ] (en-US)\* (en-US)

<supports-in-parens> =
  ( <supports-condition> )  | (en-US)
  <supports-feature>        | (en-US)
  <general-enclosed>

<supports-feature> =
  <supports-decl>

<general-enclosed> =
  [ (en-US) <function-token> <any-value>? (en-US) ) ] (en-US)  | (en-US)
  [ (en-US) ( <any-value>? (en-US) ) ] (en-US)

<supports-decl> =
  ( <declaration> )

```

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

### Тестирование заданного свойства

```css
@supports (animation-name: test) {
    … /\* размещенные в этом блоке правила будут применены, если браузером поддерживаются свойства анимации без префиксов \*/
    @keyframes { /\* @supports является условным правилом группировки, оно может содержать в себе другие @-правила \*/
      …
    }
}
```

### Тестирование заданного свойства или его версии с префиксом

```css
@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
 (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
    … /\* размещенные в этом блоке правила будут применены, если браузером поддерживаются свойства 3D трансформации, хотя бы с префиксами \*/
}
```

### Тестирование неподдерживаемого или специфического свойства

```css
@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /\* в этом блоке могут быть размещены CSS-правила, имитирующие правило `text-align-last: justify` \*/
}
```

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

| Specification |
| --- |
| CSS Conditional Rules Module Level 4 # at-supports-ext |
| CSS Conditional Rules Module Level 3 # at-supports |

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

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

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

* CSSOM-класс `CSSSupportsRule` (en-US), а также метод `CSS.supports` (en-US), позволяющий использовать `@supports`-проверки в JavaScript.


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

:target
=======

Псевдокласс CSS **`:target`** представляет уникальный элемент (целевой элемент) с подходящим `id` URL-фрагментом.

```css
/\* Выбирает элемент с подходящим ID текущего URL-фрагмента \*/
:target {
  border: 2px solid black;
}
```

Для примера, следующий URL имеет фрагмент (обозначается знаком *#*), который указывает на элемент с именем `section2`:
```

http://www.example.com/index.html#section2
```

Следующий элемент будет выбран селектором `:target`, если текущий URL равен вышеуказанному:

```html
<section id="section2">Example</section>
```

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

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

### Таблица контента

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

#### HTML

```html
<h3>Table of Contents</h3>
<ol>
  <li><a href="#p1">Jump to the first paragraph!</a></li>
  <li><a href="#p2">Jump to the second paragraph!</a></li>
  <li>
    <a href="#nowhere"
 >This link goes nowhere, because the target doesn't exist.</a
 >
  </li>
</ol>

<h3>My Fun Article</h3>
<p id="p1">
  You can target <i>this paragraph</i> using a URL fragment. Click on the link
  above to try out!
</p>
<p id="p2">
  This is <i>another paragraph</i>, also accessible from the links above. Isn't
  that delightful?
</p>
```

#### CSS

```css
p:target {
  background-color: gold;
}

/\* Добавление псевдоэлемента внутрь target-элемента \*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/\* Стиль italic-элементов без target-элемента \*/
p:target i {
  color: red;
}
```

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

### Pure-CSS lightbox

Вы можете использовать псевдокласс `:target` для создания lightbox без использования JavaScript. Этот метод основан на способности якорных ссылок указывать на элементы, которые изначально скрыты на странице. После этого, CSS изменяет их `display` на видимый.

**Примечание:** Более полный pure-CSS lightbox , основанный на псевдоклассе`:target` - available on GitHub (demo).

#### HTML

```html
<ul>
  <li><a href="#example1">Open example #1</a></li>
  <li><a href="#example2">Open example #2</a></li>
</ul>

<div class="lightbox" id="example1">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim,
      placerat id eleifend eu, semper vel sem.
    </figcaption>
  </figure>
</div>

<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>
      Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam
      quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna.
    </figcaption>
  </figure>
</div>
```

#### CSS

```css
/\* Закрываем lightbox \*/
.lightbox {
  display: none;
}

/\* Открываем lightbox \*/
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/\* Содержимое lightbox \*/
.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightpink;
}

/\* Кнопка закрытия \*/
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/\* Обёртка lightbox \*/
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  content: "";
  cursor: default;
}
```

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

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

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

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

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

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

* Using the :target pseudo-class in selectors


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

::backdrop
==========

CSS псевдо-элемент **`::backdrop`** это прямоугольник с размерами окна, который отрисовывается сразу же после отрисовки любого элемента в полноэкранном режиме. Это включает элементы, установленные в полноэкранный режим с помощью Fullscreen API (en-US) и элементы `<dialog>`.

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

```css
/\* Подложка показывается только тогда, когда диалоговое окно открыто с помощью метода dialog.showModal() \*/
dialog::backdrop {
  background: rgba(255, 0, 0, 0.25);
}
```

Все полноэкранные элементы появляются в порядке last-in/first out (LIFO - последним пришёл - первым ушёл) на специальном верхнем слое окна, который всегда отрисовывается последним (поэтому поверх остальных) до отрисовки содержимого окна. Псевдо-элемент `::backdrop` позволяет затемнить, стилизовать или полностью спрятать всё, что находится под элементом, когда он находится на этом верхнем слое.

`::backdrop` не наследует от других элементов и другие элементы не могут от него наследовать. Нет никаких ограничений на свойства, которые можно применять к этому псевдо-элементу.

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

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

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

```css
video::backdrop {
  background-color: #448;
}
```

В результате окно выглядит так:

![](/ru/docs/Web/CSS/::backdrop/bbb-backdrop.png)

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

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 4 # backdrop |

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

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

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

* `:fullscreen` псевдокласс
* `<dialog>` HTML-элемент
* Fullscreen API (en-US)


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

:valid
======

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

CSS псевдокласс `:valid` находит любые `<input>` или `<form>` элементы, контент которых валиден (en-US), в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что помогает понять пользователю, что он ввёл данные правильно.

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

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

### HTML

```html
<form>
  <label>Введите URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Введите адрес эл. почты:</label>
  <input type="email" required />
</form>
```

### CSS

```css
input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-valid |
| Selectors Level 4 # validity-pseudos |

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

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

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

* `:invalid`, `:required`, `:optional`


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

outline
=======

Сокращённое свойтсов CSS **`outline`** ) устанавливает большинство свойств обводки в одном объявлении.

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

Составные свойства
------------------

Это свойство предназначено для короткой записи следующих CSS-свойств:

* `outline-color`
* `outline-style`
* `outline-width`
Синтаксис
---------

```css
/\* style \*/
outline: solid;

/\* color | style \*/
outline: #f66 dashed;

/\* style | width \*/
outline: inset thick;

/\* color | style | width \*/
outline: green solid 3px;

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

Свойство `outline` может быть задано одним, двум или тремя перечисленными ниже значений. Порядок следования значений не имеет значения. Как и в случае с другими сокращёнными свойствами, вместо пропущенных значений будет использоваться первоначальное значение.

>
> **Note:** если стиль обводки не задан, он будет невидим для большого количества элементов. Всё потому, что обводка по умолчанию не стилизован (т.е. для его свойств задано значение `none`). Самое заветное исключение составляют элементы `input`, для которых браузеры определяют стандартный стиль.
>
>
>

### Значения

`<'outline-color'>`

Задаёт цвет обводки. По умолчанию используется `invert`, если браузер поддерживает это ключевое слово, в противном случае — `currentcolor`. Смотрите `outline-color` для получения дополнительной информации.

`<'outline-style'>`

Устанавливает стиль обводки. По умолчанию `none` (если стиль обводки не определён). Смотрите `outline-style` для получения дополнительной информации.

`<'outline-width'>`

Устанавливает толщину обводки. По умолчанию `medium` (если толщина обводки не указана). Смотрите `outline-width` для получения дополнительной информации.

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

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

Есть несколько свойств, определяющих внешний вид обводки. С помощью свойства `outline` можно задать стиль, цвет и толщину, `outline-offset` — расстояние от рамки элемента, `border-radius` — закруглённые углы.

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

Проблемы, связанные с доступностью
----------------------------------

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

* How to Design Useful and Usable Focus Indicators
* WCAG 2.1: Understanding Success Criterion 2.4.7: Focus Visible
Формальное определение
----------------------

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `outline-color`: `auto`
* `outline-style`: `none`
* `outline-width`: `medium`
 |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `outline-color`: Для ключевого слова `auto`, значение - `currentcolor`. Для значения цвета, если значение имеет прозрачность, соответственно, значение будет через `rgba()`. Если это не так, это будет `rgb()`. Ключевое слово `transparent` отображается, как `rgba(0,0,0,0)`.
* `outline-width`: абсолютная длина; если указано ключевое слово `none`, вычисленное значение - `0`
* `outline-style`: как указано
 |
| Animation type | как и у каждого из подсвойств этого свойства:* `outline-color`: цвет
* `outline-width`: длина
* `outline-style`: by computed value type
 |

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

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

```

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

### Использование обводки для стилизации элемента в фокусе

#### HTML

```html
<a href="#">У этой ссылки есть собственный стиль при фокусе.</a>
```

#### CSS

```css
a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}
```

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

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline |

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

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

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

* `outline-color`
* `outline-style`
* `outline-width`


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

background-clip
===============

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

Свойство CSS **`background-clip`** определяет как цвет фона или фоновое изображение будут выводиться под границами блока.

Если фоновое изображение или цвет не заданы, это свойство будет иметь визуальный эффект, только если у границы есть прозрачные области или частично непрозрачные области (из-за `border-style` (en-US) или `border-image` (en-US)); в противном случае граница скрывает разницу.

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

```css
/\* Ключевые слова \*/
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

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

### Значения

`border-box`

Фон распространяется до внешнего края границы (но под границей в z-порядке).

`padding-box`

Фон распространяется до внешнего края отступа. Под границей фон не рисуется.

`content-box`

Фон закрашивается внутри (обрезается) поля содержимого.

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

Фон закрашивается внутри (обрезается) текста переднего плана.

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

background-clip =
  <visual-box># (en-US)

<visual-box> =
  content-box  | (en-US)
  padding-box  | (en-US)
  border-box

```

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

### HTML

```html
<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">
  The background extends to the inside edge of the border.
</p>
<p class="content-box">
  The background extends only to the edge of the content box.
</p>
<p class="text">The background is clipped to the foreground text.</p>
```

### CSS

```css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  color: rgba(0, 0, 0, 0.2);
}
```

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

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

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

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

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

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

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

* Свойство `clip-path` создаёт область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться.
* Свойства фона: `background`, `background-color`, `background-image`
* Введение в блочную модель CSS


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

flex-flow
=========

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

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

* Learn more
* See full compatibility
* Report feedback
**`flex-flow`** CSS свойство, которое является сокращением для отдельных свойств `flex-direction` и `flex-wrap`.

```css
/\* flex-flow: <'flex-direction'> \*/
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/\* flex-flow: <'flex-wrap'> \*/
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/\* flex-flow: <'flex-direction'> and <'flex-wrap'> \*/
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/\* Global values \*/
flex-flow: inherit;
flex-flow: initial;
flex-flow: unset;
```

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `flex-direction`: `row`
* `flex-wrap`: `nowrap`
 |
| Применяется к | flex-контейнеры |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `flex-direction`: как указано
* `flex-wrap`: как указано
 |
| Animation type | как и у каждого из подсвойств этого свойства:* `flex-direction`: discrete
* `flex-wrap`: discrete
 |

Больше информации и свойств описано в Using CSS flexible boxes (en-US).

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

### Значения

Смотрите `flex-direction` (en-US) и `flex-wrap` (en-US).

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

flex-flow =
  <'flex-direction'>  || (en-US)
  <'flex-wrap'>

```

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

```css
element {
  /\* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines \*/
  flex-flow: column-reverse wrap;
}
```

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

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

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

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

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

* Using CSS flexible boxes (en-US)


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

column-fill
===========

Свойство `column-fill` применяется к родительскому элементу, разбитому на столбцы и указывает как содержимое располагается внутри столбца (column). Если значение свойства `column-fill` установлено как balanced, то содержимое во всех столбцах будет иметь одинаковую высоту. В случае использования значения `auto`, содержимое занимает столько пространства сколько ему потребуется.

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

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

```css
column-fill: auto;
column-fill: balance;

/\* Значения по умолчанию \*/
column-fill: inherit;
column-fill: initial;
column-fill: unset;
```

### Значения

`auto`

Высота столбцов не контролируется.

`balance`

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

### Возможные значения
```

column-fill =
  auto         | (en-US)
  balance      | (en-US)
  balance-all

```

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

```css
.content-box {
  column-count: 4;
  column-rule: 1px solid black;
  column-fill: balance;
  height: 200px;
}
```

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

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

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

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


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

::slotted()
===========

CSS псевдо-элемент **`::slotted()`** представляет собой любой элемент, помещённый в слот внутри HTML-шаблона (дополнительная информация в Using templates and slots (en-US)).

Это работает только при использовании внутри CSS, помещённого в shadow DOM (en-US). Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещённый в слот; он нацелен только на фактические элементы.

```css
/\* Выбирает любой элемент, помещённый в слот \*/
::slotted(\*) {
  font-weight: bold;
}

/\* Выбирает только <span>, помещённый в слот \*/
::slotted(span) {
  font-weight: bold;
}
```

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

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

Следующие фрагменты взяты из нашей демо slotted-pseudo-element (see it live also).

В этом демо мы использовали простой шаблон с тремя слотами:

```html
<template id="person-template">
  <div>
    <h2>Personal ID Card</h2>
    <slot name="person-name">NAME MISSING</slot>
    <ul>
      <li><slot name="person-age">AGE MISSING</slot></li>
      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
    </ul>
  </div>
</template>
```

Пользовательский элемент — `<person-details>` — определяется следующим образом:

```js
customElements.define(
  "person-details",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("person-template");
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({ mode: "open" });

      let style = document.createElement("style");
      style.textContent =
        "div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }" +
        "h2 { margin: 0 0 10px; }" +
        "ul { margin: 0; }" +
        "p { margin: 10px 0; }" +
        "::slotted(\*) { color: gray; font-family: sans-serif; } ";

      shadowRoot.appendChild(style);
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  },
);
```

Вы увидите, что при заполнении элемента `style` содержимым мы выбираем все slotted-элементы (`::slotted(*)`) и задаём им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые ещё не были успешно заполнены.

Элемент выглядит следующим образом при вставке на страницу:

```html
<person-details>
  <p slot="person-name">Dr. Shazaam</p>
  <span slot="person-age">Immortal</span>
  <span slot="person-occupation">Superhero</span>
</person-details>
```

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

| Specification |
| --- |
| CSS Scoping Module Level 1 # slotted-pseudo |

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

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

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

* Web components


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

<color>
=======

Тип **`<color>`** CSS data type предоставляет цвет в цветовом спектре sRGB. В `<color>` может включать значения прозрачности Альфа-канала (alpha-channel), указывающие, как цвет сочетается с его фоном.

В `<color>` может быть определена любым из следующих способов can.

* Использование или подключённого свойства ведённого в параметр (например, `blue` или `transparent`)
* Использование кубической системы координат RGB (via the #-hexadecimal or the `rgb()` and `rgba()` functional notations)
 ![Цветовая модель представлена виде куба](https://en.wikipedia.org/wiki/RGB_color_model#/media/File:RGB_color_solid_cube.png)
* Использование цилиндрической системы координат HSL (через функциональные обозначения `hsl()` и `hsla()`)

>
> \*\*Примечание:\*\*В этой статье подробно описывается тип данных <color>. Дополнительные сведения об использовании цвета в HTML см. В разделе применение цвета к элементам HTML с помощью CSS.
>
>
>

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

Для типа данных задаётся `<color>` с помощью одного из следующих параметров.

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

### Ключевые цвета

Ключевые слова для цвета - это идентификаторы без учёта регистра, представляющие определённый цвет, например `red`, `blue`, `black` или `lightseagreen`. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имён.

Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:

* HTML распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определённый алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и SVG.
* В отличие от HTML, CSS будет полностью игнорировать неизвестные ключевые слова.
* Ключевые слова цвета все представляют собой простые, сплошные цвета, без прозрачности.
* Несколько ключевых слов являются псевдонимами друг для друга:
    + `aqua` / `cyan`
    + `fuchsia` / `magenta`
    + `darkgray` / `darkgrey`
    + `darkslategray` / `darkslategrey`
    + `dimgray` / `dimgrey`
    + `lightgray` / `lightgrey`
    + `lightslategray` / `lightslategrey`
    + `gray` / `grey`
    + `slategray` / `slategrey`
* Хотя многие ключевые слова были адаптированы из X11, их значения RGB могут отличаться от соответствующего цвета в системах X11, поскольку производители иногда адаптируют цвета X11 к своему конкретному оборудованию.

**Примечание:** Список принятых ключевых слов претерпел много изменений в ходе эволюции CSS:

* CSS Level 1 включал только 16 основных цветов, называемых цветами VGA, поскольку они были взяты из набора отображаемых цветов на видеокартах VGA
* CSS Level 2 добавил ключевое слово `orange`.
* Хотя различные цвета не в спецификации (в основном адаптированные из списка цветов X11) поддерживались ранними браузерами, они не были формально определены до уровня SVG 1.0 и CSS Colors 3. Они называются расширенными цветовыми *ключевыми* словами, *цветами X11* или цветами SVG.
* CSS Colors Level 4 добавил ключевое слово rebeccapurple, чтобы почтить пионера веб-Эрика Мейера.

| Спецификация | Эквивалент RGB | Ключевое слово | RGB hex значение | Видео сайта |
| --- | --- | --- | --- | --- |
| CSS Level 1 |  | `black` | `#000000` |  |
|  | `silver` | `#c0c0c0` |  |
|  | `gray` | `#808080` |  |
|  | `white` | `#ffffff` |  |
|  | `maroon` | `#800000` |  |
|  | `red` | `#ff0000` |  |
|  | `purple` | `#800080` |  |
|  | `fuchsia` | `#ff00ff` |  |
|  | `green` | `#008000` |  |
|  | `lime` | `#00ff00` |  |
|  | `olive` | `#808000` |  |
|  | `yellow` | `#ffff00` |  |
|  | `navy` | `#000080` |  |
|  | `blue` | `#0000ff` |  |
|  | `teal` | `#008080` |  |
|  | `aqua` | `#00ffff` |  |
| CSS Level 2 (Revision 1) |  | `orange` | `#ffa500` |  |
| CSS Color Module Level 3 |  | `aliceblue` | `#f0f8ff` |  |
|  | `antiquewhite` | `#faebd7` |  |
|  | `aquamarine` | `#7fffd4` |  |
|  | `azure` | `#f0ffff` |  |
|  | `beige` | `#f5f5dc` |  |
|  | `bisque` | `#ffe4c4` |  |
|  | `blanchedalmond` | `#ffebcd` |  |
|  | `blueviolet` | `#8a2be2` |  |
|  | `brown` | `#a52a2a` |  |
|  | `burlywood` | `#deb887` |  |
|  | `cadetblue` | `#5f9ea0` |  |
|  | `chartreuse` | `#7fff00` |  |
|  | `chocolate` | `#d2691e` |  |
|  | `coral` | `#ff7f50` |  |
|  | `cornflowerblue` | `#6495ed` |  |
|  | `cornsilk` | `#fff8dc` |  |
|  | `crimson` | `#dc143c` |  |
|  | `cyan`(synonym of `aqua`) | `#00ffff` |  |
|  | `darkblue` | `#00008b` |  |
|  | `darkcyan` | `#008b8b` |  |
|  | `darkgoldenrod` | `#b8860b` |  |
|  | `darkgray` | `#a9a9a9` |  |
|  | `darkgreen` | `#006400` |  |
|  | `darkgrey` | `#a9a9a9` |  |
|  | `darkkhaki` | `#bdb76b` |  |
|  | `darkmagenta` | `#8b008b` |  |
|  | `darkolivegreen` | `#556b2f` |  |
|  | `darkorange` | `#ff8c00` |  |
|  | `darkorchid` | `#9932cc` |  |
|  | `darkred` | `#8b0000` |  |
|  | `darksalmon` | `#e9967a` |  |
|  | `darkseagreen` | `#8fbc8f` |  |
|  | `darkslateblue` | `#483d8b` |  |
|  | `darkslategray` | `#2f4f4f` |  |
|  | `darkslategrey` | `#2f4f4f` |  |
|  | `darkturquoise` | `#00ced1` |  |
|  | `darkviolet` | `#9400d3` |  |
|  | `deeppink` | `#ff1493` |  |
|  | `deepskyblue` | `#00bfff` |  |
|  | `dimgray` | `#696969` |  |
|  | `dimgrey` | `#696969` |  |
|  | `dodgerblue` | `#1e90ff` |  |
|  | `firebrick` | `#b22222` |  |
|  | `floralwhite` | `#fffaf0` |  |
|  | `forestgreen` | `#228b22` |  |
|  | `gainsboro` | `#dcdcdc` |  |
|  | `ghostwhite` | `#f8f8ff` |  |
|  | `gold` | `#ffd700` |  |
|  | `goldenrod` | `#daa520` |  |
|  | `greenyellow` | `#adff2f` |  |
|  | `grey` | `#808080` |  |
|  | `honeydew` | `#f0fff0` |  |
|  | `hotpink` | `#ff69b4` |  |
|  | `indianred` | `#cd5c5c` |  |
|  | `indigo` | `#4b0082` |  |
|  | `ivory` | `#fffff0` |  |
|  | `khaki` | `#f0e68c` |  |
|  | `lavender` | `#e6e6fa` |  |
|  | `lavenderblush` | `#fff0f5` |  |
|  | `lawngreen` | `#7cfc00` |  |
|  | `lemonchiffon` | `#fffacd` |  |
|  | `lightblue` | `#add8e6` |  |
|  | `lightcoral` | `#f08080` |  |
|  | `lightcyan` | `#e0ffff` |  |
|  | `lightgoldenrodyellow` | `#fafad2` |  |
|  | `lightgray` | `#d3d3d3` |  |
|  | `lightgreen` | `#90ee90` |  |
|  | `lightgrey` | `#d3d3d3` |  |
|  | `lightpink` | `#ffb6c1` |  |
|  | `lightsalmon` | `#ffa07a` |  |
|  | `lightseagreen` | `#20b2aa` |  |
|  | `lightskyblue` | `#87cefa` |  |
|  | `lightslategray` | `#778899` |  |
|  | `lightslategrey` | `#778899` |  |
|  | `lightsteelblue` | `#b0c4de` |  |
|  | `lightyellow` | `#ffffe0` |  |
|  | `limegreen` | `#32cd32` |  |
|  | `linen` | `#faf0e6` |  |
|  | `magenta`(synonym of `fuchsia`) | `#ff00ff` |  |
|  | `mediumaquamarine` | `#66cdaa` |  |
|  | `mediumblue` | `#0000cd` |  |
|  | `mediumorchid` | `#ba55d3` |  |
|  | `mediumpurple` | `#9370db` |  |
|  | `mediumseagreen` | `#3cb371` |  |
|  | `mediumslateblue` | `#7b68ee` |  |
|  | `mediumspringgreen` | `#00fa9a` |  |
|  | `mediumturquoise` | `#48d1cc` |  |
|  | `mediumvioletred` | `#c71585` |  |
|  | `midnightblue` | `#191970` |  |
|  | `mintcream` | `#f5fffa` |  |
|  | `mistyrose` | `#ffe4e1` |  |
|  | `moccasin` | `#ffe4b5` |  |
|  | `navajowhite` | `#ffdead` |  |
|  | `oldlace` | `#fdf5e6` |  |
|  | `olivedrab` | `#6b8e23` |  |
|  | `orangered` | `#ff4500` |  |
|  | `orchid` | `#da70d6` |  |
|  | `palegoldenrod` | `#eee8aa` |  |
|  | `palegreen` | `#98fb98` |  |
|  | `paleturquoise` | `#afeeee` |  |
|  | `palevioletred` | `#db7093` |  |
|  | `papayawhip` | `#ffefd5` |  |
|  | `peachpuff` | `#ffdab9` |  |
|  | `peru` | `#cd853f` |  |
|  | `pink` | `#ffc0cb` |  |
|  | `plum` | `#dda0dd` |  |
|  | `powderblue` | `#b0e0e6` |  |
|  | `rosybrown` | `#bc8f8f` |  |
|  | `royalblue` | `#4169e1` |  |
|  | `saddlebrown` | `#8b4513` |  |
|  | `salmon` | `#fa8072` |  |
|  | `sandybrown` | `#f4a460` |  |
|  | `seagreen` | `#2e8b57` |  |
|  | `seashell` | `#fff5ee` |  |
|  | `sienna` | `#a0522d` |  |
|  | `skyblue` | `#87ceeb` |  |
|  | `slateblue` | `#6a5acd` |  |
|  | `slategray` | `#708090` |  |
|  | `slategrey` | `#708090` |  |
|  | `snow` | `#fffafa` |  |
|  | `springgreen` | `#00ff7f` |  |
|  | `steelblue` | `#4682b4` |  |
|  | `tan` | `#d2b48c` |  |
|  | `thistle` | `#d8bfd8` |  |
|  | `tomato` | `#ff6347` |  |
|  | `turquoise` | `#40e0d0` |  |
|  | `violet` | `#ee82ee` |  |
|  | `wheat` | `#f5deb3` |  |
|  | `whitesmoke` | `#f5f5f5` |  |
|  | `yellowgreen` | `#9acd32` |  |
| CSS Color Module Level 4 |  | `rebeccapurple` | `#663399` |  |

### `Прозрачное` ключевое слово

Ключевое слово `transparent` представляет собой полностью прозрачный цвет. Это делает фон позади цветного элемента полностью видимым. Технически `transparent`- это ярлык для `rgba (0,0,0,0)`.

**Примечание:** чтобы предотвратить непредвиденное поведение, например, в `градиент`, текущая спецификация CSS утверждает, что `transparent` должен быть вычислен в Альфа-предварительно умноженном цветовом пространстве. Однако имейте в виду, что старые браузеры могут рассматривать его как чёрный с Альфа-значением `0`.

**Примечание:** `transparent` не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения `<color>` для двух свойств CSS: `background` и `border`. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, `transparent` был переопределён как истинный цвет. Теперь его можно использовать везде, где можно использовать значение `<color>`.

### `currentColor` ключевое слово

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

Если текущий цвет используется в качестве значения свойства `color` , он вместо этого принимает его значение из наследуемого значения свойства `color`.

#### currentColor пример

```html
<div style="color:blue; border: 1px dashed currentColor;">
  Цвет текста-синий.
  <div style="background:currentColor; height:9px;"></div>
  This block is surrounded by a blue border.
</div>
```

### RGB цвет

Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелёными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.

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

Цвета RGB могут быть выражены как шестнадцатеричными (с префиксом #), так и функциональными (`rgb ()`, `rgba ()`) нотациями.

**Примечание:** начиная с уровня цветов CSS 4, `rgba()` является псевдонимом для `rgb()`. В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.

Шестнадцатеричное представление: `#RRGGBB[AA]`

`R` (red), `G` (green), `B` (blue), and `A` (alpha) are hexadecimal characters (0-9, A-F). `A` is optional. For example, `#ff0000` is equivalent to `#ff0000ff`. `R` (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, `#ff0000` эквивалентно `#ff0000ff`.

Шестнадцатеричное представление: `#RGB[A]`

`R` (красный), `G` (зелёный), `B` (синий) и `A` (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трёхзначная нотация (`#RGB`) является более короткой версией шестизначной формы (`#RRGGBB`). Например, `#f09` имеет тот же цвет, что и `#ff0099`. Кроме того, четырёхзначная нотация RGB (`#RGB`) является более короткой версией восьмизначной формы (`#RRGGBBAA`). Например, #0f38 имеет тот же цвет, что и `#00ff3388`.

Функциональная нотация: `rgb(R, G, B[, A])` или `rgba(R, G, B, A)`

`R` (красный), `G` (зелёный) и `B` (синий) могут быть либо `<number>`s, либо `<percentage>`s, где число `255` соответствует `100%`. А (Альфа) может быть `<number>` между `0` и `1` или `<percentage>`, где число 1 соответствует `100%` (полная непрозрачность).

Функциональная нотация: `rgb(R G B[ A])` or `rgba(R G B A)`

CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.

#### Пример

##### RGB варианты синтаксиса

В этом примере показано множество способов создания одного цвета с помощью различных цветовых синтаксисов RGB.

```css
/\* Все эти варианты синтаксиса задают один и тот же цвет: полностью непрозрачный ярко-розовый. \*/

/\* Шестнадцатеричный синтаксис \*/
#f09
#F09
#ff0099
#FF0099

/\* Функциональный синтаксис \*/
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0)
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /\* Ошибка! Не смешивайте цифры и проценты. \*/
rgb(255 0 153)

/\* Шестнадцатеричный синтаксис с Альфа-значением \*/
#f09f
#F09F
#ff0099ff
#FF0099FF

/\* Функциональный синтаксис с Альфа-значением \*/
rgb(255, 0, 153, 1)
rgb(255, 0, 153, 100%)

/\* Синтаксис пробелов \*/
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/\* Функциональный синтаксис со значением floats \*/
rgb(255, 0, 153.6, 1)
rgb(1e2, .5e1, .5e0, +.25e2%)
```

##### RGB вариации прозрачности

```css
/\* Шестнадцатеричный синтаксис \*/
#3a30                    /\* 0% непрозрачный зелёный цвет \*/
#3A3F                    /\* полный непрозрачный зелёный цвет \*/
#33aa3300                /\* 0% непрозрачный зелёный цвет \*/
#33AA3380                /\* 50% непрозрачный зелёный цвет \*/

/\* Функциональный синтаксис \*/
rgba(51, 170, 51, .1)    /\* непрозрачный зелёный цвет на 10% \*/
rgba(51, 170, 51, .4)    /\* непрозрачный зелёный цвет на \*/
rgba(51, 170, 51, .7)    /\* непрозрачный зелёный цвет на 70% \*/
rgba(51, 170, 51,  1)    /\* полный непрозрачный зелёный цвет \*/

/\* Синтаксис пробелов \*/
rgba(51 170 51 / 0.4)    /\* непрозрачный зелёный цвет на 40%\*/
rgba(51 170 51 / 40%)    /\* непрозрачный зелёный цвет на 40% \*/

/\* Функциональный синтаксис со значением floats \*/
rgba(255, 0, 153.6, 1)
rgba(1e2, .5e1, .5e0, +.25e2%)
```

### Цвет HSL

Цветовая модель HSL определяет заданный цвет в соответствии с его компонентами оттенка, насыщенности и яркости. Дополнительный Альфа-компонент представляет прозрачность цвета.

Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и лёгкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).

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

Цвета HSL выражаются через функциональные обозначения `hsl()` и `hsla()`.

**Примечание:** Начиная с уровня цветов CSS 4, `hsla()` является псевдонимом для `hsl()`. В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.

Функциональная нотация: `hsl(H, S, L[, A])` или `hsla(H, S, L, A)`

`H` (hue) - это `<угол>` цветового круга, заданного в `deg`S, `rad`s, градусах или поворотах CSS Color Module Level 4. При записи в виде unitless `<number>` он интерпретируется как Градусы, как указано в CSS Color Module Level 3. По определению, red=deg=360 град, с другими цветами, распространёнными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обёртывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.`S` (`насыщенность`) и `L` (`лёгкость`) являются процентами. `100%` насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). `100%` лёгкость белый, `0%` лёгкость чёрный, и `50%` лёгкость "нормально". `A` (alpha) can be a `<number>` between `0` and `1`, or a `<percentage>`, where the number `1` corresponds to `100%` (full opacity). `A` (Альфа) может быть `<number>` между `0` и `1` или `<percentage>`, где число `1` соответствует `100%` (полная непрозрачность).

Функциональная нотация: `hsl(H S L[ A])` or `hsla(H S L A)`

CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.

#### Examples

##### HSL варианты синтаксиса

```css
/\* Все эти примеры указывают один и тот же цвет: лаванда. \*/
hsl(270,60%,70%)
hsl(270, 60%, 70%)
hsl(270 60% 70%)
hsl(270deg, 60%, 70%)
hsl(4.71239rad, 60%, 70%)
hsl(.75turn, 60%, 70%)

/\* Все эти примеры указывают один и тот же цвет: лаванда, которая на 15% непрозрачна. \*/
hsl(270, 60%, 50%, .15)
hsl(270, 60%, 50%, 15%)
hsl(270 60% 50% / .15)
hsl(270 60% 50% / 15%)
```

##### Полностью насыщенные цвета

| Нотация | Описание: | Итог |
| --- | --- | --- |
| `hsl(0, 100%, 50%)` | red |  |
| `hsl(30, 100%, 50%)` | orange |  |
| `hsl(60, 100%, 50%)` | yellow |  |
| `hsl(90, 100%, 50%)` | lime green |  |
| `hsl(120, 100%, 50%)` | green |  |
| `hsl(150, 100%, 50%)` | blue-green |  |
| `hsl(180, 100%, 50%)` | cyan |  |
| `hsl(210, 100%, 50%)` | sky blue |  |
| `hsl(240, 100%, 50%)` | blue |  |
| `hsl(270, 100%, 50%)` | purple |  |
| `hsl(300, 100%, 50%)` | magenta |  |
| `hsl(330, 100%, 50%)` | pink |  |
| `hsl(360, 100%, 50%)` | red |  |

##### Более светлая и более тёмная зелень

| Нотация | Описание: | Итог |
| --- | --- | --- |
| `hsl(120, 100%, 0%)` | black |  |
| `hsl(120, 100%, 20%)` |  |  |
| `hsl(120, 100%, 40%)` |  |  |
| `hsl(120, 100%, 60%)` |  |  |
| `hsl(120, 100%, 80%)` |  |  |
| `hsl(120, 100%, 100%)` | white |  |

##### Насыщенная и ненасыщенная зелень

| Нотация | Описание: | Итог |
| --- | --- | --- |
| `hsl(120, 100%, 50%)` | green |  |
| `hsl(120, 80%, 50%)` |  |  |
| `hsl(120, 60%, 50%)` |  |  |
| `hsl(120, 40%, 50%)` |  |  |
| `hsl(120, 20%, 50%)` |  |  |
| `hsl(120, 0%, 50%)` | gray |  |

##### Вариации прозрачности HSL

```css
hsla(240, 100%, 50%, .05)     /\* непрозрачный синий на 5% \*/
hsla(240, 100%, 50%, .4)      /\* непрозрачный синий на 40% \*/
hsla(240, 100%, 50%, .7)      /\* непрозрачный синий на 70% \*/
hsla(240, 100%, 50%, 1)       /\* полный непрозрачный синий \*/

/\* Синтаксис пробелов \*/
hsla(240 100% 50% / .05)      /\* непрозрачный синий на 5% \*/

/\* Процентное значение для Альфа \*/
hsla(240 100% 50% / 5%)       /\* непрозрачный синий на 5% \*/
```

### Системный цвет

Не все системные цвета поддерживаются на всех системах.
Устарело
 для использования на общедоступных веб-страницах.

ActiveBorder

Активная граница окна.

ActiveCaption

Активный заголовок окна. Должен использоваться с текстом `CaptionText` в качестве цвета переднего плана.

AppWorkspace

Цвет фона интерфейса нескольких документов.

Background

Фон рабочего стола.

ButtonFace

Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом `ButtonText` цвет переднего плана.

ButtonHighlight

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

ButtonShadow

Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трёхмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.

ButtonText

Следует использовать с `ButtonFace` или `ThreeDFace` цвет фона.

CaptionText

Текст в заголовке, поле размера и поле со стрелкой прокрутки. Следует использовать с цветом фона `ActiveCaption`.

GrayText

Серый (отключён) текст.

Highlight

Элемент(ы), выбранный в элементе управления. Следует использовать с `HighlightText` текста цветом переднего плана.

HighlightText

Текст элемента(ов), выбранного в элементе управления. Следует использовать с подсветкой цвета фона.

InactiveBorder

Граница неактивного окна.

InactiveCaption

Заголовок неактивного окна. Должен использоваться с цветом переднего плана `InactiveCaptionText`.

InactiveCaptionText

Следует использовать с `InactiveCaption` неактивным цветом фона заголовка.

InfoBackground

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

InfoText

Цвет текста элементов подсказки. Должен использоваться с и `InfoBackground` фона.

Menu

Фон меню. Должен использоваться с `MenuText` или `-moz-MenuBarText` строки меню цвет переднего плана.

MenuText

Текст в меню. Следует использовать с меню Цвет фона.

Scrollbar

Цвет фона полос прокрутки.

ThreeDDarkShadow

Цвет более тёмной (как правило, внешней) из двух границ от источника света для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.

ThreeDFace

Should be used with the `ButtonText` foreground color. Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.

ThreeDHighlight

Цвет более светлого (обычно внешнего) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.

ThreeDLightShadow

Цвет более тёмной (обычно внутренней) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.

ThreeDShadow

Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.

Window

Фон окна. Следует использовать с `WindowText` цвет переднего плана.

WindowFrame

Оконная рама

WindowText

Текст в windows. Следует использовать с цветом фона окна.

### Расширенные Цвета Системы Mozilla

* -moz-ButtonDefault
    + : Цвет границы вокруг кнопки, которые обозначают действие по умолчанию для диалогового окна.
* -moz-ButtonHoverFace
    + : Цвет фона кнопки, на которую наведён указатель мыши (который будет Трёхлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.
* -moz-ButtonHoverText
    + : Цвет текста кнопки, на которую наведён указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с-`-moz-ButtonHoverFace background` color.
* -moz-CellHighlight
    + : Цвет фона для выбранного элемента в виджете дерево. Следует использовать с цветом переднего плана `-moz-CellHighlightText`. Смотрите также`-moz-html-CellHighlight`.
* -moz-CellHighlightText
    + : Цвет текста для выбранного элемента в дереве. Следует использовать с цветом фона `moz-CellHighlight background`. Смотрите также `-moz-html-CellHighlightText` выделения ячейки.
* -moz-Combobox
    + : цвет фона для комбинированных полей `-moz-ComboboxText`. Должен использоваться с цветом переднего плана текста-moz-Combobox. В версиях до 1.9.2 вместо этого используйте `-moz-Field`.
* -moz-ComboboxText
    + : цвет текста для комбинированных полей. Следует использовать с цветом фона `-moz-Combobox`. В версиях до 1.9.2 вместо этого используйте `-moz-FieldText`.
* -moz-Dialog
    + : Цвет фона для диалоговых окон. Должен использоваться с цветом переднего плана -`-moz-DialogText`.
* -moz-DialogText
    + : Цвет текста для диалоговых окон. Должен использоваться с цветом фона `-moz-Dialog`.
* -moz-dragtargetzone
 -moz-EvenTreeRow
    + : цвет фона для чётных строк в дереве. Должен использоваться с цветом переднего плана `-moz-FieldText`. В версиях Gecko до 1.9, используйте-moz-поле. Смотрите также `-moz-OddTreeRow`.
* -moz-Field
    + : Text field background color. Should be used with the `-moz-FieldText` foreground color. Цвет фона текстового поля. Должен использоваться с цветом переднего плана`-moz-FieldText`.
* -moz-FieldText
    + : Text field text color. Should be used with the `-moz-Field`, `-moz-EvenTreeRow`, or `-moz-OddTreeRow` background color. Текстовое поле цвет текста. Следует использовать с `-moz-Field`, `-moz-EvenTreeRow` или `-moz-OddTreeRow` цветом фона строки дерева.
* -moz-html-CellHighlight
    + : Background color for highlighted item in HTML `<select>`s. Should be used with the `-moz-html-CellHighlightText` foreground color. Prior to Gecko 1.9, use `-moz-CellHighlight`. цвет фона для выделенного элемента в HTML `<select>` s. должен использоваться с цветом переднего плана `-moz-html-CellHighlight`. До Gecko 1.9, используйте `-moz-CellHighlightText`.
* -moz-html-CellHighlightText
    + : цвет текста для `-moz-html-CellHighlight` выделенных элементов в HTML `<select>` s. должен использоваться с цветом фона. До Gecko 1.9, используйте `moz-html-CellHighlight`.
* -moz-mac-accentdarkestshadow
 -moz-mac-accentdarkshadow
 -moz-mac-accentface
 -moz-mac-accentlightesthighlight
 -moz-mac-accentlightshadow
 -moz-mac-accentregularhighlight
 -moz-mac-accentregularshadow
 -moz-mac-chrome-active
* -moz-mac-chrome-inactive
* -moz-mac-focusring
 -moz-mac-menuselect
 -moz-mac-menushadow
 -moz-mac-menutextselect
 -moz-MenuHover
    + : Цвет фона для зависших пунктов меню. Часто похожи на `Highlight`. Следует использовать с `moz-MenuHoverText` или `-moz-MenuBarHoverText` при наведении цвет текста переднего плана.
* -moz-MenuHoverText
    + : Text color for hovered menu items. Often similar to `HighlightText`. Should be used with the `-moz-MenuHover` background color. Цвет текста для зависших пунктов меню. Часто похоже на выделение текста `HighlightText`. Следует использовать с `-moz-MenuHover` наведите цвет фона.
* -moz-MenuBarText
    + : цвет текста в строках меню. Часто похоже на текст меню "`MenuText`". Должен использоваться поверх фона `Menu`.
* -moz-MenuBarHoverText
    + : Цвет для зависшего текста в строках меню. Часто похоже на `-moz-MenuHoverText` меню наведения текста. Следует использовать поверх `-moz-MenuHover` наведите фон.
* -moz-nativehyperlinktext
    + : цвет гиперссылки платформы по умолчанию.
* -moz-OddTreeRow
    + : цвет фона для нечётных строк в дереве. Должен использоваться с цветом переднего плана `-moz-FieldText`. В версиях Gecko до 1.9, используйте `-moz-Field`. Смотрите также `-moz-EvenTreeRow`.
* -moz-win-communicationstext
    + : следует использовать для текста в объектах с ``- moz-appearance`:- moz-win-communications-toolbox;`.
* -moz-win-mediatext
    + : следует использовать для текста в объектах с ``- moz-appearance`:- moz-win-media-toolbox`.
* -moz-win-accentcolor
    + : Используется для доступа к пользовательскому цвету акцента Windows 10, который можно установить в меню Пуск, панели задач, заголовках и т. д.
* -moz-win-accentcolortext
    + : Используется для доступа к цвету текста, размещённого над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.
### Расширения Цветовых Предпочтений Mozilla

-moz-activehyperlinktext

Пользовательское предпочтение цвета текста активных ссылок. Должен использоваться с цветом фона документа по умолчанию.

-moz-default-background-color

предпочтения пользователя для цвета фона документа.

-moz-default-color

предпочтения пользователя для цвета текста.

-moz-hyperlinktext

Предпочтения пользователя для цвета текста непрошеных ссылок. Должен использоваться с цветом фона документа по умолчанию.

-moz-visitedhyperlinktext

Предпочтения пользователя для цвета текста посещённых ссылок. Должен использоваться с цветом фона документа по умолчанию.

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

В анимации и градиентах значения `<color>` интерполируются на каждый из их красных, зелёных и синих компонентов. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется функцией времени (en-US).

Соображения доступности
-----------------------

Некоторые люди с трудом различают цвета. Рекомендация WCAG 2.0 настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определённого сообщения, действия или результата. Дополнительную информацию см. В разделе цвет и цветовой контраст.

Технические характеристики
--------------------------

| Specification |
| --- |
| CSS Color Module Level 4 # color-syntax |

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

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

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

* Свойство `непрозрачность` позволяет определить прозрачность на уровне элемента.
* Некоторые общие свойства, которые используют этот тип данных: `цвет`, `фон`, `бордюр-колор`, `окно-тень`, `контур-цвет`, `текст-тень`
* Применение цвета к элементам HTML с помощью CSS


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

:disabled
=========

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

CSS псевдокласс `:disabled` находит любой отключённый элемент. Элемент отключён, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включённое состояние, когда его можно активировать или сфокусировать.

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

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

input:disabled

Выберет все отключённые поля ввода

select.country:disabled

Найдёт все отключённые `select` элементы с классом `country`

### Пример использования

Следующий CSS:

```css
input[type="text"]:disabled {
  background: #ccc;
}
```

Применим к этому HTML5 фрагменту:

```html
<form action="#">
  <fieldset>
    <legend>Адрес доставки</legend>
    <input type="text" placeholder="Имя" />
    <input type="text" placeholder="Адрес" />
    <input type="text" placeholder="Почтовый индекс" />
  </fieldset>
  <fieldset id="billing">
    <legend>Адрес оплаты</legend>
    <label for="billing\_is\_shipping">Такой же как адрес доставки:</label>
    <input type="checkbox" onchange="javascript:toggleBilling()" checked />
    <br />
    <input type="text" placeholder="Имя" disabled />
    <input type="text" placeholder="Адрес" disabled />
    <input type="text" placeholder="Почтовый индекс" disabled />
  </fieldset>
</form>
```

Добавим немного javascript:

```js
function toggleBilling() {
  var billingItems = document.querySelectorAll('#billing input[type="text"]');
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}
```

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

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

| Specification |
| --- |
| HTML Standard # selector-disabled |
| Selectors Level 4 # enableddisabled |

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

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

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

* `:enabled`


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

font-variant-numeric
====================

Summary
-------

Свойство CSS **`font-variant-numeric`** управляет использованием альтернативных начертаний для цифр, дробей и порядковых числительных.

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

Syntax
------

Formal syntax (en-US):
```

font-variant-numeric =
  normal                                              | (en-US)
  [ (en-US) <numeric-figure-values> || (en-US) <numeric-spacing-values> || (en-US) <numeric-fraction-values> || (en-US) ordinal || (en-US) slashed-zero ] (en-US)

<numeric-figure-values> =
  lining-nums    | (en-US)
  oldstyle-nums

<numeric-spacing-values> =
  proportional-nums  | (en-US)
  tabular-nums

<numeric-fraction-values> =
  diagonal-fractions  | (en-US)
  stacked-fractions

```

```css
font-variant-numeric: normal
font-variant-numeric: ordinal
font-variant-numeric: slashed-zero
font-variant-numeric: lining-nums         /\* <numeric-figure-values> \*/
font-variant-numeric: oldstyle-nums       /\* <numeric-figure-values> \*/
font-variant-numeric: proportional-nums   /\* <numeric-spacing-values> \*/
font-variant-numeric: tabular-nums        /\* <numeric-spacing-values> \*/
font-variant-numeric: diagonal-fractions  /\* <numeric-fraction-values> \*/
font-variant-numeric: stacked-fractions   /\* <numeric-fraction-values> \*/
font-variant-numeric: oldstyle-nums stacked-fractions

font-variant-numeric: initial
font-variant-numeric: inherit
font-variant-numeric: unset
```

### Values

`normal`

Это ключевое слово отключает все альтернативные начертания.

`ordinal`

Это ключевое слово включает специальные глифы для порядковых числительных, например, 1st, 2nd, 3rd, 4th в английском или 1a в итальянском (в русском такие типографские изыски не приняты, пишут просто «1-й»). Это соответствует значению OpenType `ordn`.

`slashed-zero`

Это ключевое слово включает перечёркнутый ноль; это полезно, когда нужно чёткое различие между буквой O и цифрой 0. Это соответствует значению OpenType `zero`.

*<numeric-figure-values*>

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

* `lining-nums` включает маюскульные («заглавные») цифры, стоящие на опорной линии текста. Это соответствует значению OpenType `lnum`.
* `oldstyle-nums` включает минускульные («строчные») цифры, в которых некоторые знаки (3, 4, 7, 9) уходят нижним краем под опорную линию (в русской типографике не принято, зато широко используется в западной, в основном в шрифтах с засечками). Это соответствует значению OpenType `onum`.

*<numeric-spacing-values*>

Эти значения управляют горизонтальным размером цифр. Возможны два значения:

* `proportional-nums` включает цифры разной ширины. Это соответствует значению OpenType `pnum`.
* `tabular-nums` включает цифры одинаковой ширины, которые легко выравниваются, как в таблицах. Это соответствуют значению OpenType `tnum`.

*<numeric-fraction-values*>

Эти значения управляют отображением дробей. Возможны два значения:

* `diagonal-fractions` включает символы дробей, в которых числитель и знаменатель уменьшены и разделены косой чертой. Это соответствует значению OpenType `frac`.
* `stacked-fractions` включает символы дробей, где числитель и знаменатель уменьшены, поставлены друг над другом и разделены горизонтальной чертой. Это соответствует значению OpenType `afrc`.

Examples
--------

```css
p {
  font-variant-numeric: ordinal;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-numeric-prop |

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

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

See also
--------

* `font-variant` (en-US), `font-kerning` (en-US), `font-variant-east-asian` (en-US), `font-variant-caps` (en-US), `font-variant-ligatures`, `font-variant-position` (en-US), `font-variant-alternates` (en-US), `font-synthesis` (en-US).


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

box-sizing
==========

CSS свойство **`box-sizing`** определяет как вычисляется общая ширина и высота элемента.

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

По умолчанию в блоковой модели CSS ширина и высота, которую вы задаёте элементу применяется только для контента элемента. Если у элемента есть граница или внутренний отступ, то они добавляются к ширине и высоте, чтобы получить отображаемый на экране размер. Это значит, что когда вы выставляете ширину и высоту, вам придётся изменять значение, при добавлении границ и отступов. Например, если у вас есть четыре блока с `width: 25%;` , и у какого-нибудь из них есть граница или внутренний отступ слева или справа, то по умолчанию они не поместятся на одной строке.

Свойство `box-sizing` может изменять это поведение:

* `content-box` даёт стандартное поведение свойства box-sizing. Если вы выставите элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире ста пикселей.
* `border-box` говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента. Если вы выставите элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. Обычно это упрощает работу с размерами элементов.

>
> \*\*Примечание:\*\*Часто выставление `box-sizing: border-box` полезно для размещения элементов. Оно сильно упрощает работу с размерами элементов, и как правило устраняет ряд подводных камней, на которые вы можете наткнуться, размещая контент. С другой стороны, используя `position-relative` или `position: absolute`, `box-sizing: content-box` позволяет позиционным значениям быть зависимыми только от контента, а не от границ и отступов, что иногда желательно.
>
>
>

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

Для свойства `box-sizing` устанавливается единственное ключевое слово из списка значений ниже.

### Значения

`content-box`

Это значение по умолчанию, определённое в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border. Например `.box {width: 350px; border: 10px solid black;}` будет иметь ширину 370 пикселей.Размеры элемента рассчитываются следующим образом: *width = ширина контента*, и *height = высота контента*. (Границы и внутренние отступы не включаются в вычисление.)

`border-box`

Свойства width и height включают контент, внутренний отступ и границы, но не включают внешний отступ. Заметьте, что внутренний отступ и граница будут внутри блока. Например, `.box {width: 350px; border: 10px solid black;}` будет иметь общую ширину 350 пикселей, а ширина контента составит 330 пикселей. Размер контента не может быть отрицательным, минимальное значение - 0, поэтому `border-box` невозможно использовать для скрытия элемента.Размеры элемента рассчитываются следующим образом: *width = граница + внутренний отступ + ширина контента*, и *height = граница + внутренний отступ + высота контента*.

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

box-sizing =
  content-box  | (en-US)
  border-box

```

**Примечание:** Значение `padding-box` устарело

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

Этот пример показывает как разные значения `box-sizing` изменяют видимый размер двух идентичных элементов.

### HTML

```html
<div class="content-box">Content box</div>
<br />
<div class="border-box">Border box</div>
```

### CSS

```css
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /\* Total width: 160px + (2 \* 20px) + (2 \* 8px) = 216px
 Total height: 80px + (2 \* 20px) + (2 \* 8px) = 136px
 Content box width: 160px
 Content box height: 80px \*/
}

.border-box {
  box-sizing: border-box;
  /\* Total width: 160px
 Total height: 80px
 Content box width: 160px - (2 \* 20px) - (2 \* 8px) = 104px
 Content box height: 80px - (2 \* 20px) - (2 \* 8px) = 24px \*/
}
```

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

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # box-sizing |

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

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

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

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

* Блоковая модель CSS