recursal/MDN huggingface dataset:
Селекторы атрибутов
===================

Обзор
-----

Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.

`[attr]`

Обозначает элемент с атрибутом по имени attr.

`[attr=value]`

Обозначает элемент с именем атрибута attr и значением в точности совпадающим с value.

`[attr~=value]`

Обозначает элемент с именем атрибута attr значением которого является набор слов разделённых пробелами, одно из которых в точности равно value

`[attr|=value]`

Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подходом.

`[attr^=value]`

Обозначает элемент с именем атрибута attr значение которого начинается с "value"

`[attr$=value]`

Обозначает элемент с именем атрибута attr чьё значение заканчивается на "value"

`[attr*=value]`

Обозначает элемент с именем атрибута attr чьё значение содержит по крайней мере одно вхождение строки "value" как подстроки.

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


```css
/\* Все span с атрибутом "lang" будут жирными \*/
span[lang] {
  font-weight: bold;
}

/\* Все span в Португалии будут зелёными \*/
span[lang="pt"] {
  color: green;
}

/\* Все span с американским английским будут синими \*/
span[lang~="en-us"] {
  color: blue;
}

/\* Любые span на китайском языке будут красными, как на упрощённом китайском (zh-CN) так и на традиционном (zh-TW) \*/
span[lang|="zh"] {
  color: red;
}

/\* Все внутренние ссылки будут иметь золотой фон \*/
a[href^="#"] {
  background-color: gold;
}

/\* Все ссылки с url заканчивающимся на .cn будут красными \*/
a[href$=".cn"] {
  color: red;
}

/\* Все ссылки содержащие "example" в url будут иметь серый фон \*/
a[href\*="example"] {
  background-color: #cccccc;
}
```



```html
<div class="hello-example">
  <a href="http://example.com">English:</a>
  <span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div class="hello-example">
  <a href="#portuguese">Portuguese:</a>
  <span lang="pt">Olá Mundo!</span>
</div>
<div class="hello-example">
  <a href="http://example.cn">Chinese (Simplified):</a>
  <span lang="zh-CN">世界您好！</span>
</div>
<div class="hello-example">
  <a href="http://example.cn">Chinese (Traditional):</a>
  <span lang="zh-TW">世界您好！</span>
</div>
```

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

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

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

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

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

* CSS селекторы: базовая поддержка браузерами
* Совместимость с браузерами селекторов и псевдо-селекторов CSS
background-origin
=================

CSS свойство **`background-origin`** устанавливает *область расположения фона*. Другими словами, оно устанавливает исходную позицию изображения, установленную с помощью свойства `background-image`.

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

Обратите внимание, что `background-origin` игнорируется, когда `background-attachment` является `fixed`.

**Примечание:** Сокращение `background` сбрасывает значения этого свойства к его начальному значению, если оно не указано.

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


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

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


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

### Значения

`border-box`

Фон располагается относительно рамки.

`padding-box`

Фон расположен относительно поля отступа.

`content-box`

Фон располагается относительно поля содержимого.

### Официальный синтаксис
```

background-origin =   
  <visual-box># (en-US)    
  
<visual-box> =   
  content-box  | (en-US)  
  padding-box  | (en-US)  
  border-box     
  
```

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


```css
.example {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}
```



```css
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}
```



```css
div {
  background-image: url("logo.jpg"), url("mainback.png"); /\* Applies two images to the background \*/
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}
```

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

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

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

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

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

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

* `background-clip`
CSS Transforms
==============

**CSS Transforms** – модуль CSS, который определяет, как стилизованные с помощью CSS элементы, могут быть преобразованы в двухмерном или трёхмерном пространстве.

Справка
-------

### Свойства

* `backface-visibility`
* `perspective`
* `perspective-origin` (en-US)
* `rotate` (en-US)
* `scale` (en-US)
* `transform`
* `transform-box` (en-US)
* `transform-origin` (en-US)
* `transform-style`
* `translate` (en-US)
### Типы данных

* `<transform-function>` (en-US)
Руководства
-----------

Использование CSS-трансформаций (en-US)

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

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

| Specification |
| --- |
| CSS Transforms Module Level 1  |
| CSS Transforms Module Level 2  |
isolation
=========

CSS-свойство **`isolation`** определяет должен ли элемент создавать новый контекст наложения stacking context (en-US).

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

Это свойство особенно полезно при использовании совместно с `background-blend-mode`.

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


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

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


Свойство `isolation` указывается в качестве значения одного из нижеследующих ключевых слов.

### Значения

`auto`

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

`isolate`

Новый контекст наложения должен быть создан.

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

isolation =   
  <isolation-mode>    
  
<isolation-mode> =   
  auto     | (en-US)  
  isolate    
  
```

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


```html
<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>
```



```css
.a {
  background-color: rgb(0, 255, 0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}
```

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

| Specification |
| --- |
| Compositing and Blending Level 2 # isolation |

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | Все элементы. В SVG это применяется к контейнерам, графическим элементам и элементам графической отсылки. |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | Not animatable |

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

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

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

* `<blend-mode>` (en-US)
* `mix-blend-mode`, `background-blend-mode`
<angle>
=======

Тип данных CSS **`<angle>`** представляет собой значение угла, выраженное в градусах, градах, радианах или оборотах. Он используется, например, в `<gradient>` (en-US) и в некоторых функциях `transform`.

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

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

Тип данных `<angle>` состоит из числа (`<number>`), за которым следует одна из единиц измерения, представленные ниже. Между литералом единицы измерения и цифрой нет пробела. После `0` указывать единицу измерения необязательно.

Опционально перед числом может стоять знак `+` или `-` . Положительное значение отмеряется по часовой стрелке, а отрицательные – против часовой. Чтобы достичь статистических свойств, каждый угол может быть представлен разными значениями, эквивалентными друг другу. Например, `90deg` равняется `-270deg`, а `1turn` равняется `4turn`. Тем не менее, для достижения динамических свойств эффект будет другим. Например, при применении `animation` или `transition`.

### Единицы измерения

deg

Представляет угол в градусах. Один полный круг равен `360deg`. Например: `0deg`, `90deg`, `14.23deg`.

grad

Представляет угол в градах. Один полный круг равен `400grad`. Например: `0grad`, `100grad`, `38.8grad`.

rad

Представляет угол в радианах. Один полный круг равен 2π или примерно `6.2832rad`. `1rad` - это 180/π градусов. Например: `0rad`, `1.0708rad`, `6.2832rad`.

turn

Представляет угол в количестве оборотов. Один полный круг равен `1turn`. Например: `0turn`, `0.25turn`, `1.2turn`.

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

|  | Прямой угол: `90deg = 100grad = 0.25turn ≈ 1.5708rad` |
| --- | --- |
|  | Развёрнутый угол: `180deg = 200grad = 0.5turn ≈ 3.1416rad` |
|  | Прямой угол (против часовой стрелки): `-90deg = -100grad = -0.25turn ≈ -1.5708rad` |
|  | Нулевой угол: `0deg = 0grad = 0turn = 0rad` |

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # angles |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
grid-template-areas
===================

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

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

* Learn more
* See full compatibility
* Report feedback
CSS-свойство **`grid-template-areas`** создаёт грид-области (en-US) путём размещения именованных ячеек в грид-раскладке.

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

Создаваемые области не связаны с конкретным грид-элементом, но их можно указать в свойствах `grid-row-start`, `grid-row-end` (en-US), `grid-column-start` (en-US), `grid-column-end` (en-US), или в их сокращённых вариантах: `grid-row` (en-US), `grid-column` и `grid-area`.

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


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

/\* Строка (<string>) в качестве значения \*/
grid-template-areas: "a b";
grid-template-areas:
  "a b b"
  "a c d";

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

### Значения

`none`

Грид-контейнер не определяет именованных грид-областей.

``<string>` (en-US)+`

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

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

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

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

grid-template-areas =   
  none       | (en-US)  
  <string> (en-US)+ (en-US)    
  
```

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

### Создание именованных грид-областей

#### HTML


```html
<section id="page">
  <header>Шапка</header>
  <nav>Навигация</nav>
  <main>Основной контент</main>
  <footer>Подвал</footer>
</section>
```


#### CSS


```css
#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav main"
    "nav foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}
```


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

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-template-areas-property |

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

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

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

* Связанные CSS-свойства: `grid-template-rows`, `grid-template-columns`, `grid-template`
* Руководство по грид-раскладке: *Области грид-шаблона*
* Видеоурок: *Grid Template Areas*
<filter-function>
=================

Тип данных CSS **`<filter-function>`** представляет собой графический эффект, который может изменить внешний вид входного изображения. Он используется в свойствах `filter` и `backdrop-filter`.

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

Тип данных `<filter-function>` указывается с использованием одной из функций, указанных ниже. Каждая функция требует аргумент, который, если он неверен, не приводит к применению фильтра.

`blur()`

Применяет эффект размытия к изображению.

`brightness()` (en-US)

Делает изображение ярче или темнее.

`contrast()` (en-US)

Увеличивает или уменьшает контрастность изображения.

`drop-shadow()` (en-US)

Применяет к изображению тень.

`grayscale()` (en-US)

Преобразует изображение к тонам серого.

`hue-rotate()` (en-US)

Изменяет оттенок изображения за счёт поворота на цветовом круге.

`invert()`

Инвертирует цвета изображения.

`opacity()` (en-US)

Изменяет прозрачность изображения.

`saturate()` (en-US)

Изменяет насыщенность цветов изображения.

`sepia()` (en-US)

Преобразует изображение в сепию.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # typedef-filter-function |

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

* Свойства, которые используют этот тип данных: `filter` и `backdrop-filter`
Селекторы по классу
===================

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

В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделённый пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведённому в селекторе.

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

.classname { style properties }
```


Это эквивалентно следующему `селектор по атрибуту`:
```

[class~=classname] { style properties }
```

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

### CSS


```css
span.classy {
  background-color: DodgerBlue;
}
```

### HTML


```html
<span class="classy">Здесь span с каким-то текстом.</span>
<span>А тут другой span.</span>
```

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

| Specification |
| --- |
| Selectors Level 4 # class-html |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Список селекторов
=================

CSS **список селекторов** (`,`) выбирает все соответствующие ноды.


```css
/\* Выбирает все соответствующие элементы \*/
span,
div {
  border: red 2px solid;
}
```


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

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

element, element, element { свойства стиля }
```

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

### Группирование на одной линии

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


```css
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: helvetica;
}
```

### Мультистрочное группирование

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


```css
#main,
.content,
article {
  font-size: 1.1em;
}
```

### Невалидные списки селекторов

Недостатком использования списков селекторов является то, что они не являются эквивалентными:


```css
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```



```css
h1,
h2:maybe-unsupported,
h3 {
  font-family: sans-serif;
}
```


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

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


```css
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```



```css
:is(h1, h2:maybe-unsupported, h3) {
  font-family: sans-serif;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # grouping |

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

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

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

* The `:is()` 
Экспериментальная возможность
 and `:where()` 
Экспериментальная возможность
 pseudo-classes, which don't have the legacy mistake that is selector list invalidation.
Селектор дочерних элементов
===========================

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

`Комбинатор >` разделяет 2 селектора, находит элементы заданные вторым селектором, являющие **прямыми** потомками для элементов отобранных первым селектором. Напротив, два селектора в селекторе потомков находят элементы не обязательно являющиеся прямыми потомками, т.е. несмотря на количество "прыжков" до них в DOM.

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

selector1 > selector2 { style properties }
```

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


```css
span {
  background-color: white;
}
div > span {
  background-color: DodgerBlue;
}
```



```html
<div>
  <span
 >Span 1 в div
    <span>Span 2 в span, который в div</span>
  </span>
</div>
<span>Span 3. Не в div вообще</span>
```

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

| Specification |
| --- |
| Selectors Level 4 # child-combinators |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<integer>
=========

**`<integer>`** - тип хранения данных в CSS - является частным случаем типа `<number>`, который представляет целые числа: как положительное, так и отрицательное. Целые числа могу быть использованы в свойствах CSS , таких как `column-count`, `counter-increment` (en-US), `grid-column`, `grid-row` (en-US), и `z-index`.

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

Тип данных `<integer>` состоит из одного или нескольких дробных цифр, от 0 до 9 включительно, символы `+` и `-` необязательны. Не существует единицы измерения, связанной с целочисленным типом данных.

**Примечание:** Не существует официального диапазона значений типа `<integer>`. Opera 12.1 поддерживает значения до 215-1, IE - до 220-1, а остальные браузеры даже выше. На протяжении существования значений CSS3 было проведено не большое количество обсуждений об установлении минимального диапазона: последнее решение, в апреле 2012 на протяжении фазы LC, было [-227-1; 227-1], но остальные значения, такие как 224-1 и 230-1, также были предложены. Однако, самая свежая на данный момент спецификация более не указывает на область определения этого типа данных.

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

Во время анимации значения типа `<integer>` интерполированы используя особые меры. Вычисление будет завершено, если они были целочисленными или с плавающей точкой; отдельное значение получается, используя Целую часть. Скорость интерполяции определена timing function (en-US), связанной с анимацией.

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

### Корректные значения целочисленного типа данных
```

12          Положительное целое число (без предшествующего знака +)
+123        Положительное целое число (С предшествующим знаком +)
-456        Отрицательное целое число
0           Нуль
+0          Нуль, с предшествующим +
-0          Нуль, с предшествующим -
```

### Некорректные значения целочисленного типа данных
```

12.0        Это <number>, а не <integer>, хоть и представляется как целое число.
12.         "Дробные" точки запрещены.
+---12      Разрешён только один предшествующий символ +/-.
десять      Буквы запрещены.
_5          Специальные знаки запрещены.
\35         Экранированные символы Юникода запрещены, даже если они являются целым числом (здесь: 5).
\4E94       Разрешены только арабские цифры, даже в случае, если они экранированны (здесь: японское число 5, 五).
3e4         Научные обозначения запрещены.
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # integers |

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

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

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

* `<number>`
::cue
=====

Псевдоэлемент CSS **`::cue`** соответствует репликам WebVTT в выбранном элементе. Он может быть использован для задания стилей титров и других реплик в медиа с VTT треками.


```css
::cue {
  color: yellow;
  font-weight: bold;
}
```

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

Правила с `::cue` в селекторе ограничены в использовании CSS-свойств следующим списком:

* `background` и его свойства
* `color` (en-US)
* `font` и его свойства
* `line-height`
* `opacity`
* `outline` и его свойства
* `ruby-position` (en-US)
* `text-combine-upright` (en-US)
* `text-decoration` (en-US) и его свойства
* `text-shadow`
* `visibility`
* `white-space`

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

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

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

Следующий CSS устанавливает стили для реплик в виде белого цвета текста и полупрозрачного чёрного фона.


```css
::cue {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |

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

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

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

* Web Video Tracks Format (WebVTT)
Указанное значение
==================

**Указанное значение** CSS-свойства может устанавливаться одним из 3 следующих способов.

1. Если в таблице стилей документа указано значение свойства, которое будет использоваться. Например, если свойство `color` (en-US) устанавливается в `green`, то цвет текста соответствующего элемента становится зелёным.
2. Если в таблице стилей документа указано значение, которое может наследоваться от родительского элемента (если возможно). Например, у нас есть параграф (`<p>`) внутри `<div>`, а к `<div>` применено CSS-свойство `font` со значением "Arial", а у `<p>` не установлено свойство `font`, то он унаследует значение шрифта "Arial".
3. Если не выполняется не то, не другое, начальное значение элемента применяется из CSS спецификации.
Спецификации
------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # specified-value |

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

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