recursal/MDN huggingface dataset:
CSS Colors
==========

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

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

### Свойства

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

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

*Нет.*

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

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

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

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

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

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

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

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

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


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

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

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

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

### Значения

`<length>`

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

`<percentage>`

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

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

`auto`

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

See also
--------

* `width`, `max-width`
* Блочная модель (en-US), `box-sizing`
Селекторы по 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.
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`** задаёт толщину обводки элемента. Обводка — линия вокруг элемента за пределами рамки (`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`
: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` находит любые `<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
======

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`
::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` находит любые `<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`
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
=========

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
===========

Свойство `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.