recursal/MDN huggingface dataset:
Схлопывание внешних отступов
============================

 Отступы margin-top и margin-bottom иногда объединяются в один, с размером равным наибольшему из них (или размеру одного, если они равны).
 Это поведение известно как **схлопывание внешних отступов (margin collapsing).**
 Обратите внимание, что отступы плавающих и абсолютно позиционированных элементов никогда не схлопываются.

Схлопывание внешних отступов происходит в трёх случаях:

Соседние элементы (siblings)

Схлопываются отступы соседних элементов (за исключением случая, когда к последнему элементу применено свойство `clear`).

Родительский и первый/последний дочерние элементы

Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block) или промежуток для отделения `margin-top` родительского элемента, от `margin-top` одного или нескольких его дочерних элементов/блоков или отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), `height`, `min-height` или `max-height` для отделения отступов `margin-bottom` родительского блока от `margin-bottom` отступов одного или нескольких его дочерних элементов/блоков, то внешние отступы схлопываются. Схлопнутые отступы заканчиваются за пределами родительского элемента.

Пустые блоки

Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), `height` или `min-height` для отделения `margin-top` верхнего отступа этого блока от его `margin-bottom` нижнего отступа, то верхние и нижние внешние отступы этого блока схлопываются.

**На заметку:**

* Более сложное схлопывание отступов (более, чем двух) происходит, когда описанные случаи сочетаются.
* Эти правила применяются даже к отступам, равным 0, поэтому отступ первого/последнего дочернего элемента заканчивается за пределами его родителя (согласно правилу выше) независимо от того, равен ли отступ родителя нулю.
* При использовании отрицательных отступов, размер схлопнутого отступа вычисляется, как сумма наибольшего положительного и наименьшего отрицательного (наибольшего по модулю) отступа.
* Если все отступы отрицательные, размер схлопнутого отступа равен наименьшему (наибольшему по модулю) отступу. Это относится как к вложенным элементам, так и к соседним.
* Внешние отступы плавающих и абсолютно позиционируемых элементов никогда не схлопываются.
Примеры
-------

### HTML


```html
<p>Нижний отступ этого абзаца схлопнулся …</p>
<p>
  … с верхним отступом этого абзаца, объеденив отступы между ними в один, равный
  <code>1.2rem</code>.
</p>

<div>
  Этот родительский элемент содержит два абзаца!
  <p>Этот абзац имеет отступ <code>.4rem</code> между ним и текстом выше.</p>
  <p>
    Нижний отступ этого абзаца схлопывается с отступом родителя, принимая
    значение <code>2rem</code>.
  </p>
</div>

<p>Этот абзац имеет отступ <code>2rem</code> от элемента выше.</p>
```

### CSS


```css
div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}
```

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

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

* CSS Reference (en-US)
Breadcrumb Navigation
=====================

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
Навигация по хлебным крошкам помогает пользователю понять своё местоположение на веб-сайте, обеспечивая обратный путь к начальной странице.

![Links displayed inline with separators](/ru/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation/breadcrumb-navigation.png)

Требование
----------

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

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

**Примечание:** Загрузить этот пример


**Примечание:** В приведённом выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор: .breadcrumb li:not(:first-child)::before {
 content: "→";
 }Это решение использует более сложный селектор, но требует меньше правил. Смело выбирайте то решение, которое вам больше по душе.


Сделанный выбор
---------------

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

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

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

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

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

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

#### Flexbox

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

* CSS Flexible Box Layout
* Создание следа из хлебных крошек
* Использование атрибута aria-current
Раздельная навигация
====================

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
Навигационный паттерн, в котором один или более элементов отделены от остальных элементов навигации.

![Items separated into two groups.](/ru/docs/Web/CSS/Layout_cookbook/Split_Navigation/split-navigation.png)

Требования
----------

Распространённый навигационный шаблон имеет один элемент, который отделен от остальных. Мы можем использовать Flexbox для того, чтобы сделать это, без необходимости создавать два набора элементов в двух раздельных flex контейнерах.

Рецепт
------

**Примечание:** Download this example

Choices made
------------

Этот паттерн объединяет margin со значением auto и Flexbox для разделения элементов.

Auto margin поглощает все доступное пространство в указанном направлении. Так же работает центрирование блока с автоматическими margin - вы имеете отступы на каждой стороне блока, пытающиеся занять все доступное пространство, таким образом толкая блок в центр.

В этом случаи левый auto margin занимает любое доступное пространство и толкает элемент к правому краю. Вы могли применить класс push к любому элементу в списке.

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

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

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

#### Flexbox

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

* CSS Flexible Box Layout
Sticky footers
==============

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

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

* Learn more
* See full compatibility
* Report feedback
Шаблон нижнего колонтитула - это шаблон, в котором нижний колонтитул вашей страницы «прилипает» к нижней части области просмотра в тех случаях, когда содержимое короче высоты области просмотра. Рассмотрим два способа, как этого достичь.

![A sticky footer pushed to the bottom of a box](/ru/docs/Web/CSS/Layout_cookbook/Sticky_footers/cookbook-footer.png)

Requirements
------------

Липкий шаблон нижнего колонтитула должен соответствовать следующим требованиям:

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

**Примечание:** Download this example

**Примечание:** In this example and the following one we are using a wrapper set to `min-height: 100%` in order that our live example works. You could also achieve this for a full page by setting a `min-height` of `100vh` on the `<body>` and then using it as your grid container.

Выбор сделан
------------

В приведённом выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс `.wrapper` имеет минимальную высоту `100%`, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаём сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.

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

Alternate method
----------------

If you need compatibility with browsers that do not support Grid Layout you can also use Flexbox to create a sticky footer.

The flexbox example starts out in the same way, but we use `display:flex` rather than `display:grid` on the `.wrapper`; we also set `flex-direction` to `column`. Then we set our main content to `flex-grow: 1` and the other two elements to `flex-shrink: 0` — this prevents them from shrinking smaller when content fills the main area.

Resources on MDN
----------------

* Basic concepts of Grid Layout
Использование псевдокласса :target в селекторах
===============================================

Иногда пользователям трудно заметить, что URL указывает на определённую часть документа. Узнайте, как можно использовать простое CSS-правило, чтобы привлечь внимание пользователей к цели указания URL и улучшить их впечатления.

Выбор целевых элементов
-----------------------

Псевдокласс `:target` используется для стилизации целевого элемента URL, содержащего идентификатор фрагмента. Например, URL `http://developer.mozilla.org/en/docs/Using_the_:target_selector#example` содержит идентификатор фрагмента `#example`. В HTML, идентификаторы определяются значениями атрибутов `id` или `name`, т.к. эти атрибуты разделяют одно пространство имён. Таким образом, в вышеприведённом примере URL указывает на первый элемент "example" в документе.

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


```css
h2:target {
  font-weight: bold;
}
```


Также возможно создать стили, специфичные для определённого фрагмента документа. Это достигается использованием такого же идентификационного значения, как в URI. Таким образом, чтобы добавить рамку к фрагменту `#example` , напишем:


```css
#example:target {
  border: 1px solid black;
}
```

Отметка всех элементов, как целевых
-----------------------------------

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


```css
:target {
  color: red;
}
```

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

В данном примере имеются пять ссылок, которые ссылаются на элементы одного и того же документа. Выбор ссылки "First" , например, приведёт к тому, что `<h1 id="one">` станет целевым элементом. Заметьте, что при прокрутке документа целевые элементы располагаются вверху окна браузера, если это возможно.


```html
<h4 id="one">...</h4>
<p id="two">...</p>
<div id="three">...</div>
<a id="four">...</a> <em id="five">...</em>

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>
```

Вывод
-----

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

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

* `:target`
font-display
============

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

Дескриптор `font-display` определяет то, как шрифт, подключённый через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.

### Временная шкала отображения шрифтов

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

Период блокировки шрифта (Font block period)

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

Период подмены шрифта (Font swap period)

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

Период отказа шрифта (Font failure period)

Если шрифт не загружен, пользовательский агент воспринимает это как неудачную загрузку и использует запасной шрифт.


|  |  |
| --- | --- |
| Связано с @-правила | `@font-face` |
| Начальное значение | `auto` |
| Обработка значения | как указано |

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


```css
/\* Ключевые слова \*/
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
```

### Значения

auto

Стратегию загрузки шрифта определяет пользовательский агент.

block

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

swap

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

fallback

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

optional

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

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

font-display =   
  auto      | (en-US)  
  block     | (en-US)  
  swap      | (en-US)  
  fallback  | (en-US)  
  optional    
  
```

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


```css
@font-face {
  font-family: ExampleFont;
  src:
    url(/path/to/fonts/examplefont.woff) format("woff"),
    url(/path/to/fonts/examplefont.eot) format("eot");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-display-desc |

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

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

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

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

* Learn more
* See full compatibility
* Report feedback
CSS дескриптор **`font-family`** позволяет авторам указывать font family для шрифта, указанного в правиле `@font-face`.

|  |  |
| --- | --- |
| Связано с @-правила | `@font-face` |
| Начальное значение | `n/a (required)` |
| Обработка значения | как указано |

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


```css
/\* <string> значения \*/
font-family: "font family";
font-family: "another font family";

/\* <custom-ident> значение \*/
font-family: examplefont;
```

### Значения

`<family-name>`

Указывает имя font family.

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

font-family =   
  <family-name>    
  
<family-name> =   
  <string> (en-US)         | (en-US)  
  <custom-ident>+ (en-US)    
  
```

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


```css
@font-face {
  font-family: examplefont;
  src: url("examplefont.ttf");
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-family-desc |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Генератор рамок (border-image)
==============================

Этот инструмент можно использовать для создания эффектов рамок вокруг элементов с помощью CSS-свойства `border-image` (en-US).

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

Генератор скруглений границ (border-radius)

Визуальный инструмент для создания скруглённых границ с помощью CSS-свойства `border-radius`.

Генератор теней (box-shadow)

Визуальный инструмент для создания теней элементов с помощью CSS-свойства `box-shadow`.
Генератор теней (box-shadow)
============================

Этот инструмент можно использовать для создания эффектов теней элементов с помощью CSS-свойства `box-shadow`.

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

Генератор рамок (border-image)

Визуальный инструмент для создания рамок вокруг элементов с помощью CSS-свойства `border-image` (en-US).

Генератор скруглений границ (border-radius)

Визуальный инструмент для создания скруглённых границ с помощью CSS-свойства `border-radius`.
Множественные фоны
==================

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

Задавать `множественные фоны` легко:


```css
.myclass {
  background:
    background1,
    background2,
    /\* …, \*/ backgroundN;
}
```


Вы можете сделать это сокращённым свойством `background` и отдельными свойствами кроме `background-color`. Таким образом, следующие свойства могут быть определены в виде списка по одному на фон: `background`, `background-attachment`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`.

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

В этом примере заданы три фона: логотип Firefox, изображение пузырей и линейный градиент (en-US):

### HTML


```html
<div class="multi-bg-example"></div>
```

### CSS


```css
.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    bottom right,
    left,
    right;
}
```

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

Как вы можете видеть, логотип Firefox (первый в списке `background-image`) расположен сверху, далее идёт фон с пузырями и в самом низу градиент (указанный последним). Каждое последующее под-свойство (`background-repeat` и `background-position`) применяется к соответствующим фонам. Например, первое значение свойства `background-repeat` применяется к первому фону и т.д.

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

* Использование CSS-градиентов
Генератор скруглений границ (border-radius)
===========================================

Этот инструмент можно использовать для создания эффектов скругления границ элементов с помощью CSS-свойства `border-radius`.

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

Генератор рамок (border-image)

Визуальный инструмент для создания рамок вокруг элементов с помощью CSS-свойства `border-image` (en-US).

Генератор теней (box-shadow)

Визуальный инструмент для создания теней элементов с помощью CSS-свойства `box-shadow`.
blur()
======

Функция CSS **`blur()`** применяет размытие по Гауссу к входному изображению. Его результатом является `<filter-function>`.

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

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

blur(radius)
```

### Параметры

`radius`

Радиус размытия, выраженный в `<length>`. Он определяет отклонение от стандартной функции Гаусса, то есть как много пикселей на экране смешиваются друг с другом. Таким образом, большее значение даст большее размытие. Значение `0` оставит изображение без изменений.

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


```css
blur(0)        /\* Без эффекта \*/
blur(8px)      /\* Размытие с радиусом 8px \*/
blur(1.17rem)  /\* Размытие с радиусом 1.17rem \*/
```

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

* `<filter-function>`
* `brightness()` (en-US)
* `contrast()` (en-US)
* `drop-shadow()` (en-US)
* `grayscale()` (en-US)
* `hue-rotate()` (en-US)
* `invert()`
* `opacity()` (en-US)
* `saturate()` (en-US)
* `sepia()` (en-US)
invert()
========

Функция (en-US) CSS **`invert()`** инвертирует цвета изображения. Его результатом является `<filter-function>`.

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

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


```css
invert(amount)
```

### Parameters

`amount`

Степень преобразования, заданная в виде целого числа (`<number>`) или процента (`<percentage>`). Значение `100%` полностью инвертирует цвета, соответственно `0%` ничего не делает. Значения между `0%` и `100%` является линейными множителями эффекта. Начальное занчение для интерполяции — `0`.

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

### Примеры допустимых значений для invert()


```css
invert(0)     /\* Ничего не делает \*/
invert(.6)    /\* Инверсия цвета на 60% \*/
invert(100%)  /\* Полностью инвертированный цвет \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-invert |

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

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

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

* `<filter-function>`
* `blur()`
* `brightness()` (en-US)
* `contrast()` (en-US)
* `drop-shadow()` (en-US)
* `grayscale()` (en-US)
* `hue-rotate()` (en-US)
* `opacity()` (en-US)
* `saturate()` (en-US)
* `sepia()` (en-US)
The Web Open Font Format (WOFF)
===============================

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

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

* Learn more
* See full compatibility
* Report feedback
**WOFF**(**Web Open Font Format**) — формат шрифтов, разработанный Mozilla совместно с Type Supply, LettError, и др. По сути — это сжатая версия формата `sfnt`, используемого шрифтами TrueType, OpenType, и Open Font Format, но с возможностью добавления мета-данных и приватных структур данных (private-use data structures). Например, в формате предусмотрены поля для ввода информации о лицензии.

Преимущества использования WOFF:

1. The font data is compressed, so sites using WOFF will use less bandwidth and will load faster than if they used equivalent uncompressed TrueType or OpenType files.
2. Many font vendors that are unwilling to license their TrueType or OpenType format fonts for use on the web will license WOFF format fonts. This improves availability of fonts to site designers.
3. Both proprietary and free software browser vendors like the WOFF format, so it has the potential of becoming a truly universal, interoperable font format for the web, unlike other current font formats.

Существует две версии WOFF, отличающихся используемым алгоритмом сжатия: WOFF и WOFF2. В правиле `@font-face` они определяются в дескрипторе `format` как `'woff'` или `'woff2'` соответственно.

Использование WOFF
------------------

You can use the `@font-face` CSS property to use WOFF fonts for text in web content. It works exactly like OpenType and TrueType format fonts do, except it will likely let your content download more efficiently due to the addition of compression.

Tools for working with WOFF fonts
---------------------------------

* Tools for working with WOFF fonts are available. `sfnt2woff` and `woff2sfnt` convert between WOFF and OpenType.
Спецификации
------------

| Specification |
| --- |
| WOFF File Format 1.0 # OverallStructure |
| WOFF File Format 2.0 # FileStructure |

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

### css.at-rules.font-face.WOFF

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

### css.at-rules.font-face.WOFF\_2

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

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

* `@font-face`