Краткая форма записи свойств - CSS: каскадные таблицы стилей

Краткая форма записи свойств
============================

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

The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS `background` property is a shorthand property that's able to define the values of `background-color`, `background-image`, `background-repeat`, and `background-position`. Similarly, the most common font-related properties can be defined using the shorthand `font`, and the different margins around a box can be defined using the `margin` shorthand.

Tricky edge cases
-----------------

Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:

1. A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it **overrides** previously set values. Therefore:

```css
background-color: red;
background: url(images/bg.gif) no-repeat left top;
```

will not set the color of the background to `red` but to `background-color`'s default, `transparent`, as the second rule has precedence.
2. Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword `inherit` can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword `inherit`.
3. Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories:
    1. Shorthands handling properties related to edges of a box, like `border-style` (en-US), `margin` or `padding`, always use a consistent 1-to-4-value syntax representing those edges:

    | border1.png | *The 1-value syntax*: `border-width: 1em` — The unique value represents all edges |
    | --- | --- |
    | border2.png | *The 2-value syntax*: `border-width: 1em 2em` — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones. |
    | border3.png | *The 3-value syntax*: `border-width: 1em 2em 3em` — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge |
    | border4.png | *The 4-value syntax*: `border-width: 1em 2em 3em 4em` — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word *trouble*: TRBL) |
    2. Similarly, shorthands handling properties related to corners of a box, like `border-radius`, always use a consistent 1-to-4-value syntax representing those corners:

    | corner1.png | *The 1-value syntax*: `border-radius: 1em` — The unique value represents all corners |
    | --- | --- |
    | corner2.png | *The 2-value syntax*: `border-radius: 1em 2em` — The first value represents the top left and bottom right corner, the second the top right and bottom left ones. |
    | corner3.png | *The 3-value syntax*: `border-radius: 1em 2em 3em` — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner |
    | corner4.png | *The 4-value syntax*: `border-radius: 1em 2em 3em 4em` — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left. |
Background properties
---------------------

A background with the following properties ...

```css
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
```

... can be shortened to just one declaration:

```css
background: #000 url(images/bg.gif) no-repeat left top;
```

(The shorthand form is actually the equivalent of the longhand properties above plus `background-attachment: scroll` and, in CSS3, some additional properties.)

Font properties
---------------

The following declarations ...

```css
font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;
```

... can be shortened to the following:

```css
font:
  italic bold 0.8em/1.2 Arial,
  sans-serif;
```

This shorthand declaration is actually equivalent to the longhand declarations above plus `font-variant: normal` and `font-size-adjust: none` (CSS2.0 / CSS3), `font-stretch: normal` (CSS3).

Border properties
-----------------

With borders, the width, color, and style can be simplified into one declaration. For example, the following CSS ...

```css
border-width: 1px;
border-style: solid;
border-color: #000;
```

... can be simplified as:

```css
border: 1px solid #000;
```

Margin and padding properties
-----------------------------

Shorthand versions of margin and padding values work the same way. The following CSS declarations ...

```css
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
```

... are the same as the following declaration. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in "trouble").

```css
margin: 10px 5px 10px 5px;
```

See also
--------

* Ключевые концепции CSS
    + Синтаксис CSS
    + @-правила
    + комментарии
    + специфичность
    + наследование
    + блочная модель
    + режимы компоновки
    + модели визуального форматирования
    + Схлопывание отступов
    + Значения
        - начальные
        - вычисленные
        - используемые
        - действительные
    + Синтаксис определения значений (en-US)
    + Сокращённые свойства
    + Замещаемые элементы
* Shorthand properties: `animation`, `background`, `border`, `border-bottom`, `border-color` (en-US), `border-left` (en-US), `border-radius`, `border-right` (en-US), `border-style` (en-US), `border-top` (en-US), `border-width`, `column-rule`, `columns` (en-US), `flex`, `flex-flow`, `font`, `grid`, `grid-area`, `grid-column`, `grid-row` (en-US), `grid-template`, `list-style` (en-US), `margin`, `offset` (en-US), `outline`, `overflow`, `padding`, `place-content` (en-US), `place-items`, `place-self` (en-US), `text-decoration` (en-US), `transition`


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

Псевдоклассы
============

**Псевдокласс** в CSS — *это ключевое слово, добавленное к селектору,* которое определяет его особое состояние. Например, `:hover` может быть использован для изменения цвета кнопки при наведении курсора на неё.

```css
div:hover {
  background-color: #f89b4d;
}
```

Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, `:visited`), состояние содержимого (вроде `:checked` у некоторых элементов формы) или позиции курсора мыши (например, `:hover` определяет, находится ли курсор мыши над элементом).

**Примечание:** В отличие от псевдоклассов, псевдоэлементы могут быть использованы для стилизации *определённой части* элемента.

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

selector:pseudo-class {
  property: value;
}
```

Как и с обычными классами, можно совмещать вместе в одном селекторе любое число псевдоклассов.

Список стандартных псевдоклассов
--------------------------------

* `:active`
* `:any` (en-US)
* `:any-link`
* `:checked`
* `:default`
* `:defined`
* `:dir()`
* `:disabled`
* `:empty`
* `:enabled`
* `:first`
* `:first-child`
* `:first-of-type`
* `:fullscreen`
* `:focus`
* `:hover`
* `:indeterminate`
* `:in-range`
* `:invalid`
* `:lang()`
* `:last-child`
* `:last-of-type`
* `:left`
* `:link`
* `:not()`
* `:nth-child()`
* `:nth-last-child()`
* `:nth-last-of-type()`
* `:nth-of-type()`
* `:only-child`
* `:only-of-type`
* `:optional`
* `:out-of-range`
* `:read-only`
* `:read-write`
* `:required`
* `:right`
* `:root`
* `:scope` (en-US)
* `:target`
* `:valid`
* `:visited`
Спецификации
------------

| Specification |
| --- |
| HTML Standard # pseudo-classes |
| Selectors Level 4  |
| CSS Basic User Interface Module Level 4  |

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

* Псевдоэлементы


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

CSS Basic User Interface
========================

**CSS Basic User Interface** is a CSS module that lets you define the rendering and functionality of features related to the user interface.

Reference
---------

### Properties

* `appearance`
Экспериментальная возможность
* `box-sizing`
* `cursor`
* `ime-mode`
Устарело
* `nav-down`
Экспериментальная возможность
* `nav-left`
Экспериментальная возможность
* `nav-right`
Экспериментальная возможность
* `nav-up`
Экспериментальная возможность
* `outline`
* `outline-width`
* `outline-style`
* `outline-color`
* `outline-offset`
* `resize` (en-US)
* `text-overflow` (en-US)
* `user-select`
Экспериментальная возможность
Guides
------

Using URL values for the `cursor` property

Explains how a URL can be used with the `cursor` property to produce custom cursors.

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4  |


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

:host()
=======

CSS функция-псевдокласс **`:host()`** выбирает shadow хоста (носителя) shadow DOM (en-US)-a, который содержит CSS, используемый внутри (так что вы можете выбрать пользовательский элемент изнутри его shadow DOM) — но только если селектор, переданный как параметр функции, соответствует shadow хосту.

Самый очевидный способ использовать его — поставить некоторый класс только на определённые экземпляры пользовательских элементов, а затем передать соответствующий классовый селектор как аргумент функции. Вы не можете использовать псевдокласс c селектором наследника, чтобы выбрать только экземпляры пользовательского элемента, которые находятся внутри определённого предка. Это работа `:host-context()`.

**Примечание:** Псевдокласс не имеет эффекта вне shadow DOM.

```css
/\* Выбирает хоста shadow root, только
 если он соответствует аргументу селектора \*/
:host(.special-custom-element) {
  font-weight: bold;
}
```

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

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

### Селективная стилизация shadow хостов

Следующие ниже фрагменты взяты из нашего примера host-selectors (также смотрите вживую).

В этом примере у нас есть простой пользовательский элемент — `<context-span>` — который мы оборачиваем вокруг текста:

```html
<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>
```

Внутри конструктора элемента мы создаём элементы `style` и `span`, заполняем `span` контентом пользовательского элемента и заполняем элемент `style` CSS-правилами:

```js
let style = document.createElement("style");
let span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";
```

Правило `:host(.footer) { color : red; }` стилизует все экземпляры элемента `<context-span>` (shadow хост в данном случае) в документе, которые имеют класс `footer` — мы использовали его, чтобы дать экземплярам элемента внутри `<footer>` особый цвет.

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

| Specification |
| --- |
| CSS Scoping Module Level 1 # host-selector |

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

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

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

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


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

font
====

CSS-свойство **`font`** является сокращением для `font-style`, `font-variant` (en-US), `font-weight`, `font-stretch` (en-US), `font-size`, `line-height`, и `font-family`. Кроме того, он позволяет установить системный шрифт для элементов интерфейса.

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

Как и с любым сокращённым свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращённых свойств). Свойства `font-size-Adjust` (en-US) и `font-kerning` (en-US) хоть и не могут быть напрямую установлены с помощью `font`, но они также сбрасываются к своим начальным значениям.

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

The `font` property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.

If `font` is specified as a system keyword, it must be one of: `caption`, `icon`, `menu`, `message-box`, `small-caption`, `status-bar`.

If `font` is specified as a shorthand for several font-related properties, then:

* it must include values for:
    + `<font-size>`
    + `<font-family>`
* it may optionally include values for:
    + `<font-style>`
    + `<font-variant>` (en-US)
    + `<font-weight>`
    + `<font-stretch>` (en-US)
    + `<line-height>`
* `font-style`, `font-variant` and `font-weight` must precede `font-size`
* `font-variant` may only specify the values defined in CSS 2.1, that is `normal` and `small-caps`
* `font-stretch` may only be a single keyword value.
* `line-height` must immediately follow `font-size`, preceded by "/", like this: "`16px/3`"
* `font-family` must be the last value specified.
### Значения

`<'font-style'>`

See the `font-style` CSS property.

`<'font-variant'>`

See the `font-variant` (en-US) CSS property.

`<'font-weight'>`

See the `font-weight` CSS property.

`<'font-stretch'>`

See the `font-stretch` (en-US) CSS property.

`<'font-size'>`

See the `font-size` CSS property.

`<'line-height'>`

See the `line-height` CSS property.

`<'font-family'>`

See the `font-family` CSS property.

#### System font values

`caption`

The system font used for captioned controls (e.g., buttons, drop-downs, etc.).

`icon`

The system font used to label icons.

`menu`

The system font used in menus (e.g., dropdown menus and menu lists).

`message-box`

The system font used in dialog boxes.

`small-caption`

The system font used for labeling small controls.

`status-bar`

The system font used in window status bars.

Prefixed system font keywords

Browsers often implement several more, prefixed, keywords: Gecko implements `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list`, and `-moz-field`.

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

font =
  [ (en-US) [ (en-US) <'font-style'> || (en-US) <font-variant-css2> || (en-US) <'font-weight'> || (en-US) <font-stretch-css3> ] (en-US)? (en-US) <'font-size'> [ (en-US) / <'line-height'> ] (en-US)? (en-US) <'font-family'> ] (en-US)  | (en-US)
  <system-family-name>

<font-variant-css2> =
  normal      | (en-US)
  small-caps

<font-stretch-css3> =
  normal           | (en-US)
  ultra-condensed  | (en-US)
  extra-condensed  | (en-US)
  condensed        | (en-US)
  semi-condensed   | (en-US)
  semi-expanded    | (en-US)
  expanded         | (en-US)
  extra-expanded   | (en-US)
  ultra-expanded

<system-family-name> =
  caption        | (en-US)
  icon           | (en-US)
  menu           | (en-US)
  message-box    | (en-US)
  small-caption  | (en-US)
  status-bar

```

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

```css
/\* Set the font size to 12px and the line height to 14px.
 Set the font family to sans-serif \*/
p {
  font: 12px/14px sans-serif;
}

/\* Set the font size to 80% of the parent element
 or default value (if no parent element present).
 Set the font family to sans-serif \*/
p {
  font: 80% sans-serif;
}

/\* Set the font weight to bold,
 the font-style to italic,
 the font size to large,
 and the font family to serif. \*/
p {
  font: bold italic large serif;
}

/\* Use the same font as the status bar of the window \*/
p {
  font: status-bar;
}
```

### Live sample
```

<p>
  Change the radio buttons below to see the generated shorthand and it's effect.
</p>
<form action="createShortHand()">
  <div class="cf">
    <div class="setPropCont">
      font-style<br />
      <input
 type="radio"
 id="font-style-none"
 name="font\_style"
 checked=""
 value=""
 onchange="setCss()" />
      <label for="font-style-none">none</label><br />
      <input
 type="radio"
 id="font-style-normal"
 name="font\_style"
 value="normal"
 onchange="setCss()" />
      <label for="font-style-normal">normal</label><br />
      <input
 type="radio"
 id="font-style-italic"
 name="font\_style"
 value="italic"
 onchange="setCss()" />
      <label for="font-style-italic">italic</label><br />
      <input
 type="radio"
 id="font-style-oblique"
 name="font\_style"
 value="oblique"
 onchange="setCss()" />
      <label for="font-style-oblique">oblique</label>
    </div>

    <div class="setPropCont">
      font-variant<br />
      <input
 type="radio"
 id="font-variant-none"
 name="font\_variant"
 checked=""
 value=" "
 onchange="setCss()" />
      <label for="font-variant-none">none</label><br />
      <input
 type="radio"
 id="font-variant-normal"
 name="font\_variant"
 value="normal"
 onchange="setCss()" />
      <label for="font-variant-normal">normal</label><br />
      <input
 type="radio"
 id="font-variant-small-caps"
 name="font\_variant"
 value="small-caps"
 onchange="setCss()" />
      <label for="font-variant-small-caps">small-caps</label>
    </div>

    <div class="setPropCont">
      font-weight<br />
      <input
 type="radio"
 id="font-weight-none"
 name="font\_weight"
 value=""
 onchange="setCss()" />
      <label for="font-weight-none">none</label><br />
      <input
 type="radio"
 id="font-weight-normal"
 checked=""
 name="font\_weight"
 value="400"
 onchange="setCss()" />
      <label for="font-weight-normal">normal</label><br />
      <input
 type="radio"
 id="font-weight-bold"
 name="font\_weight"
 value="700"
 onchange="setCss()" />
      <label for="font-weight-bold">bold</label>
    </div>

    <div class="setPropCont">
      font-size<br />
      <input
 type="radio"
 id="font-size-12px"
 name="font\_size"
 value="12px"
 onchange="setCss()" />
      <label for="font-size-12px">12px</label><br />
      <input
 type="radio"
 id="font-size-16px"
 name="font\_size"
 value="16px"
 checked=""
 onchange="setCss()" />
      <label for="font-size-16px">16px</label><br />
      <input
 type="radio"
 id="font-size-24px"
 name="font\_size"
 value="24px"
 onchange="setCss()" />
      <label for="font-size-24px">24px</label>
    </div>

    <div class="setPropCont">
      line-height<br />
      <input
 type="radio"
 id="line-height-none"
 name="line\_height"
 checked=""
 value=""
 onchange="setCss()" />
      <label for="line-height-none">none</label><br />
      <input
 type="radio"
 id="line-height-1.2"
 name="line\_height"
 value="/1.2"
 onchange="setCss()" />
      <label for="line-height-1.2">1.2</label><br />
      <input
 type="radio"
 id="line-height-3"
 name="line\_height"
 value="/3"
 onchange="setCss()" />
      <label for="line-height-3">3</label>
    </div>
    <br />

    <div class="setPropCont fontfamily">
      font-family<br />
      <input
 type="radio"
 id="font-family-courier"
 name="font\_family"
 checked=""
 value="courier"
 onchange="setCss(5,'courier')" />
      <label for="font-family-courier">courier</label><br />
      <input
 type="radio"
 id="font-family-serif"
 name="font\_family"
 value="serif"
 onchange="setCss()" />
      <label for="font-family-serif">serif</label><br />
      <input
 type="radio"
 id="font-family-sans-serif"
 name="font\_family"
 value="sans-serif"
 onchange="setCss()" />
      <label for="font-family-sans-serif">sans-serif</label><br />
      <input
 type="radio"
 id="font-family-arial"
 name="font\_family"
 value="arial"
 onchange="setCss()" />
      <label for="font-family-arial">Arial</label><br />
      <input
 type="radio"
 id="font-family-monospace"
 name="font\_family"
 value="monospace"
 onchange="setCss()" />
      <label for="font-family-monospace">monospace</label><br />
      <input
 type="radio"
 id="font-family-cursive"
 name="font\_family"
 value="cursive"
 onchange="setCss()" />
      <label for="font-family-cursive">cursive</label><br />
      <input
 type="radio"
 id="font-family-fantasy"
 name="font\_family"
 value="fantasy"
 onchange="setCss()" />
      <label for="font-family-fantasy">fantasy</label><br />
      <input
 type="radio"
 id="font-family-system-ui"
 name="font\_family"
 value="system-ui"
 onchange="setCss()" />
      <label for="font-family-system-ui">system-ui</label><br />
    </div>
  </div>

  <div class="cf propInputs">
    <div class="propInputCont tar">font :</div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_style" /><br />
      font-style <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_variant" /> <br />
      font-variant <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_weight" /> <br />
      font-weight <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input\_font\_size" /> <br />
      font-size <br />
      mandatory
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_line\_height" /> <br />
      line-height <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input\_font\_family" />
      <br />
      font-family <br />
      mandatory
    </div>
  </div>
</form>

<div class="fontShortHand">This is some sample text.</div>
<br /><br /><br /><br /><br /><br />
```

```
body,
input {
  font: 14px arial;
  overflow: hidden;
}

.propInputCont {
  float: left;
  text-align: center;
  margin-right: 5px;
  width: 80px;
}

.setPropCont {
  float: left;
  margin-right: 5px;
  width: 120px;
}

.propInputs,
.setPropCont {
  margin-bottom: 1em;
}

.curCss {
  border: none;
  border-bottom: 1px solid black;
  text-align: center;
  width: 80px;
}

.mandatory {
  border-bottom-color: red;
}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.tar {
  width: 40px;
  text-align: right;
}
.fontfamily {
  display: inline-block;
}
```

```
var textAreas = document.getElementsByClassName("curCss"),
  shortText = "",
  getCheckedValue,
  setCss,
  getProperties,
  injectCss;

getProperties = function () {
  shortText =
    getCheckedValue("font\_style") +
    " " +
    getCheckedValue("font\_variant") +
    " " +
    getCheckedValue("font\_weight") +
    " " +
    getCheckedValue("font\_size") +
    getCheckedValue("line\_height") +
    " " +
    getCheckedValue("font\_family");

  return shortText;
};

getCheckedValue = function (radio\_name) {
  oRadio = document.forms[0].elements[radio_name];
  for (var i = 0; i < oRadio.length; i++) {
    if (oRadio[i].checked) {
      var propInput = "input\_" + radio_name,
        curElemName = "input\_" + radio_name,
        curElem = document.getElementById(curElemName);
      curElem.value = oRadio[i].value;

      return oRadio[i].value;
    }
  }
};

setCss = function () {
  getProperties();
  injectCss(shortText);
};

injectCss = function (cssFragment) {
  old = document.body.getElementsByTagName("style");
  if (old.length > 1) {
    old[1].parentElement.removeChild(old[1]);
  }
  css = document.createElement("style");
  css.innerHTML = ".fontShortHand{font: " + cssFragment + "}";
  document.body.appendChild(css);
};

setCss();
```

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

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

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `font-style`: `normal`
* `font-variant` (en-US): `normal`
* `font-weight`: `normal`
* `font-stretch` (en-US): `normal`
* `font-size`: `medium`
* `line-height`: `normal`
* `font-family`: зависит от браузера
 |
| Применяется к | all elements and text. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | да |
| Проценты | как и у каждого из подсвойств этого свойства:* `font-size`: относятся к размеру шрифта родителя
* `line-height`: относятся к размеру шрифта самого элемента
 |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `font-style`: как указано
* `font-variant` (en-US): как указано
* `font-weight`: ключевое слово или числовое значение, с `bolder` и `lighter`, трансформируемися в действительное значение
* `font-stretch` (en-US): как указано
* `font-size`: как указано, но с относительной длиной, конвертируемой в абсолютные длины
* `line-height`: для процентов и значений длин, абсолютной длины, если другое не указано
* `font-family`: как указано
 |
| Animation type | как и у каждого из подсвойств этого свойства:* `font-style`: by computed value type; `normal` animates as `oblique 0deg`
* `font-variant` (en-US): discrete
* `font-weight`: жирность шрифта
* `font-stretch` (en-US): ширина начертания шрифта (en-US)
* `font-size`: длина
* `line-height`: число или длина
* `font-family`: discrete
 |

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

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


Вычисленное значение - CSS: каскадные таблицы стилей

Вычисленное значение
====================

**Вычисленное значение** CSS-свойства вычисляется из указанного значения посредством:

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

Вычисления необходимые для получения **вычисленного значения** для свойства обычно включают в себя преобразование относительных значений (например, находящиеся в единицах `em` или в процентах) в абсолютные значения.

Например, если у элемента указаны значения `font-size: 16px` и `padding-top: 2em`, то вычисленное значение `padding-top` будет `32px` (двойной размер шрифта).

Однако, для некоторых свойств *(таких, где проценты относительны к чему-то, что может потребовать лэйаут определять(переопределить) границы, например, `width`, `margin-right`, `text-indent` и `top`)*, процентно указанные значения преобразуются в процентно вычисляемые значения. Кроме того, безразмерные числа, указанные в свойстве `line-height` становятся вычисленными значениями. Эти относительные единицы, которые остались в вычисленных значениях, становятся абсолютными, когда используемое значение (en-US) установлено.

Основная сфера применения ***вычисленного значения** (кроме как использования его как "шага" между указанным и используемым значением)* является наследование, включая ключевое слово `inherit`.

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

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

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

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

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

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


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

:blank
======

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

CSS псевдо класс **`:blank`** находит элементы, у которых либо вообще нет дочерних узлов, либо только пустые текстовые узлы, либо только текстовые узлы, содержащие только пробельные символы.

Syntax
------

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

### HTML

```html
<div></div>
```

### CSS
```

:root {
  overflow: hidden;
  max-width: 100vw;
  max-height: 100vh;
}

div {
  background-color: #ccc;
  box-sizing: border-box;
  height: 100vh;
  min-height: 16px;
  min-height: 1rem;
}

:-moz-only-whitespace {
  border-color: lime;
}
```

```css
div {
  border: 4px solid red;
}

:blank {
  border-color: lime;
}
```

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

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

#### No specification found

No specification data found for `css.selectors.-moz-only-whitespace`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

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

* `:empty`


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

pointer-events
==============

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

CSS-свойство **`pointer-events`** позволяет контролировать события, при которых элемент может стать объектом события мыши. Если это свойство не задано, то к содержимому SVG будут применяться характеристики значения `visiblePainted.`

Вдобавок к указанию того, что элемент не является объектом события мыши, значение `none` сообщает событию мыши проходить "через" элемент и обращаться к элементу, находящемуся "под" ним.

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

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

```css
/\* Ключевые слова \*/
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /\* только для SVG \*/
pointer-events: visibleFill; /\* только для SVG \*/
pointer-events: visibleStroke; /\* только для SVG \*/
pointer-events: visible; /\* только для SVG \*/
pointer-events: painted; /\* только для SVG \*/
pointer-events: fill; /\* только для SVG \*/
pointer-events: stroke; /\* только для SVG \*/
pointer-events: all; /\* только для SVG \*/

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

### Значения

`auto`

Элемент ведёт себя так же, как и если бы свойство `pointer-events` не было задано. В SVG это значение даёт такой же эффект, как и значение `visiblePainted`.

`none`

Элемент не может быть целью (target) событий мыши; тем не менее, целью событий мыши могут быть его потомки, если их `pointer-events` имеет какое-либо другое значение. В этом случае события мыши вызовут ожидаемое срабатывание обработчиков на этом родительском элементе на пути к/от потомк(у)/(а) во время фазы захвата/всплытия`.`

`visiblePainted`

Только SVG. Элемент может быть целью события мыши только когда свойство `visibility` установлено в значение `visible` и когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство `fill` установлено в значение отличное от `none`, или над периметром элемента ('stroke'), при этом свойство `stroke` установлено в значение отличное от `none`.

`visibleFill`

Только SVG. Элемент может быть целью события мыши только когда свойство `visibility` установлено в значение `visible` и когда курсор мыши находится над внутренней частью ('fill') элемента. Значение свойства `fill` не влияет на обработку события.

`visibleStroke`

Только SVG. Элемент может быть целью события мыши только когда свойство `visibility` установлено в значение `visible` и когда курсор мыши находится над периметром элемента ('stroke'). Значение свойства `stroke` не влияет на обработку события.

`visible`

Только SVG. Элемент может быть целью события мыши только когда свойство `visibility` установлено в значение `visible` и когда курсор мыши находится над внутренней частью ('fill') или над периметром ('stroke') элемента. Значение свойств `fill` и `stroke` не влияют на обработку события.

`painted`

Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство `fill` установлено в значение отличное от `none`, или над периметром элемента ('stroke'), при этом свойство `stroke` установлено в значение отличное от `none`. Значение свойства `visibility` не влияет на обработку события.

`fill`

Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') элемента. Значение свойств `visibility` и `fill` не влияют на обработку события.

`stroke`

Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над периметром элемента ('stroke'). Значение свойств `visibility` и `stroke` не влияют на обработку события.

`all`

Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') или над периметром ('stroke') элемента. Значение свойств `visibility`, `fill` и `stroke` не влияют на обработку события.

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

pointer-events =
  auto            | (en-US)
  bounding-box    | (en-US)
  visiblePainted  | (en-US)
  visibleFill     | (en-US)
  visibleStroke   | (en-US)
  visible         | (en-US)
  painted         | (en-US)
  fill            | (en-US)
  stroke          | (en-US)
  all             | (en-US)
  none

```

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

### Пример 1

```css
/\* Пример 1: Сделать так, что бы все объекты img не реагировали на перетаскивание, наведение(:hover), нажатие(click) и т.д. \*/
img {
  pointer-events: none;
}
```

### Пример 2

Сделать ссылку на ресурс `http://example.com` не реагирующей на нажатие(click), наведение(:hover) и т.д.

```html
<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>
```

```css
a[href="http://example.com"]
{
  pointer-events: none;
}
```

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

Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши, с помощью `pointer-events` не обязательно означает, что обработчики событий мыши на этом элементе не могут или не будут запускаться. Если у одного из дочерних элементов есть явные `pointer-events,` позволяющие этому ребёнку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает обработчики событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребёнком, ни родителем (он пройдёт через «родительский» на «цели» под ним).

Мы хотели бы предоставить более тонкий контроль (а не только `auto` и `none`) в HTML, когда части элемента смогут «поймать» события мыши. Если у вас есть какие-то конкретные вещи, чтобы помочь нам в решении как следует расширить `pointer-events` для HTML, и которые вы хотели бы сделать с этим свойством, добавьте их в раздел «Использовать случаи» на этой странице вики (не беспокойтесь, мы всё сохраним аккуратно).

Характеристики
--------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # pointer-events-control |
| Scalable Vector Graphics (SVG) 2 # PointerEventsProperty |

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

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

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

* Атрибут SVG `pointer-events (en-US)`
* Атрибут SVG `visibility (en-US)`
* WebKit Specs PointerEventsProperty extended for use in (X)HTML content
* 60fps scrolling using pointer-events: none


Разметка и содержащий блок - CSS: каскадные таблицы стилей

Разметка и содержащий блок
==========================

На размер и позицию элемента часто влияет его **содержащий блок** (containing block). Чаще всего содержащим блоком является content область (content area) ближайшего блочного (block-level) предка, но это не всегда так. В этой статье мы рассмотрим факторы, которые определяют содержащий блок элемента.

Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создаёт бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:

1. Content область или область контента (content area).
2. Padding область или область внутреннего поля (padding area).
3. Border область или область границы (border area).
4. Margin область или область внешнего поля (margin area).

![Diagram of the box model](/ru/docs/Web/CSS/Containing_block/box-model.png)

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

Эффекты содержащего блока
-------------------------

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

На размер и положение элемента часто влияет его содержащий блок.

Значения заданные в процентах для свойств `width`, `height`, `padding`, `margin`, и свойства задающие смещение абсолютно позиционированного элемента (т.е., такого, у которого свойство `position` имеет значение `absolute` или `fixed`) рассчитываются исходя из его содержащего блока.

Определение содержащего блока
-----------------------------

Определение содержащего блока элемента полностью зависит от значения свойства `position`:

1. Если свойство `position` имеет значение **`static`**, **`relative`**, или **`sticky`**, то содержащий блок задаётся краем *content бокса* ближайшего предка, который:
    * либо является **блочным контейнером** (block container), например, если его свойство display имеет значение inline-block, block или list-item.
    * либо **устанавливает контекст форматирования** (formatting context), например, контейнер таблицы (table container), flex-контейнер (flex container), grid-контейнер (grid container) или блочный контейнер (block container).
2. Если свойство **`position`** имеет значение **`absolute`**, то содержащий блок задаётся краем *padding бокса* ближайшего предка, у которого свойство **`position`** имеет значение отличное от `static` (`fixed`, `absolute`, `relative` или `sticky`).
3. Если свойство **`position`** имеет значение **`fixed`**, то содержащий блок задаётся:
    * в случае непрерывного медиа (continuous media) областью просмотра (вьюпорт - viewport);
    * в случае страничного медиа (paged media) областью страницы.
4. Если свойство **`position`** имеет значение **`absolute`** или **`fixed`**, то содержащий блок может также задаваться краем padding бокса ближайшего предка, у которого:
    1. Свойство `transform` или `perspective` имеет значение отличное от `none`.
    2. Свойство `will-change` имеет значение `transform` или `perspective`.
    3. Свойство `filter` имеет значение отличное от `none` или `will-change` value of `filter` (работает только в Firefox).
    4. Свойство `contain` (en-US) имеет значение `paint` (например, `contain: paint;`).

>
> \*\*Примечание:\*\*Содержащий блок в котором находится корневой элемент (`<html>`) представляет собой прямоугольник, который называется **начальный содержащий блок**. Он имеет размеры области просмотра (вьюпорт - viewport) для непрерывного медиа (continuous media) или области страницы (page area) для страничного медиа (paged media).
>
>
>

Calculating percentage values from the containing block
-------------------------------------------------------

As noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block. The properties that work this way are **box model properties** and **offset properties**:

1. The `height`, `top`, and `bottom` properties compute percentage values from the `height` of the containing block.
2. The `width`, `left` (en-US), `right`, `padding`, and `margin` properties compute percentage values from the `width` of the containing block.
Some examples
-------------

The HTML code for all our examples is:

```html
<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

Only the CSS is altered in each instance below.

### Example 1

In this example, the paragraph is statically positioned, so its containing block is `<section>` because it's the nearest ancestor that is a block container.
```

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  display: block;
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  width: 50%; /\* == 400px \* .5 = 200px \*/
  height: 25%; /\* == 160px \* .25 = 40px \*/
  margin: 5%; /\* == 400px \* .05 = 20px \*/
  padding: 5%; /\* == 400px \* .05 = 20px \*/
  background: cyan;
}
```

### Example 2

In this example, the paragraph's containing block is the `<body>` element, because `<section>` is not a block container (because of `display: inline`) and doesn't establish a formatting context.
```

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  display: inline;
  background: lightgray;
}

p {
  width: 50%; /\* == half the body's width \*/
  height: 200px; /\* Note: a percentage would be 0 \*/
  background: cyan;
}
```

### Example 3

In this example, the paragraph's containing block is `<section>` because the latter's `position` is `absolute`. The paragraph's percentage values are affected by the `padding` of its containing block, though if the containing block's `box-sizing` value were `border-box` this would not be the case.
```

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 400px;
  height: 160px;
  padding: 30px 20px;
  background: lightgray;
}

p {
  position: absolute;
  width: 50%; /\* == (400px + 20px + 20px) \* .5 = 220px \*/
  height: 25%; /\* == (160px + 30px + 30px) \* .25 = 55px \*/
  margin: 5%; /\* == (400px + 20px + 20px) \* .05 = 22px \*/
  padding: 5%; /\* == (400px + 20px + 20px) \* .05 = 22px \*/
  background: cyan;
}
```

### Example 4

In this example, the paragraph's `position` is `fixed`, so its containing block is the initial containing block (on screens, the viewport). Thus, the paragraph's dimensions change based on the size of the browser window.
```

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  width: 400px;
  height: 480px;
  margin: 30px;
  padding: 15px;
  background: lightgray;
}

p {
  position: fixed;
  width: 50%; /\* == (50vw - (width of vertical scrollbar)) \*/
  height: 50%; /\* == (50vh - (height of horizontal scrollbar)) \*/
  margin: 5%; /\* == (5vw - (width of vertical scrollbar)) \*/
  padding: 5%; /\* == (5vw - (width of vertical scrollbar)) \*/
  background: cyan;
}
```

### Example 5

In this example, the paragraph's `position` is `absolute`, so its containing block is `<section>`, which is the nearest ancestor with a `transform` property that isn't `none`.
```

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>
```

```css
body {
  background: beige;
}

section {
  transform: rotate(0deg);
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  position: absolute;
  left: 80px;
  top: 30px;
  width: 50%; /\* == 200px \*/
  height: 25%; /\* == 40px \*/
  margin: 5%; /\* == 20px \*/
  padding: 5%; /\* == 20px \*/
  background: cyan;
}
```

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

* Ключевые концепции CSS
    + Синтаксис CSS
    + @-правила
    + комментарии
    + специфичность
    + наследование
    + блочная модель
    + режимы компоновки
    + модели визуального форматирования
    + Схлопывание отступов
    + Значения
        - начальные
        - вычисленные
        - используемые
        - действительные
    + Синтаксис определения значений (en-US)
    + Сокращённые свойства
    + Замещаемые элементы
* The `all` property resets all CSS declarations to a given known state


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

::first-line (:first-line)
==========================

CSS псевдоэлемент **`::first-line`** применяет стили к первой строке блочного элемента. Обратите внимание, что длина первой строки зависит от многих факторов, включая ширину элемента, ширину документа и размер шрифта текста.

```css
/\* Стили для первой строки элемента <p> \*/
p::first-line {
  color: red;
}
```

**Примечание:** В CSS3 появилась запись `::first-line` (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись `:first-line`, введённую в CSS2.

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

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

* Все свойства, связанные с шрифтами: `font`, `font-kerning` (en-US), `font-style`, `font-variant` (en-US), `font-variant-numeric`, `font-variant-position` (en-US), `font-variant-east-asian` (en-US), `font-variant-caps` (en-US), `font-variant-alternates` (en-US), `font-variant-ligatures`, `font-synthesis` (en-US), `font-feature-settings` (en-US), `font-language-override` (en-US), `font-weight`, `font-size`, `font-size-adjust` (en-US), `font-stretch` (en-US) и `font-family`
* Все свойства, связанные с фоном: `background-color`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`, `background-attachment` и `background-blend-mode`
* Свойство `color` (en-US)
* `word-spacing`, `letter-spacing`, `text-decoration` (en-US), `text-transform` (en-US) и `line-height`
* `text-shadow`, `text-decoration` (en-US), `text-decoration-color` (en-US), `text-decoration-line` (en-US), `text-decoration-style` (en-US) и `vertical-align`.
Синтаксис
---------

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

### HTML

```html
<p>
  Стили будут применены только к первой строке этого параграфа. После этого,
  весь текст будет отображаться как обычно. Увидели, что я имею в виду?
</p>

<span
 >Первая строка этого элемента не будет стилизована специальным образом потому
  что это не блочный элемент.</span
>
```

### CSS

```css
::first-line {
  color: blue;
  text-transform: uppercase;

  /\* ПРЕДУПРЕЖДЕНИЕ: НЕ ИСПОЛЬЗУЙТЕ ЭТО \*/
  /\* Многие свойства запрещены в псевдоэлементах ::first-line \*/
  margin-left: 20px;
  text-indent: 20px;
}
```

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

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # first-line-pseudo |

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

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

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

* `::first-letter`


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

:fullscreen
===========

CSS Псевдокласс **`:fullscreen`** соответствует элементу, который в данный момент находится в полноэкранном режиме. Если в полноэкранном режиме находятся несколько элементов, то выбираются все они.

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

Error: could not find syntax for this itemПримечания по использованию
---------------------------

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

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

В этом примере, цвет кнопки меняется в зависимости от того, находится ли документ в полноэкранном режиме. Он выполнен без принудительного изменения стиля посредством JavaScript.

### HTML

HTML выглядит так:

```html
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>

<p>
  This demo uses the <code>:fullscreen</code> pseudo-class to automatically
  change the style of a button used to toggle full-screen mode on and off,
  entirely using CSS.
</p>

<button id="fs-toggle">Toggle Fullscreen</button>
```

`<button>` с ID `"fs-toggle"` будет изменятся между бледно-красный и бледно-зелёный в зависимости от того, находится ли документ в полноэкранном режиме.

### CSS

Магия происходит в CSS. Используются два правила. Первое устанавливает цвет фона кнопки на "Toggle Full-screen Mode", когда элемент не находится в полноэкранном режиме. Для этого используется ключ `:not(:fullscreen)`, который выглядит как элемент, не имеющий установленного псевдокласса `:fullscreen`.

```css
#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}
```

Когда документ находится в полноэкранном режиме, применяется следующее правило CSS, устанавливающее цвет фона на оттенок бледно-красного.

```css
#fs-toggle:fullscreen {
  background-color: #faa;
}
```

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

| Specification |
| --- |
| Fullscreen API Standard # :fullscreen-pseudo-class |

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

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

See also
--------

* Fullscreen API (en-US)
* Guide to the Fullscreen API (en-US)
* `:not`
* `::backdrop`
* DOM API: `Element.requestFullscreen()` (en-US), `Document.exitFullscreen()` (en-US), `Document.fullscreenElement` (en-US)
* `allowfullscreen` (en-US) attribute


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

:root
=====

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

CSS псевдокласс `:root` находит корневой элемент дерева документа. Применимо к HTML, `:root` находит элемент `<html>` и идентичен селектору по тегу `html`, но его специфичность выше.

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

Использование `:root` полезно для объявления CSS Переменных:

```css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # root-pseudo |

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

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


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

outline-color
=============

CSS-свойство **`outline-color`** задаёт цвет обводки элемента.

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

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

```css
/\* Ключевые слова \*/
outline-color: invert;

/\* Значения типа <color> \*/
outline-color: #f92525;
outline-color: rgb(30, 222, 121);
outline-color: blue;

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

Свойство `outline-color` может быть иметь одно из перечисленных ниже значений.

### Значения

`<color>`

Цвет обводки, определённый в формате типа `<color>`.

`invert`

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

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

Обводка — это линия вокруг элемента за пределами рамки (`border`). В отличие от рамки элемента, обводка находится вне границ элемента и может перекрывать другое содержимое. Напротив, рамка участвует в блочной модели, чтобы расположиться на странице, не перекрыв при этом ничего другого (если, конечно, явно не сделать этого).

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

Проблемы, связанные с доступностью
----------------------------------

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

Коэффициент контрастности цвета определяется путём сравнения значений светлоты цвета текста и фона. Согласно руководству по обеспечению доступности веб-контента (WCAG)), коэффициент контрастности должен быть 4,5:1 для обычного текста, и 3:1 для крупного текста, например, заголовков. Под крупным текстом понимается размер от 18,66px с полужирным начертанием или более крупный, либо от 24px и крупнее.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Формальное определение
----------------------

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | Для ключевого слова `auto`, значение - `currentcolor`. Для значения цвета, если значение имеет прозрачность, соответственно, значение будет через `rgba()`. Если это не так, это будет `rgb()`. Ключевое слово `transparent` отображается, как `rgba(0,0,0,0)`. |
| Animation type | цвет |

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

outline-color =
  auto                      | (en-US)
  [ (en-US) <color> | (en-US) <image-1D> ] (en-US)

<image-1D> =
  <stripes()>

<stripes()> =
  stripes( <color-stripe># (en-US) )

<color-stripe> =
  <color>                            && (en-US)
  [ (en-US) <length-percentage> | (en-US) <flex> ] (en-US)? (en-US)

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

```

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

### Элемент с обводкой в виде сплошной линии синего цвета

#### HTML

```html
<p>У меня синяя обводка.</p>
```

#### CSS

```css
p {
  outline: 2px solid; /\* Толщина и стиль обводки \*/
  outline-color: #0000ff; /\* Синий цвет обводки \*/
  margin: 5px;
}
```

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

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-color |

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

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

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

* `outline`
* `outline-color`
* `outline-style`
* `outline-width`
* Тип данных `<color>`
* Другие, относящиеся к цвету свойства: `color` (en-US), `background-color`, `border-color` (en-US), `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow`, `caret-color` (en-US) и `column-rule-color`
* Applying color to HTML elements using CSS


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

animation-iteration-count
=========================

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

Обзор
-----

CSS свойство `animation-iteration-count` определяет сколько раз будет проигрываться анимационный цикл, перед тем как остановиться.

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

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

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

```css
animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.3;

animation-iteration-count: 2, 0, infinite;
```

### Значения

`infinite`

Анимация повторяется бесконечно.

`<number>`

Сколько раз анимация будет повторяться; по умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведёт половину анимационного цикла).

### Правила синтаксиса
```

animation-iteration-count =
  <single-animation-iteration-count># (en-US)

<single-animation-iteration-count> =
  infinite        | (en-US)
  <number [0,∞]>

```

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

Смотрите примеры CSS-анимации.

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-iteration-count |

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

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

Также смотрите
--------------

* Использование CSS-анимацией
* `AnimationEvent`


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

accent-color
============

CSS-свойство **`accent-color`** устанавливает акцентный (en-US) цвет для некоторых элементов управления пользовательским интерфейсом.

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

Браузеры, которые поддерживают `accent-color`, в настоящее время применяют его к следующим HTML элементам:

* `<input type="checkbox">` (en-US)
* `<input type="radio">`
* `<input type="range">`
* `<progress>`
Синтаксис
---------

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

/\* <color> значения \*/
accent-color: red;
accent-color: #5729e9;
accent-color: rgb(0, 200, 0);
accent-color: hsl(228, 4%, 24%);

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

### Значения

`auto`

Браузер сам определяет цвет в зависимости от платформы.

`<color>`

Задает цвет, который будет использован в качестве акцентного.

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

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | `auto` is computed as specified and `<color>` values are computed as defined for the `color` (en-US) property. |
| Animation type | by computed value type |

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

accent-color =
  auto     | (en-US)
  <color>

```

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

### Установка пользовательского акцентного цвета

#### HTML

```html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
```

#### CSS

```css
input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}
```

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

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # widget-accent |

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

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

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

* `<input>` элемент
* Применение цвета к HTML-элементам с помощью CSS
* `<color>`
* Другие свойства, связанные с цветом: `color` (en-US), `background-color`, `border-color` (en-US), `outline-color`, `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow`, `caret-color` (en-US) и `column-rule-color`


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

opacity
=======

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

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

`opacity` применяется к элементу в целом, включая его содержимое, даже если значение не наследуется дочерними элементами. Таким образом, элемент и его потомки имеют одинаковую непрозрачность относительно фона элемента, даже если они имеют различную непрозрачность относительно друг друга.

Использование `opacity` со значением, отличным от `1`, помещает элемент в новый контекст наложения (en-US).

Если вы не хотите применять opacity к дочерним элементам, используйте взамен свойство `background`. Например:

```css
background: rgba(0, 0, 0, 0.4);
```

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

### Значения

`<alpha-value>`

`число` в пределах от `0.0` до `1.0`, включительно, или `проценты` в пределах от `0%` до `100%`, включительно, представляет непрозрачность канала (т.е. значение его альфа-канала). Любое значение вне интервала, хотя и является валидным, округляется до ближайшего предела в диапазоне.

| Значение | Действие |
| --- | --- |
| `0` | Элемент полностью прозрачен (он становится невидимым). |
| Любое `число` строго между `0` и `1` | Элемент полупрозрачный (т.е. содержимое элемента можно увидеть). |
| `1` (значение по умолчанию) | Элемент полностью непрозрачный (видимый). |

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

opacity =
  <alpha-value>

<alpha-value> =
  <number>      | (en-US)
  <percentage>

```

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

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

```css
div {
  background-color: yellow;
}
.light {
  opacity: 0.2; /\* Едва видимый текст на фоне \*/
}
.medium {
  opacity: 0.5; /\* Видимость текста более чёткая на фоне \*/
}
.heavy {
  opacity: 0.9; /\* Видимость текста очень чёткая на фоне \*/
}
```

```html
<div class="light">You can barely see this.</div>
<div class="medium">This is easier to see.</div>
<div class="heavy">This is very easy to see.</div>
```

### Различная непрозрачность с `:hover`

```css
img.opacity {
  opacity: 1;
  filter: alpha(opacity=100); /\* IE8 и ниже \*/
  zoom: 1; /\* Триггеры "hasLayout" в IE 7 и ниже \*/
}

img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}
```

```html
<img
 src="https://developer.mozilla.org/mdn-social-share.png"
 alt="MDN logo"
 width="128"
 height="146"
 class="opacity" />
```

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

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

Коэффициент цветовой контрастности определяется путём сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим Рекомендациям по доступности веб-контента (WCAG), для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и жирный или крупнее, или 24px или выше.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Спецификации
------------

| Specification |
| --- |
| CSS Color Module Level 4 # transparency |

|  |  |
| --- | --- |
| Начальное значение | `1` |
| Применяется к | все элементы |
| Наследуется | нет |
| Проценты | map to the range `[0,1]` |
| Обработка значения | Тоже, что и указанное значение, после обрезки `number` до диапозона [0.0, 1.0]. |
| Animation type | by computed value type |

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

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

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

* Microsoft's filter:alpha(opacity=xx)


Селектор потомков - CSS: каскадные таблицы стилей

Селектор потомков
=================

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

Комбинатор " " (пробел) представляет собой 2 или более селекторов, найдёт элементы соответствующие обоим селекторам. Селекторы по потомкам похожи на селекторы дочерних элементов, но они не учитывают вложенность элементов и применяют свои свойства ко всем элементам данного типа, находящимся внутри родительского элемента, независимо от глубины вложенности.

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

selector1 selector2 {стили }
```

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

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

```html
<div>
  <span
 >Span 1
    <span>Span 2</span>
  </span>
</div>
<span>Span 3</span>
```

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

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

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

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


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

:where()
========

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

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

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

```css
/\* Выбирает любой параграф внутри header, main
 или footer на который наведён курсор мыши \*/
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/\* Пример приведённый выше эквивалентен следующему \*/
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}
```

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

### Парсинг forgiving-селектора

В спецификации псевдоклассы `:is()` и `:where()` относятся к так называемому forgiving selector list (прощающий список селекторов).

При использовании списка селекторов в CSS, если один из селекторов невалидный, то весь список селекторов будет считаться невалидным. В то же время при использовании `:is()` или `:where()` действует другое правило: если среди переданных аргументов будет некорректный или неподдерживаемый селектор, то он будет проигнорирован, для всех же остальных селекторов будут применены CSS-правила.

```css
:where(:valid, :unsupported) {
  ...
}
```

Пример выше будет успешно распарсен и для `:valid` будут применены CSS-правила, даже если в браузере не поддерживается `:unsupported`, в то время как:

```css
:valid, :unsupported {
  ...
}
```

Код будет полностью проигнорирован в браузерах, которые не поддерживают `:unsupported`, даже не смотря на то, что они поддерживают `:valid`.

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

### Сравнение :where() и :is()

В этом примере показывается как работает `:where()`, а так же демонстрируется разница между `:where()` и `:is()`.

Возьмём следующий HTML-код:

```html
<article>
  <h2>:is()-styled links</h2>
  <section class="is-styling">
    <p>
      Here is my main content. This
      <a href="https://mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="is-styling">
    <p>
      Here is my aside content. This
      <a href="https://developer.mozilla.org">also contains a link</a>.
    </p>
  </aside>

  <footer class="is-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>

<article>
  <h2>:where()-styled links</h2>
  <section class="where-styling">
    <p>
      Here is my main content. This
      <a href="https://mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="where-styling">
    <p>
      Here is my aside content. This
      <a href="https://developer.mozilla.org">also contains a link</a>.
    </p>
  </aside>

  <footer class="where-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>
```

В примере выше у нас представлено две статьи, каждая из которых содержит следующие блоки: `section`, `aside` и `footer`. Каждый из блоков имеет свой CSS-класс.

Теперь при помощи псевдоклассов `:is()` и `:where()` зададим цвет для ссылок в простой форме, как в примере ниже:

```css
html {
  font-family: sans-serif;
  font-size: 150%;
}

:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}
```

Что если позже мы захотим переопределить цвет ссылок в `footer`'ах используя простой селектор?

```css
footer a {
  color: blue;
}
```

Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри `:is()` выше, чем специфичность селектора вышеприведённого кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.

В то время как, селекторы перечисленные внутри `:where()` имеют нулевую специфичность, поэтому оранжевая ссылка в футере будет переопределена простым селектором и станет синего цвета.

**Примечание**: вы так же можете найти этот пример на Github; смотрите is-where.

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

Error: could not find syntax for this itemСпецификации
------------

| Specification |
| --- |
| Selectors Level 4 # zero-matches |

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

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

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

* `:is()`
* Список селекторов
* Веб-компоненты


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

place-items
===========

Сокращённое свойство CSS **`place-items`** позволяет одновременно выравнивать элементы и колонки, и ряда (т.е. по свойствам `align-items` и `justify-items`) в соответствующей системе раскладки, такой как гриды или флексбоксы. Если задано одно значение, оно используется для выравнивания и в колонке, и в ряду.

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

Связанные свойства
------------------

Это свойство является сокращением для следующих CSS-свойств:

* `align-items`
* `justify-items`
Синтаксис
---------

```css
/\* Ключевые слова \*/
place-items: center;
place-items: normal start;

/\* Позиционное выравнивание \*/
place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;
place-items: left legacy;
place-items: right normal;

/\* Выравнивание по базовой линии \*/
place-items: baseline normal;
place-items: first baseline legacy;
place-items: last baseline normal;
place-items: stretch legacy;

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

### Значения

Записывается одним из двух способов:

* Одно значение `align-items`, которое используется для определения выравнивания как колонки, так и ряда.
* Значение `align-items`, определяющее выравнивание колонки, после которого следует значение `justify-items`, задающее выравнивание для ряда.
Формальное определение
----------------------

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `align-items`: `normal`
* `justify-items`: `legacy`
 |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `align-items`: как указано
* `justify-items`: как указано
 |
| Animation type | discrete |

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

place-items =
  <'align-items'> <'justify-items'>? (en-US)

```

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

### Выравнивание элементов во флекс-контейнере

Для флекс-раскладки свойства `justify-self` (en-US) или `justify-items` не применяются, поскольку элементы размещаются по главной оси, поэтому второе значение будет проигнорировано.
```

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
  font-size: 2em;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}
```

```
<div id="container">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
</div>

<div class="row">
  <label for="values">place-items: </label>
  <select id="values">
    <option value="stretch">stretch</option>
    <option value="start">start</option>
    <option value="center">center</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>
    <option value="auto center">auto center</option>
    <option value="normal start">normal start</option>
    <option value="center normal">center normal</option>
    <option value="start auto">start auto</option>
    <option value="end normal">end normal</option>
    <option value="self-start auto">self-start auto</option>
    <option value="self-end normal">self-end normal</option>
    <option value="flex-start auto">flex-start auto</option>
    <option value="flex-end normal">flex-end normal</option>
    <option value="left auto">left auto</option>
    <option value="right normal">right normal</option>
    <option value="baseline normal">baseline normal</option>
    <option value="first baseline auto">first baseline auto</option>
    <option value="last baseline normal">last baseline normal</option>
    <option value="stretch auto">stretch auto</option>
  </select>
</div>
```

```
let values = document.getElementById("values");
let container = document.getElementById("container");

values.addEventListener("change", function (evt) {
  container.style.placeItems = evt.target.value;
});
```

#### CSS

```css
#container {
  height: 200px;
  width: 240px;
  place-items: stretch; /\* В выпадающем списке ниже можно изменить это значение \*/
  background-color: #8c8c8c;
  display: flex;
}
```

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

### Выравнивание элементов в грид-контейнере

В следующем грид-контейнере есть элементы, которые меньше грид-области, в которой они находятся, поэтому `place-items` будет выравнивать их по оси колонки и оси ряда.
```

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
  font-size: 2em;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}
```

```
<div id="gridcontainer">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
</div>

<div class="row">
  <label for="gridvalues">place-items: </label>
  <select id="gridvalues">
    <option value="stretch">stretch</option>
    <option value="start">start</option>
    <option value="center">center</option>
    <option value="end">end</option>
    <option value="left">left</option>
    <option value="right">right</option>
    <option value="auto center">auto center</option>
    <option value="normal start">normal start</option>
    <option value="center normal">center normal</option>
    <option value="start auto">start auto</option>
    <option value="end normal">end normal</option>
    <option value="self-start auto">self-start auto</option>
    <option value="self-end normal">self-end normal</option>
    <option value="flex-start auto">flex-start auto</option>
    <option value="flex-end normal">flex-end normal</option>
    <option value="left auto">left auto</option>
    <option value="right normal">right normal</option>
    <option value="baseline normal">baseline normal</option>
    <option value="first baseline auto">first baseline auto</option>
    <option value="last baseline normal">last baseline normal</option>
    <option value="stretch auto">stretch auto</option>
  </select>
</div>
```

```
let values = document.getElementById("gridvalues");
let container = document.getElementById("gridcontainer");

values.addEventListener("change", function (evt) {
  container.style.placeItems = evt.target.value;
});
```

#### CSS

```css
#gridcontainer {
  height: 200px;
  width: 240px;
  place-items: stretch; /\* В выпадающем списке ниже можно изменить это значение \*/
  background-color: #8c8c8c;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#gridcontainer > div {
  width: 50px;
}
```

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

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # place-items-property |

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

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

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

* Руководство по флексбоксу: *Основные понятия Flexbox*
* Руководство по флексбоксу: *Выравнивание элементов во флекс-контейнере*
* Руководство по гридам: *Выравнивание блоков в грид-раскладке*
* Выравнивание полей CSS
* Свойство `align-items`
* Свойство `align-self`
* Свойство `justify-items`
* Свойство `justify-self` (en-US)


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

border-radius
=============

**`border-radius`** — это CSS-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закруглённость каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.

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

Это свойство является короткой записью для четырёх свойств `border-top-left-radius` (en-US), `border-top-right-radius` (en-US), `border-bottom-right-radius` (en-US) и`border-bottom-left-radius` (en-US).

Скругление применяется ко всему `background`, даже если элемент не имеет границ, точное положение отсечения определяется свойством `background-clip`.

Свойство `border-radius` не применяется к элементам таблицы, когда свойство `border-collapse` (en-US) имеет значение `collapse`.

**Примечание:** Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в `border-radius:0 0 inherit inherit`, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.

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

```css
/\* Такой синтаксис позволяет указать всего одно значение, вместе четырёх \*/
/\* Скругление применяется ко всем четырём углам \*/
border-radius: 10px;

/\* top-left-and-bottom-right | top-right-and-bottom-left \*/
border-radius: 10px 5%;

/\* top-left | top-right-and-bottom-left | bottom-right \*/
border-radius: 2px 4px 2px;

/\* top-left | top-right | bottom-right | bottom-left \*/
border-radius: 1px 0 3px 4px;

/\* Синтаксис из двух радиусов также может применяться ко всем четырём углам \*/
/\* (первые значения радиуса) /радиус \*/
border-radius: 10px 5% / 20px;

/\* (первые значения радиуса) / top-left-and-bottom-right | top-right-and-bottom-left \*/
border-radius: 10px 5% / 20px 30px;

/\* (первые значения радиуса) / top-left | top-right-and-bottom-left | bottom-right \*/
border-radius: 10px 5px 2em / 20px 25px 30%;

/\* (первые значения радиуса) / top-left | top-right | bottom-right | bottom-left \*/
border-radius: 10px 5% / 20px 25em 30px 35em;

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

Свойство `border-radius` может быть задано как:

* одно, два, три или четыре значения `<length>` или `<percentage>`. Используется для задания обычного радиуса углов.
* одна, две, три или четыре пары значений `<length>` or `<percentage>`, разделённые "/". Используется для задания эллиптического скругления.
### Значения

| *radius* |  | `<length>` или `<percentage>` устанавливает радиус скругления для всех углов элемента. Может быть указано только одно значение (или одна пара). |
| --- | --- | --- |
| *top-left-and-bottom-right* |  | `<length>` или `<percentage>` устанавливает радиус для верхнего левого и нижнего правого угла элемента. Следует использовать синтаксис с двумя значениями. |
| *top-right-and-bottom-left* |  | `<length>` или `<percentage>` устанавливает радиус для верхнего правого и нижнего левого угла элемента. Можно использовать синтаксис с двумя или тремя значениями. |
| *top-left* |  | `<length>` или `<percentage>` устанавливает радиус для левого верхнего угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями. |
| *top-right* |  | `<length>` или `<percentage>` устанавливает радиус для верхнего правого угла элемента. Следует использовать синтаксис с четырьмя значениями. |
| *bottom-right* |  | `<length>` или `<percentage>` устанавливает радиус для нижнего правого угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями. |
| *bottom-left* |  | `<length>` или `<percentage>` устанавливает радиус для нижнего левого угла элемента. Следует использовать синтаксис с четырьмя значениями. |

`<length>`

Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.

`<percentage>`

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

Например:

```css
border-radius: 1em/5em;

/\* ... эквивалентно этому: \*/
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
```

```css
border-radius: 4px 3px 6px / 2px 4px;

/\* ... эквивалентно этому: \*/
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;
```

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

border-radius =
  <length-percentage [0,∞]>{1,4} (en-US) [ (en-US) / <length-percentage [0,∞]>{1,4} (en-US) ] (en-US)? (en-US)

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

```

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

<pre id="example-1">
border: solid 10px;
border-radius: 10px 40px 40px 10px;
  </pre
>
<pre id="example-2">
border: groove 1em red;
border-radius: 2em;
  </pre
>
<pre id="example-3">
background: gold;
border: ridge gold;
border-radius: 13em/3em;
  </pre
>
<pre id="example-4">
border: none;
border-radius: 40px 10px;
background: gold;
  </pre
>
<pre id="example-5">
border: none;
border-radius: 50%;
background: burlywood;
  </pre
>
<pre id="example-6">
border: dotted;
border-width: 10px 4px;
border-radius: 10px 40px;
  </pre
>
<pre id="example-7">
border: dashed;
border-width: 2px 4px;
border-radius: 40px;
  </pre
>
```

```
pre {
  margin: 20px;
  padding: 20px;
  width: 80%;
  height: 80px;
}

pre#example-1 {
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

pre#example-2 {
  border: groove 1em red;
  border-radius: 2em;
}

pre#example-3 {
  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
}

pre#example-4 {
  border: none;
  border-radius: 40px 10px;
  background: gold;
}

pre#example-5 {
  border: none;
  border-radius: 50%;
  background: burlywood;
}

pre#example-6 {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}

pre#example-7 {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
}
```

Живые примеры
-------------

* Пример 1: http://jsfiddle.net/Tripad/qnGKj/2/
* Пример 2: http://jsfiddle.net/Tripad/qnGKj/3/
* Пример 3: http://jsfiddle.net/Tripad/qnGKj/4/
* Пример 4: http://jsfiddle.net/Tripad/qnGKj/5/
* Пример 5: http://jsfiddle.net/Tripad/qnGKj/6/
Спецификации
------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-radius |

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `border-top-left-radius` (en-US): `0`
* `border-top-right-radius` (en-US): `0`
* `border-bottom-right-radius` (en-US): `0`
* `border-bottom-left-radius` (en-US): `0`
 |
| Применяется к | все элементы, но браузеры не применяют к элементам `table` и `inline-table`, когда `border-collapse` (en-US):`collapse`. Поведение на внутритабличных элементах не определено.. Это также применяется к `::first-letter`. |
| Наследуется | нет |
| Проценты | относятся к соответствующему размеру границы элемента |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `border-bottom-left-radius` (en-US): две абсолютных `length` или `percentage`
* `border-bottom-right-radius` (en-US): две абсолютных `length` или `percentage`
* `border-top-left-radius` (en-US): две абсолютных `length` или `percentage`
* `border-top-right-radius` (en-US): две абсолютных `length` или `percentage`
 |
| Animation type | как и у каждого из подсвойств этого свойства:* `border-top-left-radius` (en-US): длина, проценты или calc();
* `border-top-right-radius` (en-US): длина, проценты или calc();
* `border-bottom-right-radius` (en-US): длина, проценты или calc();
* `border-bottom-left-radius` (en-US): длина, проценты или calc();
 |

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

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

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

* Относящиеся к Border-radius CSS-свойства: `border-top-left-radius` (en-US), `border-top-right-radius` (en-US), `border-bottom-right-radius` (en-US), `border-bottom-left-radius` (en-US)


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

text-align
==========

Резюме
------

`text-align` CSS-свойство описывает, как линейное содержимое, наподобие текста, выравнивается в блоке его родительского элемента. `text-align` не контролирует выравнивание элементов самого блока, но только их линейное содержимое.

|  |  |
| --- | --- |
| Начальное значение | `start`, или неназванное значение, которое действует как `left`, если `direction`: `ltr` или как `right`, если `direction`: `rtl`, а если `start` не поддерживается браузером. |
| Применяется к | блочные контейнеры |
| Наследуется | да |
| Обработка значения | как указано, кроме значения `match-parent`, которое вычисляется вместо значения его родителя `direction`, а результаты в вычисленном значении `left` или `right` |
| Animation type | discrete |

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

Формальный синтаксис (en-US):
```

text-align =
  start         | (en-US)
  end           | (en-US)
  left          | (en-US)
  right         | (en-US)
  center        | (en-US)
  justify       | (en-US)
  match-parent  | (en-US)
  justify-all

```

```css
text-align: left
text-align: right
text-align: center
text-align: justify
text-align: start
text-align: end
text-align: match-parent
text-align: start end
text-align: "."
text-align: start "."
text-align: "." end

text-align: inherit
```

### Значения

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

Подобно `left` если направление слева направо, и `right` если наоборот.

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

Подобно `right` если направление слева направо, и `left` если наоборот.

`left`

Линейное содержимое выравнивается по левому краю линейного блока.

`right`

Линейное содержимое выравнивается по правому краю линейного блока.

`center`

Линейное содержимое центрируется в линейном блоке.

`<string>`
Экспериментальная возможность

Первое появление односимвольной строки - это элемент используемый для выравнивания. Ключевое слово, следует или предшествует, и определяет, как это выравнивается. Это позволяет выравнять численные значения с десятичной точкой, к примеру.

`justify`

Текст выравнивается. Тексту следует выстраивать свои левые и правые границы по левым и правым границам содержимого параграфа.

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

Наподобие `inherit` с различием, что значение `start` и `end` вычисляются в соответствии `direction` и заменяются соответствующим `left` или `right` значением.

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

Посмотреть живые примеры

### Живые примеры

div { **text-align: center**; border:solid; }

p { background:gold; width:22em; }

несколько текста...div { **text-align: center**; border:solid; }

p { background:gold; width:22em; **margin: 1em auto**; }

несколько текста...div { **text-align:-moz-center**; text-align:-webkit-center; border:solid; }

p { background:gold; width:22em; }

несколько текста...

### Примечание

 Стандартный совместимый способ центрировать сам блок без выравнивания его содержимого, это установка его left и right margin в auto, пример:
 `margin:auto;` или `margin:0 auto;` или `margin-left:auto; margin-right:auto;`

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # text-align |
| CSS Text Module Level 3 # text-align-property |

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

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

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

* `margin:auto`, `margin-left:auto`, `vertical-align`


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

object-position
===============

CSS-свойство **`object-position`** определяет выравнивание контента выбранного замещаемого элемента внутри блока элемента. На областях блока, не покрытых объектом замещаемого элемента, будет отображаться фон элемента.

Вы можете задавать способ подстройки собственного размера объекта замещаемого элемента (т. е., его естественного размера) под размер блока элемента, используя свойство `object-fit`.

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

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

```css
/\* значения <position> \*/
object-position: center top;
object-position: 100px 50px;

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

### Значения

`<position>` (en-US)

От одного до четырёх значений, которые определяют 2D-позицию элемента. Могут использоваться как абсолютные, так и относительные значения сдвигов.

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

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

|  |  |
| --- | --- |
| Начальное значение | `50% 50%` |
| Применяется к | заменяемые элементы |
| Наследуется | да |
| Проценты | относятся к ширине и высоте самого элемента |
| Обработка значения | как указано |
| Animation type | повторяющийся список из  |

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

object-position =
  <position>

<position> =
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US)  | (en-US)
  [ (en-US) left | (en-US) center | (en-US) right ] (en-US) && (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US)  | (en-US)
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)  | (en-US)
  [ (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (en-US)

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

```

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

### Позиционирование изображений

#### HTML

Здесь мы видим HTML, содержащий два `<img>`-элемента, отображающие логотипы MDN.

```html
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />
```

#### CSS

CSS содержит стандартные стили для самого `<img>`-элемента, а также отдельные стили для обоих изображений.

```css
img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}
```

Первое изображение расположено с отступом в 10 пикселей относительно левого края блока элемента. Второе изображение расположено своим правым краем впритык к правому краю блока элемента и сдвинуто вниз на 10% высоты блока элемента.

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

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

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-position |

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

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

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

* Другие CSS-свойства, связанные с изображениями: `object-fit`, `image-orientation` (en-US), `image-rendering` (en-US), `image-resolution` (en-US).


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

order
=====

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

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

* Learn more
* See full compatibility
* Report feedback
CSS свойство **`order`** определяет порядок, используемый для размещения flex элементов в их flex контейнере. Элементы располагаются в восходящем порядке по значению `order`. Элементы с одинаковым значением `order` располагаются в том порядке, в каком они находятся в исходном коде.

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

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

```css
/\* Числовые значения, в том числе отрицательные \*/
order: 5;
order: -5;

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

**Примечание:** `order` воздействует только на **визуальный порядок** элементов, но не логический порядок или табуляцию. **`order`** не должен применяться к невизуальным медиаданным, таким как речь.

Посмотрите Используем CSS flexible boxes (en-US) для более подробной информации и дополнительных свойствах.

### Значения

`<integer>`

Представляет порядковую группу, которая присвоена flex элементу.

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

order =
  [ (en-US) <'layout-order'> <'reading-order'>? (en-US) ] (en-US)  | (en-US)
  [ (en-US) [ (en-US) reading || (en-US) layout ] (en-US) && (en-US) <integer> ] (en-US)

```

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

Имеется базовый отрывок HTML кода:

```html
<header>...</header>
<main>
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</main>
<footer>...</footer>
```

Следующий CSS код должен создать классический блок контента окружённый боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.

```css
main {
  display: flex;
  text-align: center;
}
main > article {
  flex: 1;
  order: 2;
}
main > nav {
  width: 200px;
  order: 1;
}
main > aside {
  width: 200px;
  order: 3;
}
```

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

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

| Specification |
| --- |
| CSS Display Module Level 3 # order-property |

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

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

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

* Используя CSS flexible boxes


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

tab-size
========

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

CSS-свойство **`tab-size`** используется для настройки ширины символа табуляции (`U+0009`).

```css
/\* <integer> значения \*/
tab-size: 4;
tab-size: 0;

/\* <length> значения \*/
tab-size: 10px;
tab-size: 2em;

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

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

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

### Значения

`<integer>`

Количество пробелов в табе. Должно быть неотрицательным.

`<length>`

Ширина таба. Должно быть неотрицательным.

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

tab-size =
  <number [0,∞]>  | (en-US)
  <length [0,∞]>

```

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

```css
pre {
  tab-size: 4; /\* Установит размер таба в 4 пробела \*/
}
```

```css
pre {
  tab-size: 0; /\* Удалит отступ \*/
}
```

```css
pre {
  tab-size: 2; /\* Установит размер таба в 2 пробела \*/
}
```

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

| Specification |
| --- |
| CSS Text Module Level 3 # tab-size-property |

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

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

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

* Управление размером символа табуляции (U+0009), электронное письмо Anne van Kesteren в CSSWG.