recursal/MDN huggingface dataset:
max-block-size
==============

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

CSS свойство **`max-block-size`** определяет максимальный горизонтальный или вертикальный размер блока в зависимости от вида ориентации экрана. Это свойство соответствует либо `max-width`, либо `max-height`, в зависимости от значения определённого в `writing-mode`. Если последнее свойство вертикально ориентировано, значит значение свойства `max-block-size` относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to `max-inline-size` (en-US), which defines the other dimension of the element.


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

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

/\* Keyword values \*/
max-block-size: none;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content;
max-block-size: fill-available;

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


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

Syntax
------

### Values

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

### Formal syntax
```

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

Example
-------

### HTML Content


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

### CSS Content


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

Specification
-------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-max-block-size |
| 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: `max-width` and `max-height`
* `writing-mode`
<percentage>
============

CSS тип данных **`<percentage>`** представляет значение в процентах. Оно часто используется, чтобы определить размер относительно родительского элемента. Проценты используются в различных свойствах, таких как `width`, `height`, `margin`, `padding`, и `font-size`.

**Примечание:** Наследуются рассчитанные значения. Таким образом, даже если процентное значение используется на родительском элементе, настоящее значение (такое, как пиксели для типа данных `<length>`) будет доступно в унаследованном свойстве, а не значение в процентах.

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

Тип данных `<percentage>` состоит из `<number>`, за которым следует знак процента (`%`). Так же впереди может стоять знак `+` или `-`, хотя отрицательные значения допустимы не во всех свойствах. Как и у всех единиц измерения CSS между символом процента и числом нет пробельного символа.

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

При анимировании значения типа данных `<percentage>` интерполируются как настоящие числа с плавающей запятой. Скорость интерполяции зависит от функции времени, с которой используется анимация.

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

### Ширина и левый отступ


```html
<div style="background-color:blue;">
  <div style="width:50%; margin-left:20%; background-color:lime;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    Width: 30%, Left margin: 60%
  </div>
</div>
```


HTML код выше будет выглядеть так:

### Размер шрифта


```html
<div style="font-size:18px;">
  <p>Full-size text (18px)</p>
  <p><span style="font-size:50%;">50%</span></p>
  <p><span style="font-size:200%;">200%</span></p>
</div>
```


HTML код выше будет выглядеть так:

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

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

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

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

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

Псевдоэлемент **`::selection`** позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).


```css
::selection {
  background: cyan;
}
```

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

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

* `color` (en-US)
* `background-color`
* `cursor`
* `caret-color` (en-US)
* `outline` и его длинные записи
* `text-decoration` (en-US) и связанные свойства
* `text-emphasis-color` (en-US)
* `text-shadow`

**Предупреждение:** Заметим, что, в частности, свойство `background-image` игнорируется.

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


```css
/\* синтаксис Firefox \*/
::-moz-selection {
}
```

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

### HTML


```html
<div>Этот текст будет стилизован особым образом при выделении.</div>
<p>Также попробуйте выделить текст в этом параграфе.</p>
```

### CSS


```css
/\* Сделаем выделенный текст золотым с красным фоном \*/
::-moz-selection {
  color: gold;
  background: red;
}

::selection {
  color: gold;
  background: red;
}

/\* Сделаем выделенный в параграфе текст белым на синем фоне \*/
p::-moz-selection {
  color: white;
  background: blue;
}

p::selection {
  color: white;
  background: blue;
}
```

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

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-selection |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
:read-write
===========

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 псевдокласс `:read-write` находит элементы, доступные для редактирования пользователем, такие как текстовые поля.

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


```css
input:-moz-read-write {
  background: #eee;
}
input:read-write {
  background: #eee;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-read-write |
| Selectors Level 4 # rw-pseudos |

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

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

See also
--------

* `:read-only`
* HTML атрибут `contenteditable` (en-US)
@namespace
==========

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

CSS @-правило `@namespace` определяет пространства имён XML, которые будут использованы в таблице стилей. Они применяются чтобы ограничить CSS селекторы только элементами принадлежащими конкретному пространству имён. Пространства имён полезны, в основном, когда идёт взаимодействие с документами содержащими множество пространств имён, такими как HTML5 со встроенным SVG, MathML или XML.


```css
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/\* This matches all XHTML <a> elements, as XHTML is the default unprefixed namespace \*/
a {
}

/\* This matches all SVG <a> elements \*/
svg|a {
}

/\* This matches both XHTML and SVG <a> elements \*/
\*|a {
}
```


Любое `@namespace` правило обязано следовать всем @charset и @import правилам, а так же всем описаниям стилей в таблице стилей.

`@namespace` может быть использован для определения стандартного пространства имён для конкретной таблице стилей. Когда стандартное пространство имён определено, все селекторы (но не атрибуты селекторов, смотрите заметку ниже) применяются только к элементам в этом пространстве имён.

`@namespace` правила можно использовать для определения префиксов имён. Когда селектор имеет префикс, он будет выбирать элементы совпадающие по пространству имён и именам или атрибутам.

В HTML5 существуют сторонние элементы которые автоматически ассоциируются с соответствующими пространствами имён. Это значит, что HTML-элементы будут действовать так, как если бы они находились в пространстве имён (`http://www.w3.org/1999/xhtml`), также если они не имеют `xmlns` атрибута где-либо в документе, то такие элементы как <svg> и <math> будут ассоциироваться с их стандартными пространствами имён (`http://www.w3.org/2000/svg` and `http://www.w3.org/1998/Math/MathML`).

**Примечание:** Примечание: В XML, если префикс отличается от атрибута (Например, `xlink:href`), то атрибут не будет иметь пространства имён. Другими словами, атрибуты не могут наследовать пространство имён элемента в котором они находятся.

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


```css
/\* Default namespace \*/
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";

/\* Prefixed namespace \*/
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";
```

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

@namespace =   
  @namespace <namespace-prefix>? (en-US) [ (en-US) <string> (en-US) | (en-US) <url> ] (en-US) ;    
  
<namespace-prefix> =   
  <ident> (en-US)    
  
<url> =   
  <url()>  | (en-US)  
  <src()>    
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* (en-US) )    
  
```

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

| Specification |
| --- |
| CSS Namespaces Module Level 3 # declaration |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
:nth-last-of-type()
===================

CSS псевдокласс **`:nth-last-of-type()`** находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов, считая с конца.


```css
/\* Выбирает каждый четвёртый элемент <p>
 среди любой группы соседних элементов,
 отсчёт начинается с последнего элемента \*/
p:nth-last-of-type(4n) {
  color: lime;
}
```


**Примечание:** Этот псевдокласс практически такой же как `:nth-of-type`, за исключением того, что счёт элементов производится в обратном порядке начиная с *конца*, а не в обычном порядке с начала.

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

Псевдокласс `nth-last-of-type` указывается с единственным аргументом, описывающим паттерн для выбирания элементов, начиная с конца.

Более детальное описание синтаксиса может быть найдено на странице псевдокласса `:nth-last-child`.

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

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

### HTML


```html
<div>
  <span>Это span.</span>
  <span>Это другой span.</span>
  <em>Это текст будет подчёркнут.</em>
  <span>Круто, этот span лаймовый!!!</span>
  <strike>Это вообще не span.</strike>
  <span>Это ещё один последний span.</span>
</div>
```

### CSS


```css
span:nth-last-of-type(2) {
  background-color: lime;
}
```

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

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

| Specification |
| --- |
| Selectors Level 4 # nth-last-of-type-pseudo |

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

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

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

* `:nth-last-child`, `:nth-of-type`
:link
=====

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

CSS псевдокласс `:link` позволяет вам выбирать ссылки внутри элементов. Он выберет любую ссылку, которая ещё не была посещена, даже те, которые уже стилизованы, используя селекторы с другими, относящимися к ссылкам, псевдоклассам типа `:hover`, `:active` или `:visited`. Чтобы стилизовать ссылки должным образом, вам нужно вставлять правила `:link` до других, как определено *LVHA-порядком*: `:link` — `:visited` — `:hover` — `:active`. Псевдо-класс `:focus` обычно размещается прямо перед или сразу после `:hover`, в зависимости от ожидаемого эффекта.

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

* Используйте `:any-link` чтобы выбрать ссылку, независимо от того, была она посещена или нет.

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


```css
a:link {
  color: slategray;
}
.external:link {
  background-color: lightblue;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-link |
| Selectors Level 4 # link |

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

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

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

* `:visited`, `:hover`, `:active`
CSS Text Decoration
===================

**CSS Text Decoration** – модуль CSS, который определяет возможности, относящиеся к оформлению текста, такие как подчёркивание, тень текста и метки выделения.

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

### Свойства

* `text-decoration` (en-US)
* `text-decoration-color` (en-US)
* `text-decoration-line` (en-US)
* `text-decoration-skip-ink` (en-US)
* `text-decoration-style` (en-US)
* `text-decoration-thickness` (en-US)
* `text-emphasis` (en-US)
* `text-emphasis-color` (en-US)
* `text-emphasis-position` (en-US)
* `text-emphasis-style` (en-US)
* `text-shadow`
* `text-underline-offset` (en-US)
* `text-underline-position` (en-US)
Примеры
-------


```css
.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.thick {
  text-decoration: solid underline purple 4px;
}

.blink {
  text-decoration: blink;
}
```



```html
<p class="under">Этот текст подчёркнут.</p>
<p class="over">Этот текст имеет линию сверху.</p>
<p class="line">Этот текст перечёркнут.</p>
<p>
  Эта <a class="plain" href="#">ссылка не будет подчёркнута</a>, как все ссылки
  по умолчанию. Будьте осторожны, когда удаляете подчёркивание у ссылок, т.к.
  для пользователей нижнее подчеркивание часто обозначает гиперссылку.
</p>
<p class="underover">
  В этом примере линии находятся над <em>и</em> под текстом.
</p>
<p class="thick">
  Этот текст подчёркнут жирной линией, если ваш браузер это поддерживает.
</p>
<p class="blink">
  Этот текст может моргать, если ваш браузер это поддерживает.
</p>
```

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3  |
:hover
======

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

CSS псевдокласс `:hover` срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как `:link`, `:visited` и `:active`, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вставьте правило `:hover` после правил `:link` и `:visited` до `:active`, как определено *LVHA-порядком*: `:link` — `:visited` — `:hover` — `:active`.

Псевдокласс `:hover` может применяться к любому псевдоэлементу. 
Экспериментальная возможность

Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.

**Примечание:** на сенсорных экранах `:hover` проблемный или не работает. В зависимости от браузера, псевдокласс `:hover` может никогда не сработать, или сработать на некоторое время после нажатия на элемента, или может продолжать действовать даже остаться после того, как пользователь коснулся элемента до нажатия на другой элемент. Так как сенсорные устройства очень распространены, то веб-разработчикам очень важно не иметь контент, доступный только при наведении, так как такой контент неудобно или невозможно использовать на таких устройствах.

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


```css
:link:hover {
  outline: dotted red;
}

.foo:hover {
  background: gold;
}
```

### Выпадающее меню

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


```css
div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}
```


применим к HTML структуре типа следующей:


```html
<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Меню</a>
      <ul>
        <li>
          <a href="example.html">Ссылка</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Подменю</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Подменю</a>
              <ul>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
                <li><a href="example.html">Ссылка</a></li>
              </ul>
            </li>
            <li><a href="example.html">Ссылка</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
```

### Галерея полноразмерных изображений и превью

Вы можете использовать псевдокласс `:hover`, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши.

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
column-count
============

CSS свойство **`column-count`** разбивает содержимое элемента на заданное число столбцов.

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

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


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

/\* целое значение \*/
column-count: 3;

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

### Значения

`auto`

Количество столбцов определяется другими свойствами CSS, такими как `column-width` (en-US).

`<integer>`

Является строго положительным `<integer>`, описывающим идеальное число столбцов, в которые будет стекаться содержимое элемента. Если `column-width` (en-US). также, не установлено в значение -`auto`, оно указывает максимально допустимое число столбцов.

### Formal syntax
```

column-count =   
  auto             | (en-US)  
  <integer [1,∞]>    
  
```

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

### HTML


```html
<p class="content-box">
  This is a bunch of text split into three columns using the CSS `column-count`
  property. The text is equally distributed over the columns.
</p>
```

### CSS


```css
.content-box {
  column-count: 3;
}
```

### Result

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

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

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | Block containers except table wrapper boxes |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | целое число |

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

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

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

* Multiple-column Layout (Learn Layout)
* Basic Concepts of Multicol (en-US)
writing-mode
============

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

Summary
-------

Свойство **`writing-mode`** устанавливает горизонтальное или вертикальное положение текста также как и направление блока.

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

|  |  |
| --- | --- |
| Начальное значение | `horizontal-tb` |
| Применяется к | все элементы, кроме групп табличных строк, групп табличных столбцов, табличных строк и табличных колонок |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | Not animatable |

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


```css
/\* Keyword values \*/
writing-mode: horizontal-tb;
writing-mode: horizontal-bt;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/\* Global values \*/
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;
```

### Значения

`horizontal-tb`

Content flows horizontally from left to right, vertically from top to bottom. The next horizontal line is positioned below the previous line.

`horizontal-bt`

Content flows horizontally from left to right, vertically from bottom to top. The next horizontal line is positioned above the previous line.

`vertical-rl`

Content flows vertically from top to bottom, horizontally from right to left. The next vertical line is positioned to the left of the previous line.

`vertical-lr`

Content flows vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line.

`lr` 
Устарело

Deprecated except for SVG1 documents. For CSS, use `horizontal-tb`.

`lr-tb` 
Устарело

Deprecated except for SVG1 documents. For CSS, use `horizontal-tb`.

`rl` 
Устарело

Deprecated except for SVG1 documents. For CSS, use `horizontal-tb`.

`tb` 
Устарело

Deprecated except for SVG1 documents. For CSS, use `vertical-rl`.

`tb-rl` 
Устарело

Deprecated except for SVG1 documents. For CSS, use `vertical-rl`.

### Formal syntax
```

writing-mode =   
  horizontal-tb  | (en-US)  
  vertical-rl    | (en-US)  
  vertical-lr    | (en-US)  
  sideways-rl    | (en-US)  
  sideways-lr      
  
```

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


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



```css
.exampleText {
  writing-mode: vertical-rl;
}
```

Specification
-------------

| Specification |
| --- |
| CSS Writing Modes Level 4 # block-flow |

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

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

See also
--------

* SVG `writing-mode` (en-US) attribute
* `direction`
* `unicode-bidi` (en-US)