background-image - CSS: каскадные таблицы стилей

background-image
================

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

Свойство CSS **`background-image`** устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.

Границы `border` элемента затем рисуются поверх них, и `background-color` рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS-свойствами `background-clip` и `background-origin`.

Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением `none`.

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

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | все элементы. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | нет |
| Обработка значения | как указано, но с абсолютными значениями `url` (en-US) |
| Animation type | discrete |

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

```css
background-image: none;
background-image: url(http://www.example.com/bck.png);

background-image: inherit;
```

### Значения

`none`

Это ключевое слово обозначает отсутствие изображений.

`<image>`

`<image>` (en-US) обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживаетсянесколько фонов (en-US).

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

background-image =
  <bg-image># (en-US)

<bg-image> =
  <image>  | (en-US)
  none

<image> =
  <url>       | (en-US)
  <gradient> (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) )

```

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

### Несколько фонов и прозрачность

Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.

#### HTML содержимое

```html
<div>
  <p class="catsandstars">This paragraph is full of cats<br />and stars.</p>
  <p>This paragraph is not.</p>
  <p class="catsandstars">Here are more cats for you.<br />Look at them!</p>
  <p>And no more.</p>
</div>
```

#### CSS содержимое

```css
pre,
p {
  font-size: 1.5em;
  color: #fe7f88;
  background-color: transparent;
}

div {
  background-image: url("mdn\_logo\_only\_color.png");
}

p {
  background-image: none;
}

.catsandstars {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-color: transparent;
}
```

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

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

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

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

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

* CSS спрайты изображений (en-US)
* `<img>`
* Статьи, связанные с изображениями:: `<image>` (en-US), `linear-gradient()` (en-US), `radial-gradient()` (en-US), `repeating-linear-gradient()` (en-US), `repeating-radial-gradient()` (en-US), `element()` (en-US).


:nth-last-of-type() - CSS: каскадные таблицы стилей

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

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

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: каскадные таблицы стилей

Используемое значение
=====================

**Используемое значение** - CSS свойство, которое используется, когда все вычисления уже выполнены, смотрите вычисленное значение.
После того как user agent закончил свои расчёты каждое свойство CSS имеет своё значение. Используемые значения (например, `width`, `line-height`) в пикселях. Используемые значения сокращённых свойств (например, `background`) согласуются с теми из свойств компонентов (например, `background-color` или `background-size`) и с `position` и `float`.

**Примечание:** `getComputedStyle()` DOM API возвращает решённое значение, которое может быть численным значением или используемым значением, в зависимости от свойства.

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

Данный пример показывает вычисление и отображение значения `width` трёх элементов (обновление при изменении размера):

### HTML

```html
<div id="no-width">
  <p>No explicit width.</p>
  <p class="show-used-width">..</p>

  <div id="width-50">
    <p>Explicit width: 50%.</p>
    <p class="show-used-width">..</p>

    <div id="width-inherit">
      <p>Explicit width: inherit.</p>
      <p class="show-used-width">..</p>
    </div>
  </div>
</div>
```

### CSS

```css
#no-width {
  width: auto;
}

#width-50 {
  width: 50%;
}

#width-inherit {
  width: inherit;
}

/\* Make results easier to see \*/
div {
  border: 1px solid red;
  padding: 8px;
}
```

### JavaScript

```js
function updateUsedWidth(id) {
  var div = document.querySelector(`#${id}`);
  var par = div.querySelector(".show-used-width");
  var wid = window.getComputedStyle(div)["width"];
  par.textContent = `Used width: ${wid}.`;
}

function updateAllUsedWidths() {
  updateUsedWidth("no-width");
  updateUsedWidth("width-50");
  updateUsedWidth("width-inherit");
}

updateAllUsedWidths();
window.addEventListener("resize", updateAllUsedWidths);
```

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

Difference from computed value
------------------------------

CSS 2.0 defined only *computed value* as the last step in a property's calculation. Then, CSS 2.1 introduced the distinct definition of used value. An element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. For CSS properties that don't depend on layout (e.g., `display`, `font-size`, or `line-height`), the computed values and used values are the same. The following are the CSS 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from CSS 2.1 Changes: Specified, computed, and actual values):

* `background-position`
* `bottom`, `left`, `right`, `top`
* `height`, `width`
* `margin-bottom`, `margin-left`, `margin-right`, `margin-top`
* `min-height`, `min-width`
* `padding-bottom`, `padding-left`, `padding-right`, `padding-top`
* `text-indent`
Спецификация
------------

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

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

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


line-height - CSS: каскадные таблицы стилей

line-height
===========

Свойство CSS **`line-height`** устанавливает величину пространства между строками, например в тексте. В блочных элементах оно указывает минимальную высоту блоков строк внутри элемента. В незамещаемых внутристрочных элементах —указывает высоту, которая используется для вычисления высоты блоков строк.

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

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

```css
/\* Keyword value \*/
line-height: normal;

/\* Unitless values: use this number multiplied
by the element's font size \*/
line-height: 3.5;

/\* <length> values \*/
line-height: 3em;

/\* <percentage> values \*/
line-height: 34%;

/\* Global values \*/
line-height: inherit;
line-height: initial;
line-height: unset;
```

Свойство `line-height` задаётся с помощью:

* `<числа>`
* `<величины>`
* `<процентного соотношения>`
* ключевого слова `normal`.
### Значения

`normal`

Зависит от пользовательского браузера. Компьютерные браузеры (включая Firefox) используют значение по умолчанию приблизительно **`1.2`**, в зависимости от элементов `font-family`.

`<число> (без именования)`

Значением `line-height` будет результат умножения указанного числа (без именования) на размер шрифта элементов. Указанное число, по сути, множитель. В большинстве случаев **это предпочтительный способ** указания значения `line-height`, потому что позволяет избежать непредвиденных результатов при наследовании.

`<величина>`

Указанная `<величина>` используется при вычислении высоты блока строки. Значение, заданное в единицах **em** может привести к непредвидимым результатам (смотри пример ниже).

`<процентное соотношение>`

Относительно размера шрифта самого элемента.Relative to the font size of the element itself. The computed value is this `<percentage>` multiplied by the element's computed font size. **Percentage** values may produce unexpected results (see the second example below).

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

line-height =
  normal                     | (en-US)
  <number [0,∞]>             | (en-US)
  <length-percentage [0,∞]>

<length-percentage> =
  <length>      | (en-US)
  <percentage>

```

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

### Basic example

```css
/\* All rules below have the same resultant line height \*/

div {
  line-height: 1.2;
  font-size: 10pt;
} /\* number \*/
div {
  line-height: 1.2em;
  font-size: 10pt;
} /\* length \*/
div {
  line-height: 120%;
  font-size: 10pt;
} /\* percentage \*/
div {
  font:
    10pt/1.2 Georgia,
    "Bitstream Charter",
    serif;
} /\* font shorthand \*/
```

It is often more convenient to set `line-height` by using the `font` shorthand as shown above, but this requires the `font-family` property to be specified as well.

### Prefer unitless numbers for line-height values

This example shows why it is better to use `<number>` values instead of `<length>` values. We will use two `<div>` elements. The first, with the green border, uses a unitless `line-height` value. The second, with the red border, uses a `line-height` value defined in `em`s.

#### CSS

```css
.green {
  line-height: 1.1;
  border: solid limegreen;
}

.red {
  line-height: 1.1em;
  border: solid red;
}

h1 {
  font-size: 30px;
}

.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}
```

#### HTML

```html
<div class="box green">
  <h1>Avoid unexpected results by using unitless line-height.</h1>
  length and percentage line-heights have poor inheritance behavior ...
</div>

<div class="box red">
  <h1>Avoid unexpected results by using unitless line-height.</h1>
  length and percentage line-heights have poor inheritance behavior ...
</div>

<!-- The first <h1> line-height is calculated from its own font-size (30px × 1.1) = 33px -->
<!-- The second <h1> line-height results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want -->
```

#### Result

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

| Specification |
| --- |
| CSS Inline Layout Module Level 3 # line-height-property |

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

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

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

See also
--------

* `font`, `font-size`


CSS Text Decoration - CSS: каскадные таблицы стилей

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

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

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`** разбивает содержимое элемента на заданное число столбцов.

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

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

```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 - CSS: каскадные таблицы стилей

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)


Замещаемый элемент - CSS: каскадные таблицы стилей

Замещаемый элемент
==================

В CSS, **замещаемый элемент** — это элемент, чьё представление выходит за рамки CSS. Другими словами, это внешний объект, чьё представление независимо от модели форматирования CSS.

Замещаемые элементы
-------------------

Типичные замещаемые элементы:

* `<iframe>` (en-US)
* `<video>`
* `<embed>`
* `<img>`

Некоторые элементы рассматриваются как замещаемые только в некоторых случаях:

* `<audio>`
* `<canvas>`
* `<object>` (en-US)

Спецификация HTML также указывает, что элемент `<input>` может быть замещаемым, поскольку элемент `<input>` с типом image является замещаемым элементом наподобие `<img>`. Однако другие элементы форм, включая другие типы элементов `<input>`, явно отнесены к незамещаемым элементам (для описания их отображения по умолчанию, которое может быть разным на разных платформах, спецификация использует термин «Виджеты»).

Объекты, добавляемые с помощью CSS-свойства `content` являются *анонимными замещаемыми элементами*. Они «анонимные», так как они не существуют в HTML-разметке.

Использование CSS с замещаемыми элементами
------------------------------------------

CSS обрабатывает замещаемые элементы особым образом в некоторых случаях, например при расчёте внешних отступов и некоторых значений `auto`.

Заметим, что у некоторых замещаемых элементов, но не у всех, есть внутренние размеры или определённая базовая линия, которая используется CSS-свойствами вроде `vertical-align`.

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

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


word-spacing - CSS: каскадные таблицы стилей

word-spacing
============

CSS-свойство **`word-spacing`** устанавливает длину пробела между словами и между тегами.

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

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

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

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

/\* <percentage> значения \*/
word-spacing: 50%;
word-spacing: 200%;

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

### Значения

`normal`

Нормальный интервал между словами, определённый текущим шрифтом и/или браузером.

`<length>`

Определяет дополнительный интервал в дополнение к внутреннему интервалу между словами, определяемому шрифтом.

`<percentage>`

Определяет дополнительный интервал как процент от предварительной ширины символа.

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

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

```

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

### HTML

```html
<div id="mozdiv1">Here are many words...</div>
<div id="mozdiv2">...and many more!</div>
```

### CSS

```css
#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}
```

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

Большое положительное или отрицательное значение `word-spacing` может сделать предложения, к которым применяется стиль, нечитаемыми. Для текста, стилизованного с очень большими положительными значениями, слова будут так далеки друг от друга, что он больше не будет казаться предложением. Для текста, стилизованного с очень большими отрицательными значениями, слова будут перекрывать друг от друга до точки, где начало и конец каждого слова будут неразличимы.

Разборчивый `word-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 # word-spacing-property |

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

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

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


word-break - CSS: каскадные таблицы стилей

word-break
==========

Свойство CSS **`word-break`** определяет, где будет установлен перевод на новую строку в случае превышения текстом границ блока.

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

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

```css
/\* Ключевые слова \*/
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /\* Устаревшее значение \*/

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

Свойство `word-break` определяется одним из описанных ниже ключевых слов.

### Значения

`normal`

Поведение по умолчанию для расстановки перевода строк.

`break-all`

При превышении границ блока, перевод строки будет вставлен между любыми двумя символами (за исключением текста на китайском/японском/корейском языке).

`keep-all`

Перевод строки не будет использован в тексте на китайском/японском/корейском языке. Для текста на других языках будет применено поведение по умолчанию (`normal`).

`break-word`
Non-standard

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

**Примечание:** В отличие от `word-break: break-word` и `overflow-wrap: break-word` (смотри `overflow-wrap`), `word-break: break-all` вставит перевод строки в том месте, где текст будет превышать занимаемый им блок (даже в том случае, когда текст можно перенести по словам).

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

word-break =
  normal      | (en-US)
  keep-all    | (en-US)
  break-all   | (en-US)
  break-word

```

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

### HTML

```html
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>4. <code>word-break: break-word</code></p>
<p class="breakWord narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>
```

### CSS

```css
.narrow {
  padding: 5px;
  border: 1px solid;
  display: table;
  max-width: 100%;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.breakWord {
  word-break: break-word;
}
```

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

| Specification |
| --- |
| CSS Text Module Level 3 # word-break-property |

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

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

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

See also
--------

* `overflow-wrap`


grid-template-rows - CSS: каскадные таблицы стилей

grid-template-rows
==================

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-rows`** определяет имена линий и размеры полос грид-рядов (en-US).

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

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

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

/\* Значения <track-list> \*/
grid-template-rows: 100px 1fr;
grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);
grid-template-rows: subgrid;
grid-template-rows: masonry;

/\* Значения <auto-track-list> \*/
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-rows:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-rows:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

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

Это свойство может быть задано следующими способами:

* Либо ключевым словом `none`;
* Либо значением `<track-list>`;
* Либо значением `<auto-track-list>`.
### Значения

`none`

Ключевое слово, означающее отсутствие явного грида. Это значит, что все ряды будут генерироваться автоматически (неявно), а их размер определяться свойством `grid-auto-rows` (en-US).

`[linename]`

Идентификатор (`<custom-ident>`) задаёт имя линии. Идентификатор может быть любой допустимой строкой, кроме зарезервированных слов `span` и `auto`. У линий может быть несколько имён, указанных через пробел внутри квадратных скобок, например `[line-name-a line-name-b]`.

`<length>`

Положительное значение типа length.

`<percentage>`

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

`<flex>`

Положительная величина с единицей измерения `fr`, определяющая коэффициент размера полосы. Каждая полоса, для которой размер указан в `<flex>`, занимает долю из свободного пространства пропорционально заданному коэффициенту. При использовании в `minmax()` подразумевается автоматический минимум (т.е. `minmax(auto, <flex>)`).

`max-content` (en-US)

Ключевое слово, представляющее наибольший максимальный размер содержимого грид-элементов в грид-полосе.

`min-content` (en-US)

Ключевое слово, представляющее наибольший минимальный размер содержимого грид-элементов в грид-полосе.

`minmax(min, max)`

Установка значения через функцию, определяющую диапазон размеров, больше или равный *min*, и меньше или равный *max*. Если *max* меньше *min*, то *max* игнорируется и используется *min*. В качестве *max* можно определить значение в единицах измерения типа `<flex>`, тогда устанавливается коэффициент размера полосы.

`auto`

Для каждого из рядов автоматически вычисляется размер на основе содержимого. Самый большой размер ряда соответствует `max-content` (en-US).

В качестве минимального значения берётся самый наименьший из размеров в элементах полосы (из свойства `min-width`/`min-height` элементов). Чаще всего (но не всегда) это будет размер, соответствующий `min-content` (en-US).

При использовании `auto` в `minmax()`, диапазон минимальных и максимальных значений вычисляется по описанному выше принципу. В большинстве случаев это то же самое, что написать `minmax(min-content,max-content)`.

**Примечание:** размеры полос, заданных `auto` (и только `auto`) могут быть увеличены свойствами `align-content` и `justify-content`. Поэтому по умолчанию полоса с размером `auto` будет занимать всё оставшееся пространство в грид-контейнере.

`fit-content( [ <length> | <percentage> ] )` (en-US)

Представляет формулу `min(max-content, max(auto, argument))`, которая рассчитывается так же, как и `auto` (т.е. `minmax(auto, max-content)`), за исключением того, что размер полосы ограничивается *argument*, если он больше минимального значения, вычисленного `auto`.

`repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )` (en-US)

Позволяет в краткой форме создать список рядов с определённым количеством и размером.

`masonry` (en-US)
Экспериментальная возможность

Значение masonry указывает на то, что эта ось должна быть проложена в соответствии с алгоритмом masonry.

`subgrid`

Значение `subgrid` указывает на то, что грид примет составную часть родительского грида по данной оси. Поскольку размеры рядов/колонок не указываются явно, они берутся из определения родительского грида.

**Предупреждение:** Значение `masonry` появилось в спецификации Grid третьего уровня и на данный момент реализовано в качестве эксперимента и доступно по флагу в Firefox.

Значение `subgrid` определено в спецификации Grid второго уровня и на данный момент реализовано только в Firefox с версии 71.

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

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | сеточные контейнеры |
| Наследуется | нет |
| Проценты | относятся к соответствующему размеру области содержимого |
| Обработка значения | как указано, но с относительной длиной, конвертируемой в абсолютные длины |
| Animation type | simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |

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

grid-template-rows =
  none                       | (en-US)
  <track-list>               | (en-US)
  <auto-track-list>          | (en-US)
  subgrid <line-name-list>? (en-US)

<track-list> =
  [ (en-US) <line-names>? (en-US) [ (en-US) <track-size> | (en-US) <track-repeat> ] (en-US) ] (en-US)+ (en-US) <line-names>? (en-US)

<auto-track-list> =
  [ (en-US) <line-names>? (en-US) [ (en-US) <fixed-size> | (en-US) <fixed-repeat> ] (en-US) ] (en-US)\* (en-US) <line-names>? (en-US) <auto-repeat> [ (en-US) <line-names>? (en-US) [ (en-US) <fixed-size> | (en-US) <fixed-repeat> ] (en-US) ] (en-US)\* (en-US) <line-names>? (en-US)

<line-name-list> =
  [ (en-US) <line-names> | (en-US) <name-repeat> ] (en-US)+ (en-US)

<line-names> =
  '[' <custom-ident>\* (en-US) ']'

<track-size> =
  <track-breadth>                                   | (en-US)
  minmax( <inflexible-breadth> , <track-breadth> )  | (en-US)
  fit-content( <length-percentage [0,∞]> )

<track-repeat> =
  repeat( [ (en-US) <integer [1,∞]> ] (en-US) , [ (en-US) <line-names>? (en-US) <track-size> ] (en-US)+ (en-US) <line-names>? (en-US) )

<fixed-size> =
  <fixed-breadth>                                   | (en-US)
  minmax( <fixed-breadth> , <track-breadth> )       | (en-US)
  minmax( <inflexible-breadth> , <fixed-breadth> )

<fixed-repeat> =
  repeat( [ (en-US) <integer [1,∞]> ] (en-US) , [ (en-US) <line-names>? (en-US) <fixed-size> ] (en-US)+ (en-US) <line-names>? (en-US) )

<auto-repeat> =
  repeat( [ (en-US) auto-fill | (en-US) auto-fit ] (en-US) , [ (en-US) <line-names>? (en-US) <fixed-size> ] (en-US)+ (en-US) <line-names>? (en-US) )

<name-repeat> =
  repeat( [ (en-US) <integer [1,∞]> | (en-US) auto-fill ] (en-US) , <line-names>+ (en-US) )

<track-breadth> =
  <length-percentage [0,∞]>  | (en-US)
  <flex [0,∞]>               | (en-US)
  min-content                | (en-US)
  max-content                | (en-US)
  auto

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

<length-percentage> =
  <length>      | (en-US)
  <percentage>

<fixed-breadth> =
  <length-percentage [0,∞]>

```

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

### Определение размеров рядов грида

#### HTML

```html
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  height: 100px;
  grid-template-rows: 30px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}
```

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

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # track-sizing |
| CSS Grid Layout Module Level 2 # subgrids |
| CSS Grid Layout Module Level 3 # masonry-layout |

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

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

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

* Связанные CSS-свойства: `grid-template-columns`, `grid-template-areas`, `grid-template`
* Руководство по грид-раскладке: *Основы грид-раскладки - грид-полосы*
* Обучающее видео: *Defining a Grid*
* Сабгрид


<display-listitem> - CSS: каскадные таблицы стилей

<display-listitem>
==================

Ключевое слово `list-item` приводит к тому, что элемент генерирует `::marker` псевдо-элемент с определяемыми `list-style` (en-US) свойствами (например, маркерной точкой) вместе с основным блоком указанного типа для его содержимого.

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

Единственное значение `list-item приведёт к тому, что элемент будет вести себя как элемент списка. Это можно использовать вместе с `list-style-type` (en-US) и `list-style-position` (en-US).`

**Примечание:** В браузерах, поддерживающих двухзначный синтаксис, если внутреннее значение не указано, по умолчанию оно будет `flow`. Если внешнее значение не указано, основной блок будет иметь внешний вид отображения (`outer display type`) block.`

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

### `HTML`

```html
<div class="fake-list">I will display as a list item</div>
```

### `CSS`

```css
.fake-list {
  display: list-item;
  list-style-position: inside;
}
```

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

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

### Поддержка list-item

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


visibility - CSS: каскадные таблицы стилей

visibility
==========

Свойство **`visibility`** скрывает или показывает элемент без изменения разметки документа. Также скрывает строки и столбцы `<table>` (en-US).

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

Чтобы скрыть и удалить элемент из разметки, установите свойству `display` значение `none`, вместо использования `visibility`.

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

```css
/\* Значения \*/
visibility: visible;
visibility: hidden;
visibility: collapse;

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

Свойство `visibility` указывается в качестве одного из значений ниже.

### Значения

`visible`

Значение по умолчанию, элемент виден.

`hidden`

Элемент не виден (полностью прозрачный, ничего не отображается), но продолжает влиять на шаблон. Потомки элемента могут быть показаны с помощью свойства `visibility:visible`. Элемент не может получить focus (например, при навигации с помощью tabindex).

`collapse`

\* Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью ``display`: none` применённого к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.

* Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться.
* Для других элементов `collapse` обрабатывается также, как `hidden`

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

visibility =
  visible   | (en-US)
  hidden    | (en-US)
  collapse

```

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

Значения видимости изменяются между *видим* и *не видим*. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений `visible`, интерполируется как дискретный шаг, где значения временной функции от `0` до `1` для `visible` и другие значения временной функции (которые происходят только в начале/конце перехода, или как результат функции `cubic-bezier()` со значениями вне [0, 1]) ближе к конечной точке.

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

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

#### HTML

```html
<p class="visible">Первый параграф виден.</p>
<p class="not-visible">Второй параграф не виден.</p>
<p class="visible">
  Третий параграф также виден. Заметь, второй параграф занимает место.
</p>
```

#### CSS

```css
.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}
```

### Пример с таблицей

#### HTML

```html
<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>
```

#### CSS

```css
.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}
```

Соображения доступности
-----------------------

Использование `visibility` со значением `hidden` на элементе удалит его из дерева доступности. Это приведёт к тому, что элемент и все его дочерние элементы больше не будут показаны в скринридерах.

Примечания
----------

* Поддержка `visibility:collapse` отсутствует или частично не работает в некоторых современных браузерах. Во многих случаях может не корректно работать `visibility:hidden` со столбцами и строками.
* `visibility:collapse` может изменить шаблон таблицы, если таблица содержит вложенные таблицы, пока `visibility:visible` не указан явно для вложенной таблицы.
Спецификация
------------

| Specification |
| --- |
| CSS Display Module Level 3 # visibility |

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

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

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


margin-top - CSS: каскадные таблицы стилей

margin-top
==========

Свойство **`margin-top`** CSS определяет внешний отступ в верхней части элемента. Положительное значение поместит элемент дальше от соседних элементов, чем обычно, а отрицательное значение поместит его ближе.

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

Это свойство не имеет эффекта на *незамещаемых (non-replaced)* строковых (inline) элементах, таких как `<span>` или `<code>`.

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

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

/\* Значения длины \*/
margin-top: 10px; /\* абсолютное значение \*/
margin-top: 1em; /\* относительно размера текста \*/
margin-top: 5%; /\* относительно ширины ближайшего контейнера \*/

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

Свойство `margin-top` может принимать значение `auto,` `<length>` или `<percentage>`. Эти значения могут быть положительные, отрицательные или равны нулю.

### Значения

`<length>`

Значение margin является фиксированной величиной

`<percentage>`

Значение margin выражается в процентах по отношению к *ширине* блока, содержащего элемент.

`auto`

Браузер выбирает подходящее значение для использования. Смотри `margin`.

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

margin-top =
  <length-percentage>  | (en-US)
  auto

<length-percentage> =
  <length>      | (en-US)
  <percentage>

```

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

```css
.content {
  margin-top: 5%;
}
.sidebox {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 1em;
}
```

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

|  |  |
| --- | --- |
| Начальное значение | `0` |
| Применяется к | все элементы, кроме элементов с табличным типом `display`, отличным от `table-caption`, `table` и `inline-table`. Это также применяется к `::first-letter`. |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, как указан, или абсолютная длина |
| Animation type | длина |

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

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


transform-style - CSS: каскадные таблицы стилей

transform-style
===============

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

Свойство `transform-style` CSS определяет положение дочернего элемента в 3D-пространстве или в той же плоскости, что и родительский элемент.

Если flat, то дочерний элемент не будет существовать в своём собственном 3D-пространстве.

Поскольку это свойство не наследуется, его следует устанавливать для всех не прямых потомков элемента.

|  |  |
| --- | --- |
| Начальное значение | `flat` |
| Применяется к | трансформируемые элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |
| Создаёт контекст наложения | да |

Syntax
------

```css
/\* Keyword values \*/
transform-style: preserve-3d;
transform-style: flat;

/\* Global values \*/
transform-style: inherit;
transform-style: initial;
transform-style: unset;
```

### Values

`preserve-3d`

Показывает, что дочерний элемент должен быть спозиционирован в 3D-пространстве.

`flat`

Показывает, что дочерний элемент лежит в той же плоскости, что и родительский.

### Formal syntax
```

transform-style =
  flat         | (en-US)
  preserve-3d

```

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-style-property |

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

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

See also
--------

* Using CSS Transforms (en-US)


<display-outside> - CSS: каскадные таблицы стилей

<display-outside>
=================

Ключевые слова `<display-outside>` определяют внешний тип отображения элемента (outer `display` type), который играет существенную роль в схеме потока. Эти ключевые слова используются как значения свойства `display` и могут быть использованы в целях преемственности как единственное ключевое слово или, как определено в рамках спецификации Level 3, наряду со значением из `<display-inside>` (en-US).

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

Значение `<display-outside>` определяется с использованием ключевого слова из списка ниже:

### Значения

`block`

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

`inline`

Элемент создаёт один или более строковых (inline) боксов элемента, которые не создают разрывов строк перед собой или после себя. В нормальном потоке следующий элемент будет находиться на той же линии, если есть пробел.

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

Элемент генерирует run-in бокс. Если соседний родственный (sibling) элемент определён как `display: run-in, тогда` бокс является блоковым боксом, `run-in` бокс становится первым строковым (inline) боксом блокового бокса, который следует за ним.

Run-in элементы ведут себя как строковые (inlines) или блоковые, в зависимости от окружающих элементов. Если run-in бокс содержит блоковый бокс, тогда он сам считается блоковым. Если блоковый бокс следует за run-in боксом, тогда run-in бокс становится первым строковым (inline) боксом блокового бокса. Если за ним следует строковый (inline) бокс, тогда run-in бокс становится блоковым боксом.

**Примечание:** Браузеры, поддерживающие двузначный синтаксис значений, при обнаружении только внешнего значения, например, при отображении `display: block` или `display: inline`, установят внутреннее значение как `flow`. Это приведёт к ожидаемому поведению; например, если вы укажете элемент, который будет блоком, вы ожидаете, что его дочерние элементы будут участвовать в блочной и строковой разметке нормального потока.

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

В следующем примере элементы span (обычно отображаемые как строковые элементы) устанавливаются в `display: block` и поэтому разбиваются на новые строки и расширяются, чтобы заполнить их контейнер в строковом измерении.

### HTML

```html
<span>span 1</span> <span>span 2</span>
```

### CSS

```css
span {
  display: block;
  border: 1px solid rebeccapurple;
}
```

### Result

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

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

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

* `display`
* `<display-inside>` (en-US)
* Block and Inline layout in Normal Flow (en-US)
* Formatting Contexts explained (en-US)


Специфичность - CSS: каскадные таблицы стилей

Специфичность
=============

Определение
-----------

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

Как вычисляется специфичность?
------------------------------

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

**Примечание:** Примечание: Взаимное расположение элементов в дереве документа не влияет на специфичность.

### Типы селекторов

В следующем списке типы селекторов расположены по возрастанию специфичности:

1. селекторы типов элементов (например, `h1`) и псевдоэлементов (например, `::before`).
2. селекторы классов (например, `.example`), селекторы атрибутов (например, `[type="radio"]`) и псевдоклассов (например, `:hover`).
3. селекторы идентификаторов (например, `#example`).

Универсальный селектор (`*`), комбинаторы (`+`, `>`, `~`, '``') и отрицающий псевдокласс (`:not()`) не влияют на специфичность. (Однако селекторы, объявленные *внутри* `:not()`, влияют)

Стили, объявленные в элементе (например, `style="font-weight:bold"`), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

### Важное исключение из правил - `!important`

Когда при объявлении стиля используется модификатор `!important`, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор `!important` не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку `!important` усложняет отладку, нарушая естественное каскадирование (en-US) ваших стилей, он **не приветствуется** и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором `!important`, то применён будет стиль с большей специфичностью.

**Несколько практических советов:**

* **Всегда пытайтесь использовать** специфичность, а `!important` используйте только в крайних случаях
* **Используйте** `!important` **только** в страничных стилях, которые переопределяют стили сайта или внешние стили (стили библиотек, таких как Bootstrap или normalize.css)
* **Никогда не используйте** `!important`, если вы пишете плагин или мэшап.
* **Никогда не используйте** `!important` в общем CSS сайта.

**Вместо `!important` можно:**

1. Лучше использовать каскадные свойства CSS
2. Использовать более специфичные правила. Чтобы сделать правило более специфичным и повысить его приоритет, укажите один элемент или несколько перед нужным вам элементом:

```html
<div id="test">
  <span>Text</span>
</div>
```

```css
div#test span {
  color: green;
}
div span {
  color: blue;
}
span {
  color: red;
}
```

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

**Вам придётся использовать `!important` если:**

А) Первый сценарий:

1. У вас есть общий файл стилей, устанавливающий правила для внешнего вида сайта.
2. Вы пользуетесь (или кто-то другой пользуется) весьма сомнительным средством - объявлением стилей непосредственно в элементах

В таком случае вам придётся объявить некоторые стили в вашем общем файле CSS как `!important`, переопределяя, таким образом, стили, установленные в самих элементах.

Пример из практики: Некоторые плохо написанные **плагины jQuery**, использующие присваивание стилей самим элементам.

Б) Ещё сценарий:

```css
#someElement p {
  color: blue;
}

p.awesome {
  color: red;
}
```

Как сделать цвет текста в абзацах `awesome` красным всегда, даже если они расположены внутри `#someElement`? Без `!important` у первого правила специфичность больше и оно имеет преимущество перед вторым.

**Как преодолеть !important:**

A) Просто добавьте ещё одно правило с модификатором `!important`, у которого селектор имеет большую специфичность (благодаря добавлению типа элемента (тэга), идентификатора (атрибута id) или класса к селектору).

Пример большей специфичности:

```css
table td {
  height: 50px !important;
}
.myTable td {
  height: 50px !important;
}
#myTable td {
  height: 50px !important;
}
```

Б) Или добавьте правило с модификатором `!important` и таким же селектором, но расположенное в файле после существующего (при прочих равных выигрывает последнее объявленное правило):

```css
td {
  height: 50px !important;
}
```

В) Или перепишите первоначальное правило без использования `!important`.

**С более подробной информацией можно ознакомиться по следующим ссылкам:**

Когда надо использовать `!important` в CSS?

Что означает `!important` в CSS?

Когда в CSS надо использовать модификатор `!important`

Как преодолеть `!important`

Как использовать модификатор `!important` в CSS чтобы сэкономить время

### Не исключение - `:not()`

Отрицающий псевдокласс `:not` *не учитывается* как псевдокласс при расчёте специфичности. Однако селекторы, расположенные внутри `:not`, при подсчёте количества по типам селекторов рассматриваются как обычные селекторы и учитываются.

Следующий фрагмент CSS ...

```css
div.outer p {
  color: orange;
}
div:not(.outer) p {
  color: lime;
}
```

... применённый к такому HTML ...

```html
<div class="outer">
  <p>Это div.outer</p>
  <div class="inner">
    <p>Это текст в div.inner</p>
  </div>
</div>
```

... отобразится на экране так:

Это div.outer

Это текст в div.inner

### Специфичность основана на форме

Специфичность опирается на форму селектора. В следующем примере, при определении специфичности селектора, селектор `*[id="foo"]` считается селектором атрибута, даже при том, что ищет идентификатор.

Эти объявления стилей ...

```css
\*#foo {
  color: green;
}
\*[id="foo"] {
  color: purple;
}
```

... применённые к нижеследующей разметке ...

```html
<p id="foo">Это пример.</p>
```

... в результате выглядят так:

Это пример.

Потому что оба правила соответствуют одному и тому же элементу, но селектор идентификатора имеет большую специфичность.

### Независимость от расположения

Взаимное расположение элементов, указанных в селекторе не влияет на специфичность правила. Следующие объявления стилей ...

```css
body h1 {
  color: green;
}
html h1 {
  color: purple;
}
```

... в сочетании со следующим HTML ...

```html
<html>
  <body>
    <h1>Вот заголовок!</h1>
  </body>
</html>
```

... отобразится как:

Вот заголовок!

Потому что, хотя оба объявления имеют одинаковое количество типов селекторов, но селектор `html h1` объявлен последним.

### Непосредственно соответствующие элементы и унаследованные стили

Стили непосредственно соответствующих элементов всегда предпочитаются унаследованным стилям, независимо от специфичности унаследованного правила. Этот CSS ...

```css
#parent {
  color: green;
}
h1 {
  color: purple;
}
```

... с таким HTML ...

```html
<html>
  <body id="parent">
    <h1>Вот заголовок!</h1>
  </body>
</html>
```

... тоже отобразится как:

Вот заголовок!

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

Дополнительная информация
-------------------------

* Калькулятор специфичности: Интерактивный сайт, помогающий вам проверить и понять ваши собственные правила CSS - https://specificity.keegan.st/
* Специфичность селекторов в CSS3 - http://www.w3.org/TR/selectors/#specificity
* Ключевые концепции CSS
    + Синтаксис CSS
    + @-правила
    + комментарии
    + специфичность
    + наследование
    + блочная модель
    + режимы компоновки
    + модели визуального форматирования
    + Схлопывание отступов
    + Значения
        - начальные
        - вычисленные
        - используемые
        - действительные
    + Синтаксис определения значений (en-US)
    + Сокращённые свойства
    + Замещаемые элементы


backface-visibility - CSS: каскадные таблицы стилей

backface-visibility
===================

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

Свойство **`backface-visibility`** определяет, видно ли заднюю грань элемента, когда он повёрнут к пользователю.

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

Задняя поверхность элемента является зеркальным отражением его передней поверхности. Однако невидимая в 2D, задняя грань может быть видимой, когда преобразование вызывает вращение элемента в 3D пространстве. (Это свойство не влияет на 2D-преобразования, которые не имеют перспективы.)

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

```css
/\* Ключевые слова \*/
backface-visibility: visible;
backface-visibility: hidden;

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

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

### Значения

`visible`

Задняя сторона видна, когда повёрнута к пользователю.

`hidden`

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

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

backface-visibility =
  visible  | (en-US)
  hidden

```

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

В этом примере показан куб с прозрачными гранями.

### HTML

```html
<table>
  <tr>
    <th><code>backface-visibility: visible;</code></th>
    <th><code>backface-visibility: hidden;</code></th>
  </tr>
  <tr>
    <td>
      <div class="container">
        <div class="cube showbf">
          <div class="face front">1</div>
          <div class="face back">2</div>
          <div class="face right">3</div>
          <div class="face left">4</div>
          <div class="face top">5</div>
          <div class="face bottom">6</div>
        </div>
      </div>
      <p>
        Since all faces are partially transparent, the back faces (2, 4, 5) are
        visible through the front faces (1, 3, 6).
      </p>
    </td>
    <td>
      <div class="container">
        <div class="cube hidebf">
          <div class="face front">1</div>
          <div class="face back">2</div>
          <div class="face right">3</div>
          <div class="face left">4</div>
          <div class="face top">5</div>
          <div class="face bottom">6</div>
        </div>
      </div>
      <p>The three back faces (2, 4, 5) are hidden.</p>
    </td>
  </tr>
</table>
```

### CSS

```css
/\* Классы, которые будут показывать или скрывать
 три задние грани "куба" \*/
.showbf div {
  backface-visibility: visible;
}

.hidebf div {
  backface-visibility: hidden;
}

/\* Определяет контейнер div, кубический div и общую грань \*/
.container {
  width: 150px;
  height: 150px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  perspective: 550px;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/\* Определяет каждое лицо на основе направления \*/
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

/\* Сделает стол немного лучше \*/
th,
p,
td {
  background-color: #eeeeee;
  margin: 0px;
  padding: 6px;
  font-family: sans-serif;
  text-align: left;
}
```

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

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # backface-visibility-property |

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

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

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

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

* Использование CSS преобразований (en-US)


CSS Grid Layout - CSS: каскадные таблицы стилей

CSS Grid Layout
===============

**CSS Grid Layout** отлично подходит для того, чтобы разделить страницу на основные области или определить взаимосвязь размера, позиционирования и уровня между частями контента, состоящего из HTML примитивов.

Как и таблицы (<table>), grid layout позволяет выравнивать элементы в столбцы и строки. Тем не менее, с помощью CSS grid работать с элементами гораздо проще, чем с таблицами. Например, дочерние элементы grid-контейнера могут наслаиваться друг на друга как и другие элементы при помощи CSS.

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

В приведённом ниже примере показана сетка состоящая из трёх колонок, в которой минимальная ширина элементов строки установлена в "100px", а максимальная в "auto". Grid-элементы располагаются в сетке линейно.
```

\* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid rgb(233, 171, 88);
  border-radius: 5px;
  background-color: rgba(233, 171, 88, 0.5);
  padding: 1em;
  color: #d9480f;
}
```

### HTML

```html
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>
```

### CSS

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
```

Ссылки
------

### CSS-свойства

* `grid-template-columns`
* `grid-template-rows`
* `grid-template-areas`
* `grid-template`
* `grid-auto-columns` (en-US)
* `grid-auto-rows` (en-US)
* `grid-auto-flow`
* `grid`
* `grid-row-start`
* `grid-column-start` (en-US)
* `grid-row-end` (en-US)
* `grid-column-end` (en-US)
* `grid-row` (en-US)
* `grid-column`
* `grid-area`
* `grid-row-gap` (en-US)
* `grid-column-gap` (en-US)
* `grid-gap` (en-US)
### CSS функции

* `repeat()` (en-US)
* `minmax()`
* `fit-content()` (en-US)
### Глоссарий

* Grid
* Grid Lines (en-US)
* Grid Tracks (en-US)
* Grid Cell (en-US)
* Grid Area (en-US)
* Gutters (en-US)
* Grid Axis (en-US)
* Grid row (en-US)
* Grid column
Руководства
-----------

* Базовая концепция Grid Layout
* Связь Grid Layout с другими методами компоновки
* Расположение элементов по грид-линиям с помощью CSS Grid
* Шаблон области сетки
* Использование именованных линий
* Авторазмещение в CSS Grid Layout (en-US)
* Выравнивание блока в CSS Grid Layout
* CSS Сетка, логические Значения и Режимы Редактирования
* CSS Grid Layout и доступность (en-US)
* CSS Grid and progressive enhancement (en-US)
* Реализация общих макетов используя CSS Grid (en-US)
* Subgrid
* Masonry Layout (en-US)
Экспериментальная возможность
Внешние ресурсы
---------------

* Примеры от Jen Simmons
* Grid by Example - Коллекция примеров использования и видео уроки
* Codrops Grid Reference
* Firefox DevTools CSS Grid Inspector (en-US)
Спецификации
------------

| Specification |
| --- |
| CSS Grid Layout Module Level 2  |


:invalid - CSS: каскадные таблицы стилей

:invalid
========

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

CSS псевдокласс `:invalid` находит любые `<input>` или `<form>` элементы, контент которых не проходит валидацию (en-US), в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что позволяет пользователю видеть и исправлять ошибки.

По умолчанию, Gecko не применяет стили к псевдоклассу `:invalid`. Однако, применяет стили (красное "свечение", используя свойство `box-shadow`) к псевдоклассу `:-moz-ui-invalid` (en-US), который применяется в подгруппе случаев для `:invalid`.

Вы можете отключить свечение, используя следующий CSS или полностью изменить внешний вид некорректных полей.

```css
:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}
```

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

#### Радиокнопки

Если любая из радиокнопок в группе (т.е., с одинаковым атрибутом `name`) имеет атрибут `required`, псевдокласс `:invalid` применяется ко всем из них, если ни одна из кнопок группы не выбрана.

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

Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.

### HTML

```html
<form>
  <label>Введите URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Введите эл. почту:</label>
  <input type="email" required />
</form>
```

### CSS

```css
input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-invalid |
| Selectors Level 4 # validity-pseudos |

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

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

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

* Прочие псевдоклассы для валидации: `:required`, `:optional`, `:valid`
* Псевдоклассы Mozilla: `:user-invalid` (en-US), `:-moz-submit-invalid` (en-US)
* Валидация форм
* Получение состояния валидации средствами JavaScript