recursal/MDN huggingface dataset:
letter-spacing
==============

Свойство **`letter-spacing`** определяет межбуквенное расстояние в тексте.

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

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


```css
/\* Ключевые слова \*/
letter-spacing: normal;

/\* Значения <length> \*/
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

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

### Значения

`normal`

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

`<length>`

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

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

letter-spacing =   
  normal    | (en-US)  
  <length>    
  
```

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

### HTML


```html
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>
```

### CSS


```css
.normal {
  letter-spacing: normal;
}
.em-wide {
  letter-spacing: 0.4em;
}
.em-wider {
  letter-spacing: 1em;
}
.em-tight {
  letter-spacing: -0.05em;
}
.px-wide {
  letter-spacing: 6px;
}
```

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

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

Большие положительные или отрицательные значения свойства `letter-spacing` могут сделать текст, к которому применяется форматирование, нечитаемым. При очень больших положительных значениях этого свойства, буквы в тексте будут настолько далеко друг от друга, что не будут восприниматься как цельные слова. При очень больших отрицательных значениях буквы будут перекрываться друг другом до такой степени, что слова могут стать неразличимы.

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

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

| Specification |
| --- |
| CSS Text Module Level 3 # letter-spacing-property |

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

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

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

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

* `font-kerning` (en-US)
inline-size
===========

Свойство CSS **`inline-size`** определяет горизонтальные или вертикальные размеры блока в зависимости от режима написания (writing mode). Оно соответствует свойствам `width` и `height` и зависит от свойства `writing-mode`.

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

Syntax
------


```css
/\* <length> values \*/
inline-size: 300px;
inline-size: 25em;

/\* <percentage> values \*/
inline-size: 75%;

/\* Keyword values \*/
inline-size: max-content;
inline-size: min-content;
inline-size: fit-content(20em);
inline-size: auto;

/\* Global values \*/
inline-size: inherit;
inline-size: initial;
inline-size: unset;
```


Если режим написания (writing mode) — вертикальный, значение `inline-size` относится к высоте элемента; в противном случае, оно относиться к ширине элемента. Связанное свойство — `block-size`, которое определяет другие размеры элемента.

### Значения

Свойство `inline-size` принимает те же значения, что и свойства `width` и `height`.

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

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

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

inline-size =   
  <'width'>    
  
```

Examples
--------

### Setting inline size in pixels

#### HTML


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


#### CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  inline-size: 110px;
}
```


#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

* The mapped physical properties: `width` and `height`
* `writing-mode`
block-size
==========

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

Свойство **`block-size`** CSS задаёт горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам `width` и `height` и зависит от значения свойства `writing-mode`.


```css
/\* <length> values \*/
block-size: 300px;
block-size: 25em;

/\* <percentage> values \*/
block-size: 75%;

/\* Keyword values \*/
block-size: 25em border-box;
block-size: 75% content-box;
block-size: max-content;
block-size: min-content;
block-size: available;
block-size: fit-content;
block-size: auto;

/\* Global values \*/
block-size: inherit;
block-size: initial;
block-size: unset;
```


Если режим записи (writing mode) ориентирован по вертикали, то значение `block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство `inline-size`, которое задаёт другое измерение элемента.`

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

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

### Значения

Свойство block-size принимает те же значения, что и свойства `width`, `height`

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

block-size =   
  <'width'>    
  
```

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

### HTML


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

### CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 200px;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

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

* Отображаемые физические свойства: `width` and `height`
* `writing-mode`
inset
=====

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

Свойство CSS **`inset`** определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам `top` и `bottom`, или `right` и `left` (en-US), в зависимости от значений, определённых для `writing-mode`, `direction`, и `text-orientation` (en-US).


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

/\* <length> значения \*/
inset: 3px 10px 3px 10px;
inset: 2.4em 3em 3em 3em;
inset: 10px; /\* значение применяется ко всем сторонам \*/

/\* <percentage> от ширины или высоты внешнего блока \*/
inset: 10% 5% 5% 5%;

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


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

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

### Значения

Свойство `inset` принимает значения, аналогичные значениям свойства `left` (en-US).

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

inset =   
  <'top'>{1,4} (en-US)    
  
```

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

### 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;
  position: relative;
  inset: 20px 50px 30px 10px;
  background-color: #c8c800;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-inset |

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

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

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

* Сопоставление физических свойств: `top`, `right`, `bottom`, and `left` (en-US)
* `writing-mode`, `direction`, `text-orientation` (en-US)
:not()
======

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

**Отрицательный** CSS псевдокласс (en-US), `:not(X)` - функция, принимающая простой селектор *X* в качестве аргумента. Он находит элементы, не соответствующие селектору. *X* не должен содержать других отрицательных селекторов.

**Примечание:**

* С этого псевдокласса можно написать бесполезные селекторы. Например, `:not(*)` найдёт любой элемент, являющийся не любым, то есть правило не применится ни к одному элементу.
* Возможно переписать другие правила. Например `foo:not(bar)` найдёт тот же элемент, что и простой `foo`. Тем не менее специфичность (en-US) первого выше.
* `:not(foo){}` найдёт что угодно, что не `foo`, **включая `<html>` и `<body>`.**
* Это селектор применяется только к одному элементу. Вы не можете использовать его, чтобы исключить всех родителей. Например, `body :not(table) a` применится к ссылкам внутри таблицы, тогда как `<tr>` (en-US) будет соответствовать `:not()` части селектора.

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

:not(selector) { style properties }
```

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


```css
p:not(.classy) {
  color: red;
}
body :not(p) {
  color: green;
}
```


CSS выше и HTML ниже...


```html
<p>Некоторый текст.</p>
<p class="classy">Какой-то другой текст.</p>
<span>Ещё текст</span>
```


Выведет это:

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

| Specification |
| --- |
| Selectors Level 4 # negation |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Начальное значение
==================

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

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

Для наследуемых, начальное значение установлено **только** для корневого элемента, если не указано никакого значения для элемента.

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

Ключевое слово `initial` добавлено в CSS3, чтобы предоставить авторам возможность явно указывать это первоначальное значение.

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

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

Этот инструмент позволяет легко создавать, настраивать и экспериментировать с пользовательскими цветами для использования в интернете. Он также позволяет легко конвертировать цвета в различные форматы, поддерживаемые CSS, в том числе: шестнадцатеричный формат, RGB (красный / зелёный / синий) и HSL (Цветовой тон / Насыщенность / Яркость). Контроль над альфа-каналом (прозрачностью) поддерживается в форматах RGB (RGBA) и HSL (HSLA).

Каждый цвет во время настройки представлен во всех 3-х стандартных форматах CSS, и, кроме того, на основе текущего выбранного цвета генерируется палитра для HSL, HSV и альфа-канала. Кнопкой "пипетка" можно переключаться между HSL или HSV форматами.
scale3d()
=========

`scale3d()` CSS функция изменяет размер элемента. Благодаря величине масштабирования определённой вектором, может изменять различные размеры в разных масштабах.

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

Когда вне диапазона [-1, 1], масштабирование увеличивает элемент в направлении координаты; Когда внутри диапазона он сжимает элемент в этом направлении. При равном 1 он ничего не делает, а когда отрицательный, он выполняет точечное отражение и модификацию размера.

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

scale3d(sx, sy, sz)
```

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

*sx*

Является `<number>` , представляющим абсцисс вектора масштабирования.

*sy*

Является `<number>` , представляющим ординату вектора масштабирования.

*sz*

Является `<number>`, представляющим z-компонент масштабирующего вектора.



| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
| --- | --- | --- | --- |
| 
 Это преобразование применяется к пространству 3D и не может быть
 представлено на плоскости.
  | 

sx
 0
0

0
 sy
0

0
0
sz

 | 

sx
 0
0
0

0
 sy
0
0

0
0
sz
0

0
0
0
1

 |

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

### Without changing the origin

#### HTML


```html
<p>foo</p>
<p class="transformed">bar</p>
```


#### CSS


```css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
  background-color: blue;
}
```


#### Result

### Translating the origin of the transformation

#### HTML


```html
<p>foo</p>
<p class="transformed">bar</p>
```


#### CSS


```css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: scale3d(2, 3, 0);
  transform-origin: center;
  background-color: blue;
}
```


#### Result
skew()
======

CSS функция **`skew()`** трансформирует элемент, наклоняя его в 2D-пространстве.

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

Данная трансформация является линейным преобразованием векторного пространства (трансвекция или shear mapping), которое деформирует каждую точку элемента на определённый угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.

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

Функция `skew()` задаётся одним или двумя значениями которые отображают наклон в каждом из направлений.
```

skew(ax)

skew(ax, ay)
```

### Значения

`ax`

Указывается значение `<angle>`, которое является углом наклона вдоль оси X.

`ay`

Указывается значение `<angle>`, которое является углом наклона вдоль оси Y. Если данное значение не задано, то по умолчанию оно равно `0`. В этом случае вертикального наклона не будет, а будет только горизонтальный.



| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
| --- | --- | --- | --- |
| 

1
 tan(ax)

tan(ay)
 1

 | 

1
 tan(ax)
0

tan(ay)
 1
0

0
0
1

 | 

1
 tan(ax)
0

tan(ay)
 1
0

0
0
1

 | 

1
 tan(ax)
0
0

tan(ay)
 1
0
0

0
0
1
0

0
0
0
1

 |
| `[1 tan(ay) tan(ax) 1 0 0]` |

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

### Используя только наклон по оси x

#### HTML


```html
<div>Обычный</div>
<div class="skewed">Наклонённый</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg); /\* Equal to skewX(10deg) \*/
  background-color: pink;
}
```


#### Result

### Используя два угла

#### HTML


```html
<div>Обычный</div>
<div class="skewed">Наклонённый</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg, 10deg);
  background-color: pink;
}
```


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

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

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

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

* `transform`
* `<transform-function>` (en-US)
rotate()
========

Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством `transform-origin` (en-US), не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется *точечным отражением*.

![](/ru/docs/Web/CSS/transform-function/rotate/rotate.png)

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

rotate(a)
```

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

*a*

Является `<angle>`, представляющим угол поворота. Положительный угол обозначает вращение по часовой стрелке, а отрицательный - против часовой стрелки.



| Декартовы координаты на ℝ2 | Однородные координаты на ℝℙ2 | Декартовы координаты на ℝ3 | Однородные координаты на ℝℙ3 |
| --- | --- | --- | --- |
| 

cos(a)
-sin(a)

sin(a)
cos(a)

 | 

cos(a)
-sin(a)
0

sin(a)
cos(a)
0

0
0
1

 | 

cos(a)
-sin(a)
0

sin(a)
cos(a)
0

0
0
1

 | 

cos(a)
-sin(a)
0
0

sin(a)
cos(a)
0
0

0
0
1
0

0
0
0
1

 |
| `[cos(a) sin(a) -sin(a) cos(a) 0 0]` |

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

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

#### HTML


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```


#### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /\* Equal to rotateZ(45deg) \*/
  background-color: pink;
}
```


#### Result

### Объединение вращения с другим преобразованием

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

#### HTML


```html
<div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>
```


#### CSS


```css
div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}
```


#### Result

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

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-rotate |

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

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

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

* `transform`
* `<transform-function>` (en-US)
* `rotate3d()`
CSS счётчики
============

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

Значение счётчика сбрасывается (инициализируется) при помощи `counter-reset` (en-US).

`counter-increment` (en-US) может быть отображён на странице, используя функцию `counter()` или counters() в свойстве `content`.

Использование счётчиков
-----------------------

Для того, чтобы использовать CSS счётчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счётчика - используйте функцию `counter()`. Следующий пример прибавляет в начале каждого h3 элемента "Section <*значение счётчика*>:".


```css
body {
  counter-reset: section; /\* Устанавливает значение
 счётчика, равным 0 \*/
}

h3::before {
  counter-increment: section; /\* Инкрементирует счётчик\*/
  content: "Секция " counter(section) ": "; /\* Отображает текущее значение счётчика \*/
}
```


Пример:


```html
<h3>Вступление</h3>
<h3>Основная часть</h3>
<h3>Заключение</h3>
```

Вложенные счётчики
------------------

CSS счётчики могут быть очень полезны для создания нумерованных списков, потому что новая сущность CSS счётчика автоматически создаётся в дочерних элементах. Используя функцию `counters(), можно вставить строку между разными уровнями вложенных счётчиков. Пример:`


```css
ol {
  counter-reset: section; /\* Создаёт новый счётчик для каждого тега <ol> \*/
  list-style-type: none;
}

li::before {
  counter-increment: section; /\* Инкрементируется только счётчик текущего уровня вложенности \*/
  content: counters(section, ".") " "; /\* Добавляем значения всех уровней вложенности, используя разделитель '.' \*/
  /\* Если необходима поддержка < IE8, необходимо убедиться, что после разделителя ('.') не стоит пробел \*/
}
```


Объединим с данным HTML:


```html
<ol>
  <li>item</li>          <!-- 1 -->
  <li>item               <!-- 2 -->
    <ol>
      <li>item</li>      <!-- 2.1 -->
      <li>item</li>      <!-- 2.2 -->
      <li>item           <!-- 2.3 -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4 -->
    </ol>
  </li>
  <li>item</li>          <!-- 3 -->
  <li>item</li>          <!-- 4 -->
</ol>
<ol>
  <li>item</li>          <!-- 1 -->
  <li>item</li>          <!-- 2 -->
</ol>
```


Результат:

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # auto-numbering |

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

* `counter-reset` (en-US)
* `counter-increment` (en-US)