recursal/MDN huggingface dataset:
font-style
==========

**`font-style`** это CSS-свойство определяющее каким образом шрифт должен быть стилизирован, будь то это normal, italic, или oblique face из его `font-family`.

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

**Italic** шрифты в общем курсивные по своей сути, обычно занимают меньше горизонтального пространства чем их нестилизированные копии, тогда как **oblique** шрифты обычно просто наклонная версия регулярного шрифта. Когда определённый стиль не доступен, оба italic и oblique шрифты симулируются искусственно наклоняя глифы регулярного шрифта (используйте `font-synthesis` (en-US) для управления этим поведением).

Syntax
------


```css
font-style: normal;
font-style: italic;
font-style: oblique;

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


Свойство `font-style` определяется как единственное ключевое слово выбранное из списка значений внизу.

### Values

`normal`

Выделяет шрифт который классифицирован как `normal` в `font-family`.

`italic`

Выделяет шрифт который классифицирован как `italic`. Если не доступна курсивная версия шрифта, взамен используется `oblique` классификация. Если не одна версия не доступна, то стиль симулируется искусственно.

`oblique`

Выделяет шрифт который классифицирован как `oblique`. Если не доступна косая версия шрифта, взамен используется `italic` классификация. Если не одна версия не доступна, то стиль симулируется искусственно.

### Formal syntax
```

font-style =   
  normal                           | (en-US)  
  italic                           | (en-US)  
  oblique <angle [-90deg,90deg]>? (en-US)    
  
```

Examples
--------

### Font styles
```

<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>
```



```css
.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-style-prop |

|  |  |
| --- | --- |
| Начальное значение | `normal` |
| Применяется к | all elements and text. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | by computed value type; `normal` animates as `oblique 0deg` |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSS basic data types
====================

Базовые типы данных в **CSS** определяют типичные значения (включая ключевые слова и единицы измерения), принимаемые CSS-свойствами и функциями. Они являются частным случаем component value type.

В формальном синтаксисе типы данных обозначаются ключевыми словами, расположенными межу символами неравенства "<" и">".

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

* `<angle>`
* `<basic-shape>` (en-US)
* `<blend-mode>` (en-US)
* `<color>`
* `<custom-ident>`
* `<filter-function>`
* `<flex>`
* `<frequency>` (en-US)
* `<gradient>` (en-US)
* `<image>` (en-US)
* `<integer>`
* `<length>`
* `<number>`
* `<percentage>`
* `<position>` (en-US)
* `<ratio>`
* `<resolution>` (en-US)
* `<shape-box>` (en-US)
* `<single-transition-timing-function>` (en-US)
* `<string>` (en-US)
* `<time>`
* `<transform-function>` (en-US)
* `<url>()` (en-US)
Спецификация
------------

| Specification |
| --- |
| CSS Values and Units Module Level 4  |
animation-delay
===============

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

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

CSS свойство **`animation-delay`** определяет время задержки перед стартом анимации.

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

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

При указании отрицательного значения, анимация также начнётся непременно, но её воспроизведение начнётся не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.

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

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


```css
animation-delay: 3s;
animation-delay: 2s, 4ms;
```

### Значения

`<time>`

Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в миллисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.

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

animation-delay =   
  <time># (en-US)    
  
```

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

Посмотрите CSS-анимации (en-US) для примера.

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

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

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

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

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

* Использование CSS-анимаций (en-US)
* `AnimationEvent`
color-scheme
============

CSS-свойство **`color-scheme`** позволяет указать цветовые схемы, в которых может быть отображён текущий элемент.

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

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


```css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;

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


Свойство `color-scheme` принимает одно из следующих ключевых слов.

### Значения

`normal`

Означает, что элемент не осведомлён о каких-либо цветовых схемах, поэтому он должен использовать цветовую схему по умолчанию.

`light`

Означает, что элемент может быть отображён в светлой цветовой схеме операционной системы.

`dark`

Означает, что элемент может быть отображён в тёмной цветовой схеме операционной системы.

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

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

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

color-scheme =   
  normal                                       | (en-US)  
  [ (en-US) light | (en-US) dark | (en-US) <custom-ident> ] (en-US)+ (en-US) && (en-US) only? (en-US)    
  
```

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

### Использование цветовой схемы

Чтобы применить ко всей странице текущую цветовую схему пользователя, нужно определить свойство `color-scheme` для элемента `:root`.


```css
:root {
  color-scheme: light dark;
}
```

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

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # color-scheme-prop |

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

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

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

* Применение цвета к HTML-элементам с помощью CSS
* Другие свойства, относящиеся к цвету: `color` (en-US), `background-color`, `border-color` (en-US), `outline-color`, `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow`, `caret-color` (en-US), and `column-rule-color`
* `background-image`
* `print-color-adjust` (en-US)
:focus-within
=============

CSS Псевдо-класс **`:focus-within`** соответствует элементу, который либо сам находится в фокусе, либо содержит элемент, который находится в фокусе. Другими словами, он представляет элементу, который соответствует псевдоклассу `:focus` либо имеет потомка, который соответствует `:focus`. (Включая потомков в shadow trees (en-US).)


```css
/\* Выделяет <div> когда один из его потомков находится в фокусе \*/
div:focus-within {
  background: cyan;
}
```


Этот селектор может оказаться полезным, например, для подсвечивания всего контейнера `<form>`, когда пользователь устанавливает фокус на одном из его полей ввода `<input>`.

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

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

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

### HTML


```html
<p>Try typing into this form.</p>

<form>
  <label for="given\_name">Given Name:</label>
  <input id="given\_name" type="text" />
  <br />
  <label for="family\_name">Family Name:</label>
  <input id="family\_name" type="text" />
</form>
```

### CSS


```css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}
```

### Итог

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

| Specification |
| --- |
| Selectors Level 4 # the-focus-within-pseudo |

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

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

See also
--------

* `:focus`
* `:focus-visible` 
Экспериментальная возможность
:has()
======

Baseline 2023
-------------

Newly availableSince December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
Стили, указанные для элемента с псевдоклассом **`:has()`**, будут применены, если хотя бы один из относительных селекторов, переданных в качестве аргумента, соответствует хотя бы одному элементу.

С помощью данного псевдокласса можно указать стили для родительского или предшествующего элементов.


```css
/\* Отступ снизу будет обнулён только для тегов <h1>,
следом за которыми идёт тег <p> \*/
h1:has(+ p) {
  margin-bottom: 0;
}
```


Псевдокласс `:has()` берет соответствующий список селекторов в качестве аргумента. В ранней версии спецификации CSS Selectors Level 4, `:has` имел ограничение, которое не позволяло использовать его в таблицах стилей; только с использованием функций, как например: `document.querySelector()` (из-за проблем с производительностью). На текущий момент, это ограничение снято, так как ни один из браузеров не реализовал это соответствующим образом.


```css
/\* Выбирает любой тег <a>, если следом за ним находится дочерний элемент <img> \*/
/\* Отмечу, что это не поддерживается ни одним из браузеров \*/
var test = document.querySelector('a:has(> img)');
```

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

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

Следующий селектор находит только те теги `<a>`, которые непосредственно содержат дочерний элемент `<img>`:


```css
a:has(> img) {
}
```


Следующий селектор находит только те теги `<h1>` (en-US), при условии, что следом за ними находится элемент `<p>`:


```css
h1:has(+ p) {
}
```

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

| Specification |
| --- |
| Selectors Level 4 # relational |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
::-webkit-slider-thumb
======================

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

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

`Псевдоэлемент CSS ::-webkit-slider-thumb` представляет собой ползунок, передвигаемый пользователем по линейке элемента `<input>` типа `"range"` для изменения числового значения атрибута value.

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

Не является частью какой либо спецификации. Это проприетарный псевдоэлемент исключительно для WebKit/Blink.

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

* `::-webkit-slider-runnable-track` (en-US)
* Похожие псевдоэлементы использующиеся в других браузерах:
    + `::-moz-range-thumb` (en-US)
    + `::-ms-thumb`
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders
margin-inline-start
===================

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

Свойство **`margin-inline-start`** CSS задаёт логическое строковое (inline) значение start margin элемента, которое сопоставляется с физическим значением margin в зависимости от режима записи (writing\_mode) элемента, направленности и ориентации текста. Это логическое свойство соответствует одному из свойств `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` в зависимости от значений `writing-mode`, `direction`, and `text-orientation` (en-US).


```css
/\* <length> values \*/
margin-inline-start: 10px; /\* абсолютная величина \*/
margin-inline-start: 1em; /\* относительно размера текста \*/
margin-inline-start: 5%; /\* относительно ширины ближайшего контейнера \*/

/\* Keyword values \*/
margin-inline-start: auto;

/\* Global values \*/
margin-inline-start: inherit;
```


Это свойство связано со свойствами `margin-block-start` (en-US), `margin-block-end` (en-US) и `margin-inline-end`, которые определяют другие компоненты margins элемента.

|  |  |
| --- | --- |
| Начальное значение | `0` |
| Применяется к | с таким же `margin` |
| Наследуется | нет |
| Проценты | зависит от модели макета |
| Обработка значения | если указано как длина - абсолютная длина; если указано как проценты - заданное значение; в противном случае `auto` |
| Animation type | длина |

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

### Значения

Свойство `margin-inline-start` принимает такие же значения как и свойство `margin-left`.

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

margin-inline-start =   
  <'margin-top'>    
  
```

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

### HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-start: 20px;
  background-color: #c8c800;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # margin-properties |

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

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

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

* `margin-inline-end`
* Отображаемые физические свойства: `margin-top`, `margin-right`, `margin-bottom` и `margin-left`
* `writing-mode`, `direction`, `text-orientation` (en-US)
column-rule-color
=================

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

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

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


```css
/\* Значения <color> \*/
column-rule-color: red;
column-rule-color: rgb(192, 56, 78);
column-rule-color: transparent;
column-rule-color: hsla(0, 100%, 50%, 0.6);

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


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

### Значения

`<color>`

Цвет линий, разделяющих столбцы.

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

column-rule-color =   
  <color>    
  
```

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

### HTML


```html
<p>
  This is a bunch of text split into three columns. The `column-rule-color`
  property is used to change the color 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: solid;
  column-rule-color: blue;
}
```

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

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

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

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

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

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

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

* The `<color>` data type
* Other color-related properties: `color` (en-US), `background-color`, `border-color` (en-US), `outline-color`, `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow`, and `caret-color` (en-US)
* Applying color to HTML elements using CSS
Комментарии
===========

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

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

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


```css
/\* Комментарий \*/
```

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


```css
/\* Однострочный комментарий \*/

/\*
Комментарий
который содержит
несколько
строк
\*/
```

Замечания
---------

Данный `/* */` синтаксис комментария используется для обоих вариантов, и однострочного и многострочного комментария. Нет других способов добавить комментарий во внешнюю таблицу стилей. Также, когда используется элемент <style>, вы можете использовать <!-- -->, чтобы спрятать CSS от старых браузеров, но это не рекомендуется. Как и в большинстве языков программирования, которые используют синтаксис комментариев /\* \*/ , комментарии нельзя вкладывать друг в друга. Другими словами, данная часть синтаксиса \*/, которая следует за /\* закрывает комментарий.

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

* CSS 2.1 Синтаксис и базовые типы данных #комментарии
Смотрите также
--------------

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

Свойство `widows` CSS определяет какое минимальное количество линий должно быть оставлено в начале новой страницы на `paged` носителе. В типографике, «висячая» строка **(***widow)* это последняя строка параграфа, оказавшаяся в начале следующей страницы. Установка свойства `widows` позволяет предотвратить висячие строки.

На нестраничных носителях, таких как `screen`, CSS-свойство `widows` не имеет эффекта.

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

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

Formal syntax (en-US): 
```

widows =   
  <integer [1,∞]>    
  
```



```css
widows: 2
widows: 3

widows: inherit
```

### Значения

`<integer>`

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

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


```css
p {
  widows: 3;
}
```

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

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |
| CSS Multi-column Layout Module Level 1 # filling-columns |

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

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

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

* `orphans`
* `Paged Media`
:defined
========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
CSS псевдокласс **`:defined`** находит любой элемент, который был определён, включая любой стандартный элемент, встроенный в браузер, и пользовательские элементы (то есть определённые с помощью метода `CustomElementRegistry.define()`).


```css
/\* Находит любой элемент, который был определён \*/
:defined {
  font-style: italic;
}

/\* Выбирает все элементы simple-custom, если пользовательский элемент simple-custom был определён \*/
simple-custom:defined {
  display: block;
}
```

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

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

Этот пример включает скрипт, определяющий пользовательский элемент `<simple-custom>`:


```js
customElements.define(
  "simple-custom",
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement("div");
      divElem.textContent = this.getAttribute("text");

      let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
    }
  },
);
```


Затем мы используем короткий HTML код с элементом `<simple-custom>` и стандартным элементом `<p>`:


```html
<simple-custom text="Текст пользовательского элемента"></simple-custom>

<p>Пример текста стандартного параграфа</p>
```


Теперь немного CSS. Здесь мы определяем цвета фона для разных элементов и используем селектор `:defined`, чтобы поменять шрифт всех определённых элементов на курсив.


```css
/\* Определение разных фонов для разных элементов \*/
p {
  background: yellow;
}

simple-custom {
  display: block;
  background: cyan;
}

/\* И пользовательский, и встроенный элементы будет отображены курсивом \*/
:defined {
  font-style: italic;
}
```


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


```css
simple-custom:not(:defined) {
  opacity: 0;
}

simple-custom:defined {
  opacity: 0.75;
  text-decoration: underline;
}
```


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

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

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

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

| Specification |
| --- |
| HTML Standard # selector-defined |

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

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

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

* Веб-компоненты
* `:host` (en-US)
* `:host()`
* `:host-context()`
:enabled
========

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

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

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

Следующий пример делает цвет текста средне-зелёного оттенка, когда поле включено, и серым, когда отключено. Это позволяет понимать пользователю какие элементы интерактивны, а какие нет.

Следующий HTML...


```html
<form action="url\_of\_form">
  <label for="FirstField">Первое поле (включено):</label>
  <input type="text" id="FirstField" value="Lorem" /><br />
  <label for="SecondField">Второе поле (отключено):</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled" /><br />
  <input type="button" value="Submit" />
</form>
```


...используем со следующим CSS...


```css
input:enabled {
  color: #22aa22;
}
input:disabled {
  color: #d9d9d9;
}
```


...результат:

Заметьте, цвет текста кнопки также зелёный, так как она тоже включена.Спецификации
------------

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

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

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

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

* `:disabled`