Отладка CSS - Изучение веб-разработки

Отладка CSS
===========

* Назад
* Обзор: Building blocks
* Далее  (en-US)

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

| Необходимые знания: | Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.) |
| --- | --- |
| Задачи: | Изучить основы того, что такое DevTools и как выполнять простую инспекцию и редактирование CSS. |

Как получить доступ к DevTools браузера
---------------------------------------

Статья What are browser developer tools это обновлённое руководство объясняющее как получить доступ к инструментам разных браузеров и платформ. Хотя вы можете выбрать в основном разрабатывать в конкретном браузере и поэтому инструменты, включённые в этот браузер, будут вам знакомы больше всего, стоит знать, как получать доступ к инструментам и в других браузерах. Это поможет вам если вы наблюдаете разное отображение среди разных браузеров.

Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools. Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править Grid Layouts (en-US), Flexbox (en-US), и Shapes. Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений применённых к элементам на вашей странице и для выполнения изменений к ним в редакторе.

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

DOM vs View Source
------------------

То, что может сбить с толку новичков в DevTools, — это разница между тем, что вы видите когда просматриваете источник (en-US) веб-страницы или смотрите на HTML файл который поместили на сервер и то что вы видите на HTML панели DevTools. Хотя это выглядит примерно так же, как то, что вы видите через View Source, существуют некоторые отличия.

В визуализированном DOM браузер мог скорректировать некоторый плохо-написанный HTML за вас. Если вы неправильно закрыли элемент, например открывали `<h2>`, но закрыли `</h3>`, браузер поймёт, что вы хотели сделать и HTML в DOM будет правильно закрывать `<h2>` с `</h2>`. Браузер также нормализует весь HTML,а DOM также покажет любые изменения сделанные через JavaScript.

View Source же для сравнения — это просто исходный код HTML, хранящийся на сервере. HTML дерево в вашем DevTools показывает, что именно браузер отображает в любой момент времени, что даёт вам представление от том, что действительно происходит.

Инспекция применённого CSS
--------------------------

Выбирать элемент на вашей странице можно либо правым/ctrl-кликом по нему и выбрав *Inspect*, либо выбрав его из дерева HTML в левой панели DevTools. Попробуйте выбрать элемент с классом `box1`; это первый элемент на странице с блоком, ограниченным рамками вокруг него.

![The example page for this tutorial with DevTools open.](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting1.png)

Если вы посмотрите на Rules view справа от вашего HTML, вы должны увидеть свойства и значения CSS применённые к элементу. Вы увидите правила, напрямую применённые к классу `box1` и также CSS который наследуется блоком от предков, в этом случае от `<body>`. Это полезно в случае, если вы видите, что применяется какой-либо CSS, который вы не ожидали. Вполне возможно, что он наследуется от родительского элемента и вам необходимо добавить правило, чтобы переписать его в контексте этого элемента.

Также полезна возможность расширения (развёртывания) свойств коротких записей. В нашем примере используется короткая запись `margin`.

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

**Вы можете переключать значения в Rules view в положение включено или выключено если эта панель активна — если навести на неё курсор мыши, появятся флажки. Снимите флажок правила, например, border-radius, и CSS перестанет применяться.**

Вы можете использовать это чтобы делать сравнения по типу A/B, принимая решение если что-то выглядит лучше с применённым правилом или нет, а также это помогает в отладке — например если layout не в порядке и вы пытаетесь разобраться какое свойство является причиной проблемы.

Редактирование значений
-----------------------

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

**Выбрав `box1`, кликните на образчик (маленький цветной круг) который показывает цвет, применённый к границе. Откроется панель выбора цвета и сможете попробовать некоторые другие цвета; это действие обновится на странице в режиме реального времени.** **Аналогичным образом вы можете изменить ширину или стиль границ.**

![DevTools Styles Panel with a color picker open.](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting2-color-picker.png)

Добавление нового свойства
--------------------------

Используя DevTools вы можете добавлять новые свойства. Возможно, вы осознали, что не хотите, чтобы ваш блок наследовал размер шрифта элементов `<body>`, а хотите установить его собственный конкретный размер. Вы можете попробовать это в DevTools до того, как внесёте изменения в ваше CSS файл.

**Вы можете кликнуть по закрывающей фигурной скобке в правиле чтобы начать вводить новое объявление в нем, с этого момента вы можете начинать вводить новое свойство и DevTools покажет список автозаполнения подходящих свойств. Выбрав `font-size`, вводите значение, которое хотите попробовать. Вы также можете кликнуть на кнопку + чтобы добавить дополнительное правило с тем же селектором и добавить ваши новые правила туда.**

![The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting3-font-size.png)

**Примечание:** Также существуют другие полезные функции в Rules view, например объявления с не валидными значениями зачёркнуты. Вы можете узнать больше в Examine and edit CSS.

Понимание модели блоков
-----------------------

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

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

В этой панели одним из детальных свойств является свойство `box-sizing`, которое контролирует какую блочную модель использует элемент.

**Сравните два блока с классами `box1` и `box2`. Они оба имеют одинаковую ширину (400px) применённую к ним, однако `box1` визуально шире. В layout panel вы можете увидеть, что он использует `content-box`. Это значение, которое принимает размер, который вы даёте элементу и затем добавляет padding** **и ширину границ.**

Элемент с классом `box2` использует `border-box`, поэтому здесь padding и граница вычтены из размера, который вы дали элементу. Это означает, что пространство, занимаемое на странице блоком, соответствует указанному вами размеру — в нашем случае `width: 400px`.

![The Layout section of the DevTools](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting4-box-model.png)

**Примечание:** Узнать больше на Examining and Inspecting the Box Model.

Решение проблем специфичности
-----------------------------

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

В нашем примере два слова обёрнуты в элемент `<em>`. Один отображается оранжевым, а второй ярко-розовым. В CSS мы применили:

```css
em {
  color: hotpink;
  font-weight: bold;
}
```

Кроме того в таблице стилей есть правило с селектором `.special`:

```css
.special {
  color: orange;
}
```

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

**Проведите инспекцию `<em>` с классом `.special` и DevTools покажет вам что оранжевый это цвет который применяется, а также отобразит вам свойство `color` применённое к em зачёркнутым. Теперь вы можете видеть, что класс переопределяет селектор элемента.**

![Selecting an em and looking at DevTools to see what is over-riding the color.](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting5-specificity.png)

Узнайте больше о Firefox DevTools
---------------------------------

На MDN имеется много информации о Firefox DevTools. Взгляните на основной раздел DevTools, а больше деталей о вещах которые коротко рассмотрели в этом уроке смотрите The How To Guides.

Отладка проблем в CSS
---------------------

DevTools может помочь при решении проблем CSS, итак, когда вы окажетесь в ситуации, где CSS ведёт себя не так, как вы ожидаете, как же вам следует решать эту проблему? Следующие шаги должны помочь.

### Сделайте шаг назад

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

### Валидны ли ваши HTML и CSS?

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

* CSS Validator
* HTML validator
### Поддерживаются ли свойство и значение браузером в котором вы тестируете?

Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не "сломается", кроме того, что тот CSS не будет применён. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение "подсветки" (subgrid) `grid-template-columns`.

![Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS/no-support.png)

Вы также можете смотреть таблицы совместимости браузеров в конце всех страниц свойств MDN. Они показывают, что браузер поддерживает это свойство, часто "ломается", если есть поддержка только для какого-то использования свойства, и нет для других. Таблица ниже показывает данные совместимости свойства `shape-outside` (en-US).

### Не переопределяется ли ваш CSS чем-нибудь ещё?

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

### Сделайте сокращённый контрольный пример проблемы

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

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

Создание сокращённого контрольного примера:

1. Если ваша разметка генерируется динамически — например через CMS — сделайте статичную версию вывода, которая показывает проблему. Сайты обмена кодами как CodePen являются полезными для размещения сокращённых контрольных примеров, так как они доступны онлайн, и вы легко можете поделиться с коллегами. Вы можете начать просматривать страницу во View Source и скопировать HTML в CodePen, затем взять релевантный CSS и JavaScript и включить их тоже. После этого вы можете проверить очевидна ли проблема.
2. Если удаление JavaScript не устраняет проблему, то не включайте JavaScript. Если же удаление JavaScript *устраняет* проблему, тогда удалите столько JavaScript, сколько сможете, оставляя всё что вызывает проблему.
3. Удалите весь HTML который не влияет на проблему. Удалите компоненты или даже главные элементы макета. Опять же постарайтесь добиться наименьшего количества кода, который все ещё показывает проблему.
4. Удалите весь CSS который не влияет на проблему.

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

If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.

In the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on Mozilla's bugzilla site).

As you become more experienced with CSS, you will find that you get faster at figuring out issues. However even the most experienced of us sometimes find ourselves wondering what on earth is going on. Taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found.

* Назад
* Обзор: Building blocks
* Далее  (en-US)
In this module
--------------

1. Cascade and inheritance
2. CSS selectors
    * Type, class, and ID selectors
    * Attribute selectors
    * Pseudo-classes and pseudo-elements
    * Combinators
3. The box model
4. Backgrounds and borders
5. Handling different text directions
6. Overflowing content
7. Values and units
8. Sizing items in CSS
9. Images, media, and form elements
10. Styling tables
11. Debugging CSS
12. Organizing your CSS (en-US)


Элементы изображений, медиа и форм - Изучение веб-разработки

Элементы изображений, медиа и форм
==================================

* Назад
* Обзор: Building blocks
* Далее

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

| Prerequisites: | Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.) |
| --- | --- |
| Objective: | To understand the way that some elements behave unusually when styled with CSS. |

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

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

Конкретные замещаемые элементы, такие как изображения и видео, можно также описать, как элементы имеющие **соотношение сторон**. Это значит, что такой элемент имеет размер как по горизонтали (x) так и по вертикали (y) и будет отображаться используя "родные" размеры файла по умолчанию.

Размер изображений (калибровка)
-------------------------------

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

В примере ниже у нас два блока, оба имеют размер по 200px:

* Один содержит изображение, которое 200px — оно меньше, чем блок и не растягивается что бы заполнить его.
* Второй больше 200px и перекрывает блок.

Так что же мы можем сделать с проблемой перекрывания?

Как мы учили в нашем предыдущем уроке, распространённая техника — это сделать `max-width` изображения - 100%. Это позволит уменьшить размер изображения по отношению к блоку, но не увеличит его. Такой метод будет работать и с другими замещаемыми элементами такими как `<video>` или `<iframe>` (en-US).

**Попробуйте добавить `max-width: 100%` к элементу `<img>` в примере выше. Вы увидите, что меньшее изображение останется неизмененным, а большее изображение станет меньше, чтобы заполнить блок.**

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

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

Ниже мы использовали значение `cover`, которое уменьшает изображение, сохраняя соотношение сторон так, что он аккуратно заполняет блок. Поскольку соотношения сторон сохраняются, некоторые части изображения будут обрезаны блоком.

Если мы используем `contain` в качестве значения, изображение будет уменьшаться до тех пор, пока не станет достаточно маленьким чтобы заполнить блок. Это приведёт к "почтовой упаковке", если оно не будет иметь такого же соотношения сторон, как блок.

Вы также можете попробовать значение `fill`, которое будет заполнять блок, но при этом не сохранять соотношение сторон.

Замещаемые элементы в вёрстке
-----------------------------

При использовании различных методов вёрстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.

Вы можете увидеть, как это происходит в примере ниже, где мы имеем grid-контейнер из двух столбцов и двух строк, который содержит 4 объекта. Все `<div>` элементы имеют цвет фона и растягиваются чтобы заполнить строки и столбцы. Однако, изображение не растягивается.

Если вы изучаете эти уроки по порядку, тогда вы, возможно, ещё не рассматривали layout. Просто держите в уме, что замещаемые элементы, становясь частью grid- или flex-разметки, ведут себя иначе по умолчанию, главным образом, чтобы избежать их странного растяжения по разметке.

Для того чтобы заставить изображение растянуться чтобы заполнить grid-ячейку, вы должны сделать что-то наподобие следующего:

```css
img {
  width: 100%;
  height: 100%;
}
```

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

Элементы форм
-------------

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

Многие элементы управления форм добавляются на вашу страницу с помощью элемента `<input>` — он определяет простые поля формы, такие как ввод текста, и более сложные поля, добавленные в HTML5, такие как средства выбора цвета и даты. Существуют некоторые дополнительные элементы, такие как `<textarea>` (en-US) для ввода многострочного текста, а также элементы которые содержали части маркировки форм, такие как `<fieldset>` и `<legend>`.

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

### Стилизация элементов ввода текста

Элементы, позволяющие вводить текст, такие как `<input type="text">`, конкретные типы вроде `<input type="email">`, и элемент `<textarea>`, являются довольно простыми в стилизации и как правило ведут себя также, как и другие блоки на вашей странице. Однако, стилизация по умолчанию таких элементов будет отличаться в зависимости от операционной системы и браузера которые использует пользователь, посещая сайт.

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

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

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

### Наследование и элементы форм

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

```css
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}
```

### Элементы форм и box-sizing

В разных браузерах элементы формы используют разные правила определения размеров блоков для разных виджетов. вы изучали свойство `box-sizing` в нашем уроке Блоки в CSS и можете использовать эти знания при стилизации форм для обеспечения единообразия при настройке ширины и высоты элементов форм.

Для единообразия рекомендуется устанавливать margin и padding на `0` для всех элементов, а затем добавлять их (margin и padding) при стилизации отдельных элементов.

```css
button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
```

### Другие полезные настройки

В дополнение к правилам отмеченных выше, вы должны также установить `overflow: auto` для `<textarea>` чтобы IE не отображал полосу прокрутки, когда в этом нет необходимости:

```css
textarea {
  overflow: auto;
}
```

### Собираем все вместе в "перезагрузку"

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

```css
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

textarea {
  overflow: auto;
}
```

**Примечание:** Normalizing stylesheets are used by many developers to create a set of baseline styles to use on all projects. Typically these do similar things to those described above, making sure that anything different across browsers is set to a consistent default before you do your own work on the CSS. They are not as important as they once were, as browsers are typically more consistent than in the past. However if you want to take a look at one example, check out Normalize.css, which is a very popular stylesheet used as a base by many projects.

Для дополнительной информации по стилизации форм, посмотрите две статьи в разделе HTML этого руководства.

* Styling web forms
* Advanced form styling (en-US)
Summary
-------

This lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in CSS. In the next article we'll look over a few tips you'll find useful when you have to style HTML tables.

* Назад
* Обзор: Building blocks
* Далее
In this module
--------------

1. Cascade and inheritance
2. CSS selectors
    * Type, class, and ID selectors
    * Attribute selectors
    * Pseudo-classes and pseudo-elements
    * Combinators
3. The box model
4. Backgrounds and borders
5. Handling different text directions
6. Overflowing content
7. Values and units
8. Sizing items in CSS
9. Images, media, and form elements
10. Styling tables
11. Debugging CSS
12. Organizing your CSS (en-US)


Проверьте ваши навыки: Каскад - Изучение веб-разработки

Проверьте ваши навыки: Каскад
=============================

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

**Примечание:** вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как CodePen, jsFiddle или Glitch, которые можно использовать для работы над заданием, предварительно загрузив в них код.

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

Задание 1
---------

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

![Barely visible yellow links on a white background.](/ru/docs/Learn/CSS/Building_blocks/Cascade_tasks/mdn-cascade.png)

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

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

Оценка или дальнейшая помощь
----------------------------

Вы можете упражняться на этих примерах в интерактивных редакторах, упомянутых выше.

Если вы хотите, чтобы вашу работу оценили, или вы зашли в тупик и хотите попросить о помощи:

1. Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, CodePen, jsFiddle или Glitch. Вы можете сами написать код или использовать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.
2. Напишите сообщение с просьбой оценить и/или помочь на форуме в категории "Обучение": MDN Discourse forum Learning category. Ваше сообщение должно включать:
    * Описательный заголовок, например, "Необходима оценка для теста 1 Каскад" ("Assessment wanted for Cascade skill test 1").
    * Подробности того, что вы уже попытались сделать, и чего бы вы хотели от нас, т.е. или вы в тупике и нуждаетесь в помощи, или хотите оценки.
    * Ссылка на пример, который вы просите оценить или который вызвал затруднения, в онлайн-редакторе с возможностью совместного редактирования (как указано в шаге 1 выше). Это принятая практика погружения в вопрос — очень трудно помочь кому-либо решить проблему кодирования, если вы не видите его код.
    * Ссылка на страницу с заданием, чтобы мы могли найти вопрос, на который вы затрудняетесь ответить.


Значения свойств CSS - Изучение веб-разработки

Значения свойств CSS
====================

* Назад
* Обзор: Building blocks
* Далее

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

| Prerequisites: | Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.) |
| --- | --- |
| Objective: | To learn about the different types of values and units used in CSS properties. |

Что такое значение CSS?
-----------------------

В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например `<color>` или `<length>`. Если вы видите значение `<color>` как действительное для определённого свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице `<color>`.

**Примечание:** You'll also see CSS values referred to as *data types*. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.

**Примечание:** Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the `color` (en-US) property, versus the <color> data type). You might get confused between CSS data types and HTML elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts.

В следующем примере мы установили цвет нашего заголовка используя ключевое слово и фон используя функцию `rgb()`:

```css
h1 {
  color: black;
  background-color: rgb(197, 93, 161);
}
```

Значение в CSS это путь определения коллекции допустимых под-значений. То есть если вы видите `<color>` как применённый, то вам не надо озадачиваться какой из разных типов значения цвета может быть использован — ключевое слово, hex значение, функция `rgb()` и т.д. Вы можете воспользоваться *любым* доступным значением `<color>` при условии, что они поддерживаются вашим браузером. Страницы для всех значений на MDN дадут вам информацию о поддержке браузеров. Например, если вы посмотрите на страницу `<color>` то вы увидите раздел совместимости браузеров в котором перечислены различные типы значений цвета и их поддержка.

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

Числа, длины и проценты
-----------------------

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

| Тип данных | Описание |
| --- | --- |
| `<integer>` | `<integer>` (целое число) — целое число такое как `1024` или `-55`. |
| `<number>` | `<number>` (число) представляет десятичное число — оно может иметь, а может и не иметь десятичную точку с факториальным компонентом, например `0.255`, `128`, или `-1.2`. |
| `<dimension>` | `<dimension>` (измерение) это — `<number>` (число) с единицей измерения, прикреплённой к нему, например `45deg`, `5s`, или `10px`. `<dimension>` — это зонт категорий, включающих в себя типы `<length>`, `<angle>`, `<time>`, и `<resolution>` (en-US) (длина, угол, время и разрешение). |
| `<percentage>` | `<percentage>` (проценты) представляют собой долю некоторого другого значения, например `50%`. Процентные значения всегда относительны по отношению к другому количеству, например длина элемента относительна к длине её родительского элемента. |

### Длины

Числовой тип, с которым вы будете сталкиваться чаще всего это `<length>` (длина), например `10px` (пиксели) или `30em`. Существует два типа длин используемых в CSS — относительные и абсолютные. Важно знать разницу для того, чтобы понимать, насколько большими станут вещи.

#### Абсолютные единицы длины

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

| Единицы | Название | Эквивалент |
| --- | --- | --- |
| `cm` | Centimeters/Сантиметры | 1cm = 96px/2.54 |
| `mm` | Millimeters/Миллиметры | 1mm = 1/10th of 1cm |
| `Q` | Quarter-millimeters/Четверть-мм | 1Q = 1/40th of 1cm |
| `in` | Inches/Дюймы | 1in = 2.54cm = 96px |
| `pc` | Picas/Пики | 1pc = 1/6th of 1in |
| `pt` | Points/Точки | 1pt = 1/72th of 1in |
| `px` | Pixels/Пиксели | 1px = 1/96th of 1in |

Большинство из этих значений больше полезны при использовании печати, чем для вывода на экран. Например, мы обычно не используем `cm` (сантиметры) на экране. Единственное значение которое вы в основном будете использовать это `px` (пиксели).

#### Единицы относительной длины

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

| Единица | Относительна к |
| --- | --- |
| `em` | Размер шрифта родительского элемента. |
| `ex` | x-высота шрифта элемента. |
| `ch` | Предварительная мера (ширина) глифа "0" шрифта элемента. |
| `rem` | Размер шрифта корневого элемента. |
| `lh` | Высота строки элемента. |
| `vw` | 1% от ширины окна просмотра. |
| `vh` | 1% от высоты окна просмотра. |
| `vmin` | 1% от меньшего измерения ширины окна просмотра. |
| `vmax` | 1% от большего измерения ширины окна просмотра. |

#### Изучение на примере

В примере ниже вы можете увидеть, как некоторые относительные и абсолютные единицы длин ведут себя. Первый блок имеет `width` (ширину) установленную в пикселях. Как абсолютная единица эта ширина будет оставаться такой же неважно что ещё измениться.

Второй блок имеет ширину, установленную в единицах `vw` (ширина окна просмотра). Это значение относительно к ширине окна просмотра и таким образом 10vw это 10 процентов от ширины окна просмотра. Если вы измените ширину окна вашего браузера, размер блока должен измениться, однако этот пример встроен в страницу с использованием `<iframe>` (en-US), поэтому это не сработает. Для того чтобы увидеть это в действии вы должны открыть этот пример в отдельной вкладке браузера.

Третий блок использует единицы `em`. Они относительны к размеру шрифта. Я установил размер шрифта `1em` для содержимого `<div>`, который имеет класс `.wrapper`. Измените это значение на `1.5em` и вы увидите что, размер шрифта всех этих элементов увеличится, но только последний объект станет шире, поскольку его ширина относительна к тому размера шрифта.

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

#### em и rem

`em` и `rem` — две относительные длины, с которыми вы вероятное всего сталкиваетесь чаще при разметке чего-либо от блоков до текста. Стоит понимать как они работают, понимать различия между ними, особенно когда вы начинаете переходить к более сложным темам как стилизация текста или разметка CSS. Приведённый ниже пример показывает это.

HTML это набор вложенных списков — у нас имеется три списка в общей сложности и оба примера имеют одинаковый HTML. Единственное различие в том, что первый имеет класс *ems,* а второй класс *rems*.

Чтобы начать, мы установили 16px для размера шрифта элемента `<html>`.

**Повторим, единица em означает "размер шрифта родительского элемента"**. Элементы `<li>` внутри `<ul>` с классом `ems` получают свои размеры от своего родителя. Так, каждый последующий уровень вложения становится прогрессивно больше, так как каждый имеет свой размер шрифта установленный на `1.3em` — 1.3 раза от размера шрифта родителя.

**Повторим, единица rem означает "размер шрифта корневого элемента"** (rem значит "root em". (root - корень)). Элементы `<li>` внутри `<ul>` с классом `rems` получают свои размеры от корневого элемента (`<html>`). Это значит, что каждый последующий уровень вложения не продолжает увеличиваться.

Однако, если вы измените `font-size` (размер шрифта) `<html>` в CSS, вы увидите что все остальное изменится относительно ему — и `rem`- и `em`-размеры текста

### Проценты

Во многих случаях проценты обрабатываются таким же образом, как и длина. С процентами фишка в том, что они всегда устанавливаются относительно некоторого другого значения. Например, если вы установите `font-size` элемента как проценты, то это будет процент от `font-size` родительского элемента. Если вы используете процент для значения `width` (ширина), то это будет процент от `width` родителя.

В примере ниже два блока с размерами в процентах и два с размерами в пикселях имеющих одинаковые имена классов. Оба набора имеют ширину 200px и 40% соответственно.

Различие в том, что второй набор блоков находится внутри обёртки которая имеет ширину 400 пикселей. Второй блок шириной в 200px имеет ту же ширину что и первый, но второй 40 процентный блок теперь имеет 40% от 400px — намного уже чем первый.

**Попробуйте изменить ширину обёртки (.wrapper) или процентное значение чтобы увидеть, как это работает.**

В следующем примере размер шрифта установлен в процентах. Каждый `<li>` имеет `font-size` 80%, поэтому элементы вложенного списка становятся прогрессивно меньше так как они наследуют свои размеры от родителя.

Обратите внимание, в то время как многие значения принимают как длину, так и проценты, существуют те, которые принимают только длину. Вы можете посмотреть какие значения допустимы на справочной странице свойств MDN. Если допустимые значения включают `<length-percentage>` (en-US), тогда вы можете использовать и длину, и проценты. Если же допустимые значения включают только `<length>`, то использование процентов невозможно.

### Числа

Некоторые значения принимают числа без каких-либо единиц измерения. Примером свойства принимающего числа без единиц измерения может служить свойство `opacity`, которое контролирует мутность элемента (настолько он прозрачен). Это свойство принимает числа между `0` (полностью прозрачное) и `1` (полностью мутное).

**В примере ниже, попробуйте изменить значение** **`opacity`** **на различные десятичные значения между** **`0`** **и** **`1`** **и посмотрите, как блок и его содержимое становится более и/или менее мутными.**

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

Цвет
----

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

Стандартная система цветов доступная в современных компьютерах — это 24-битная система, которая позволяет отображать около 16.7 миллионов отдельных цветов через комбинацию различных красных, зелёных и синих каналов с 256 различными значениями каждого канала (256 x 256 x 256 = 16,777,216). Давайте взглянем на некоторые способы, с помощью которых мы можем определять цвет в CSS.

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

### Ключевые слова цвета

Довольно часто в примерах как здесь, так и на других страницах в MDN вы будете видеть использование ключевых слов цвета, поскольку это простой и понятный способ определения цвета. Существует определённое количество этих ключевых слов и некоторые их них имеют довольно занимательные имена! Полный список вы можете посмотреть на странице значений `<color>` .

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

### Шестнадцатеричные RGB значения

Следующий тип значения цвета, с которым вы сталкиваетесь вероятнее всего — это шестнадцатеричные коды. Каждое hex-значение состоит из символа решётки (#) за которым следуют 6 шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (представляющая 15) — то есть `0123456789abcdef`. Каждая пара значений представляет один из каналов — красного, зелёного или синего цветов — и позволяет нам определять любой из 256 доступных значений для каждого (16 x 16 = 256).

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

**И снова, попробуйте изменить значения, чтобы посмотреть, как варьируют цвета.**

### RGB и RGBA значения

Третья схема, о которой мы здесь поговорим это RGB. Значения RGB это функция — `rgb()` — которой даётся три параметра представляющих каналы красного, зелёного и синего значений цветов, во многом так же, как hex-значения. Отличие с RGB является то, что каждый канал представлен не двумя hex-цифрами, а десятичным числом между 0 и 255 — что отчасти проще в понимании.

Давайте перепишем наш последний пример используя RGB цвета:

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

**Примечание:** Настройка альфа канала в цвете имеет одно ключевое различие в использовании свойства `opacity` которое мы рассматривали ранее. когда вы используете мутность вы делаете элемент и все внутри него мутным, тогда как при использовании цвета RGBA вы делаете мутным только тот цвет который вы специфицируете.

In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.

**In this example, try changing the alpha channel values to see how it affects the color output.**

**Примечание:** At some point modern browsers were updated so that `rgba()` and `rgb()`, and `hsl()` and `hsla()` (see below), became pure aliases of each other and started to behave exactly the same. So for example both `rgba()` and `rgb()` accept colors with and without alpha channel values. Try changing the above example's `rgba()` functions to `rgb()` and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.

### HSL and HSLA values

Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the `hsl()` function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:

* **Hue**: The base shade of the color. This takes a value between 0 and 360, representing the angles round a color wheel.
* **Saturation**: How saturated is the color? This takes a value from 0–100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation
* **Lightness**: How light or bright is the color? This takes a value from 0–100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)

We can update the RGB example to use HSL colors like this:

Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I've demonstrated this below by changing my RGBA example to use HSLA colors.

You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!

Images
------

The `<image>` (en-US) data type is used wherever an image is a valid value. This can be an actual image file pointed to via a `url()` function, or a gradient.

In the example below we have demonstrated an image and a gradient in use as a value for the CSS `background-image` property.

**Примечание:** there are some other possible values for `<image>`, however these are newer and currently have poor browser support. Check out the page on MDN for the `<image>` (en-US) data type if you want to read about them.

Position
--------

The `<position>` (en-US) data type represents a set of 2D coordinates, used to position an item such as a background image (via `background-position`). It can take keywords such as `top`, `left`, `bottom`, `right`, and `center` to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.

A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to `center`.

In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.

**Play around with these values to see how you can push the image around.**

Strings and identifiers
-----------------------

Throughout the examples above, we've seen places where keywords are used as a value (for example `<color>` keywords like `red`, `black`, `rebeccapurple`, and `goldenrod`). These keywords are more accurately described as *identifiers*, a special value that CSS understands. As such they are not quoted — they are not treated as strings.

There are places where you use strings in CSS, for example when specifying generated content. In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.

Functions
---------

The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section — `rgb()`, `hsl()`, etc. The value used to return an image from a file — `url()` — is also a function.

A value that behaves more like something you might find in a traditional programming language is the `calc()` CSS function. This function gives you the ability to do simple calculations inside your CSS. It's particularly useful if you want to work out values that you can't define when writing the CSS for your project, and need the browser to work out for you at runtime.

For example, below we are using `calc()` to make the box `20% + 100px` wide. The 20% is calculated from the width of the parent container `.wrapper` and so will change if that width changes. We can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use `calc()` to tell the browser to do it for us.

Summary
-------

This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units (en-US) reference page; you will encounter many of these in use as you work through these lessons.

The key thing to remember is that each property has a defined list of allowed values, and each value has a definition explaining what the sub-values are. You can then look up the specifics here on MDN.

For example, understanding that `<image>` (en-US) also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!

* Назад
* Обзор: Building blocks
* Далее
In this module
--------------

1. Cascade and inheritance
2. CSS selectors
    * Type, class, and ID selectors
    * Attribute selectors
    * Pseudo-classes and pseudo-elements
    * Combinators
3. The box model
4. Backgrounds and borders
5. Handling different text directions
6. Overflowing content
7. Values and units
8. Sizing items in CSS
9. Images, media, and form elements
10. Styling tables
11. Debugging CSS
12. Organizing your CSS (en-US)


Фон и границы - Изучение веб-разработки

Фон и границы
=============

* Назад
* Обзор: Building blocks
* Далее

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

| Необходимые умения: | Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML) и представление о том, как работает CSS (смотрите Введение в CSS). |
| --- | --- |
| Цель: | Научиться стилизации фона и границ объектов. |

Стилизация фона в CSS
---------------------

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

```css
.box {
  background:
    linear-gradient(
        105deg,
        rgba(255, 255, 255, 0.2) 39%,
        rgba(51, 56, 57, 1) 96%
      ) center center / 400px 200px no-repeat,
    url(big-star.png) center no-repeat,
    rebeccapurple;
}
```

Мы вернёмся к тому, как работает сокращение позже, а пока давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства `background`.

### Фоновый цвет

Свойство `background-color` определяет цвет фона для любого элемента в CSS. Свойство принимает любой допустимый цвет `<color>`. `background-color` распространяется на сам контент и отступы от него (padding).

В приведённом ниже примере мы использовали различные значения цвета, чтобы добавить цвет фона к блоку, заголовку и элементу `<span>`.

**Поиграйте с ними, используя любое доступное значение** **<color>.**

### Фоновое изображение

Свойство `background-image` позволяет отображать изображение в качестве фона элемента. В приведённом ниже примере у нас есть два блока — в одном фоновое изображение больше, чем размеры блока, а в другом - маленькое изображение звезды.

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

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

#### Свойство background-repeat

Свойство `background-repeat` используется для управления повторениями фонового изображения. Доступные значения:

* `no-repeat` — останавливает повторение фонового изображения во всех направлениях.
* `repeat-x` — повторение фонового изображения по горизонтали.
* `repeat-y` — повторение фонового изображения по вертикали.
* `repeat` — повторение фонового изображения в обоих направлениях. Установлено по умолчанию.

**Попробуйте эти значения в примере ниже. Мы установили значение `no-repeat`, поэтому вы видите только одну звезду. Попробуйте разные значения -** **`repeat-x`** **и** **`repeat-y`** **—** **чтобы увидеть, какие эффекты они оказывают.**

#### Изменение размеров фонового изображения

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

Вы также можете использовать ключевые слова:

* `cover` — браузер сделает изображение достаточно большим, чтобы оно полностью заполнило блок, сохраняя при этом соотношение сторон. В этом случае часть изображения, скорее всего, окажется за пределами блока.
* `contain` — браузер сделает изображение нужного размера, чтобы поместиться в блоке. В этом случае могут появиться пробелы с обеих сторон или сверху и снизу изображения, если соотношение сторон изображения отличается от соотношения сторон блока.

Ниже я применил значения длины к размерам изображения. Глядите, как это исказило изображение.

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

Попробуйте следующее.

* Измените значения длины, используемые для изменения размера фона.
* Измените значение длины на `background-size: cover` или `background-size: contain`.
* Если ваше изображение меньше размеров блока, вы можете изменить значение свойства `background-repeat`, чтобы повторить изображение.

#### Позиционирование фонового изображения

Свойство `background-position` позволяет вам изменять позицию, в которой фоновое изображение появляется в блоке. При этом используется система координат, в которой *левый верхний угол* блока равен `(0,0)`, а сам блок располагается вдоль горизонтальной (`x`) и вертикальной (`y`) осей.

**Примечание:** По умолчанию значение `background-position` равно `(0,0)`.

Обычно свойство `background-position` задают в виде двух последовательных значений — значение по горизонтали, за которым следует значение по вертикали.

Вы можете использовать такие ключевые слова, как `top` и `right` (с остальными можете ознакомиться на странице `background-position`):

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
}
```

Допустимы значения длины и процентные:

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
}
```

Вы также можете смешивать значения ключевых слов с длинами или процентами, например:

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px;
}
```

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

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}
```

**Используйте приведённый ниже пример, чтобы поэкспериментировать с этими значениями и переместить звезду внутри блока.**

**Примечание:** `background-position` — это сокращение для `background-position-x` и `background-position-y` (en-US), которые позволяют вам устанавливать различные значения положения по оси индивидуально.

### Градиент в качестве фона

Градиент - при использовании для фона - действует так же, как изображение, и поэтому задаётся свойством `background-image`.

Вы можете прочитать больше о различных типах градиентов и о том, что вы можете с ними делать на странице MDN для типа данных `<gradient>` (en-US). Поиграть с градиентами вы можете используя один из многих генераторов градиентов CSS, доступных в Интернете, например этот. Вы можете создать градиент, а затем скопировать и вставить его в свой код.

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

### Несколько фоновых изображений

Также возможно создавать несколько фоновых изображений — просто разделив значения свойства `background-image` запятыми.

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

**Примечание:** Градиенты можно легко смешивать с обычными фоновыми изображениями.

Другие свойства `background- *` также могут иметь значения, разделённые запятыми, как и `background-image`:

```css
background-image: url(image1.png), url(image2.png), url(image3.png),
  url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position:
  10px 20px,
  top right;
```

Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах. Выше, например, значение `background-repeat` для `image1` будет `no-repeat`. Однако, что происходит, когда разные свойства имеют разное количество значений? Ответ заключается в том, что меньшее количество значений будет циклически повторяться - в приведённом выше примере есть четыре фоновых изображения, и только два значения `background-position`. Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться - `image3` будет присвоено первое значение позиции, а `image4` будет присвоено второе значение позиции.

**Поиграем? В приведённом ниже примере я добавил два изображения. Чтобы продемонстрировать порядок наложения, попробуйте поменять порядок фоновых изображений в списке. Или поиграйте с другими свойствами, чтобы изменить положение, размер или повторяемость значений.**

### Закрепление фона

Другая опция, которую можно применить к фону, - это указать, как он будет прокручиваться при прокрутке содержимого. Это контролируется с помощью свойства `background-attachment`, которое может принимать следующие значения:

* `scroll`: Заставляет элементы фона прокручиваться при прокрутке страницы. Если содержимое элемента прокручивается, фон не перемещается. Фактически, фон фиксируется в той же позиции на странице, поэтому он прокручивается по мере прокрутки страницы.
* `fixed`: Фиксирует элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента. Фон всегда будет оставаться на одном и том же месте на экране.
* `local`: Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение `scroll` довольно запутанно и во многих случаях действительно не делает то, что вы хотите. Значение `local` фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним.

Свойство `background-attachment` действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на background-attachment.html (также смотри исходный код здесь).

### Использование сокращённого свойства background

Как я упоминал в начале этого урока, вы часто будете видеть фон, заданный с помощью свойства `background`. Это сокращение позволяет вам одновременно устанавливать все различные свойства.

При использовании нескольких фонов необходимо указать все свойства для первого фона, а затем добавить следующий фон после запятой. В приведённом ниже примере у нас есть градиент с размером и положением, затем фоновое изображение со значением `no-repeat` и положением, затем цвет.

При записи сокращённых значений фонового изображения необходимо соблюдать несколько правил, например:

* `background-color` можно указывать только после последней запятой.
* Значения `background-size` могут быть включены только сразу после `background-position`, разделённые символом '/', например: `center/80%`.

Посетите страницу MDN свойства `background`, чтобы увидеть полное описание.

### Доступность просмотра

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

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

Границы
-------

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

Мы можем установить границу для всех четырёх сторон блока с помощью `border`:

```css
.box {
  border: 1px solid black;
}
```

Или мы можем нацеливаться на один край блока, например:

```css
.box {
  border-top: 1px solid black;
}
```

Индивидуальные свойства этих сокращений будут следующими:

```css
.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
```

И более детально:

```css
.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}
```

**Примечание:** Свойства границ top, right, bottom, и left также имеют сопоставленные *логические* свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается работы с разными направлениями текста.

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

### Закруглённые углы

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

Например, чтобы сделать все четыре угла блока радиусом 10px:

```css
.box {
  border-radius: 10px;
}
```

Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:

```css
.box {
  border-top-right-radius: 1em 10%;
}
```

В примере ниже мы установили все четыре угла, а затем изменили значения для верхнего правого угла, чтобы сделать его другим. Вы можете поиграть со значениями, чтобы изменить углы. Взгляните на страницу свойств для `border-radius` чтобы увидеть доступные варианты синтаксиса.

Упражнение с границами и фоном
------------------------------

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

1. Задайте рамку равную 5px black solid, с закруглёнными углами 10px.
2. Добавить фоновое изображение (используйте URL `balloons.jpg`) и установите размер таким образом, чтобы он покрыл весь блок.
3. Задайте для `<h2>` полупрозрачный чёрный цвет фона и сделайте текст белым.

**Примечание:** вы можете посмотреть решение здесь — но сначала попробуйте сделать это сами!

Итоги
-----

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

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

* Назад
* Обзор: Building blocks
* Далее


Узконаправленные функции CSS - Изучение веб-разработки

Узконаправленные функции CSS
============================

В этой статье описаны некоторые хитрости, которые познакомят вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.

| Необходимые знания: | Основы HTML (изучите Введение в HTML) и CSS (статья Введение в CSS). |
| --- | --- |
| Задача: | Понять принцип работы узко используемых эффектов в современных браузерах. |

Блок-тень
---------

`box-shadow` позволяет добавить одну и более тень к контейнеру. Как и `text-shadow`, `box-shadows` отлично поддерживаются браузерами, включая IE9+ и Edge. У пользователей ранних версий IE будет просто копия без тени, поэтому убедитесь, что контент с дизайном разборчив и без теней.

Вы можете найти примеры из стати на box-shadow.html (или в исходном коде).

### Обычная тень

Для начала взглянем на простой пример:

```html
<article class="simple">
  <p>
    <strong>Предупреждение</strong>: Температура ракетного двигателя достигла
    критической отметки.
  </p>
</article>
```

А теперь CSS:

```css
p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.25)
  );
}

.simple {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
}
```

В результате получится вот это:

Как видите, у нас четыре значения в свойстве `box-shadow`:

1. Первое значение — **смещение по горизонтали** — расстояние, на которое смещена тень вправо (если значение отрицательное, то влево).
2. **Смещение по вертикали** — расстояние, на которое смещена тень вниз (или вверх, если значение отрицательное).
3. Третье значение — это **радиус размытия** — уровень размытия тени.
4. Значение цвета — это **основной цвет** тени.

Вы можете использовать абсолютно любые значения и цвета, если это необходимо.

### Несколько теней

Вы можете определить несколько блок-теней, разделяя их запятыми при объявлении `box-shadow`:
```

<article class="multiple">
  <p>
    <strong>Предупреждение</strong>: Температура ракетного двигателя достигла
    критической отметки.
  </p>
</article>
```

```css
p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.25)
  );
}

.multiple {
  box-shadow:
    1px 1px 1px black,
    2px 2px 1px black,
    3px 3px 1px red,
    4px 4px 1px red,
    5px 5px 1px black,
    6px 6px 1px black;
}
```

В итоге мы получим:

Мы сделали контейнер с несколькими ступенчатыми цветными тенями, но вы можете делать, как считаете то нужным, например, чтобы добавить реалистичности, опираясь на какие-нибудь источники света.

### Другие опции блок-теней

В отличие от `text-shadow`, у свойства `box-shadow` есть значение `inset` — оно добавляет внутреннюю тень. Поясним это на примере.

Для этого примера используем другой HTML-код:

```html
<button>Нажми на меня!</button>
```

```css
button {
  width: 150px;
  font-size: 1.1rem;
  line-height: 2;
  border-radius: 10px;
  border: none;
  background-image: linear-gradient(to bottom right, #777, #ddd);
  box-shadow:
    1px 1px 1px black,
    inset 2px 3px 5px rgba(0, 0, 0, 0.3),
    inset -2px -3px 5px rgba(255, 255, 255, 0.5);
}

button:focus,
button:hover {
  background-image: linear-gradient(to bottom right, #888, #eee);
}

button:active {
  box-shadow:
    inset 2px 2px 1px black,
    inset 2px 3px 5px rgba(0, 0, 0, 0.3),
    inset -2px -3px 5px rgba(255, 255, 255, 0.5);
}
```

Получим:

Мы стилизовали кнопку с помощью состояний *focus*, *hover* и *active*. Для кнопки по умолчанию установлены несколько простых чёрных теней плюс пара внутренних теней в противоположном углу кнопки для эстетичности.

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

**Примечание:** Есть ещё одно значение `box-shadow`, которое устанавливается перед значением свойства, — **радиус разброса**. При его использовании тень становится больше оригинального контейнера. Свойство не так часто используют, но оно стоит упоминания.

Фильтры
-------

Замечательное свойство, благодаря которому ваш дизайн станет интереснее, — это свойство `filter`. Это что-то вроде фильтров Photoshop, но в CSS.

В примере ниже мы использовали два значения этого свойства: первое — `blur()` — определяет, насколько изображение размыто.

Второе значение — `grayscale()`; оно определяет, насколько изображение насыщено.

**Попробуйте изменить значения в примере, чтобы посмотреть на изменения. Вы можете менять значения на другие. Попробуйте добавить `contrast(200%)`, `invert(100%)` или `hue-rotate(20deg)` в примере ниже. Прочтите статью `filter`, чтобы узнать о многих других значениях этого свойства.**

Вы можете добавлять фильтры к любым объектам. Некоторые значения свойства работают почти так же, как CSS-свойства, например, `drop-shadow()` даёт эффект, схожий с `box-shadow` или `text-shadow`.

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

Режимы смешивания
-----------------

Режимы смешивания CSS позволяют определить смешивание при наложении двух элементов. Смешивание очень знакомо пользователям редакторов вроде Photoshop.

В режимах смешивания CSS два значения:

* `background-blend-mode`, которое смешивает цвет фона и цвета отдельного элемента.
* `mix-blend-mode`, которое смешивает элементы, наложенные друг на друга.

Вы можете найти больше примеров смешивания на странице blend-modes.html (смотрите источник) и на странице `<blend-mode>` (en-US).

**Примечание:** Смешивание относительно новое свойство, поэтому поддерживается хуже, чем фильтры. Оно совсем не поддерживается на Edge, а Safari поддерживает лишь некоторые значения свойства.

### background-blend-mode

Снова обратимся к примеру. Во-первых, `background-blend-mode` — мы покажем несколько контейнеров `<div>`, чтобы вы сравнили оригинал с редактированной версией:

```html
<div></div>
<div class="multiply"></div>
```

Воспользуемся CSS — добавим к `<div>` одно фоновое изображение и зелёный фон:

```css
div {
  width: 250px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background: url(colorful-heart.png) no-repeat center 20px;
  background-color: green;
}

.multiply {
  background-blend-mode: multiply;
}
```

Слева вы видите оригинал, справа — изменённое изображение:

### mix-blend-mode

Рассмотрим `mix-blend-mode`. Здесь мы также используем несколько `<div>`, но каждый из них расположен над простым `<div>` с фиолетовым фоном, чтобы показать, как элементы будут смешаны:

```html
<article>
  Нет режима смешивания
  <div></div>
  <div></div>
</article>

<article>
  Множественное смешивание
  <div class="multiply-mix"></div>
  <div></div>
</article>
```

А здесь CSS:

```css
article {
  width: 280px;
  height: 180px;
  margin: 10px;
  position: relative;
  display: inline-block;
}

div {
  width: 250px;
  height: 130px;
  padding: 10px;
  margin: 10px;
}

article div:first-child {
  position: absolute;
  top: 10px;
  left: 0;
  background: url(colorful-heart.png) no-repeat center 20px;
  background-color: green;
}

article div:last-child {
  background-color: purple;
  position: absolute;
  bottom: -10px;
  right: 0;
  z-index: -1;
}

.multiply-mix {
  mix-blend-mode: multiply;
}
```

И это даст нам следующее:

Как видите, смешались не только фоновые изображения, но и `<div>` под ними.

**Примечание:** Не переживайте, если вы не знаете такие свойства разметки, как `position`, `top`, `bottom`, `z-index` и т. д. Мы детально рассмотрим это в модуле CSS Layout.

CSS-фигуры
----------

Мы можем сделать обтекание содержимым непрямоугольных фигур, используя CSS-фигуры (en-US).

В примере ниже мы эффектно округлили воздушный шар. В действительности изображение прямоугольное, но с определением свойства *float* (по-другому формы не добавляются) и использованием свойства `shape-outside` (en-US) со значением `circle(50%)`, мы можем создать эффект обтекания текста.

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

**Примечание:** В Firefox вы можете использовать Инспектор фигур, чтобы редактировать фигуры.

Значение `circle()` — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте Обзор CSS-фигур (en-US) на MDN.)

-webkit-background-clip: text
-----------------------------

Функция, о которой мы, кажется, упомянули в свойстве `text` для значения `background-clip`. Опция `-webkit-text-fill-color: transparent;` позволяет обрезать фоновые изображения под форму текста. Это неофициальный стандарт, но он был подключён во множестве браузеров. В данном контексте обязательно используется префикс `-webkit-` для любых браузеров:

```css
.text-clip {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

Так почему остальные браузеры используют префикс `-webkit-`? В основном для совместимости — поэтому многие веб-разработчики стали вставлять префиксы `-webkit-`, отчего другие браузеры казались сломанными, когда, по факту, всё было выполнено по всем стандартам. Поэтому были введены некоторые такие функции.

Если вы собираетесь использовать подобные опции, проверьте совместимость их с браузерами.

**Примечание:** Пример с `-webkit-background-clip: text` смотрите на background-clip-text.html (или источнике).

Итог
----

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


Блочная модель - Изучение веб-разработки

Блочная модель
==============

* Назад
* Обзор: Building blocks
* Далее

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

| Необходимые условия: | Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.) |
| --- | --- |
| Цель: | Узнать как работает блочная модель CSS, из чего она состоит и как переключиться на альтернативную модель. |

Блочные и строчные элементы
---------------------------

В CSS мы, говоря упрощённо, имеем два типа элементов — **блочные** и **строчные**. Эти характеристики относятся к поведению блоков в контексте потока страницы и относительно других блоков на странице.

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

* Начнётся с новой строки.
* Будет расширяться вдоль строки таким образом, чтобы заполнить всё пространство, доступное в её контейнере. В большинстве случаев это означает, что блок станет такой же ширины, как и его контейнер, заполняя 100% доступного пространства.
* Будут применяться свойства `width` и `height`.
* Внешние и внутренние отступы, рамка будут отодвигать от него другие элементы.

Если не изменить намеренно тип отображения на строчный, то такие элементы, как заголовки (например, `<h1>`) и `<p>`, все используют `block` как свой внешний тип отображения по умолчанию.

Если элемент имеет тип отображения `inline` (строчный), то:

* Он не будет начинаться с новой строки.
* Свойства `width` и `height` не будут применяться.
* Вертикальные внешние и внутренние отступы, рамки будут применяться, но не будут отодвигать другие строчные элементы.
* Горизонтальные внешние и внутренние отступы, рамки будут применяться и будут отодвигать другие строчные элементы.

Элемент `<a>`, используемый для ссылок, `<span>`, `<em>` и `<strong>` — всё это примеры по умолчанию строчных элементов.

Тип отображения, применяемый к элементу, определяется значениями свойства `display`, такими как `block` и `inline`, и относится к **внешнему** значению `display`.

Экскурс: внутренний и внешний типы отображения
----------------------------------------------

Здесь следует объяснить, что такое **внутренние** и **внешние** типы отображения. Как уже говорилось выше, каждый блок в CSS имеет *внешний* тип отображения, который определяет, блочный он или строчный.

Элементы также имеют *внутренний* тип отображения, который определяет расположение элементов внутри них. По умолчанию элементы внутри блока располагаются в **нормальном потоке**: они ведут себя так же, как и любые другие блочные или строчные элементы (как описано выше).

Однако мы можем изменить внутренний тип отображения, используя такие значения `display` как `flex`. Если мы установим `display: flex;` для элемента, внешний тип отображения примет значение `block`, но внутренний тип изменится на `flex`. Любые прямые дочерние элементы этого блока станут *flex*-объектами и будут размещены в соответствии с правилами, изложенными в спецификации Flexbox, о которой вы узнаете позже.

**Примечание:** Чтобы узнать больше о значениях display, и о том, как работают элементы при блочном или строчном расположении, посмотрите руководство MDN Блочное и строчное расположение (en-US).

Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите `flex` и другие внутренние значения, которые могут быть у ваших элементов, например `grid`.

Тем не менее, блочное и строчное расположение — это поведение web-элементов по умолчанию. Как было сказано выше, это иногда называют *нормальным потоком (normal flow)*, потому что при отсутствии какой-либо другой инструкции элементы имеют блочное или строчное расположение.

Примеры разных типов отображения
--------------------------------

Давайте продолжим и рассмотрим некоторые примеры. Ниже мы имеем три разных элемента HTML с внешним типом отображения `block`. Первый — это абзац, который имеет обрамление, указанное в CSS. Браузер отображает его как блочный элемент, поэтому абзац начинается с новой строки и расширяется на всю доступную ему ширину.

Второй — это список, который свёрстан с использованием `display: flex`. Это устанавливает flex-расположение для элементов внутри контейнера, однако сам список — блочный элемент и — как и абзац — расширяется на всю ширину контейнера и начинается с новой строки.

Ниже у нас есть абзац блочного типа, внутри которого есть два элемента `<span>`. Эти элементы по умолчанию имеют тип `inline`, однако у одного из них задан класс block, для которого мы установили `display: block`.

Мы можем видеть, как строчные элементы (`inline`) ведут себя в следующем примере. Элементы `<span>` в первом абзаце строчные по умолчанию и поэтому не приводят к переносу строки.

У нас также есть элемент `<ul>`, для которого установлено `display: inline-flex`, что создаёт строчный элемент вокруг нескольких flex-объектов.

Наконец, у нас есть два абзаца, для которых установлено `display: inline`. И строчный flex-контейнер, и абзацы располагаются вместе на одной строке, а не начинаются каждый с новой строки, как они отображались бы, будучи блочными элементами.

**В примере вы можете заменить `display: inline` на `display: block` или `display: inline-flex` на `display: flex` для переключения между этими двумя режимами отображения.**

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

В оставшейся части урока мы сосредоточимся на внешнем типе отображения.

Что такое блочная модель CSS?
-----------------------------

Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определённые блочной моделью. Модель определяет, как разные части элемента — поля, рамки, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Дополнительная сложность заключается в том, что существуют стандартная и альтернативная блочные модели.

### Составляющие элемента

Составляя блочный элемент в CSS мы имеем:

* **Содержимое**: область, где отображается ваш контент, размер которой можно изменить с помощью таких свойств, как `width` и `height`.
* **Внутренний отступ**: отступы располагаются вокруг содержимого в виде пустого пространства; их размер контролируется с помощью `padding` и связанных свойств.
* **Рамка**: рамка оборачивает содержимое и внутренние отступы. Её размер и стиль можно контролировать с помощью `border` и связанных свойств.
* **Внешний отступ**: внешний слой, заключающий в себе содержимое, внутренний отступ и рамки, представляет собой пространство между текущим и другими элементами. Его размер контролируется с помощью `margin` и связанных свойств.

Рисунок ниже показывает эти слои:

![Диаграмма блочной модели](/ru/docs/Learn/CSS/Building_blocks/The_box_model/box-model.png)

### Стандартная блочная модель CSS

В стандартной блочной модели, если указать элементу атрибуты `width` и `height`, это определит ширину и высоту *содержимого*. Любые отступы и рамки затем добавляются к этой ширине и высоте для получения общего размера элемента. Это показано на изображении ниже.

Предположим, что в элементе есть следующий CSS определяющий `width`, `height`, `margin`, `border`, и `padding`:

```css
.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}
```

Пространство, занимаемое нашим объектом с использованием стандартной блочной модели, на самом деле будет равно 410px в ширину (350 + 25 + 25 + 5 + 5) и 210px в высоту (150 + 25 + 25 + 5 + 5), поскольку отступы и рамки добавляются к размерам поля содержимого.

![Отображения размера элемента при использовании стандартной блочной модели.](/ru/docs/Learn/CSS/Building_blocks/The_box_model/standard-box-model.png)

**Примечание:** Внешний отступ не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнюю часть. Область элемента заканчивается на рамке — она не распространяется за нее.

### Альтернативная блочная модель CSS

Вы можете подумать, что довольно неудобно добавлять рамки и отступы, чтобы получить реальный размер элемента, и окажетесь правы! По этой причине, спустя некоторое время после стандартной блочной модели, в CSS была введена альтернативная блочная модель. При использовании альтернативной модели любая ширина — это ширина видимой части элемента на странице, поэтому ширина области содержимого будет равна общей ширине минус ширина рамки и внутреннего отступа. Тот же CSS, который использовался выше, даст следующий результат (ширина = 350px, высота = 150px).

![Отображения размера элемента при использовании альтернативной блочной модели.](/ru/docs/Learn/CSS/Building_blocks/The_box_model/alternate-box-model.png)

По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство `box-sizing: border-box`. С помощью этого вы говорите браузеру о том, что рамка элемента определяется любыми размерами, которые вы устанавливаете.

```css
.box {
  box-sizing: border-box;
}
```

Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространённым выбором среди разработчиков, установите свойство `box-sizing` для элемента `<html>`, затем задайте всем элементам наследование этого значения (inherit), как показано в примере ниже. Если вы хотите понять ход мыслей, стоящий за этим решением, читайте статью the CSS Tricks article on box-sizing.

```css
html {
  box-sizing: border-box;
}
\*,
\*::before,
\*::after {
  box-sizing: inherit;
}
```

**Примечание:** Интересный факт — Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения.

Играем с блочными моделями
--------------------------

В примере ниже, вы можете видеть 2 объекта. Оба имеют класс `.box`, который даёт им одинаковые параметры `width`, `height`, `margin`, `border`, и `padding`. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.

**Можете ли вы изменить размер второго объекта (добавляя CSS в класс `.alternate)` чтобы ширина и высота совпали с первым блоком?**

**Примечание:** вы можете найти решение этой задачи здесь.

### Использование инструментов разработчика в браузере для просмотра блочных моделей

Инструменты разработчика вашего браузера могут значительно облегчить понимание блочной модели. Если вы проверите элемент в инструментах разработчика Firefox, вы можете увидеть его размер, а также внешний и внутренний отступы и рамку. Проверка элемента таким способом — отличный способ выяснить, действительно ли размер вашего блока такой, какой вы думаете!

![Проверка блочной модели элемента с использованием инструментов разработчика Firefox](/ru/docs/Learn/CSS/Building_blocks/The_box_model/box-model-devtools.png)

Внешние, внутренние отступы и рамки
-----------------------------------

Вы уже видели свойства `margin`, `padding` и `border` в работе в приведённом выше примере. Используемые в этом примере свойства — **сокращённые** и позволяют нам устанавливать все четыре стороны блока одновременно. У них также есть эквивалентные полные свойства, которые позволяют индивидуально управлять разными сторонами блока.

Давайте рассмотрим эти свойства более подробно.

### Внешний отступ (margin)

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

Мы можем контролировать все поля элемента сразу, используя свойство `margin`, или каждую сторону индивидуально, используя эквивалентные полные свойства:

* `margin-top`
* `margin-right`
* `margin-bottom`
* `margin-left`

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

#### Схлопывание внешних отступов

Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания. Если у вас есть два элемента, внешние отступы которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба значения отрицательны, то сумма отрицательных значений будет вычтена из общей суммы.

В примере ниже есть два абзаца. Первому абзацу задан `margin-bottom` 50 пикселей. У второго абзаца `margin-top` 30 пикселей. Отступы схлопываются так, что в результате margin между двумя блоками составляет 50 пикселей, а не сумму отдельных значений margin.

**Вы можете проверить это, установив второму абзацу `margin-top` равный 0. Видимое расстояние между двумя абзацами не изменится — отступ остаётся равен 50 пикселям, заданным в `margin-bottom` первого абзаца. Если вы установите значение -10px, то увидите, что margin становится 40px — происходит вычитание из положительного значения 50px у первого абзаца.**

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

### Рамка

Рамка располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер рамки прибавляется к значениям `width` и `height` элемента. Если вы используете альтернативную блочную модель, то размер рамки уменьшает поле контента своего блока, так как значения рамки входят в заданные ему `width` и `height`.

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

Вы можете установить ширину, стиль или цвет всех четырёх рамок сразу, используя свойство `border`.

Чтобы установить индивидуальные свойства для каждой из четырёх сторон, вы можете использовать:

* `border-top` (en-US)
* `border-right` (en-US)
* `border-bottom`
* `border-left` (en-US)

Для установки ширины, стиля или цвета всех рамок используйте:

* `border-width`
* `border-style` (en-US)
* `border-color` (en-US)

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

* `border-top-width` (en-US)
* `border-top-style` (en-US)
* `border-top-color` (en-US)
* `border-right-width` (en-US)
* `border-right-style` (en-US)
* `border-right-color` (en-US)
* `border-bottom-width` (en-US)
* `border-bottom-style` (en-US)
* `border-bottom-color` (en-US)
* `border-left-width` (en-US)
* `border-left-style` (en-US)
* `border-left-color` (en-US)

**В примере ниже мы использовали различные сокращённые и полные способы создания рамок. Поиграйте с различными свойствами, чтобы проверить, как вы поняли принципы их работы. Информацию о различных стилях, которые вы можете использовать, можно найти на страницах MDN о свойствах рамок.**

### Внутренний отступ (padding)

Внутренний отступ расположен между рамкой и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding: они должны быть положительными или равными 0. Любой применённый к вашим элементам фон будет отображаться под областью padding, поэтому внутренний отступ обычно используется, чтобы отодвинуть контент от рамок.

Вы можете контролировать значение padding для всех сторон элемента, используя свойство `padding`, или для каждой стороны индивидуально, используя следующие полные свойства:

* `padding-top` (en-US)
* `padding-right`
* `padding-bottom` (en-US)
* `padding-left`

**Если вы измените значения padding для класса `.box` в примере ниже, то увидите, что это изменяет положение текста внутри элемента.**

**Вы также можете изменить padding для класса `.container`, который задаёт отступ между контейнером и блоком. Внутренний отступ может быть изменён для любого элемента и создаст пространство между его рамкой и содержимым.**

Блочная модель и строчные элементы
----------------------------------

Всё, сказанное ранее, полностью применимо к блочным элементам. Некоторые из свойств могут быть также применены и к строчным (inline) элементам, например к `<span>`.

В приведённом ниже примере у нас есть `<span>` внутри абзаца, и мы применили к нему `width`, `height`, `margin`, `border` и `padding`. Вы можете видеть, что ширина и высота игнорируются. Вертикальные внешние и внутренние отступы и рамки применены, но они не изменяют положение других элементов относительно нашего строчного элемента, и поэтому отступы и рамка перекрывают другие слова в абзаце. Горизонтальные внешние и внутренние отступы и рамки применены и заставляют другие элементы отодвинуться от нашего.

Использование display: inline-block
-----------------------------------

Существует особое значение `display`, которое представляет собой золотую середину между `inline` и `block`. Это полезно в ситуациях, когда вы не хотите, чтобы элемент переносился на новую строку, но нужно, чтобы он применял `width` и `height` и избегал перекрытия, показанного выше.

Элемент с `display: inline-block` применяет ряд свойств блочного элемента, о которых мы уже знаем:

* Применяются свойства `width` и `height`.
* Использование `padding`, `margin` и `border` приведёт к тому, что другие элементы будут отодвинуты от нашего элемента.

Он не перенесётся на новую строку и станет больше, чем его содержимое, только если вы явно зададите свойства `width` и `height`.

**В следующем примере мы добавили `display: inline-block` к нашему элементу `<span>`. Попробуйте изменить значение свойства на `display: block` или полностью удалить строку, чтобы увидеть разницу.**

Это может быть полезно, когда вы хотите создать ссылку с большой областью попадания, добавив `padding`. `<a>` — это строчный элемент, такой же как `<span>`; вы можете использовать `display: inline-block`, чтобы разрешить применение отступов, что упростит пользователю переход по ссылке.

Довольно часто это можно увидеть в панелях навигации. Приведённая ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу `<a>`, потому что хотим, чтобы `background-color` изменялся при наведении курсора на `<a>`. Отступы перекрывают рамку элемента `<ul>`. Это происходит потому, что `<a>` — строчный элемент.

**Добавьте в правило `display: inline-block` с помощью селектора `.links-list a`, и вы увидите, как он решает эту проблему, заставляя другие элементы соблюдать отступы.**

Проверьте свои навыки!
----------------------

В этой статье мы многое рассмотрели, но получится ли у вас вспомнить самую важную информацию? Вы можете пройти дополнительные тесты, чтобы убедиться, что вы всё усвоили, прежде чем двигаться дальше — см. Проверка своих навыков: блочная модель (en-US).

Заключение
----------

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

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

* Назад
* Обзор: Building blocks
* Далее