initial commit

50 files changed, 12543 insertions, 0 deletions

diff --git a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html
new file mode 100644
index 0000000000..174d980693
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html
@@ -0,0 +1,329 @@
+---
+title: Узконаправленные функции CSS
+slug: Learn/CSS/Building_blocks/Advanced_styling_effects
+tags:
+  - Beginner
+  - Blend
+  - Boxes
+  - CSS
+  - Filters
+  - Styling
+  - effects
+  - Контейнеры
+  - Начинающий
+  - Смешивание
+  - Формы
+  - фигуры
+  - фильтры
+translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">В этой статье описаны некоторые хитрости, которые познакомят Вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>Основы HTML (изучите <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и CSS (статья <a href="https://developer.cdn.mozilla.net/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Понять принцип работы узко используемых эффектов в современных браузерах.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Блок-тень">Блок-тень</h2>
+
+<p>{{cssxref("box-shadow")}} позволяет добавить одну и более тень к контейнеру. Как и <code>text-shadow</code>, <code>box-shadows</code> отлично поддерживаются брузерами, включая IE9+ и Edge. У пользователей ранних версий IE будет просто копия без тени, поэтому убедитесь, что контент с дизайном разборчив и без теней.</p>
+
+<p>Вы можете найти примеры из стати на <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a> (или в <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">исходном коде</a>).</p>
+
+<h3 id="Обычная_тень">Обычная тень</h3>
+
+<p>Для начала взглянем на простой пример:</p>
+
+<pre class="brush: html">&lt;article class="simple"&gt;
+  &lt;p&gt;&lt;strong&gt;Предупреждение&lt;/strong&gt;: Температура ракетного двигателя достигла критической отметки.&lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<p>А теперь CSS:</p>
+
+<pre class="brush: 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);
+}</pre>
+
+<p>В результате получится вот это:</p>
+
+<p>{{ EmbedLiveSample('Обычная_тень', '100%', 100) }}</p>
+
+<p>Как видите, у нас четыре значения в свойстве <code>box-shadow</code>:</p>
+
+<ol>
+ <li>Первое значение — <strong>смещение по горизонтали</strong> — расстояние, на которое смещена тень вправо (если значение отрицательное, то влево).</li>
+ <li><strong>Смещение по вертикали</strong> — расстояние, на которое смещена тень вниз (или вверх, если значение отрицательное).</li>
+ <li>Третье значение — это <strong>радиус размытия</strong> — уровень размытия тени.</li>
+ <li>Значение цвета — это <strong>основной цвет</strong> тени.</li>
+</ol>
+
+<p>Вы можете использовать абсолютно любые значения и цвета, если это необходимо.</p>
+
+<h3 id="Несколько_теней">Несколько теней</h3>
+
+<p>Вы можете определить несколько блок-теней, разделяя их запятыми при объявлении <code>box-shadow</code>:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;article class="multiple"&gt;
+  &lt;p&gt;&lt;strong&gt;Предупреждение&lt;/strong&gt;: Температура ракетного двигателя достигла критической отметки.&lt;/p&gt;
+&lt;/article&gt;</pre>
+</div>
+
+<pre class="brush: 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;
+}</pre>
+
+<p>В итоге мы получим:</p>
+
+<p>{{ EmbedLiveSample('Несколько_теней', '100%', 100) }}</p>
+
+<p>Мы сделали контейнер с несколькими ступенчатыми цветными тенями, но Вы можете делать, как считаете то нужным, например, чтобы добавить реалистичности, опираясь на какие-нибудь источники света.</p>
+
+<h3 id="Другие_опции_блок-теней">Другие опции блок-теней</h3>
+
+<p>В отличие от {{cssxref("text-shadow")}}, у свойства {{cssxref("box-shadow")}} есть значение <code>inset</code> — оно добавляет внутреннюю тень. Поясним это на примере.</p>
+
+<p>Для этого примера используем другой HTML-код:</p>
+
+<pre class="brush: html">&lt;button&gt;Нажми на меня!&lt;/button&gt;</pre>
+
+<pre class="brush: 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);
+}</pre>
+
+<p>Получим:</p>
+
+<p>{{ EmbedLiveSample('Другие_опции_блок-теней', '100%', 70) }}</p>
+
+<p>Мы стилизовали кнопку с помощью состояний <em>focus</em>, <em>hover</em> и <em>active</em>. Для кнопки по умолчанию установлены несколько простых чёрных теней плюс пара внутренних теней в противополжном углу кнопки для эстетичности.</p>
+
+<p>При нажатии на кнопку первая тень становится внутренней, чтобы создать ощущение нажатия кнопки.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Есть ещё одно значение <code>box-shadow</code>, которое устанавливается перед значением свойства, — <strong>радиус разброса</strong>. При его использовании тень становится больше оригинального контейнера. Свойство не так часто используют, но оно стоит упоминания.</p>
+</div>
+
+<h2 id="Фильтры">Фильтры</h2>
+
+<p>Замечательное свойство, благодаря которому ваш дизайн станет интереснее, — это свойство {{cssxref("filter")}}. Это что-то вроде фильтров Photoshop, но в CSS.</p>
+
+<p>В примере ниже мы использовали два значения этого свойства: первое — <code>blur()</code> — определяет, насколько изображение размыто.</p>
+
+<p>Второе значение — <code>grayscale()</code>; оно определяет, насколько изображение насыщено.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/filter.html", '100%', 700)}}</p>
+
+<p><strong>Попробуйте изменить значения в примере, чтобы посмотреть на изменения. Вы можете менять значения на другие. Попробуйте добавить <code>contrast(200%)</code>, <code>invert(100%)</code> или <code>hue-rotate(20deg)</code> в примере ниже. Прочтите статью <code><a href="https://developer.mozilla.org/ru/docs/Web/CSS/filter">filter</a></code>, чтобы узнать о многих других значениях этого свойства.</strong></p>
+
+<p>Вы можете добавлять фильтры к любым объектам. Некоторые значения свойства работают почти так же, как CSS-свойства, например, <code>drop-shadow()</code> даёт эффект, схожий с <a href="https://developer.mozilla.org/ru/docs/Web/CSS/box-shadow" title="The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas."><code>box-shadow</code></a> или <a href="https://developer.mozilla.org/ru/docs/Web/CSS/text-shadow" title="The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations."><code>text-shadow</code></a>.</p>
+
+<p>В фильтрах замечательно то, что они применяются к каждому элементу контейнера. Ниже мы сравнили фильтр и блок-тень. Как видите, фильтр применился к каждой чёрточке. А блок-тень просто выделила тень, равную размерам контейнера.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/filter-text.html", '100%', 600)}}</p>
+
+<h2 id="Режимы_смешивания">Режимы смешивания</h2>
+
+<p>Режимы смешивания CSS позволяют определить смешивание при наложении двух элементов. Смешивание очень знакомо пользователям редакторов вроде Photoshop.</p>
+
+<p>В режимах смешивания CSS два значения:</p>
+
+<ul>
+ <li>{{cssxref("background-blend-mode")}}, которое смешивает цвет фона и цвета отдельного элемента.</li>
+ <li>{{cssxref("mix-blend-mode")}}, которое смешивает элементы, наложенные друг на друга.</li>
+</ul>
+
+<p>Вы можете найти больше примеров смешивания на странице <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a> (смотрите <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">источник</a>) и на странице {{cssxref("&lt;blend-mode&gt;")}}.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Смешивание относительно новое свойство, поэтому поддерживается хуже, чем фильтры. Оно совсем не поддерживается на Edge, а Safari поддерживает лишь некоторые значения свойства.</p>
+</div>
+
+<h3 id="background-blend-mode">background-blend-mode</h3>
+
+<p>Снова обратимся к примеру. Во-первых, {{cssxref("background-blend-mode")}} — мы покажем несколько контейнеров {{htmlelement("div")}}, чтобы Вы сравнили оригинал с редактированной версией:</p>
+
+<pre class="brush: html">&lt;div&gt;
+&lt;/div&gt;
+&lt;div class="multiply"&gt;
+&lt;/div&gt;</pre>
+
+<p>Воспользуемся CSS — добавим к <code>&lt;div&gt;</code> одно фоновое изображение и зелёный фон:</p>
+
+<pre class="brush: css">div {
+  width: 250px;
+  height: 130px;
+  padding: 10px;
+  margin: 10px;
+  display: inline-block;
+  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
+  background-color: green;
+}
+
+.multiply {
+  background-blend-mode: multiply;
+}</pre>
+
+<p>Слева вы видите оригинал, справа — изменённое изображение:</p>
+
+<p>{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}</p>
+
+<h3 id="mix-blend-mode">mix-blend-mode</h3>
+
+<p>Рассмотрим {{cssxref("mix-blend-mode")}}. Здесь мы также используем несколько <code>&lt;div&gt;</code>, но каждый из них расположен над простым <code>&lt;div&gt;</code> с фиолетовым фоном, чтобы показать, как элементы будут смешаны:</p>
+
+<pre class="brush: html">&lt;article&gt;
+  Нет режима смешивания
+  &lt;div&gt;
+
+  &lt;/div&gt;
+  &lt;div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;
+
+&lt;article&gt;
+  Множественное смешивание
+  &lt;div class="multiply-mix"&gt;
+
+  &lt;/div&gt;
+  &lt;div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<p>А здесь CSS:</p>
+
+<pre class="brush: 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(https://mdn.mozillademos.org/files/13090/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;
+}</pre>
+
+<p>И это даст нам следующее:</p>
+
+<p>{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}</p>
+
+<p>Как видите, смешались не только фоновые изображения, но и <code>&lt;div&gt;</code> под ними.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Не переживайте, если Вы не знаете такие свойства разметки, как {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}} и т. д. Мы детально рассмотрим это в модуле <a href="https://developer.cdn.mozilla.net/ru/docs/Learn/CSS/CSS_layout">CSS Layout</a>.</p>
+</div>
+
+<h2 id="CSS-фигуры">CSS-фигуры</h2>
+
+<p>Мы можем сделать обтекание содержимым непрямоугольных фигур, используя <a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Shapes">CSS-фигуры</a>.</p>
+
+<p>В примере ниже мы эффектно округлили воздушный шар. В действительности изображение прямоугольное, но с определением свойства <em>float</em> (по-другому формы не добавляются) и использованием свойства {{cssxref("shape-outside")}} со значением <code>circle(50%)</code>, мы можем создать эффект обтекания текста.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/shapes.html", '100%', 1000)}}</p>
+
+<p>Форма в этом примере не реагирует на содержание изображения. Вместо этого в центре изображения определяется центр окружности, как если бы мы начертили циркулем окружность, вписанную в изображение. Это та окружность, которую обтекает текст.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: В Firefox Вы можеет использовать <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Инспектор фигур</a>, чтобы редактировать фигуры.</p>
+</div>
+
+<p>Значение <code>circle()</code> — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте <a href="/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Обзор CSS-фигур</a> на MDN.)</p>
+
+<h2 id="-webkit-background-clip_text">-webkit-background-clip: text</h2>
+
+<p>Функция, о которой мы, кажется, упомянули в свйстве <code>text</code> для значения {{cssxref("background-clip")}}. Опция <code>-webkit-text-fill-color: transparent;</code> позволяет обрезать фоновые изображения под форму текста. Это неофициальный стандарт, но он был подключён во множестве браузеров. В данном контексте обязательно используется префикс <code>-webkit-</code> для любых браузеров:</p>
+
+<pre class="brush: css">.text-clip {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}</pre>
+
+<p>Так почему остальные браузеры используют префикс <code>-webkit-</code>? В основном для совместимости — поэтому многие веб-разработчики стали вставлять префиксы <code>-webkit-</code>, отчего другие браузеры казались сломанными, когда, по факту, всё было выполнено по всем стандартам. Поэтому были введены некоторые такие функции.</p>
+
+<p>Если вы собираетесь использовать подобные опции, проверьте совместимость их с браузерами.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Пример с <code>-webkit-background-clip: text</code> смотрите на <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> (или <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">источнике</a>).</p>
+</div>
+
+<h2 id="Итог">Итог</h2>
+
+<p>Надеемся, статья была весёлой — игра с кодами уж точно. Всегда интересно следить за появлением новых узконаправленных свойств в современных браузерах.</p>
diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
new file mode 100644
index 0000000000..9f747a06f4
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
@@ -0,0 +1,332 @@
+---
+title: Фон и границы
+slug: Learn/CSS/Building_blocks/Backgrounds_and_borders
+tags:
+  - Beginner
+  - CSS
+  - Learn
+  - Границы
+  - Изображение
+  - Обучение
+  - Позиция
+  - Фон
+  - Цвет
+translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS свойств фона и границ .</span> <span title="">Благодаря добавлению градиентов, фоновых изображений и закругленных углов свойства фона и границ ответят на многие вопросы стилизации в CSS.</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые умения:</th>
+   <td>Базовая компьютерная грамотность, <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">основное программное обеспечение</a>, понимание <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, базовые знания HTML (смотрите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и представление о том, как работает CSS (смотрите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Научиться стилизации фона и границ объектов.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Стилизация_фона_в_CSS">Стилизация фона в CSS</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">CSS cвойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке.</span> <span title="">Если вы обнаружите сложное свойство </span></span><code>background</code><span class="tlid-translation translation" lang="ru"><span title=""> в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.</span></span></p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
+  url(big-star.png) center no-repeat, rebeccapurple;
+} </code>
+</pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Мы вернемся к тому, как работает сокращение </span></span>позже<span class="tlid-translation translation" lang="ru"><span title="">, </span></span>а пока<span class="tlid-translation translation" lang="ru"><span title=""> давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства </span></span><code>background</code><span class="tlid-translation translation" lang="ru"><span title="">.</span></span></p>
+
+<h3 id="Фоновый_цвет">Фоновый цвет</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Свойство {{cssxref ("background-color")}} определяет цвет фона для любого элемента в CSS.</span> <span title="">Свойство принимает любой допустимый </span></span>цвет<span class="tlid-translation translation" lang="ru"><span title=""> </span></span><code><a href="/ru/docs/Web/CSS/color_value">&lt;color&gt;</a></code><span class="tlid-translation translation" lang="ru"><span title="">.</span> </span><code>background-color</code><span class="tlid-translation translation" lang="ru"><span title=""> распространяется на сам контент и отступы от него </span></span>(padding)<span class="tlid-translation translation" lang="ru"><span title="">.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В приведенном ниже примере мы использовали различные значения цвета, чтобы добавить цвет фона к блоку, заголовку и элементу {{htmlelement ("span")}}.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title=""><strong>Поиграйте с ними, используя любое доступное значение</strong> </span></span><strong><a href="/ru/docs/Web/CSS/color_value">&lt;color&gt;</a><span class="tlid-translation translation" lang="ru"><span title="">.</span></span></strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 600)}}</p>
+
+<h3 id="Фоновое_изображение">Фоновое изображение</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Свойство {{cssxref ("background-image")}} позволяет отображать изображение </span></span>в качестве фона элемента<span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">В приведенном ниже примере у нас есть два блока </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> в одном фоновое изображение больше, чем размеры блока, а в другом - маленькое изображение звезды.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Этот пример демонстрирует две </span></span>особенности<span class="tlid-translation translation" lang="ru"><span title=""> фоновых изображений.</span> <span title="">По умолчанию большое изображение не масштабируется до размера блока, поэтому мы видим только его небольшой угол, в то время как маленькое изображение повторяется, чтобы заполнить весь блок.</span> <span title="">В нашем случае фактически было использовано изображение одной маленькой звезды.</span></span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 600)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Если кроме фонового изображения вы добавили фоновый цвет, то изображение будет отображаться над цветом.</strong> Попробуйте добавить свойство <code>background-color</code> в <span class="tlid-translation translation" lang="ru"><span title="">приведенный выше пример, чтобы увидеть это в действии.</span></span></p>
+</div>
+
+<h4 id="Свойство_background-repeat">Свойство  background-repeat</h4>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Свойство {{cssxref ("background-repeat")}} используется для управления повторениями фонового изображения.</span> <span title="">Доступные значения:</span></span></p>
+
+<ul>
+ <li><code>no-repeat</code> — останавливает повторение фонового изображения во всех направлениях.</li>
+ <li><code>repeat-x</code> — повторение фонового изображения по горизонтали.</li>
+ <li><code>repeat-y</code> — повторение фонового изображения по вертикали.</li>
+ <li><code>repeat</code> — повторение фонового изображения в обоих направлениях. Установлено по умолчанию.</li>
+</ul>
+
+<p><strong><span class="tlid-translation translation" lang="ru"><span title="">Попробуйте эти значения в примере ниже.</span> <span title="">Мы установили значение </span></span><code>no-repeat</code><span class="tlid-translation translation" lang="ru"><span title="">, поэтому вы видите только одну звезду.</span> <span title="">Попробуйте разные значения - </span></span></strong> <strong><code>repeat-x</code></strong> <strong><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span></strong> <strong><code>repeat-y</code></strong> <strong>—</strong> <strong><span class="tlid-translation translation" lang="ru"><span title=""> чтобы увидеть, какие эффекты они оказывают.</span></span></strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 480)}}</p>
+
+<h4 id="Изменение_размеров_фонового_изображения">Изменение размеров фонового изображения</h4>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В приведенном выше примере у нас есть большое изображение, которое в конечном итоге было обрезано, так как оно больше, чем элемент, фоном которого оно является.</span> <span title="">В этом случае мы могли бы использовать свойство {{cssxref ("background-size")}}, которое может принимать значения </span></span><a href="/ru/docs/Web/CSS/размер">длины</a><span class="tlid-translation translation" lang="ru"><span title=""> или в <a href="/ru/docs/Web/CSS/percentage">процентах</a>, чтобы размер изображения соответствовал размеру фона.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вы также можете использовать ключевые слова</span></span>:</p>
+
+<ul>
+ <li><code>cover</code> <span class="tlid-translation translation" lang="ru"><span title=""> </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> браузер сделает изображение достаточно большим, чтобы оно полностью заполнило блок, сохраняя при этом соотношение сторон.</span> <span title="">В этом случае часть изображения, скорее всего, окажется за пределами блока.</span></span></li>
+ <li><code>contain</code> — <span class="tlid-translation translation" lang="ru"><span title="">браузер сделает изображение нужного размера, чтобы поместиться в блоке.</span> <span title="">В этом случае могут появиться пробелы с обеих сторон или сверху и снизу изображения, если соотношение сторон изображения отличается от соотношения сторон блока.</span></span></li>
+</ul>
+
+<p>Ниже я применил значения длины к размерам изображения. Глядите, как это исказило изображение.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В приведенном ниже примере я использовал большое изображение из ранее рассмотренного примера и указал значения длины, чтобы определить его размер внутри блока.</span> <span title="">Вы можете посмотреть, как это исказило изображение.</span></span></p>
+
+<p>Попробуйте следующее.</p>
+
+<ul>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Измените </span></span>значения<span class="tlid-translation translation" lang="ru"><span title=""> длины, используемые для изменения размера фона.</span></span></li>
+ <li>Измените значение длины на <code>background-size: cover</code> или <code>background-size: contain</code>. </li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Если ваше изображение меньше </span></span>размеров блока<span class="tlid-translation translation" lang="ru"><span title="">, вы можете изменить значение свойства </span></span><code>background-repeat</code><span class="tlid-translation translation" lang="ru"><span title="">, чтобы повторить изображение.</span></span></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 600)}}</p>
+
+<h4 id="Позиционирование_фонового_изображения">Позиционирование фонового изображения</h4>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Свойство {{cssxref ("background-position")}} позволяет вам изменять позицию, в которой фоновое изображение появляется в блоке.</span> <span title="">При этом используется система координат, в которой <em>левый верхний угол</em> блока равен <code>(0,0)</code>, а </span></span>сам блок располагается вдоль<span class="tlid-translation translation" lang="ru"><span title=""> горизонтальной (<code>x</code>) и вертикальной (<code>y</code>) осей.</span></span></p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: По умолчанию значение <code>background-position</code> равно <code>(0,0)</code>.</p>
+</div>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Обычно свойство <code>background-position</code> задают в ввиде двух последовательных значений </span></span> — <span class="tlid-translation translation" lang="ru"><span title=""> значение по горизонтали, за которым следует значение по вертикали.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете использовать такие ключевые слова, как <code>top</code> и <code>right</code> (с остальными можете ознакомиться на странице {{cssxref ("background-position")}}):</span></span></p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+} </code>
+</pre>
+
+<p>Допустимы значения <a href="/ru/docs/Web/CSS/размер">длины</a> и <a href="/ru/docs/Web/CSS/percentage">процентные</a>:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: 20px 10%;
+} </code>
+</pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вы также можете смешивать значения ключевых слов с длинами или процентами, например:</span></span></p>
+
+<pre class="brush: css notranslate">.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px;
+}</pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определенных краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова.</span> <span title="">Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:</span></span></p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px right 10px;
+} </code></pre>
+
+<p><strong><span class="tlid-translation translation" lang="ru"><span title="">Используйте приведенный ниже пример, чтобы поэкспериментировать с этими значениями и переместить звезду внутри блока.</span></span></strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 480)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: <code>background-position</code> — это сокращение для {{cssxref("background-position-x")}} и {{cssxref("background-position-y")}}, <span class="tlid-translation translation" lang="ru"><span title="">которые позволяют вам устанавливать различные значения положения по оси индивидуально</span></span>.</p>
+</div>
+
+<h3 id="Градиент_в_качестве_фона">Градиент в качестве фона</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Градиент - при использовании для фона - действует так же, как изображение, и поэтому задаётся свойством {{cssxref ("background-image")}}.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете прочитать больше о различных типах градиентов и о том, что вы можете с ними делать на странице MDN для типа данных </span></span><code><a href="/en-US/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Поиграть с градиентами Вы можете используя один из многих генераторов градиентов CSS, доступных в Интернете, например </span></span><a href="https://cssgradient.io/">этот</a><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Вы можете создать градиент, а затем скопировать и вставить его </span></span>в свой код<span class="tlid-translation translation" lang="ru"><span title="">.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Попробуйте использовать разные градиенты в примере ниже.</span> <span title="">В двух блоках соответственно у нас есть линейный градиент, растянутый на весь блок, и радиальный градиент с заданным размером, который поэтому повторяется.</span></span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 600)}}</p>
+
+<h3 id="Несколько_фоновых_изображений">Несколько фоновых изображений</h3>
+
+<p>Также возможно создавать несколько фоновых изображений — просто разделив значения свойства <code>background-image</code> запятыми.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Когда Вы сделаете это, произойдёт наложение фоновых изображений друг на друга.</span> <span title="">Фоновые изображения будут наложены слоями, где каждое новое фоновое изображение, перечисленное в коде, будет накладываться поверх ранее указанного изображения.</span></span> </p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Градиенты можно <span class="tlid-translation translation" lang="ru"><span title="">легко смешивать с обычными фоновыми изображениями</span></span>.</p>
+</div>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Другие свойства <code>background- *</code> также могут иметь значения, разделенные запятыми,  как и <code>background-image</code>:</span></span></p>
+
+<pre class="brush: css notranslate">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;</pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах.</span> <span title="">Выше, например, значение <code>background-repeat</code> для <code>image1</code> будет <code>no-repeat</code>.</span> <span title="">Однако, что происходит, когда разные свойства имеют разное количество значений?</span> <span title="">Ответ заключается в том, что меньшее количество значений будет циклически повторяться - в приведенном выше примере есть четыре фоновых изображения, и только два значения <code>background-position</code>.</span> <span title="">Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться - <code>image3</code> будет присвоено первое значение позиции, а <code>image4</code> будет присвоено второе значение позиции.</span></span></p>
+
+<p><strong><span class="tlid-translation translation" lang="ru"><span title="">Поиграем?</span> <span title="">В приведенном ниже примере я добавил два изображения.</span> <span title="">Чтобы продемонстрировать порядок наложения, попробуйте </span></span>поменять порядок фоновых изображений<span class="tlid-translation translation" lang="ru"><span title=""> в списке.</span> <span title="">Или поиграйте с другими свойствами, чтобы изменить положение, размер или повторяемость значений.</span></span></strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 480)}}</p>
+
+<h3 id="Закрепление_фона">Закрепление фона</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Другая опция, которую можно применить к фону, - это указать, как он будет прокручиваться при прокрутке содержимого.</span> <span title="">Это контролируется с помощью свойства {{cssxref ("background-attachment")}}, которое может принимать следующие значения:</span></span></p>
+
+<ul>
+ <li><code>scroll</code>: Заставляет <span class="tlid-translation translation" lang="ru"><span title="">элементы фона прокручиваться при прокрутке страницы.</span> <span title="">Если содержимое элемента прокручивается, фон не перемещается.</span> <span title="">Фактически, фон фиксируется в той же позиции на странице, поэтому он прокручивается по мере прокрутки страницы.</span></span></li>
+ <li><code>fixed</code>: <span class="tlid-translation translation" lang="ru"><span title="">Фиксирует  элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента.</span> <span title="">Фон всегда будет оставаться на одном и том же месте на экране.</span></span></li>
+ <li><code>local</code>: <span class="tlid-translation translation" lang="ru"><span title="">Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение </span></span><code>scroll</code><span class="tlid-translation translation" lang="ru"><span title=""> довольно запутанно и во многих случаях действительно не делает то, что вы хотите.</span> <span title="">Значение </span></span><code>local</code><span class="tlid-translation translation" lang="ru"><span title=""> фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним.</span></span>  </li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Свойство {{cssxref ("background-attachment")}} действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на </span></span><a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a><span class="tlid-translation translation" lang="ru"> <span title="">(также смотри <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">исходный код</a> здесь).</span></span></p>
+
+<h3 id="Использование_сокращенного_свойства_background"><span class="tlid-translation translation" lang="ru"><span title="">Использование сокращенного свойства background</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Как я упоминал в начале этого урока, вы часто будете видеть фон, заданный с помощью свойства {{cssxref ("background")}}.</span> <span title="">Это сокращение позволяет вам одновременно устанавливать все различные свойства.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">При использовании нескольких фонов необходимо указать все свойства для первого фона, а затем добавить следующий фон после запятой.</span> <span title="">В приведенном ниже примере у нас есть градиент с размером и положением, затем фоновое изображение со значением </span></span><code>no-repeat</code><span class="tlid-translation translation" lang="ru"><span title=""> и положением, затем цвет.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">При записи сокращенных значений фонового изображения необходимо соблюдать несколько правил, например:</span></span></p>
+
+<ul>
+ <li><code>background-color</code> можно указывать только после последней запятой.</li>
+ <li>Значения <code>background-size</code> могут быть включены только сразу после <code>background-position</code>, разделенные символом '/', например: <code>center/80%</code>. </li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Посетите страницу MDN свойства {{cssref ("background")}}, чтобы увидеть полное описание.</span></span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 600)}} </p>
+
+<h3 id="Доступность_просмотра">Доступность просмотра</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Помещая текст поверх фонового изображения или цвета, вы должны позаботиться о том, чтобы у вас было достаточно контраста, чтобы текст был читаемым для посетителей вашего сайта.</span> <span title="">Если указывается изображение, и текст будет помещен поверх этого изображения, вы также должны указать </span></span><code>background-color</code><span class="tlid-translation translation" lang="ru"><span title="">, который позволит тексту быть разборчивым, если изображение не загружается.</span></span></p>
+
+<p>Программы чтения с экрана не могут анализировать фоновые изображения, поэтому они должны быть чисто декоративными; любой важный контент должен быть частью HTML-страницы, а не находиться в фоне.</p>
+
+<h2 id="Границы">Границы</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Изучая Блочную модель, мы обнаружили, как границы влияют на размер нашего блока.</span> <span title="">В этом уроке мы рассмотрим, как творчески использовать границы.</span> <span title="">Обычно, когда мы добавляем границы к элементу с помощью CSS, мы используем сокращенное свойство, которое устанавливает цвет, ширину и стиль границы в одной строке CSS.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Мы можем установить границу для всех четырех сторон блока с помощью {{cssxref ("border")}}:</span></span></p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border: 1px solid black;
+} </code></pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Или мы можем нацеливаться на один край блока, например:</span></span></p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-top: 1px solid black;
+} </code></pre>
+
+<p>Индивидуальные свойства этих сокращений будут следующими:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+} </code></pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">И более детально:</span></span></p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: black;
+} </code></pre>
+
+<div class="blockIndicator note">
+<p><strong><span class="tlid-translation translation" lang="ru"><span title="">Примечание</span></span></strong>: <span class="tlid-translation translation" lang="ru"><span title="">Свойства границ </span></span>top, right, bottom, и left<span class="tlid-translation translation" lang="ru"><span title=""> также имеют сопоставленные <em>логические</em> свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз).</span></span> <span class="tlid-translation translation" lang="ru"><span title="">Мы рассмотрим их в следующем уроке, который касается <a href="/ru/docs/CSS/Building_blocks/Handling_different_text_directions">работы с разными направлениями текста</a>.</span></span></p>
+</div>
+
+<p><strong>Есть множество стилей, которые вы можете использовать для границ. В приведенном ниже примере мы использовали <span class="tlid-translation translation" lang="ru"><span title="">разные стили границ для четырех сторон моего блока</span></span>. Поиграйте со стилем, шириной и цветом границы, чтобы увидеть, как они работают.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 640)}}</p>
+
+<h3 id="Закруглённые_углы">Закруглённые углы</h3>
+
+<p>Закругление углов блока достигается с помощью свойства {{cssxref ("border-radius")}} и связанных свойств, которые относятся к каждому углу блока. В качестве значения могут использоваться два значения длины или процента: первое значение определяет горизонтальный радиус, а второе - вертикальный радиус. Чаще задают только одно значение, которое используется для обоих.</p>
+
+<p>Например, чтобы сделать все четыре угла блока радиусом 10px:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-radius: 10px;
+} </code></pre>
+
+<p>Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-top-right-radius: 1em 10%;
+} </code></pre>
+
+<p>В примере ниже мы установили все четыре угла, а затем изменили значения для верхнего правого угла, чтобы сделать его другим. Вы можете поиграть со значениями, чтобы изменить углы. Взгляните на страницу свойств для {{cssxref("border-radius")}} чтобы увидеть доступные варианты синтаксиса.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 620)}}</p>
+
+<h2 id="Упражнение_с_границами_и_фоном">Упражнение с границами и фоном</h2>
+
+<p>Чтобы проверить свои новые знания, попробуйте создать следующее, используя фон и границы, используя приведенный ниже пример в качестве отправной точки:</p>
+
+<ol>
+ <li>Задайте рамку равную 5px black solid,  с закругленными углами 10px.</li>
+ <li>Добавить фоновое изображение (используйте URL <code>balloons.jpg</code>) и установите размер таким образом, чтобы он покрыл весь блок.</li>
+ <li>Задайте для <code>&lt;h2&gt;</code> полупрозрачный черный цвет фона и сделайте текст белым.</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 555)}} </p>
+
+<div class="blockIndicator note">
+<p><strong><span class="tlid-translation translation" lang="ru"><span title="">Примечание</span></span>:</strong> Вы можете посмотреть <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">решение</a> здесь — <span class="tlid-translation translation" lang="ru"><span title="">но сначала попробуйте сделать это сами</span></span>!</p>
+</div>
+
+<h2 id="Итоги">Итоги</h2>
+
+<p>В этой теме мы рассмотрели довольно много, но как вы можете увидеть, возможностей по стилизации фона или границ блока намного больше. Изучите различные страницы свойств, если хотите узнать больше о каких-либо функциях, которые мы обсуждали. На каждой странице MDN есть много примеров использования свойств, с которыми вы можете поиграть и расширить свои знания.</p>
+
+<p>В следующем уроке мы узнаем, как Режим написания вашего документа взаимодействует с вашим CSS. Что происходит, если текст не перетекает слева направо?</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование </a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a> <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы"> </a>
+  <ul>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a> <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Attribute_selectors"> </a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a> <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators"> </a></li>
+  </ul>
+ </li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Изменение направления текста </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Перекрытие содержимого</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения свойств CSS </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Изображения, формы и прочие медиа-элементы </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация CSS-кода</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html
new file mode 100644
index 0000000000..5d29314cea
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -0,0 +1,345 @@
+---
+title: Каскад и наследование
+slug: Learn/CSS/Building_blocks/Cascade_and_inheritance
+tags:
+  - CSS
+  - Каскад
+  - Наследование
+  - Начинающий
+  - Обучение
+  - Порядок следования
+  - Правила
+  - Специфичность
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Цель этого урока — углубить Ваше понимание некоторых основополагающих концепций CSS — каскадов, спецификаций и наследования, — которые контролируют то, как CSS применяется к HTML и как разрешаются конфликты.</p>
+
+<p>Хотя изучение этого урока может показаться менее актуальным и немного более академичным, чем некоторые другие части курса, понимание этих вещей спасёт вас от головной боли в дальнейшем! Мы рекомендуем вам внимательно изучить этот раздел и убедиться, что вы понимаете концепции, перед тем, как двигаться дальше.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые условия:</th>
+   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Installing_basic_software">Установка базового ПО</a>, базовые знания <a href="https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, основы HTML (<a href="/ru-RU/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), и общее представление о том, как работает CSS (<a href="/ru-RU/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Изучить понятие о каскаде и специфичности, и как работает наследование CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Конфликтующие_правила">Конфликтующие правила</h2>
+
+<p>CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей и первое слово <em>"каскадные" </em>является невероятно важным для понимания: то, как ведёт себя каскад — ключевой момент в понимании CSS.</p>
+
+<p>В какой-то момент, работая над проектом, вы обнаружите, что CSS, который, по-вашему, должен быть применен к элементу, не работает. Обычно проблема заключается в том, что вы создали два правила, которые могут потенциально применяться к одному и тому же элементу. <strong>Каскад</strong> и тесно связанная концепция <strong>специфичности</strong> <span style='font-family: "Times New Roman",serif; font-size: 12.0pt; line-height: 200%;'>— </span> это механизмы, которые контролируют, какое именно правило применяется, когда имеется такой конфликт. Стиль вашего элемента может определять не то правило, на которое вы рассчитывали, поэтому вам необходимо понимать, как работают эти механизмы.</p>
+
+<p>Также значимой является концепция <strong>наследования, </strong>которая заключается в том, что некоторые свойства CSS наследуют по умолчанию значения, установленные для родительского элемента текущего элемента, а некоторые не наследуют. Это также может стать причиной поведения, которое вы, возможно, не ожидаете.</p>
+
+<p>Давайте начнём с краткого обзора ключевых моментов, которых мы касаемся, далее рассмотрим каждый из них по очереди и посмотрим, как они взаимодействуют друг с другом и с вашим CSS. Это может показаться набором сложных для понимания понятий. Однако, когда вы получите больше опыта в написании CSS, для вас станет более очевидным то, как это работает.</p>
+
+<h3 id="Каскад">Каскад</h3>
+
+<p>Каскад таблицы стилей, если говорить упрощённо, означает, что порядок следования правил в CSS имеет значение; когда применимы два правила, имеющие одинаковую специфичность, используется то, которое идёт в CSS последним.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В приведенном ниже примере у нас есть два правила, которые могут применяться к h1. В результате </span><span title="">h1 окрасится синим цветом </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> эти правила имеют идентичный селектор и, следовательно, одинаковую специфичность, поэтому побеждает последний в порядке следования.</span></span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p>
+
+<h3 id="Специфичность">Специфичность</h3>
+
+<p>Cпецифичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. <em>Различные типы селекторов ( селекторы элементов <code>h1{...}</code>, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность.</em> По существу, это мера того, насколько специфическим будет отбор по селектору:</p>
+
+<ul>
+ <li>Селектор элементов ( <em>например <code>h1</code></em> ) менее специфичен — он выберет все элементы этого типа на странице — поэтому получит меньше баллов.</li>
+ <li>
+  <p class="brush: css">Селектор класса более специфичен — он выберет только те элементы на странице, которые имеют конкретное значение атрибута <code>class</code> — поэтому получит больше баллов, <em>селектор класса применится после селектора элемента и поэтому перекроет его стили</em>.</p>
+ </li>
+</ul>
+
+<p>Например. Как указано ниже, у нас опять есть два правила, которые могут применяться к <code>h1</code>. <code>h1</code> в результате будет окрашен красным цветом — селектор класса даёт своему правилу более высокую специфичность, поэтому он будет применён, несмотря на то, что правило для селектора элемента расположено ниже в таблице стилей.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p>
+
+<p>Позже мы объясним, как сделать оценку специфичности, и прочие детали.</p>
+
+<h3 id="Наследование">Наследование</h3>
+
+<p>Наследование также надо понимать в этом контексте — некоторые значения свойства CSS, установленные для родительских элементов наследуются их дочерними элементами, а некоторые нет.</p>
+
+<p>Например, если вы установили значение <code>color</code> и <code>font-family</code> для элемента, то каждый элемент внутри него также будет иметь этот цвет и шрифт, если только вы не применили к ним напрямую стиль с другим цветом и шрифтом.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p>
+
+<p>Некоторые свойства не наследуются — например, если вы установили для элемента {{cssxref("width")}} равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы черезвычайно трудно использовать!</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: На страницах справочника CSS свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: <a href="https://developer.mozilla.org/ru-RU/docs/Web/CSS/color#Specifications">color property Specifications section</a>.</p>
+</div>
+
+<h2 id="Понимание_взаимодействия_этих_концепций">Понимание взаимодействия этих концепций</h2>
+
+<p>Эти три концепции вместе определяют, какая CSS применяется и к какому элементу; в следующих разделах мы увидим, как они взаимодействуют. Это может показаться сложным, но вы начнёте лучше понимать их по мере приобретения опыта работы с CSS, и вы всегда можете обратиться к справочной информации, если что-то забыли. Даже опытные разработчики не помнят всех деталей!</p>
+
+<p>Видео ниже показывает, как вы можете использовать Firefox DevTools для проверки каскада стилей, спецификации, и т.д. на странице:</p>
+
+<p>{{EmbedYouTube("Sp9ZfSvpf7A")}}</p>
+
+<h2 id="Понимание_наследования">Понимание наследования</h2>
+
+<p>Итак, наследование. В примере ниже мы имеем {{HTMLElement("ul")}} с двумя уровнями неупорядоченных списков, вложенных в него. Мы устанавили для внешнего <code>&lt;ul&gt;</code> стиль границы, внутренние отступы и цвет шрифта.</p>
+
+<p>Цвет шрифта применён к прямому потомку, но также и к непрямому потомку — к прямому потомку <code>&lt;li&gt;</code> и к элементам внутри первого вложенного списка. Далее мы добавили класс <code>special</code> ко второму вложенному списку и применили к нему другой цвет шрифта. Теперь это свойство наследуется всеми его потомками.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p>
+
+<p>Такие свойства, как ширина (как в примере выше), внутренние и внешние отступы и стиль границы не наследуются. Если бы потомки нашего списка наследовали бы границу, то каждый отдельный список и каждая позиция в списке получили бы такую же границу — вряд ли мы хотели бы получить такой эффект!</p>
+
+<p>Какие свойства наследуются по умолчанию, а какие нет, чаще всего определяется здравым смыслом.</p>
+
+<h3 id="Контроль_наследования">Контроль наследования</h3>
+
+<p>CSS предоставляет четыре специальных универсальных значения свойства для контроля наследования. Каждое свойство CSS принимает эти значения.</p>
+
+<dl>
+ <dt>{{cssxref("inherit")}}</dt>
+ <dd>Устанавливает значение свойства, применённого к элементу, таким же, как у его родительского элемента. Фактически, это "включает наследование".</dd>
+ <dt>{{cssxref("initial")}}</dt>
+ <dd>Устанавливает значение свойства, применённого к выбранному элементу, равным <a href="https://wiki.developer.mozilla.org/ru-RU/docs/Web/CSS/initial_value">initial value</a> этого свойства (<em>в соответствии с настройками браузера по умолчанию. Если в таблице стилей браузера отсутствует значение этого свойства, оно наследуется естественным образом.)</em></dd>
+ <dt>{{cssxref("unset")}}</dt>
+ <dd>Возвращает свойству его естественное значение, что означает, что если свойство наследуется естественным образом, оно действует как <code>inherit</code>, иначе оно действует как <code>initial</code>.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Существует также более новое значение {{cssxref("revert")}}, которое имеет ограниченную поддержку браузерами.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Смотрите {{SectionOnPage("/ru-RU/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} для более подробной информации о каждом из них, и о том, как они работают.</p>
+</div>
+
+<p>Можно посмотреть список ссылок и изучить, как работают универсальные значения. Пример, следующий ниже, позволяет вам поиграть с CSS и увидеть, что происходит, когда вы вносите изменения. Подобные эксперименты с кодом — лучший способ освоить HTML и CSS.</p>
+
+<p>Например:</p>
+
+<ol>
+ <li>Второй элемент списка имеет класс <code>my-class-1</code>. Таким образом, цвет для следующего вложенного элемента <code>a</code> устанавливается по наследству. Как изменится цвет, если это правило будет удалено?</li>
+ <li>Понятно ли, почему третий и четвертый элементы <code>a</code> имеют именно такой цвет? Если нет, перечитайте описание значений, представленное выше.</li>
+ <li>Какая из ссылок изменит цвет, если вы зададите новый цвет для элемента <code>&lt;a&gt;</code> — например: <code>a { color: red; }</code>?</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}}</p>
+
+<h3 id="Возврат_всех_исходных_значений_свойств">Возврат всех исходных значений свойств</h3>
+
+<p>Стенографическое свойство CSS <code>all</code> можно использовать для того, чтобы присвоить одно из значений наследования к (почти) всем свойствам одновременно. Это одно из четырех значений (<code>inherit</code>, <code>initial</code>, <code>unset</code>, или <code>revert</code>). Это удобный способ для отмены изменений, внесённых в стили, для того, чтобы вы могли вернуться к стартовой точке перед внесением новых изменений.</p>
+
+<p>В примере ниже имеются два блока <code>&lt;blockquote&gt;</code>. Первый имеет стиль, который применён к самому элементу <code>blockquote</code>, второй имеет класс <code>fix-this</code>, который устанавливает значение <code>all</code> в <code>unset</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p>
+
+<p>Попробуйте установить для <code>all</code> ещё одно из доступных значений и исследуйте, в чём заключается разница.</p>
+
+<h2 id="Понимание_каскада">Понимание каскада</h2>
+
+<p>Теперь мы понимаем, почему параграф, следующий по глубине в структуре HTML документа, имеет тот же цвет, что CSS применяет к body, а вводные уроки дали понимание того, как изменить применение CSS к чему-либо в любой точке документа — или назначить CSS элементу, или создать класс. Теперь рассмотрим подробнее то, как каскад определяет выбор CSS правил, применяемых в случае влияния на стиль элемента нескольких объектов.</p>
+
+<p>Вот три фактора, перечисленные в порядке возрастания важности. Следующий отменяет предыдущий.</p>
+
+<ol>
+ <li><strong>Порядок следования</strong></li>
+ <li><strong>Специфичность</strong></li>
+ <li><strong>Важность</strong></li>
+</ol>
+
+<p>Мы внимательно изучим их, чтобы увидеть, как именно браузеры определяют, какой CSS следует применить.</p>
+
+<h3 id="Порядок_следования">Порядок следования</h3>
+
+<p>Мы уже видели, какое значение для каскада имеет порядок следования. Если у вас несколько правил, которые имеют одинаковую важность, то побеждает правило, которое идет последним в CSS. Другими словами, правила, более близкие к самому элементу, переписывают более ранние, пока последнее не победит, оно и стилизует элемент. </p>
+
+<h3 id="Специфичность_2">Специфичность</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Понимая, что порядок следования правил имеет значение, в какой-то момент вы окажетесь в ситуации, когда вы знаете, что правило появляется позже в таблице стилей, но применяется более раннее, конфликтующее правило.</span> <span title="">Это связано с тем, что более раннее правило имеет более <strong>высокую специфичность</strong> </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> оно более специфично и поэтому выбирается браузером как правило, которое должно стилизовать элемент.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Как мы видели ранее в этом уроке, селектор класса имеет больший вес, чем селектор элемента, поэтому свойства, определенные в классе, будут переопределять свойства, примененные непосредственно к элементу.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Здесь следует отметить, что, хотя мы думаем о селекторах и правилах, применяемых к объекту, который они выбирают, переписывается не всё правило, а только свойства, которые являются одинаковыми.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Такое поведение помогает избежать повторения в вашем CSS.</span> <span title="">Обычной практикой является определение общих стилей для базовых элементов, а затем создание классов для тех, которые отличаются.</span> <span title="">Например, в таблице стилей ниже мы определяем общие стили для заголовков второго уровня, а затем создаём несколько классов, которые изменяют только некоторые свойства и значения.</span> <span title="">Определенные вначале значения применяются ко всем заголовкам, затем к заголовкам с классами применяются более конкретные значения.</span></span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Давайте теперь посмотрим, как браузер будет вычислять специфичность.</span> <span title="">Мы уже знаем, что селектор элемента имеет низкую специфичность и может быть перезаписан классом.</span> <span title="">По существу, значение в баллах присуждается различным типам селекторов, и их сложение дает вам вес этого конкретного селектора, который затем может быть оценён в сравнении с другими потенциальными соперниками.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Степень специфичности, которой обладает селектор, измеряется с использованием четырех различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> четыре однозначные цифры в четырех столбцах:</span></span></p>
+
+<ol>
+ <li><strong>Тысячи</strong>: поставьте единицу в эту колонку, если объявление стиля находится внутри атрибута {{htmlattrxref("style")}} (встроенные стили). Такие объявления не имеют селекторов, поэтому их специфичность всегда просто 1000.</li>
+ <li><strong>Сотни</strong>: поставьте единицу в эту колонку за каждый селектор ID, содержащийся в общем селекторе.</li>
+ <li><strong>Десятки</strong>: поставьте единицу в эту колонку за каждый <span class="tlid-translation translation" lang="ru"><span title="">селектор класса, селектор атрибута или псевдокласс, содержащийся в общем селекторе.</span></span></li>
+ <li><strong>Единицы</strong>: поставьте общее число единиц в эту колонку за каждый <span class="tlid-translation translation" lang="ru"><span title="">селектор элемента или псевдоэлемент, содержащийся в общем селекторе.</span></span></li>
+</ol>
+
+<div class="note">
+<p><span class="tlid-translation translation" lang="ru"><span title=""><strong>Примечание:</strong> Универсальный селектор (*), комбинаторы (+, &gt;,  ~, '') и псевдо-класс отрицания (:not) не влияют на специфичность.</span></span></p>
+</div>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Следующая таблица показывает несколько несвязанных примеров, которые помогут вам</span></span> разобраться. <span class="tlid-translation translation" lang="ru"><span title="">Посмотрите их все и убедитесь, что вы понимаете, почему они обладают той специфичностью, которую мы им дали.</span></span> <span class="tlid-translation translation" lang="ru"><span title="">Мы ещё не рассмотрели селекторы детально, но вы можете найти подробную информацию о каждом селекторе в</span></span> <a href="/ru/docs/Web/CSS/CSS_Селекторы">справочнике селекторов</a> MDN.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Селектор</th>
+   <th scope="col">Тысячи</th>
+   <th scope="col">Сотни</th>
+   <th scope="col">Десятки</th>
+   <th scope="col">Единицы</th>
+   <th scope="col">Специфичность</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>h1</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1</td>
+   <td>0001</td>
+  </tr>
+  <tr>
+   <td><code>h1 + p::first-letter</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>3</td>
+   <td>0003</td>
+  </tr>
+  <tr>
+   <td><code>li &gt; a[href*="en-US"] &gt; .inline-warning</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>2</td>
+   <td>2</td>
+   <td>0022</td>
+  </tr>
+  <tr>
+   <td><code>#identifier</code></td>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0100</td>
+  </tr>
+  <tr>
+   <td>Без селектора, с правилом внутри атрибута {{htmlattrxref("style")}} элемента.</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1000</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Прежде чем мы продолжим, давайте посмотрим на пример в действии.</span></span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Так что здесь происходит?</span> <span title="">Прежде всего, нас интересуют только первые семь правил этого примера, и, как вы заметите, мы включили их значения специфичности в комментарий перед каждым правилом.</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Первые два правила конкурируют за стилизацию цвета фона ссылки </span></span> — <span class="tlid-translation translation" lang="ru"><span title=""> второе выигрывает и делает фоновый цвет синим, потому что у него есть дополнительный селектор ID в цепочке: его специфичность 201 против 101.</span></span></li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Третье и четвертое правило конкурируют за стилизацию цвета текста ссылки </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы</span><span title="">.</span> <span title="">Таким образом, приоритетная специфичность составляет 113 против 104.</span></span></li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Правила 5–7 соревнуются за определение стиля границы ссылки при наведении курсора.</span> <span title="">Шестой селектор со специфичностью 23 явно проигрывает пятому со специфичностью 24 </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> у него в цепочке на один селектор элемента меньше.</span> <span title="">Седьмой селектор, однако, превосходит как пятый, так и шестой </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> </span></span><span class="tlid-translation translation" lang="ru"><span title="">он имеет то же количество подселекторов в цепочке, что и пятый, но один элемент заменён селектором класса.</span> <span title="">Таким образом, приоритетная специфичность 33 против 23 и 24.</span></span></li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: Это был условный пример для более простого усвоения. В действительности, каждый тип селектора имеет собственный уровень специфичности, который не может быть замещён селекторами с более низким уровнем специфичности. Например, <em>миллион</em> соединённых селекторов <strong>класса</strong> не способны переписать правила <em>одного</em> селектора <strong>id</strong>.</p>
+
+<p>Более правильный способ вычисления специфичности состоит в индивидуальной оценке уровней специфичности, начиная с наивысшего и продвигаясь к самому нижнему, когда это необходимо. Только когда  оценки уровня специфичности совпадают, следует вычислять следующий нижний уровень; в противном случае, вы можете пренебречь селекторами с меньшим уровнем специфичности, поскольку они никогда не смогут преодолеть уровни более высокой специфичности.</p>
+</div>
+
+<h3 id="!important">!important</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Существует специальный элемент CSS, который вы можете использовать для отмены всех вышеперечисленных вычислений, однако вы должны быть очень осторожны с его использованием</span></span> — <code>!important</code>. <span class="tlid-translation translation" lang="ru"><span title="">Он используется, чтобы сделать конкретное свойство и значение самыми специфичными, таким образом переопределяя нормальные правила каскада.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Взгляните на этот пример, где у нас есть два абзаца, один из которых имеет ID.</span></span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Давайте пройдемся по этому примеру, чтобы увидеть, что происходит </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:</span></span></p>
+
+<ol>
+ <li>Вы увидите, что применены значения {{cssxref("color")}} и {{cssxref("padding")}} третьего правила, но {{cssxref("background-color")}} — нет. Почему? <span class="tlid-translation translation" lang="ru"><span title="">Действительно, все три безусловно должны применяться, потому что правила, более поздние в порядке следования, обычно переопределяют более ранние правила.</span></span></li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Однако вышеприведенные правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.</span></span></li>
+ <li>Оба элемента имеют {{htmlattrxref("class")}} с названием <code>better</code>, но у второго также есть {{htmlattrxref("id")}} с названием <code>winning</code>. <span class="tlid-translation translation" lang="ru"><span title="">Поскольку ID имеют <em>ещё более высокую</em> специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> селекторы ID <em>очень специфичны</em>, на что они и нацелены), красный цвет фона и однопиксельная</span> <span title="">черная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.</span></span></li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">2-й элемент получил красный цвет фона и отсутствие границы.</span> Почему<span title="">?</span> </span> Из-за объявления <code>!important</code> во втором правиле — размещение которого после <code>border: none</code> <span class="tlid-translation translation" lang="ru"><span title="">означает, что это объявление перевесит значение границы в предыдущем правиле, даже если ID имеет более высокую специфичность.</span></span></li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Единственный способ переопределить объявление</span></span> <code>!important</code> –  <span class="tlid-translation translation" lang="ru"><span title="">это включить другое объявление </span></span><code>!important</code> <span class="tlid-translation translation" lang="ru"><span title="">в правило <em>с такой же специфичностью</em> позже или в правило с более высокой специфичностью.</span></span></p>
+</div>
+
+<p>Полезно знать о существовании <code>!important</code>, чтобы вы понимали, что это такое, когда встретите в чужом коде. <strong><span class="tlid-translation translation" lang="ru"><span title="">Тем не менее, мы настоятельно рекомендуем вам никогда не использовать его, если в этом нет острой необходимости</span></span>.</strong> <code>!important</code> <span class="tlid-translation translation" lang="ru"><span title="">меняет обычный порядок работы каскада, поэтому он может серьёзно затруднить отладку проблем CSS, особенно в большой таблице стилей.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Одна из ситуаций, в которой вам, возможно, придётся это использовать, </span></span> — <span class="tlid-translation translation" lang="ru"><span title=""> это когда вы работаете с CMS, где вы не можете редактировать модули CSS ядра, и вы действительно хотите переопределить стиль, который нельзя переопределить другим способом.</span> <span title="">Но, вообще говоря, не стоит использовать этот элемент, если можно этого избежать.</span></span></p>
+
+<h2 id="Влияние_расположения_CSS">Влияние расположения CSS</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Наконец, также полезно отметить, что важность объявления CSS зависит от того, в какой таблице стилей оно указано </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> у пользователя есть возможность установить индивидуальные таблицы стилей для переопределения стилей разработчика, например, пользователь может иметь проблемы со зрением и захочет</span> <span title="">установить размер шрифта на всех посещаемых им веб-страницах в два раза больше нормального размера, чтобы облегчить чтение.</span></span></p>
+
+<h2 id="Подведение_итогов">Подведение итогов</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Конфликтующие объявления будут применяться в следующем порядке, с учётом замены более ранних более поздними</span></span>:</p>
+
+<ol>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Объявления в таблицах стилей клиентского приложения (например, стили браузера по умолчанию, используемые, когда не заданы другие стили).</span></span></li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Обычные объявления в пользовательских таблицах стилей (индивидуальные стили устанавливаются пользователем).</span></span></li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Обычные объявления в авторских таблицах стилей (это стили, установленные нами, веб-разработчиками)</span></span>.</li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Важные объявления в авторских таблицах стилей.</span></span></li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Важные объявления в пользовательских таблицах стилей.</span></span></li>
+</ol>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Для таблиц стилей веб-разработчиков имеет смысл переопределить пользовательские таблицы стилей так, чтобы можно было сохранить запланированный дизайн, но иногда у пользователей есть веские причины для переопределения стилей веб-разработчика, как упомянуто выше </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> это может быть достигнуто с помощью использования</span></span> <code>!important</code> <span class="tlid-translation translation" lang="ru"><span title="">в их правилах.</span></span></p>
+
+<h2 id="Проверьте_ваши_навыки"><span class="tlid-translation translation" lang="ru"><span title="">Проверьте ваши навыки</span></span></h2>
+
+<p>Мы охватили много тем в этой статье. А вы смогли запомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4_%D0%B7%D0%B0%D0%B4%D0%B0%D1%87%D0%B8">Test your skills: the Cascade</a>.</p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы поняли большую часть этой статьи,</span></span><span class="tlid-translation translation" lang="ru"><span title=""> отлично </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> вы начали знакомиться с фундаментальными механизмами CSS.</span> <span title="">Далее мы рассмотрим селекторы подробно.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы не до конца поняли каскад, специфичность и наследование, не волнуйтесь!</span> <span title="">Это, безусловно, самая сложная вещь из тех, что мы до сих пор  изучали в курсе, и даже профессиональные веб-разработчики иногда считают её коварной.</span> <span title="">Мы советуем вам вернуться к этой статье несколько раз в ходе изучения курса и продолжать обдумывать эту тему.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Обратитесь сюда, если вы столкнетесь со странными проблемами, когда стили применяются не так, как вы ожидаете.</span> <span title="">Это может быть проблемой специфичности.</span></span></p>
+
+<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a>
+  <ul>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a></li>
+  </ul>
+ </li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки (The box model)</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/debugging_css/index.html b/files/ru/learn/css/building_blocks/debugging_css/index.html
new file mode 100644
index 0000000000..1e78277f4b
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/debugging_css/index.html
@@ -0,0 +1,200 @@
+---
+title: Отладка CSS
+slug: Learn/CSS/Building_blocks/Debugging_CSS
+translation_of: Learn/CSS/Building_blocks/Debugging_CSS
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Порой, при написании CSS, вы будете сталкиваться с проблемой, при которой будет казаться, что CSS не делает того, чего вы оживаете от него. <span class="tlid-translation translation" lang="ru"><span title="">Возможно, вы считаете, что определенный селектор должен соответствовать элементу, но ничего не происходит, или поле имеет размер, отличный от ожидаемого.</span></span> Эта статья поможет вам с тем, как отладить CSS проблемы и покажет вам как DevTools (инструменты разработчика), включенные во все современные браузеры, могут помочь разобраться с тем, что происходит.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Задачи:</th>
+   <td>
+    <p>Изучить основы того, что такое DevTools и как выполнять простую инспекцию и редактирование CSS.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Как_получить_доступ_к_DevTools_браузера">Как получить доступ к DevTools браузера</h2>
+
+<p>Статья <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> это обновленное руководство объясняющее как получить доступ к инструментам разных браузеров и платформ. Хотя вы можете выбрать в основном разрабатывать в конкретном браузере и поэтому инструменты, включенные в этот браузер, будут вам знакомы больше всего, стоит знать, как получать доступ к инструментам и в других браузерах. Это поможет вам если вы наблюдаете разное отображение среди разных браузеров.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools.</span></span> Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>, и <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>. Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений примененных к элементам на вашей странице и для выполнения изменений к ним в редакторе.</p>
+
+<p>В этом уроке мы рассмотрим некоторые полезные функции Firefox DevTools для работы с CSS. Для того чтобы сделать это я буду использовать <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">файл примера</a>. Загрузите его в новой вкладке если хотите следовать и откройте ваш DevTools как описано в статье, ссылка на которую дана выше.</p>
+
+<h2 id="DOM_vs_View_Source">DOM vs View Source</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">То, что может сбить с толку новичков в DevTools, </span></span>— <span class="tlid-translation translation" lang="ru"><span title=""> это разница между тем, что вы видите когда</span></span> <a href="/en-US/docs/Tools/View_source">просматриваете источник</a> веб-страницы или смотрите на HTML файл который поместили на сервер и то что вы видите на <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML панели</a> DevTools. Хотя это выглядит примерно так же, как то, что вы видите через View Source, существуют некоторые отличия.</p>
+
+<p>В визуализированном DOM браузер мог скорректировать некоторый плохо-написанный HTML за вас. Если вы неправильно закрыли элемент, например открывали <code>&lt;h2&gt;</code>, но закрыли <code>&lt;/h3&gt;</code>, браузер поймет, что вы хотели сделать и HTML в DOM будет правильно закрывать <code>&lt;h2&gt;</code> с <code>&lt;/h2&gt;</code>. Браузер также нормализует весь HTML,а DOM также покажет любые изменения сделанные через JavaScript.</p>
+
+<p>View Source же для сравнения — это <span class="tlid-translation translation" lang="ru"><span title="">просто исходный код HTML, хранящийся на сервере. </span></span><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML дерево</a> в вашем DevTools показывает, <span class="tlid-translation translation" lang="ru"><span title="">что именно браузер отображает в любой момент времени, что дает вам представление от том, что действительно происходит.</span></span></p>
+
+<h2 id="Инспекция_примененного_CSS">Инспекция примененного CSS</h2>
+
+<p>Выбирать элемент на вашей странице можно либо правым/ctrl-кликом по нему и выбрав <em>Inspect</em>, либо выбрав его из дерева HTML в левой панели DevTools. Попробуйте выбрать элемент с классом <code>box1</code>; это первый элемент на странице с блоком, ограниченным рамками вокруг него.</p>
+
+<p><img alt="The example page for this tutorial with DevTools open." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p>
+
+<p>Если вы посмотрите на <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> справа от вашего HTML, вы должны увидеть свойства и значения CSS примененные к элементу. Вы увидите правила, напрямую примененные к классу <code>box1</code> и также CSS который наследуется блоком от предков, в этом случае от <code>&lt;body&gt;</code>. Это полезно в случае, если вы видите, что применяется какой-либо CSS, который вы не ожидали. Вполне возможно, что он наследуется от родительского элемента и вам необходимо добавить правило, чтобы переписать его в контексте этого элемента.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Также полезна возможность расширения (развертывания) свойств коротких записей.</span></span> В нашем примере используется короткая запись <code>margin</code>.</p>
+
+<p><strong>Кликните по маленькой стрелке для того, чтобы развернуть вид, показывающий полную запись различных свойств и значений.</strong></p>
+
+<p><strong>Вы можете переключать значения в Rules view в положение включено или выключено если эта панель активна — <span class="tlid-translation translation" lang="ru"><span title="">если навести на нее курсор мыши, появятся флажки</span></span>. <span class="tlid-translation translation" lang="ru"><span title="">Снимите флажок правила, например, border-radius, и CSS перестанет применяться.</span></span></strong></p>
+
+<p>Вы можете использовать это чтобы делать сравнения по типу A/B, принимая решение если что-то выглядит лучше с примененным правилом или нет, а также это помогает в отладке — например если layout не в порядке и вы пытаетесь разобраться какое свойство является причиной проблемы.</p>
+
+<h2 id="Редактирование_значений">Редактирование значений</h2>
+
+<p>В дополнение к включению и выключению свойств, вы можете редактировать их значения. Возможно, вам захочется посмотреть будет ли другой цвет выглядеть лучше или захотите настроить размер чего-либо. DevTools поможет вам сэкономить кучу времени редактируя таблицу стиля и перезагружая страницу.</p>
+
+<p><strong>Выбрав <code>box1</code>, кликните на образчик (маленький цветной круг) который показывает цвет, примененный к границе. Откроется панель выбора цвета и сможете попробовать некоторые другие цвета; это действие обновится на странице в режиме реального времени. </strong> <strong><span class="tlid-translation translation" lang="ru"><span title="">Аналогичным образом вы можете изменить ширину или стиль границ.</span></span></strong></p>
+
+<p><img alt="DevTools Styles Panel with a color picker open." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p>
+
+<h2 id="Добавление_нового_свойства">Добавление нового свойства</h2>
+
+<p>Используя DevTools вы можете добавлять новые свойства. Возможно, вы осознали, что не хотите, чтобы ваш блок наследовал размер шрифта элементов <code>&lt;body&gt;</code>, а хотите установить его собственный конкретный размер. Вы можете попробовать это в DevTools до того, как внесете изменения в ваше CSS файл.</p>
+
+<p><strong>Вы можете кликнуть по закрывающей фигурной скобке в правиле чтобы начать вводить новое объявление в нем, с этого момента вы можете начинать вводить новое свойство и DevTools покажет список автозаполнения подходящих свойств. Выбрав <code>font-size</code>, вводите значение, которое хотите попробовать. Вы также можете кликнуть на кнопку + чтобы добавить дополнительное правило с тем же селектором и добавить ваши новые правила туда.</strong></p>
+
+<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Также существуют другие полезные функции в Rules view, например объявления с не валидными значениями зачеркнуты. Вы можете узнать больше в <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a>.</p>
+</div>
+
+<h2 id="Понимание_модели_блоков">Понимание модели блоков</h2>
+
+<p>В предыдущем уроке мы обсудили <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">модель блоков</a> и <span class="tlid-translation translation" lang="ru"><span title="">тот факт, что у нас есть альтернативная модель блоков, которая изменяет способ расчета размера элементов основываясь на размере который вы им задаете, плюс </span></span>padding и границы. DevTools может действительно помочь вам понять, как вычисляется размер элемента.</p>
+
+<p><a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Layout view</a> показывает вам диаграмму блочной модели выбранного элемента, вместе с описанием свойств и значений, которые изменяют способ расположения элемента. Это включает описание свойств, которые вы могли и не использовать напрямую к элементу, но которые имеют набор начальных значений.</p>
+
+<p>В этой панели одним из детальных свойств является свойство <code>box-sizing</code>, которое контролирует какую блочную модель использует элемент.</p>
+
+<p><strong>Сравните два блока с классами <code>box1</code> и <code>box2</code>. Они оба имеют одинаковую ширину (400px) примененную к ним, однако <code>box1</code> визуально шире. В layout panel вы можете увидеть, что он использует <code>content-box</code>. Это значение, которое принимает размер, который вы даете элементу и затем добавляет padding </strong><strong>и ширину границ.</strong></p>
+
+<p>Элемент с классом <code>box2</code> использует <code>border-box</code>, поэтому здесь padding и граница вычтены из размера, который вы дали элементу. <span class="tlid-translation translation" lang="ru"><span title="">Это означает, что пространство, занимаемое на странице блоком, соответствует указанному вами размеру </span></span>— в нашем случае <code>width: 400px</code>.</p>
+
+<p><img alt="The Layout section of the DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Узнать больше на <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examining and Inspecting the Box Model</a>.</p>
+</div>
+
+<h2 id="Решение_проблем_специфичности">Решение проблем специфичности</h2>
+
+<p>Порой во время разработки, в частности когда вам нужно отредактировать CSS на существующем сайте вы, вы столкнетесь с трудностями применения некоторого CSS. Вне зависимости от того, что вы делаете, кажется, что элемент просто не реагирует на CSS. Что же обычно происходит в таких ситуациях - это то, что более специфичный селектор переопределяет ваши изменения и в таких случаях DevTools действительно поможет вам.</p>
+
+<p>В нашем примере два слова обернуты в элемент <code>&lt;em&gt;</code>. Один отображается оранжевым, а второй ярко-розовым. В CSS мы применили:</p>
+
+<pre class="brush: css">em {
+  color: hotpink;
+  font-weight: bold;
+}</pre>
+
+<p>Кроме того в таблице стилей есть правило с селектором <code>.special</code>:</p>
+
+<pre class="brush: css">.special {
+  color: orange;
+}</pre>
+
+<p>Как вы помните из урока <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">каскад и наследование</a> где мы обсуждали специфичность, селекторы классов являются более специфичными чем селекторы элементов, и поэтому это то значение которое применяется. DevTools может помочь вам найти такие проблемы, особенно если информация закопана где-то в дебрях огромной таблицы стилей.</p>
+
+<p><strong>Проведите инспекцию <code>&lt;em&gt;</code> с классом <code>.special</code> и DevTools покажет вам что оранжевый это цвет который применяется, а также отобразит вам свойство <code>color</code> примененное к em зачеркнутым. Теперь вы можете видеть, что класс переопределяет селектор элемента. </strong></p>
+
+<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p>
+
+<h2 id="Узнайте_больше_о_Firefox_DevTools">Узнайте больше о Firefox DevTools</h2>
+
+<p>На MDN имеется много информации о Firefox DevTools. <span class="tlid-translation translation" lang="ru"><span title="">Взгляните на основной </span></span><a href="/en-US/docs/Tools">раздел DevTools</a>, а больше деталей о вещах которые коротко рассмотрели в этом уроке смотрите <a href="/en-US/docs/Tools/Page_Inspector#How_to">The How To Guides</a>.</p>
+
+<h2 id="Отладка_проблем_в_CSS">Отладка проблем в CSS</h2>
+
+<p>DevTools может помочь при решении проблем CSS, итак, когда вы окажетесь в ситуации, где CSS ведет себя не так, как вы ожидаете, как же вам следует решать эту проблему? Следующие шаги должны помочь.</p>
+
+<h3 id="Сделайте_шаг_назад">Сделайте шаг назад</h3>
+
+<p>Любая проблема кодирования может быть неприятной, особенно проблемы CSS, потому что зачастую вы не получаете каких-либо сообщений об ошибках чтобы найти решение в интернете. Если вы начинаете разочаровываться оторвитесь от проблемы на время — прогуляйтесь, попейте, пообщайтесь с коллегами или займите себя чем-нибудь другим на время. Иногда решение появляется магическим образом, когда вы перестаете думать об этой проблеме, а даже если нет, работать над ней гораздо проще, когда вы чувствуете себя отдохнувшими.</p>
+
+<h3 id="Валидны_ли_ваши_HTML_и_CSS">Валидны ли ваши HTML и CSS?</h3>
+
+<p>Браузеры ожидают, что CSS и HTML написаны корректно, однако в это же время браузеры очень снисходительны и сделают все чтобы отобразить вашу веб-страницу даже если у вас есть ошибки в разметке и таблице стилей. Если у вас есть ошибки в коде, то браузеру нужно угадать что вы имели в виду, и он может принять решение не такое какое было у вас в голове. И дополнительно, два разных браузера могут решать проблему двумя разными способами. Поэтому хорошим первым шагом является запуск вашего HTML и CSS в валидаторе чтобы выявить и исправить ошибки.</p>
+
+<ul>
+ <li><a href="https://jigsaw.w3.org/css-validator/">CSS Validator</a></li>
+ <li><a href="https://validator.w3.org/">HTML validator</a></li>
+</ul>
+
+<h3 id="Поддерживаются_ли_свойство_и_значение_браузером_в_котором_вы_тестируете">Поддерживаются ли свойство и значение браузером в котором вы тестируете?</h3>
+
+<p>Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не "сломается", кроме того, что тот CSS не будет применен. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение "подсетки" (subgrid) {{cssxref("grid-template-columns")}}.</p>
+
+<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p>
+
+<p>Вы также можете смотреть таблицы совместимости браузеров в конце всех страниц свойств MDN. <span class="tlid-translation translation" lang="ru"><span title="">Они показывают, что браузер поддерживает это свойство, часто "ломается", если есть поддержка только для какого-то использования свойства, и нет для других. Таблица ниже показывает данные совместимости свойства </span></span> {{cssxref("shape-outside")}}.</p>
+
+<p>{{compat("css.shape-outside")}}</p>
+
+<h3 id="Не_переопределяется_ли_ваш_CSS_чем-нибудь_еще">Не переопределяется ли ваш CSS чем-нибудь еще?</h3>
+
+<p>Это тот момент, когда изученная вами информация о специфичности придет вам на помощь. Если у вас имеется что-то более специфичное, что может переписывать то, что вы пытаетесь сделать, то вы можете вступить в очень расстраивающую игру пытаясь выяснить что же именно. Однако, как описано выше, DevTools покажет вам какой CSS применяется, и вы сможете решить, как сделать новый селектор достаточно специфичным чтобы переопределить его.</p>
+
+<h3 id="Сделайте_сокращенный_контрольный_пример_проблемы">Сделайте <span class="tlid-translation translation" lang="ru"><span title="">сокращенный контрольный пример</span></span> проблемы</h3>
+
+<p>Если проблема не решена шагами, описанными выше, тогда вам надо будет сделать своего рода расследование. Лучшее что можно сделать в этом случае это создать нечто известное как с<span class="tlid-translation translation" lang="ru"><span title="">окращенный контрольный пример</span></span>. Возможность "уменьшить проблему" — действительно полезный навык. Он поможет вам найти проблемы как в вашем собственном коде, так в коде ваших коллег, а также <span class="tlid-translation translation" lang="ru"><span title="">позволит вам сообщать об ошибках и более эффективно обращаться за помощью.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Сокращенный контрольный пример </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">это пример кода, который демонстрирует проблему самым простым способом с удалением несвязанного окружающего контента и стиля. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Это часто будет означать удаление проблемного кода из вашего макета (</span></span>layout<span class="tlid-translation translation" lang="ru"><span title="">), чтобы сделать небольшой пример, который показывает только этот код или функцию.</span></span></p>
+
+<p>Создание сокращенного контрольного примера:</p>
+
+<ol>
+ <li>Если ваша разметка генерируется динамически — например через CMS — сделайте статичную версию вывода, которая показывает проблему. Сайты обмена кодами как <a href="https://codepen.io/">CodePen</a> являются полезными для размещения сокращенных контрольных примеров, так как они доступны онлайн, и вы легко можете поделиться с коллегами. Вы можете начать просматривать страницу во View Source и скопировать HTML в CodePen, затем взять релевантный CSS и JavaScript и включить их тоже. После этого вы можете проверить очевидна ли проблема.</li>
+ <li>Если удаление JavaScript не устраняет проблему, то не включайте JavaScript. Если же удаление JavaScript <em>устраняет</em> проблему, тогда удалите столько JavaScript, сколько сможете, оставляя все что вызывает проблему.</li>
+ <li>Удалите весь HTML который не влияет на проблему. Удалите компоненты или даже главные элементы макета. Опять же постарайтесь добиться наименьшего количества кода, который все еще показывает проблему.</li>
+ <li>Удалите весь CSS который не влияет на проблему.</li>
+</ol>
+
+<p>В процессе вы можете обнаружить что причиняет проблему или, хотя бы, сможете включать или выключать ее путем удаления чего-то конкретного. Стоит добавлять какие-то комментарии к вашему коду по ходу изучения вещей. Если вам надо попросить помощи, то они покажут человеку, помогающему вам что вы уже пытались сделать. <span class="tlid-translation translation" lang="ru"><span title="">Это может дать вам достаточно информации для поиска возможных проблем и обходных путей.</span></span></p>
+
+<p>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.</p>
+
+<p>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 <a href="https://bugzilla.mozilla.org">bugzilla site</a>).</p>
+
+<p>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.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html
new file mode 100644
index 0000000000..708c8a9d39
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html
@@ -0,0 +1,147 @@
+---
+title: Изменение направления текста
+slug: Learn/CSS/Building_blocks/Handling_different_text_directions
+translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Many of the properties and values that we have encountered so far in our CSS learning have been tied to the physical dimensions of our screen. We create borders on the top, right, bottom, and left of a box, for example. These physical dimensions map very neatly to content that is viewed horizontally, and by default the web tends to support left-to-right languages (e.g. English or French) better than right-to-left languages (such as Arabic).</p>
+
+<p>In recent years however, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called <strong>writing modes</strong>. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them now.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand the importance of writing modes to modern CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="What_are_writing_modes">What are writing modes?</h2>
+
+<p>A writing mode in CSS refers to whether the text is running horizontally or vertically. The {{cssxref("writing-mode")}} property lets us switch from one writing mode to another. You don't need to be working in a language which uses a vertical writing mode to want to do this — you could also change the writing mode of parts of your layout for creative purposes.</p>
+
+<p>In the example below we have a heading displayed using <code>writing-mode: vertical-rl</code>. The text now runs vertically. Vertical text is common in graphic design, and can be a way to add a more interesting look and feel to your web design.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p>
+
+<p>The three possible values for the <code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code> property are:</p>
+
+<ul>
+ <li><code>horizontal-tb</code>: Top-to-bottom block flow direction. Sentences run horizontally.</li>
+ <li><code>vertical-rl</code>: Right-to-left block flow direction. Sentences run vertically.</li>
+ <li><code>vertical-lr</code>: Left-to-right block flow direction. Sentences run vertically.</li>
+</ul>
+
+<p>So the <code>writing-mode</code> property is in reality setting the direction in which block-level elements are displayed on the page — either from top-to-bottom, right-to-left, or left-to-right. This then dictates the direction text flows in sentences.</p>
+
+<h2 id="Writing_modes_and_block_and_inline_layout">Writing modes and block and inline layout</h2>
+
+<p>We have already discussed <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes">block and inline layout</a>, and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English.</p>
+
+<p>If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses <code>writing-mode: horizontal-tb</code>, a writing mode that is written horizontally and from the top of the page to the bottom. The second uses <code>writing-mode: vertical-rl</code>; this is a writing mode that is written vertically and from right to left.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p>
+
+<p>When we switch the writing mode, we are changing which direction is block and which is inline. In a <code>horizontal-tb</code> writing mode the block direction runs from top to bottom; in a <code>vertical-rl</code> writing mode the block direction runs right-to-left horizontally. So the <strong>block dimension</strong> is always the direction blocks are displayed on the page in the writing mode in use. The <strong>inline dimension</strong> is always the direction a sentence flows.</p>
+
+<p>This figure shows the two dimensions when in a horizontal writing mode.<img alt="Showing the block and inline axis for a horizontal writing mode." src="https://mdn.mozillademos.org/files/16574/horizontal-tb.png" style="height: 353px; width: 634px;"></p>
+
+<p>This figure shows the two dimensions in a vertical writing mode.</p>
+
+<p><img alt="Showing the block and inline axis for a vertical writing mode." src="https://mdn.mozillademos.org/files/16575/vertical.png" style="height: 472px; width: 406px;"></p>
+
+<p>Once you start to look at CSS layout, and in particular the newer layout methods, this idea of block and inline becomes very important. We will revisit it later on.</p>
+
+<h3 id="Direction">Direction</h3>
+
+<p>In addition to writing mode we also have text direction. As mentioned above, some languages such as Arabic are written horizontally, but right-to-left. This is not something you are likely to use in a creative sense — if you simply want to line something up on the right there are other ways to do so — however it is important to understand this as part of the nature of CSS. The web is not just for languages that are displayed left-to-right!</p>
+
+<p>Due to the fact that writing mode and direction of text can change, newer CSS layout methods do not refer to left and right, and top and bottom. Instead they will talk about <em>start</em> and <em>end</em> along with this idea of inline and block. Don't worry too much about that right now, but keep these ideas in mind as you start to look at layout; you will find it really helpful in your understanding of CSS.</p>
+
+<h2 id="Logical_properties_and_values">Logical properties and values</h2>
+
+<p>The reason to talk about writing modes and direction at this point in your learning however, is because of the fact we have already looked at a lot of properties which are tied to the physical dimensions of the screen, and make most sense when in a horizontal writing mode.</p>
+
+<p>Let's take a look at our two boxes again — one with a <code>horizontal-tb</code> writing mode and one with <code>vertical-rl</code>. I have given both of these boxes a {{cssxref("width")}}. You can see that when the box is in the vertical writing mode, it still has a width, and this is causing the text to overflow.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p>
+
+<p>What we really want in this scenario, is to essentially swap height and width along with the writing mode. When we're in a vertical writing mode we want the box to expand in the block dimension just like it does in the horizontal mode.</p>
+
+<p>To make this easier, CSS has recently developed a set of mapped properties. These essentially replace physical properties — things like <code>width</code> and <code>height</code> — with <strong>logical</strong>, or <strong>flow relative</strong> versions.</p>
+
+<p>The property mapped to <code>width</code> when in a horizontal writing mode is called {{cssxref("inline-size")}} — it refers to the size in the inline dimension. The property for <code>height</code> is named {{cssxref("block-size")}} and is the size in the block dimension. You can see how this works in the example below where we have replaced <code>width</code> with <code>inline-size</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p>
+
+<h3 id="Logical_margin_border_and_padding_properties">Logical margin, border, and padding properties</h3>
+
+<p>In the last two lessons we have learned about the CSS box model, and CSS borders. In the margin, border, and padding properties you will find many instances of physical properties, for example {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, and {{cssxref("border-bottom")}}. In the same way that we have mappings for width and height there are mappings for these properties.</p>
+
+<p>The <code>margin-top</code> property is mapped to {{cssxref("margin-block-start")}} — this will always refer to the margin at the start of the block dimension.</p>
+
+<p>The {{cssxref("padding-left")}} property maps to {{cssxref("padding-inline-start")}}, the padding that is applied to the start of the inline direction. This will be where sentences start in that writing mode. The {{cssxref("border-bottom")}} property maps to {{cssxref("border-block-end")}}, which is the border at the end of the block dimension.</p>
+
+<p>You can see a comparison between physical and logical properties below.</p>
+
+<p><strong>If you change the writing mode of the boxes by switching the <code>writing-mode</code> property on <code>.box</code> to <code>vertical-rl</code>, you will see how the physical properties stay tied to their physical direction, whereas the logical properties switch with the writing mode.</strong></p>
+
+<p><strong>You can also see that the {{htmlelement("h2")}} has a black <code>border-bottom</code>. Can you work out how to make that bottom border always go below the text in both writing modes?</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p>
+
+<p>There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Logical Properties and Values</a>.</p>
+
+<h3 id="Logical_values">Logical values</h3>
+
+<p>We have so far looked at logical property names. There are also some properties that take physical values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. These values also have mappings, to logical values — <code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, and <code>inline-start</code>.</p>
+
+<p>For example, you can float an image left to cause text to wrap round the image. You could replace <code>left</code> with <code>inline-start</code> as shown in the example below.</p>
+
+<p><strong>Change the writing mode on this example to <code>vertical-rl</code> to see what happens to the image. Change <code>inline-start</code> to <code>inline-end</code> to change the float.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p>
+
+<p>Here we are also using logical margin values to ensure the margin is in the correct place no matter what the writing mode is.</p>
+
+<h3 id="Should_you_use_physical_or_logical_properties">Should you use physical or logical properties?</h3>
+
+<p>The logical properties and values are newer than their physical equivalents, and therefore have only recently been implemented in browsers. You can check any property page on MDN to see how far back the browser support goes. If you are not using multiple writing modes then for now you might prefer to use the physical versions. However, ultimately we expect that people will transition to the logical versions for most things, as they make a lot of sense once you start also dealing with layout methods such as flexbox and grid.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The concepts explained in this lesson are becoming increasingly important in CSS. An understanding of the block and inline direction — and how text flow changes with a change in writing mode — will be very useful going forward. It will help you in understanding CSS even if you never use a writing mode other than a horizontal one.</p>
+
+<p>In the next module we will take a good look at overflow in CSS.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/images_media_form_elements/index.html b/files/ru/learn/css/building_blocks/images_media_form_elements/index.html
new file mode 100644
index 0000000000..481cd28b58
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/images_media_form_elements/index.html
@@ -0,0 +1,193 @@
+---
+title: 'Элементы изображений, форм и медиа-элементы'
+slug: Learn/CSS/Building_blocks/Images_media_form_elements
+translation_of: Learn/CSS/Building_blocks/Images_media_form_elements
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div>
+
+<p>В этом уроке мы рассмотрим, как обрабатываются определенные специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований и этот урок прольет свет на некоторые из этих основных вещей, которые вам нужно знать.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand the way that some elements behave unusually when styled with CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Замещаемые_элементы">Замещаемые элементы</h2>
+
+<p>Изображения и видео описываются как <strong><a href="/en-US/docs/Web/CSS/Replaced_element">Замещаемые элементы</a></strong>. Это значит, что CSS не может влиять на внутреннюю планировку этих элементов — только на их позицию на странице среди других элементов. Однако, как мы увидим, существуют различные вещи, которые CSS может сделать с изображением.</p>
+
+<p>Конкретные замещаемые элементы, такие как изображения и видео, можно также описать, как элементы имеющие <strong>соотношение сторон</strong>. Это значит, что такой элемент имеет размер как по горизонтали (x) так и по вертикали (y) и будет отображаться используя "родные" размеры файла по умолчанию.</p>
+
+<h2 id="Размер_изображений_калибровка">Размер изображений (калибровка)</h2>
+
+<p>Как вы уже знаете из этих уроков, всё в CSS генерирует блоки. Если вы поместите файл изображения внутрь блока, который больше или меньше исходного размера файла изображения в обоих направлениях, то он отобразиться либо в меньшем размере чем блок, либо перекроет его. Вам нужно принять решение с тем, что произойдет с перекрытием.</p>
+
+<p>В примере ниже у нас два блока, оба имеют размер по 200px:</p>
+
+<ul>
+ <li>Один содержит изображение, которое 200px — оно меньше, чем блок и не растягивается что бы заполнить его.</li>
+ <li>Второй больше 200px и перекрывает блок.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p>
+
+<p>Так что же мы можем сделать с проблемой перекрывания?</p>
+
+<p>Как мы учили в <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">нашем предыдущем уроке</a>, распространенная техника — это сделать {{cssxref("max-width")}} изображения - 100%. <span class="tlid-translation translation" lang="ru"><span title="">Это позволит уменьшить размер изображения по отношению к блоку, но не увеличит его.</span></span> Такой метод будет работать и с другими замещаемыми элементами такими как <code><a href="/en-US/docs/Web/HTML/Element/video">&lt;video&gt;</a></code> или <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>.</p>
+
+<p><strong>Попробуйте добавить <code>max-width: 100%</code> к элементу <code>&lt;img&gt;</code> в примере выше. Вы увидите, что меньшее изображение останется неизмененным, а большее изображение станет меньше, чтобы заполнить блок.</strong></p>
+
+<p>Вы можете сделать другие варианты изображений внутри контейнеров. Например, вы можете захотеть дать изображению такие размеры, чтоб оно полностью покрывало блок.</p>
+
+<p>Здесь вам может помочь свойство {{cssxref("object-fit")}}. Используя <code>object-fit</code>, можно определять размеры замещаемого элемента для заполнения блока различными способами.</p>
+
+<p>Ниже мы использовали значение <code>cover</code>, которое уменьшает изображение, сохраняя соотношение сторон так, что он аккуратно заполняет блок. Поскольку соотношения сторон сохраняются, некоторые части изображения будут обрезаны блоком.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p>
+
+<p>Если мы используем <code>contain</code> в качестве значения, изображение будет уменьшаться до тех пор, пока не станет достаточно маленьким чтобы заполнить блок. Это приведет к "почтовой упаковке", если оно не будет иметь такого же соотношения сторон, как блок.</p>
+
+<p>Вы также можете попробовать значение <code>fill</code>, которое будет заполнять блок, но при этом не сохранять соотношение сторон.</p>
+
+<h2 id="Замещаемые_элемнты_в_верстке">Замещаемые элемнты в верстке</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">При использовании различных методов верстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например</span></span>, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.</p>
+
+<p>Вы можете увидеть, как это происходит в примере ниже, где мы имеем grid-контейнер из двух столбцов и двух строк, который содержит 4 объекта. Все <code>&lt;div&gt;</code> элементы имеют цвет фона и растягиваются чтобы заполнить строки и столбцы. Однако, изображение не растягивается.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p>
+
+<p>Если вы изучаете эти уроки по порядку, тогда вы, возможно, еще не рассматривали layout. Просто держите в уме, что замещаемые элементы, становясь частью grid- или flex-разметки, ведут себя иначе по умолчанию, главным образом, чтобы избежать их странного растяжения по разметке.</p>
+
+<p>Для того чтобы заставить изображение растянуться чтобы заполнить grid-ячейку, вы должны сделать что-то наподобие следующего:</p>
+
+<pre class="brush: css">img {
+  width: 100%;
+  height: 100%;
+}</pre>
+
+<p>Это, однако, растянет изображение, и скорее всего это не то чего бы вам хотелось делать.</p>
+
+<h2 id="Элементы_форм">Элементы форм</h2>
+
+<p>Элементы форм могут быть сложной проблемой когда дело касается их стилизации в CSS, и <a href="/en-US/docs/Learn/Forms">Web Forms module</a> содержит детальные руководства по хитрым аспектам стилизации элементов форм, которые я не буду представлять здесь в полном объеме. <span class="tlid-translation translation" lang="ru"><span title="">В этом разделе статьи стоит выделить несколько ключевых моментов.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Многие элементы управления форм добавляются на вашу страницу с помощью элемента</span></span> <code><a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a></code> — <span class="tlid-translation translation" lang="ru"><span title="">он определяет простые поля формы, такие как ввод текста, и более сложные поля, добавленные в HTML5, такие как средства выбора цвета и даты. Существуют некоторые дополнительные элементы, такие как </span></span><code><a href="/en-US/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code> для ввода многострочного текста, а также элементы которые содержали части маркировки форм, такие как <code><a href="/en-US/docs/Web/HTML/Element/fieldset">&lt;fieldset&gt;</a></code> и <code><a href="/en-US/docs/Web/HTML/Element/legend">&lt;legend&gt;</a></code>.</p>
+
+<p>HTML5 также содержит атрибуты, которые позволяют веб-разработчикам указывать какие поля являются обязательными и даже тип контента, который необходимо вводить. Если пользователь вводит неожидаемые данные или оставляет обязательные поля пустыми, браузер может выдать сообщение об ошибке. Разные браузеры <span class="tlid-translation translation" lang="ru"><span title="">несовместимы в том, сколько стилей и настроек они допускают для таких элементов.</span></span></p>
+
+<h3 id="Стилизация_элементов_ввода_текста">Стилизация элементов ввода текста</h3>
+
+<p>Элементы, позволяющие вводить текст, такие как <code>&lt;input type="text"&gt;</code>, конкретные типы вроде <code>&lt;input type="email"&gt;</code>, и элемент <code>&lt;textarea&gt;</code>, являются довольно простыми в стилизации и как правило ведут себя также, как и другие блоки на вашей странице. Однако, стилизация по умолчанию таких элементов будет отличаться в зависимости от операционной системы и браузера которые использует пользователь, посещая сайт.</p>
+
+<p>В примере ниже мы стилизовали несколько вводов текста используя CSS — вы можете увидеть, что такие вещи как borders, margins и padding, все применяются так как вы бы ожидали. Мы используем селекторы атрибутов для выборов различных типов ввода. Попробуйте изменить то, как эти формы выглядят, регулируя границы, добавляя цвет фона полям и изменяя шрифты padding.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>Важно: </strong> <span class="tlid-translation translation" lang="ru"><span title="">При изменении стиля элементов формы следует соблюдать осторожность, чтобы убедиться, что для пользователя все еще очевидно, что они являются элементами форм. Вы можете создать форму ввода без границ и фона, которая практически неотличима от окружающего контента и это может сделать очень сложно распознаваемой, чтобы заполнить ее.</span></span></p>
+</div>
+
+<p>Как объяснено в уроке <a href="/en-US/docs/Learn/Forms/Styling_web_forms">стилизация форм</a> в части HTML этого курса, <span class="tlid-translation translation" lang="ru"><span title="">многие из более сложных типов ввода определяются операционной системой и не доступны для стилизации. </span></span><span class="tlid-translation translation" lang="ru"><span title="">Поэтому вы всегда должны предполагать, что формы будут выглядеть по-разному для разных пользователей и тестировать сложные формы во многих браузерах.</span></span></p>
+
+<h3 id="Наследование_и_элементы_форм">Наследование и элементы форм</h3>
+
+<p>В некоторых браузерах, элементы форм не наследуют стиль шрифтов по умолчанию. Поэтому если вы хотите быть уверенными что ваши поля форм используют шрифт определенный в body или родительском элементе, вы должны добавить это правило в ваш CSS.</p>
+
+<pre class="brush: css"><code>button,
+input,
+select,
+textarea {
+  font-family : inherit;
+  font-size : 100%;
+} </code></pre>
+
+<h3 id="Элементы_форм_и_box-sizing">Элементы форм и box-sizing</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В разных браузерах элементы формы используют разные правила определения размеров блоков для разных виджетов.</span></span> Вы изучали свойство <code>box-sizing</code> в <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">нашем уроке Блоки в CSS</a> и можете использовать эти знания при стилизации форм для обеспечения единообразия при настройке ширины и высоты элементов форм.</p>
+
+<p>Для единообразия рекомендуется устанавливать margin и padding на <code>0</code> для всех элементов, а затем добавлять их (margin и padding) при стилизации отдельных элементов.</p>
+
+<pre class="brush: css"><code>button,
+input,
+select,
+textarea {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}</code></pre>
+
+<h3 id="Другие_полезные_настройки">Другие полезные настройки</h3>
+
+<p>В дополние к правилам отмеченых выше, вы должны также установить <code>overflow: auto</code> для <code>&lt;textarea&gt;</code> чтобы IE не отображал полосу прокрутки, когда в этом нет необходимости:</p>
+
+<pre class="brush: css">textarea {
+  overflow: auto;
+}</pre>
+
+<h3 id="Собираем_все_вместе_в_перезагрузку">Собираем все вместе в "перезагрузку"</h3>
+
+<p>В качестве последнего шага, мы можем обернуть различные свойства, обсуждаемые<span class="tlid-translation translation" lang="ru"><span title=""> выше, в следующую «форму перезагрузки», чтобы обеспечить согласованную основу для работы. Это включает все элементы упомянутые в последних трех разделах:</span></span></p>
+
+<pre class="brush: css"><code>button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  padding: 0; margin: 0;
+}
+
+textarea {
+  overflow: auto;
+} </code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 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 <a href="http://necolas.github.io/normalize.css/">Normalize.css</a>, which is a very popular stylesheet used as a base by many projects.</p>
+</div>
+
+<p>Для дополнительной информации по стилизации форм, посмотрите две статьи в разделе HTML этого руководства.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Styling web forms</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></li>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>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.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/index.html b/files/ru/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..8f071e3f62
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/index.html
@@ -0,0 +1,80 @@
+---
+title: Устройство CSS
+slug: Learn/CSS/Building_blocks
+tags:
+  - Beginner
+  - CSS
+  - Landing
+  - Learn
+  - Начинающий
+  - Обучение
+  - Опции
+  - Функции
+  - состоит
+translation_of: Learn/CSS/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Этот модуль — продолжение раздела <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>: Вы уже знакомы с синтаксисом языка и опробовали основные функции; пришло время углубиться в CSS. В этом модуле рассматриваются каскады и наследование, все доступные типы селекторов, блоков, изменений размеров, фонов, границ, а также отладка и многое другое.</p>
+
+<p class="summary">Наша цель в этом модуле — обеспечить Вас необходимым набором инструментов  для написания хорошего CSS-кода, а также помочь Вам понять необходимую теорию для перехода к особым дисциплинам, таким как <a href="/ru/docs/Learn/CSS/Styling_text">стилизация текста</a> и <a href="/ru/docs/Learn/CSS/CSS_layout">размещение элементов с помощью CSS</a>.</p>
+
+<h2 id="Необходимые_умения">Необходимые умения</h2>
+
+<p>Перед изучением этого раздела Вы должны иметь:</p>
+
+<ol>
+ <li>Стандартную рабочую среду (<a href="/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установке базового программного обеспечения</a>), а также понимание того, как создавать файлы и работать с ними (<a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>).</li>
+ <li>Общее представление о HTML (модуль <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>).</li>
+ <li>Общее представление о CSS (модуль <a href="/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a>).</li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание</strong>: Если Вы работаете на компьютере/планшете/другом устройстве, где нет возможности создавать файлы, Вы можете опробовать примеры (большую часть) на таких онлайн-программах, как <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Руководства">Руководства</h2>
+
+<p>В этом модуле содержатся следующие статьи, в которых рассказывается об основных составляющих языка. По мере обучения Вы встретите упражнения, позволяющие Вам усвоить пройденный материал.</p>
+
+<dl>
+ <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></dt>
+ <dd>Цель данного урока — углубить Ваше понимание основных концепций CSS — каскадов, спецификаций и наследования, — которые контролируют, как CSS добавляется в HTML и как разрешаются конфликты.</dd>
+ <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">CSS-селекторы</a></dt>
+ <dd>Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы рассмотрим разные типы в мельчайших подробностях и увидим как они работают. Подстатьи по порядку:
+ <ul>
+  <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
+  <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибутов</a></li>
+  <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы, псевдоэлементы</a></li>
+  <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинации селекторов</a></li>
+ </ul>
+ </dd>
+ <dt><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блоки в CSS</a></dt>
+ <dd>Всё в CSS имеет форму блока, и понимание блоков позволяет Вам размещать элементы с помощью CSS или согласовывать их друг с другом. В этом уроке мы как следует рассмотрим <em>CSS-блоки.</em></dd>
+ <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></dt>
+ <dd>В этом уроке мы рассмотрим всякие интересные вещи, котроые Вы можете делать благодаря CSS-фонам и границам, — от добавления градиетнов и фоновых изображений до скругления углов, фонов и границ.</dd>
+ <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Изменение направления текста</a></dt>
+ <dd>Раньше CSS развивался, чтобы лучше поддерживать разные <strong>режимы написания</strong>, включая <em>справа налево</em> или <em>сверху вниз</em> (как в японском языке). Мы рассмотрим их в этой статье.</dd>
+ <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Перекрытие содержимого</a></dt>
+ <dd>В этом уроке мы рассмотрим ещё одну важную концепцию CSS — <strong>overflow</strong>. Переполнение происходит, когда слишком много информации находится в пределах ограниченного блока. В этой статье мы рассмотрим, как это исправить.</dd>
+ <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения свойств CSS</a></dt>
+ <dd>У каждого CSS-свойства есть значения. В этом уроке мы рассмотрим основные значения и их единицы.</dd>
+ <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></dt>
+ <dd>В предыдущих уроках Вы встречались с различными способами изменения размеров элементов с использованием CSS. В этой статье мы собрали разные способы изменить размер через CSS.</dd>
+ <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></dt>
+ <dd>Мы рассмотрим, как некоторые элементы относятся к CSS. Изображения, формы и другие медиа-элементы ведут себя по-другому, когда Вы стилизуете их через CSS. Некоторые функции могут не работать, поэтому в этой статье мы рассмотрим то, что Вам нужно знать про эти элементы.</dd>
+ <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></dt>
+ <dd>Стилизация HTML таблиц — это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья описывает, как сделать, чтобы Ваши HTML-таблицы выглядели хорошо, и некоторые свойства, подробно рассмотренные в предыдущих статьях.</dd>
+ <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></dt>
+ <dt></dt>
+ <dd>При написании CSS Вы можете столкнуться с тем, что Ваш CSS-код работает не так, как Вы того хотели. Вы узнаете, как отлаживать CSS и как с помощью инструментов разработчика понять, где неполадка.</dd>
+ <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация CSS-кода</a></dt>
+ <dd>Как только Вы начнёте работать над большими проектами и таблицами стилей, Вы поймёте, что обслуживать такие таблицы не так-то и легко. В статье мы рассмотрим, как лучше писать CSS, чтобы его было легче обслуживать.</dd>
+</dl>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Узконаправленные функции CSS</a></dt>
+ <dd>В этой статье описаны некоторые хитрости, которые познакомят Вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.</dd>
+</dl>
diff --git a/files/ru/learn/css/building_blocks/organizing/index.html b/files/ru/learn/css/building_blocks/organizing/index.html
new file mode 100644
index 0000000000..9c35d136f0
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/organizing/index.html
@@ -0,0 +1,350 @@
+---
+title: Организация CSS-кода
+slug: Learn/CSS/Building_blocks/Organizing
+translation_of: Learn/CSS/Building_blocks/Organizing
+---
+<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div>
+
+<p>As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To learn some tips and best practices for organizing stylesheets, and find out about some of the naming conventions and tools in common usage to help with CSS organization and team working.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tips_to_keep_your_CSS_tidy">Tips to keep your CSS tidy</h2>
+
+<p>Here are some general suggestions for ways to keep your stylesheets organised and tidy.</p>
+
+<h3 id="Does_your_project_have_a_coding_style_guide">Does your project have a coding style guide?</h3>
+
+<p>If you are working with a team on an existing project, the first thing to check is whether the project has an existing style guide for CSS. The team style guide should always win over your own personal preferences. There often isn't a right or wrong way to do things, but consistency is important.</p>
+
+<p>For example, have a look at the <a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">CSS guidelines for MDN code examples</a>.</p>
+
+<h3 id="Keep_it_consistent">Keep it consistent</h3>
+
+<p>If you get to set the rules for the project or are working alone, then the most important thing to do is to keep things consistent. Consistency can be applied in all sorts of ways, such as using the same naming conventions for classes, choosing one method of describing color, or maintaining consistent formatting (for example will you use tabs or spaces to indent your code? If spaces, how many spaces?)</p>
+
+<p>Having a set of rules you always follow reduces the amount of mental overhead needed when writing CSS, as some of the decisions are already made.</p>
+
+<h3 id="Formatting_readable_CSS">Formatting readable CSS</h3>
+
+<p>There are a couple of ways you will see CSS formatted. Some developers put all of the rules onto a single line, like so:</p>
+
+<pre class="brush: css">.box { background-color: #567895; }
+h2 { background-color: black; color: white; }</pre>
+
+<p>Other developers prefer to break everything onto a new line:</p>
+
+<pre class="brush: css">.box {
+  background-color: #567895;
+}
+
+h2 {
+  background-color: black;
+  color: white;
+}</pre>
+
+<p>CSS doesn't mind which one you use. We personally find it is more readable to have each property and value pair on a new line.</p>
+
+<h3 id="Comment_your_CSS">Comment your CSS</h3>
+
+<p>Adding comments to your CSS will help any future developer work with your CSS file, but will also help you when you come back to the project after a break.</p>
+
+<pre class="brush: css">/* This is a CSS comment
+It can be broken onto multiple lines. */</pre>
+
+<p>A good tip is to add a block of comments between logical sections in your stylesheet too, to help locate different sections quickly when scanning through, or even give you something to search for to jump right into that part of the CSS. If you use a string which won't appear in the code you can jump from section to section by searching for it — below we have used <code>||</code>.</p>
+
+<pre class="brush: css">/* || General styles */
+
+...
+
+/* || Typography */
+
+...
+
+/* || Header and Main Navigation */
+
+...
+
+</pre>
+
+<p>You don't need to comment every single thing in your CSS, as much of it will be self-explanatory. What you should comment are the things where you made a particular decision for a reason.</p>
+
+<p>You may have used a CSS property in a specific way to get around older browser incompatibilities, for example:</p>
+
+<pre class="brush: css">.box {
+  background-color: red; /* fallback for older browsers that don't support gradients */
+  background-image: linear-gradient(to right, #ff0000, #aa0000);
+}
+</pre>
+
+<p>Perhaps you followed a tutorial to achieve something, and the CSS is a little non-obvious. In that case you could add the URL of the tutorial to the comments. You will thank yourself when you come back to this project in a year or so, and can vaguely remember there was a great tutorial about that thing, but where is it?</p>
+
+<h3 id="Create_logical_sections_in_your_stylesheet">Create logical sections in your stylesheet</h3>
+
+<p>It is a good idea to have all of the common styling first in the stylesheet. This means all of the styles which will generally apply unless you do something special with that element. You will typically have rules set up for:</p>
+
+<ul>
+ <li><code>body</code></li>
+ <li><code>p</code></li>
+ <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li>
+ <li><code>ul</code> and <code>ol</code></li>
+ <li>The <code>table</code> properties</li>
+ <li>Links</li>
+</ul>
+
+<p>In this section of the stylesheet we are providing default styling for the type on the site, setting up a default style for data tables and lists and so on.</p>
+
+<pre class="brush: css">/* || GENERAL STYLES */
+
+body { ... }
+
+h1, h2, h3, h4 { ... }
+
+ul { ... }
+
+blockquote { ... }
+</pre>
+
+<p>After this section we could define a few utility classes, for example a class that removes the default list style for lists we're going to display as flex items or in some other way. If you have a few things you know you will want to apply to lots of different elements, they can come in this section.</p>
+
+<pre class="brush: css">/* || UTILITIES */
+
+.nobullets {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+...
+
+</pre>
+
+<p>Then we can add everything that is used sitewide. That might be things like the basic page layout, the header, navigation styling, and so on.</p>
+
+<pre class="brush: css">/* || SITEWIDE */
+
+.main-nav { ... }
+
+.logo { ... }
+</pre>
+
+<p>Finally we will include CSS for specific things, broken down by the context, page or even component in which they are used.</p>
+
+<pre class="brush: css">/* || STORE PAGES */
+
+.product-listing { ... }
+
+.product-box { ... }
+</pre>
+
+<p>By ordering things in this way, we at least have an idea in which part of the stylesheet we will be looking for something that we want to change.</p>
+
+<h3 id="Avoid_overly-specific_selectors">Avoid overly-specific selectors</h3>
+
+<p>If you create very specific selectors you will often find that you need to duplicate chunks of your CSS to apply the same rules to another element. For example, you might have something like the below selector, which applies the rule to a <code>&lt;p&gt;</code> with a class of <code>box</code> inside an <code>&lt;article&gt;</code> with a class of <code>main</code>.</p>
+
+<pre class="brush: css">article.main p.box {
+  border: 1px solid #ccc;
+}</pre>
+
+<p>If you then wanted to apply the same rules to something outside of <code>main</code>, or to something other than a <code>&lt;p&gt;</code>, you would have to add another selector to these rules or create a whole new ruleset. Instead, you could create a class called <code>box</code> and apply that anywhere.</p>
+
+<pre class="brush: css">.box {
+  border: 1px solid #ccc;
+}</pre>
+
+<p>There will be times when making something more specific makes sense, however this will generally be an exception rather than usual practice.</p>
+
+<h3 id="Break_large_stylesheets_into_multiple_smaller_ones">Break large stylesheets into multiple smaller ones</h3>
+
+<p>In particular in cases where you have very different styles for distinct parts of the site, you might want to have a stylesheet that includes all the global rules and then smaller ones that include the specific rules needed for those sections. You can link to multiple stylesheets from one page, and the normal rules of the cascade apply, with rules in stylesheets linked later coming after rules in stylesheets linked earlier.</p>
+
+<p>For example, we might have an online store as part of the site, with a lot of CSS used only for styling the product listings and forms needed for the store. It would make sense to have those things in a different stylesheet, only linked to on store pages.</p>
+
+<p>This can make it easier to keep your CSS organised, and also means that if multiple people are working on the CSS you will have fewer situations where two people need to work on the same stylesheet at once, leading to conflicts in source control.</p>
+
+<h2 id="Other_tools_that_can_help">Other tools that can help</h2>
+
+<p>CSS itself doesn't have much in the way of in-built organisation, therefore you need to do the work to create consistency and rules around how you write CSS. The web community has also developed various tools and approaches that can help you to manage larger CSS projects. As they may be helpful for you to investigate, and you are likely to come across these things when working with other people, we've included a short guide to some of these.</p>
+
+<h3 id="CSS_methodologies">CSS methodologies</h3>
+
+<p>Instead of needing to come up with your own rules for writing CSS, you may benefit from adopting one of the approaches already designed by the community and tested across many projects. These methodologies are essentially CSS coding guides that take a very structured approach to writing and organising CSS. Typically they tend to result in more verbose use of CSS than you might have if you wrote and optimised every selector to a custom set of rules for that project.</p>
+
+<p>However, you do gain a lot of structure by adopting one and, as many of these systems are very widely used, other developers are more likely to understand the approach you are using and be able to write their CSS in the same way, rather than having to work out your own personal methodology from scratch.</p>
+
+<h4 id="OOCSS">OOCSS</h4>
+
+<p>Most of the approaches that you will encounter owe something to the concept of Object Oriented CSS (OOCSS), an approach made popular by <a href="https://github.com/stubbornella/oocss/wiki">the work of Nicole Sullivan</a>. The basic idea of OOCSS is to separate your CSS into reusable objects, which can be used anywhere you need on your site. The standard example of OOCSS is the pattern described as <a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">The Media Object</a>. This is a pattern with a fixed size image, video or other element on one side, and flexible content on the other. It's a pattern we see all over websites for comments, listings, and so on.</p>
+
+<p>If you are not taking an OOCSS approach you might create custom CSS for the different places this pattern is used, for example creating a class called <code>comment</code> with a bunch of rules for the component parts, then a class called <code>list-item</code> with almost the same rules as the <code>comment</code> class except for some tiny differences. The differences between these two components is that the list-item has a bottom border, and images in comments have a border whereas list-item images do not.</p>
+
+<pre class="brush: css">.comment {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+
+.comment img {
+  border: 1px solid grey;
+}
+
+.comment .content {
+  font-size: .8rem;
+}
+
+.list-item {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  border-bottom: 1px solid grey;
+}
+
+.list-item .content {
+  font-size: .8rem;
+}</pre>
+
+<p>In OOCSS, you would create one pattern called <code>media</code> that would have all of the common CSS for both patterns — a base class for things that are generally the shape of the media object. Then we'd add an additional class to deal with those tiny differences, thus extending that styling in specific ways.</p>
+
+<pre class="brush: css">.media {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+
+.media .content {
+  font-size: .8rem;
+}
+
+.comment img {
+  border: 1px solid grey;
+}
+
+ .list-item {
+  border-bottom: 1px solid grey;
+} </pre>
+
+<p>In your HTML the comment would need both the <code>media</code> and <code>comment</code> classes applied:</p>
+
+<pre class="brush: html">&lt;div class="media comment"&gt;
+  &lt;img /&gt;
+  &lt;div class="content"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>The list-item would have <code>media</code> and <code>list-item</code> applied:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li class="media list-item"&gt;
+    &lt;img /&gt;
+   &lt;div class="content"&gt;&lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>The work that Nicole Sullivan did in describing this approach and promoting it means that even people who are not strictly following an OOCSS approach today will generally be reusing CSS in this way — it has entered our understanding as a good way to approach things in general.</p>
+
+<h4 id="BEM">BEM</h4>
+
+<p>BEM stands for Block Element Modifier. In BEM a block is a standalone entity such as a button, menu, or logo. An element is something like a list item or a title that is tied to the block it is in. A modifier is a flag on a block or element that changes the styling or behavior. You will be able to recognise code that uses BEM due to the extensive use of dashes and underscores in the CSS classes. For example, look at the classes applied to this HTML from the page about <a href="http://getbem.com/naming/">BEM Naming conventions</a>:</p>
+
+<pre class="brush: html">&lt;form class="form form--theme-xmas form--simple"&gt;
+  &lt;input class="form__input" type="text" /&gt;
+  &lt;input
+    class="form__submit form__submit--disabled"
+    type="submit" /&gt;
+&lt;/form&gt;</pre>
+
+<p>The additional classes are similar to those used in the OOCSS example, however they use the strict naming conventions of BEM.</p>
+
+<p>BEM is widely used in larger web projects and many people write their CSS in this way. It is likely that you will come across examples, even in tutorials, that use BEM syntax, without mentioning why the CSS is structured in such a way.</p>
+
+<p>To read more about the system read <a href="https://css-tricks.com/bem-101/">BEM 101</a> on CSS Tricks.</p>
+
+<h4 id="Other_common_systems">Other common systems</h4>
+
+<p>There are a large number of these systems in use. Other popular approaches include <a href="http://smacss.com/">Scalable and Modular Architecture for CSS (SMACSS)</a>, created by Jonathan Snook, <a href="https://itcss.io/">ITCSS</a> from Harry Roberts, and <a href="https://acss.io/">Atomic CSS (ACSS)</a>, originally created by Yahoo!. If you come across a project that uses one of these approaches then the advantage is that you will be able to search and find many articles and guides to help you understand how to code in the same style.</p>
+
+<p>The disadvantage of using such a system is that they can seem overly complex, especially for smaller projects.</p>
+
+<h3 id="Build_systems_for_CSS">Build systems for CSS</h3>
+
+<p>Another way to organise CSS is to take advantage of some of the tooling that is available for front-end developers, which allows you to take a slightly more programmatic approach to writing CSS. There are a number of tools which we refer to as <em>pre-processors</em> and <em>post-processors</em>. A pre-processor runs over your raw files and turns them into a stylesheet, whereas a post-processor takes your finished stylesheet and does something to it — perhaps to optimize it in order that it will load faster.</p>
+
+<p>Using any of these tools will require that your development environment can run the scripts that do the pre and post-processing. Many code editors can do this for you, or you can install command line tools to help.</p>
+
+<p>The most popular pre-processor is <a href="https://sass-lang.com/">Sass</a>. This is not a Sass tutorial, so I will briefly explain a couple of the things that Sass can do, which are really helpful in terms of organisation, even if you don't use any of the other Sass features.</p>
+
+<h4 id="Defining_variables">Defining variables</h4>
+
+<p>CSS now has native <a href="/en-US/docs/Web/CSS/Using_CSS_custom_properties">custom properties</a>, making this feature increasingly less important, however one of the reasons you might use Sass is to be able to define all of the colors and fonts used in a project as settings, then use that variable around the project. This means that if you realise you have used the wrong shade of blue, you only need change it in one place.</p>
+
+<p>If we created a variable called <code>$base-color</code> as in the first line below, we could then use it through the stylesheet anywhere that required that color.</p>
+
+<pre class="brush: css"><code>$base-color: #c6538c;
+
+.alert {
+  border: 1px solid $base-color;
+}</code></pre>
+
+<p>Once compiled to CSS, you would end up with the following CSS in the final stylesheet.</p>
+
+<pre class="brush: css"><code>.alert {
+  border: 1px solid #c6538c;
+}</code></pre>
+
+<h4 id="Compiling_component_stylesheets">Compiling component stylesheets</h4>
+
+<p>I mentioned above that one way to organise CSS is to break down stylesheets into smaller stylesheets. When using Sass you can take this to another level and have lots of very small stylesheets — even going as far as having a separate stylesheet for each component. By using the include functionality in Sass these can then all be compiled together into one, or a small number of stylesheets to actually link into your website.</p>
+
+<p>You can see how one developer approaches the problem in <a href="https://www.lauraleeflores.com/blog/how-to-organize-your-css-files">this blog post</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: A simple way to try out Sass is to use <a href="https://codepen.io">CodePen</a> — you can enable Sass for your CSS in the Settings for a Pen, and CodePen will then run the Sass parser for you, in order that you can see the resulting webpage with regular CSS applied. Sometimes you will find that CSS tutorials have used Sass rather than plain CSS in their CodePen demos, so it is handy to know a little bit about it.</p>
+</div>
+
+<h4 id="Post-processing_for_optimization">Post-processing for optimization</h4>
+
+<p>If you are concerned about adding size to your stylesheets by adding a lot of additional comments and whitespace for example, then a post-processing step could be to optimize the CSS by stripping out anything unneccessary in the production version. An example of a post-processor solution for doing this would be <a href="https://cssnano.co/">cssnano</a>.</p>
+
+<h2 id="Wrapping_up">Wrapping up</h2>
+
+<p>This is the final part of our Learning CSS Guide, and as you can see there are many ways in which your exploration of CSS can continue from this point.</p>
+
+<p>To learn more about layout in CSS, see the <a href="/en-US/docs/Learn/CSS/CSS_layout">Learn CSS Layout</a> section.</p>
+
+<p>You should also now have the skills to explore the rest of the <a href="/en-US/docs/Web/CSS">MDN CSS</a> material. You can look up properties and values, explore our <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS Cookbook</a> for patterns to use, and read more in some of the specific guides such as our <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Guide to CSS Grid Layout</a>.</p>
+
+<p>{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/overflowing_content/index.html b/files/ru/learn/css/building_blocks/overflowing_content/index.html
new file mode 100644
index 0000000000..919bed3501
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/overflowing_content/index.html
@@ -0,0 +1,119 @@
+---
+title: Перекрытие содержимого
+slug: Learn/CSS/Building_blocks/Overflowing_content
+translation_of: Learn/CSS/Building_blocks/Overflowing_content
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div>
+
+<p>В этом уроке мы рассмотрим другую важную концепцию в CSS — <strong>overflow</strong>. Overflow это то что случается, когда слишком много контента содержится внутри блока. В этом гайде вы изучите что это и как этим управлять.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand overflow and how to manage it.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Что_такое_overflow">Что такое overflow?</h2>
+
+<p>Мы уже знаем что все в  CSS - блоки, и что мы можем ограничивать размер этих блоков присваивая им определенное значение посредством {{cssxref("width")}} и {{cssxref("height")}} (или {{cssxref("inline-size")}} и {{cssxref("block-size")}}). Overflow это то что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный блок. CSS дает нам различные инструменты для управления этим overflow, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с overflow достаточно часто когда пишите CSS, особенно когда глубже погрузитесь в CSS макет.</p>
+
+<h2 id="CSS_пытается_избежать_потери_данных">CSS пытается избежать "потери данных"</h2>
+
+<p>Давайте начнем с рассмотрения двух примеров, которые демонстрируют как CSS ведет себя когда у вас overflow.</p>
+
+<p>The first is a box that has been restricted in the block dimension by giving it a <code>height</code>. We have then added more content than there is space for in this box. The content is overflowing the box and laying itself rather messily over the paragraph below the box.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p>
+
+<p>The second is a word in a box that is restricted in the inline dimension. The box has been made too small for that word to fit and so it breaks out of the box.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p>
+
+<p>You might wonder why CSS has by default taken the rather untidy approach of causing the content to overflow messily? Why not hide the additional content, or cause the box to grow?</p>
+
+<p>Wherever possible CSS does not hide your content; to do so would cause data loss, which is usually a problem. In CSS terms, this means some content vanishing. The problem with content vanishing is that you might not notice it has vanished. Your visitors may not notice it has vanished. If it is the submit button on a form that disappears, and no-one can complete the form, that's a big problem! So instead, CSS tends to overflow in a visible way. It is likely you will see the mess, or at worst a visitor to your site will let you know that some content is overlapping so it needs fixing.</p>
+
+<p>If you have restricted a box with a <code>width</code> or a <code>height</code>, CSS assumes you know what you are doing, and that you are managing the potential for overflow. In general, restricting the block dimension is problematic when text is going to be put in a box, as there may be more text than you expected when designing the site or the text may be bigger — for example if the user has increased their font size.</p>
+
+<p>In the next couple of lessons we will look at different ways to control sizing that might be less prone to overflow. However, if you need a fixed size you can also control how the overflow behaves. Let's read on!</p>
+
+<h2 id="The_overflow_property">The overflow property</h2>
+
+<p>The  {{cssxref("overflow")}} property is how you take control of an element's overflow and tell the browser how you want it to behave. The default value of overflow is <code>visible</code>, which is why by default we can see our content when it overflows.</p>
+
+<p>If you want to crop the content when it overflows you can set <code>overflow: hidden</code> on your box. This will do exactly what it says — hide the overflow. This may well cause things to vanish so you should only ever do this if hiding content is not going to cause a problem.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p>
+
+<p>Perhaps you would instead like to add scrollbars when content overflows? If you use <code>overflow: scroll</code> then your browser will always display scrollbars — even if there is not enough content to overflow. You may want this, as it prevents scrollbars appearing and disappearing depending on content.</p>
+
+<p><strong>If you remove some of the content from the box below, you'll see that the scrollbars still remain even with nothing to scroll (or at least just the scrollbar tracks).</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p>
+
+<p>In the above example we only need to scroll on the <code>y</code> axis, however we get scrollbars in both axes. You could instead use the {{cssxref("overflow-y")}} property, setting <code>overflow-y: scroll</code> to only scroll on the <code>y</code> axis.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p>
+
+<p>You could also scroll on the x axis using {{cssxref("overflow-x")}}, although this is not a recommended way to deal with long words! If you do need to deal with a long word in a small box then you could look at the {{cssxref("word-break")}} or {{cssxref("overflow-wrap")}} properties. In addition some of the methods discussed in the <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a> lesson may help you to create boxes that cope better with varying amounts of content.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p>
+
+<p>As with <code>scroll</code>, you will get a scrollbar in the scrolling dimension whether or not there is enough content to cause a scrollbar.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: that you can specify x and y scrolling using the <code>overflow</code> property and passing in two values. If two keywords are specified, the first applies to <code>overflow-x</code> and the second to <code>overflow-y</code>. Otherwise, both <code>overflow-x</code> and <code>overflow-y</code> are set to the same value. For example, <code>overflow: scroll hidden</code> would set <code>overflow-x</code> to <code>scroll</code> and <code>overflow-y</code> to <code>hidden</code>.</p>
+</div>
+
+<p>If you only want scrollbars to appear if there is more content than can fit in the box, then use <code>overflow: auto</code>. In this case it is left up to the browser to decide whether to display scrollbars. Desktop browsers will typically only do so once there is enough content to cause overflow.</p>
+
+<p><strong>In the below example, remove some of the content until it fits into the box and you should see the scrollbars disappear.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p>
+
+<h2 id="Overflow_establishes_a_Block_Formatting_Context">Overflow establishes a Block Formatting Context</h2>
+
+<p>There is a concept in CSS of the <strong>Block Formatting Context</strong> (BFC). This isn't something you need to worry too much about right now, but it is useful to know that when you use a value of overflow such as <code>scroll</code> or <code>auto</code> you create a BFC. The result is that the content of the box you have changed the value of <code>overflow</code> for becomes a mini layout of its own. Things outside the container cannot poke into the container, and nothing can poke out of that box into the surrounding layout. This is to enable the scrolling behavior, as all content of your box will need to be contained and not overlap other items on the page, in order to create a consistent scrolling experience.</p>
+
+<h2 id="Unwanted_overflow_in_web_design">Unwanted overflow in web design</h2>
+
+<p>Modern layout methods (as covered in the <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a> module) manage overflow very well. They have been designed to cope with the fact that we tend not to be able to predict how much content we have on the web. In the past however, developers would often use fixed heights to try to line up the bottoms of boxes that really had no relationship to each other. This was fragile, and in a legacy application you may occasionally come across a box where the content is overlaying other content on the page. If you see this you now know that what is happening is overflow; ideally you would refactor the layout to not rely on fixing the box size.</p>
+
+<p>When developing a site you should always keep overflow issues in mind. You should test designs with large and small amounts of content, increase the font size of text and ensure that your CSS can cope in a robust way. Changing the value of overflow to hide content or add scrollbars is likely to be something you reserve only for a few special cases — where you really do want a scrolling box for example.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This short lesson has introduced the concept of overflow; you now understand that CSS tries not to make overflowing content invisible as this will cause data loss. You have discovered that you can manage potential overflow, and also that you should test your work to make sure you do not accidentally cause problematic overflow.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html
new file mode 100644
index 0000000000..198f9f6ecc
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html
@@ -0,0 +1,129 @@
+---
+title: Изменение размеров в CSS
+slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS
+translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>
+
+<p>In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand the different ways we can size things in CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="The_natural_or_intrinsic_size_of_things">The natural or intrinsic size of things</h2>
+
+<p>HTML Elements have a natural size, set before they are affected by any CSS. A straightforward example is an image. An image has a width and a height defined in the image file it is embedding into the page. This size is described as the <strong>intrinsic size</strong> — which comes from the image itself.</p>
+
+<p>If you place an image on a page and do not change its height and width, either using attributes on the <code>&lt;img&gt;</code> tag or CSS, it will be displayed using that intrinsic size. We have given the image in the example below a border so that you can see the extent of the file.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>
+
+<p>An empty {{htmlelement("div")}} however, has no size of its own. If you add a {{htmlelement("div")}} to your HTML with no content, then give it a border as we did with the image, you will see a line on the page. This is the collapsed border on the element — there is no content to hold it open. In our example below, that border stretches to the width of the container, because it is a block level element, a behavior that should be starting to become familiar to you. It has no height (or size in the block dimension) because there is no content.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>
+
+<p>In the example above, try adding some text inside the empty element. The border now contains that text because the height of the element is defined by the content. Therefore the size of this <code>&lt;div&gt;</code> in the block dimension comes from the size of the content. Again, this is the intrinsic size of the element — its size is defined by its content.</p>
+
+<h2 id="Setting_a_specific_size">Setting a specific size</h2>
+
+<p>We can of course give elements in our design a specific size. When a size is given to an element (and the content of which then needs to fit into that size) we refer to it as an <strong>extrinsic size</strong>. Take our <code>&lt;div&gt;</code> from the example above — we can give it specific {{cssxref("width")}} and {{cssxref("height")}} values, and it will now have that size no matter what content is placed into it. As we discovered in <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">our previous lesson on overflow</a>, a set height can cause content to overflow if there is more content than the element has space to fit inside it.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>
+
+<p>Due to this problem of overflow, fixing the height of elements with lengths or percentages is something we need to do very carefully on the web.</p>
+
+<h3 id="Using_percentages">Using percentages</h3>
+
+<p>In many ways percentages act like length units, and as we <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">discussed in the lesson on values and units</a>, they can often be used interchangeably with lengths. When using a percentage you need to be aware what it is a percentage <em>of</em>. In the case of a box inside another container, if you give the child box a percentage width it will be a percentage of the width of the parent container.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>
+
+<p>This is because percentages resolve against the size of the containing block. With no percentage applied our <code>&lt;div&gt;</code> would take up 100% of the available space, as it is a block level element. If we give it a percentage width, this becomes a percentage of the space it would normally fill.</p>
+
+<h3 id="Percentage_margins_and_padding">Percentage margins and padding</h3>
+
+<p>If you set <code>margins</code> and <code>padding</code> as a percentage you may notice some strange behavior. In the below example we have a box. We have given the inner box a {{cssxref("margin")}} of 10% and a {{cssxref("padding")}} of 10%. The padding and margin on the top and bottom of the box are the same size as the margin on the left and right.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>
+
+<p>You might expect for example the percentage top and bottom margins to be a percentage of the element's height, and the percentage left and right margins to be a percentage of the element's width. However, this is not the case!</p>
+
+<p>When you use margin and padding set in percentages, the value is calculated from the<strong> inline size</strong> — therefore the width when working in a horizontal language. In our example, all of the margins and padding are 10% of the width. This means you can have equal sized margins and padding all round the box. This is a fact worth remembering if you do use percentages in this way.</p>
+
+<h2 id="min-_and_max-_sizes">min- and max- sizes</h2>
+
+<p>In addition to giving things a fixed size, we can ask CSS to give an element a minimum or a maximum size. If you have a box that might contain a variable amount of content, and you always want it to be <em>at least</em> a certain height, you could set the {{cssxref("min-height")}} property on it. The box will always be at least this height, but will then grow taller if there is more content than the box has space for at its minimum height.</p>
+
+<p>In the example below you can see two boxes, both with a defined height of 150 pixels. The box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>
+
+<p>This is very useful for dealing with variable amounts of content while avoiding overflow.</p>
+
+<p>A common use of {{cssxref("max-width")}} is to cause images to scale down if there is not enough space to display them at their intrinsic width, while making sure they don't become larger than that width.</p>
+
+<p>As an example, if you were to set <code>width: 100%</code> on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixellated. If its intrinsic width were larger than its container, it would overflow it. Neither case is likely to be what you want to happen.</p>
+
+<p>If you instead use <code>max-width: 100%</code>, the image is able to become smaller than its intrinsic size, but will stop at 100% of its size.</p>
+
+<p>In the example below we have used the same image twice. The first image has been given <code>width: 100%</code> and is in a container which is larger than it, therefore it stretches to the container width. The second image has <code>max-width: 100%</code> set on it and therefore does not stretch to fill the container. The third box contains the same image again, also with <code>max-width: 100%</code> set; in this case you can see how it has scaled down to fit into the box.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>
+
+<p>This technique is used to make images <em>responsive</em>, so that when viewed on a smaller device they scale down appropriately. You should however not use this technique to load in really large images and then scale them down in the browser. Images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the design. Downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Find out more about <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</p>
+</div>
+
+<h2 id="Viewport_units">Viewport units</h2>
+
+<p>The viewport — which is the visible area of your page in the browser you are using to view a site — also has a size. In CSS we have units which relate to the size of the viewport — the <code>vw</code> unit for viewport width, and <code>vh</code> for viewport height. Using these units you can size something relative to the viewport of the user.</p>
+
+<p><code>1vh</code> is equal to 1% of the viewport height, and <code>1vw</code> is equal to 1% of the viewport width. You can use these units to size boxes, but also text. In the example below we have a box which is sized as 20vh and 20vw. The box contains a letter <code>A</code>, which has been given a {{cssxref("font-size")}} of 10vh.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>
+
+<p><strong>If you change the <code>vh</code> and <code>vw</code> values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport. To see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <code>&lt;iframe&gt;</code> that contains the example shown above is its viewport). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Open the example</a>, resize the browser window, and observe what happens to the size of the box and text.</strong></p>
+
+<p>Sizing things according to the viewport can be useful in your designs. For example, if you want a full page hero section to show before the rest of your content, making that part of your page 100vh high will push the rest of the content below the viewport, meaning that it will only appear once the document is scrolled.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This lesson has given you a rundown of some key issues that you might run into when sizing things on the web. When you move onto <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS Layout</a>, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/styling_tables/index.html b/files/ru/learn/css/building_blocks/styling_tables/index.html
new file mode 100644
index 0000000000..0141bfc6f2
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/styling_tables/index.html
@@ -0,0 +1,302 @@
+---
+title: Стилизация таблиц
+slug: Learn/CSS/Building_blocks/Styling_tables
+tags:
+  - CSS
+  - Стилизация
+  - таблицы
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary">Стилизация HTML таблиц это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья рукодство как сделать, чтобы ваши HTML таблицы выглядели хорошо, с некоторыми свойствами подробно рассмотренными в предыдущих статьях.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>Базовый HTML (<a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (<a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Научиться эффективно стилизовать HTML таблицы.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Типичная_HTML_таблица">Типичная HTML таблица</h2>
+
+<p>Давайте начнем с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идет о обуви, погоде или сотрудниках; мы решили сделать этоболее интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:</p>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;caption&gt;A summary of the UK's most famous punk bands&lt;/caption&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th scope="col"&gt;Band&lt;/th&gt;
+      &lt;th scope="col"&gt;Year formed&lt;/th&gt;
+      &lt;th scope="col"&gt;No. of Albums&lt;/th&gt;
+      &lt;th scope="col"&gt;Most famous song&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Buzzcocks&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;9&lt;/td&gt;
+      &lt;td&gt;Ever fallen in love (with someone you shouldn't've)&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Clash&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;6&lt;/td&gt;
+      &lt;td&gt;London Calling&lt;/td&gt;
+    &lt;/tr&gt;
+
+      ... some rows removed for brevity
+
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Stranglers&lt;/th&gt;
+      &lt;td&gt;1974&lt;/td&gt;
+      &lt;td&gt;17&lt;/td&gt;
+      &lt;td&gt;No More Heroes&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;th scope="row" colspan="2"&gt;Total albums&lt;/th&gt;
+      &lt;td colspan="2"&gt;77&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+&lt;/table&gt;</pre>
+
+<p>Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}} и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Это выглядит достаточно грубо, трудно читаемо и скучно. Нам нужно использовать немного CSS чтобы все исправить.</p>
+
+<h2 id="Активное_обучение_Стилизация_таблицы">Активное обучение: Стилизация таблицы</h2>
+
+<p>В этой части обучения мы будем работать над тем чтобы стилизовать наш пример таблицы.</p>
+
+<ol>
+ <li>В начале неоюходимо сделать копию <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">sample markup</a>, загрузить оба изображения (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>), и вставить эти файлы в отдельную папку на вашем компьютере.</li>
+ <li>Следующее, это создать новый файл <code>style.css</code> и сохранить его в той же папке вместе с другими файлами.</li>
+ <li>Подключить CSS в HTML для этого разместить следующую строку в HTML внутри {{htmlelement("head")}}:
+  <pre class="brush: html">&lt;link href="style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+</ol>
+
+<h3 id="Отступы_и_разметка">Отступы и разметка</h3>
+
+<p>Первое что нам нужно это разобраться с отступами/разметкой, так как по умолчанию стилизация таблцы выглядит неразборчиво! Сделаем это, добавив CSS в ваш <code>style.css</code> файл:</p>
+
+<pre class="brush: css">/* spacing */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}</pre>
+
+<p>Наиболее важные части следующие:</p>
+
+<ul>
+ <li>Свойство {{cssxref("table-layout")}} со значением <code>fixed</code> как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда <code>table-layout: fixed</code>, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) ("Выберите <em>n-ый</em> дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине ее заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматиривает эту технику в статье <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br>
+  <br>
+  Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет озывчивой (хотя для этого потребуется еще некоторая работа для правильного отображнения на экранах небольших размеров).</li>
+ <li>Свойство {{cssxref("border-collapse")}} со значением <code>collapse</code> это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить <code>border-collapse: collapse;</code>  рамки схлопываются в одну и так выглядит намного лучше: <img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li>
+ <li>Мы установили {{cssxref("border")}} вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.</li>
+ <li>Мы установили {{cssxref("padding")}} на элементах {{htmlelement("th")}} и {{htmlelement("td")}} — это создает в талице воздух, который позволяет ей дышать, делая ее более понятной.</li>
+</ul>
+
+<p>На этом этапе наша таблица выглядит уже гораздо лучше:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Немного_простой_типографики">Немного простой типографики</h3>
+
+<p>Теперь мы еще кое-что изменим.</p>
+
+<p>Во-первых, мы пойдем и найдем на <a href="https://www.google.com/fonts">Google Fonts</a> шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотит, тогда вам понадобится заменить представленный {{htmlelement("link")}} элемент и изменить объявление {{cssxref("font-family")}} на выбраный вами Google Fonts шрифт.</p>
+
+<p>Добавьте элемент {{htmlelement("link")}} в блок head вашего HTML, на строчку выше существующего элемента <code>&lt;link&gt;</code>:</p>
+
+<pre class="brush: html">&lt;link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'&gt;</pre>
+
+<p>Затем добавьте следующий CSS в ваш <code>style.css</code> файл, ниже предыдущего кода:</p>
+
+<pre class="brush: css">/* typography */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}</pre>
+
+<p>Здесь нет ничего специально для таблиц, мы просто настраиваем стилизацию шрифтов, чтобы упростить чтение:</p>
+
+<ul>
+ <li>Мы установили доступный глобально шрифт sans-serif; это вполне стандартный стилистический выбор. Мы установили выбранный нами шрифт для заголовков внутри элементов {{htmlelement("thead")}} и {{htmlelement("tfoot")}}, который подходит нам по тематике панков.</li>
+ <li>Мы добавили немного {{cssxref("letter-spacing")}} в заголовках и ячейках которым необходимо добавить читаемости. Опять же это основной стилистический прием.</li>
+ <li>Мы выравниваем по центру текст ячейках внутри {{htmlelement("tbody")}} чтобы они совпадали с заголовками. По умолчанию у ячеек свойство {{cssxref("text-align")}} имеет значение <code>left</code>, а заголовки значение <code>center</code>, но обычно выглядит лучше если они выравниваются в одном стиле. По умолчанию, чтобы внешний вид заголовков отличался у них задан жирный шрифт.</li>
+ <li>Мы выровняли заголовок справа внутри {{htmlelement("tfoot")}} так чтобы он визуально ассоциировался с соответствующими ему данными.</li>
+</ul>
+
+<p>В результате таблица выглядит немного аккуратнее:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Графика_и_цвета">Графика и цвета</h3>
+
+<p>И наконец-то графика и цвета! Наша таблица заполнена тем что имеет отношение к панкам, поэтому нам нужно придать ей яркий впечатляющий вид. Не беспокойтесь, вам не обязательно делать таблицу слишком кричащей — вы можете выбрать что-то более утонченное и со вкусом.</p>
+
+<p>Следующий шаг это добавить следующий CSS в ваш <code>style.css</code> файл в самом низу:</p>
+
+<pre>thead, tfoot {
+  background: url(leopardskin.jpg);
+  color: white;
+  text-shadow: 1px 1px 1px black;
+}
+
+thead th, tfoot th, tfoot td {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+  border: 3px solid purple;
+}
+</pre>
+
+<p>Опять же здесь нет ничего конкретно для таблиц, но стоит отметить несколько вещей.</p>
+
+<p>Мы добавили {{cssxref("background-image")}} в {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и изменили {{cssxref("color")}} для всего текста внутри header и footer на белый (и еще {{cssxref("text-shadow")}}) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.</p>
+
+<p>Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания легкой приятной текстуры, а также установили этим элементамяркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">несколько фоновых изображений</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient">линейные градиенты</a>.</p>
+
+<h4 id="Полосатая_зебра">Полосатая зебра</h4>
+
+<p>Мы хотели бы посвятить целый раздел, чтобы показать вам как реализовать <strong>полосы зебры</strong> — чередующиеся цветные строки которые упрощают чтение разных строк в вашей таблице. Добавим следующий CSS в ваш <code>style.css</code> файл:</p>
+
+<pre class="brush: css">tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}</pre>
+
+<ul>
+ <li>Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательноость элементов. Так формула <code>2n-1</code> выберет все нечетные дочерние элементы (1, 3, 5 и т.д.), а формула <code>2n</code> выберет все четные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова <code>odd</code> и <code>even</code>, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем четным и нечетным строкам разные (яркие) цвета.</li>
+ <li>Еще мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный <code>.png</code> с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.</li>
+ <li>И наконец мы установили для таблицы сплошной цвет фона, котрый обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор <code>:nth-child</code>.</li>
+</ul>
+
+<p>Этот взрыв цвета выглядит следующим образом:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p>
+
+<p>То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и акдемической.</p>
+
+<h3 id="Стилизация_заголовка">Стилизация заголовка</h3>
+
+<p>Последнее что мы сделаем с нашей таблицей это стилизация заголовка. Для этого добавим следующие строки в наш файл <code>style.css</code>:</p>
+
+<pre class="brush: css">caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}</pre>
+
+<p>Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение <code>bottom</code>. В этом случае заголовок будет размещен внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p>
+
+<h2 id="Активное_обучение_Стилизация_вашей_собственной_таблицы">Активное обучение: Стилизация вашей собственной таблицы</h2>
+
+<p>Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то зачительно более стильное и менее безвкусное чем наша таблица.</p>
+
+<h2 id="Стилизация_таблицы_быстрые_советы">Стилизация таблицы быстрые советы</h2>
+
+<p>Короткий список наиболее полезных вещей рассмотренных выше:</p>
+
+<ul>
+ <li>Сделайте свою разметку простой и гибкой, например, используя для этого проценты, что сделает дизайн более отзывчивым.</li>
+ <li>Используйте {{cssxref("table-layout")}}<code>: fixed</code> для более понятного поведения разметки, при этомлегко установить ширину столбцов, установив ширину {{cssxref("width")}} для заголовков таблицы ({{htmlelement("th")}}).</li>
+ <li>Используйте {{cssxref("border-collapse")}}<code>: collapse</code>, которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.</li>
+ <li>Используйте {{htmlelement("thead")}}, {{htmlelement("tbody")}} и {{htmlelement("tfoot")}} чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это дает возможность накладывать стили друг на друга, если это необходимо.</li>
+ <li>Используйте полоски зебры, чтобы облегчить чтение между строк.</li>
+ <li>Используйте {{cssxref("text-align")}} чтобы выровнять текст в {{htmlelement("th")}} и {{htmlelement("td")}} для более аккуратного и удобного оформления.</li>
+</ul>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Несмотря на головокружительные успехи достигнутые в стилизации таблиц, у нас есть еще кое-что чем мы можем занять наше время. В следующей главе мы рассмотрим некоторые продвинутые эффекты, уже устоявшиеся (например, тени box shadows) и те которые только недавно появились в браузерах, такие как режимы наложения blend-mode и фильтры.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</p>
+
+<p> </p>
+
+<h2 id="В_этом_блоке">В этом блоке</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap">Box model recap</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Borders</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Styling_boxes/Styling_tables">Стилизация таблиц</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects">Advanced box effects</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.html b/files/ru/learn/css/building_blocks/the_box_model/index.html
new file mode 100644
index 0000000000..f0a09df9f5
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/the_box_model/index.html
@@ -0,0 +1,372 @@
+---
+title: Модель коробки
+slug: Learn/CSS/Building_blocks/The_box_model
+tags:
+  - Границы
+  - Новичку
+translation_of: Learn/CSS/Building_blocks/The_box_model
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div>
+
+<div>Каждый элемент в CSS заключён в коробку (английское "<em>box</em>") и понимание поведения этих коробок — это ключ к умению создавать макеты с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы рассмотрим надлежащим образом <em>коробочную модель</em> CSS, так, чтобы вы могли решать более сложные здачи построения макетов, понимая, как она работает, и терминологию, которая к ней относится.</div>
+
+<div></div>
+
+<table class="learn-box standard-table" style="height: 364px; width: 510px;">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые условия:</th>
+   <td>
+    <p>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового ПО</a>, базовые знания о <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, основы HTML (изучите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и понимание работы CSS (изучите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>
+    <p>Узнать как работает коробочная модель CSS, из чего она состоит и как переключиться на альтернативную модель.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Блочные_и_строчные_коробки">Блочные и строчные коробки</h2>
+
+<p>В CSS мы, говоря упрощённо, имеем два типа коробок — <strong>блочные</strong> и <strong>строчные</strong>. Эти характеристики относятся к поведению коробки в терминах потока страницы и относительно других коробок на странице.</p>
+
+<p>Если коробка определена как блочная, то она будет вести себя следующим образом:</p>
+
+<ul>
+ <li>Начнётся с новой строки.</li>
+ <li>Будет расширяться вдоль строки таким образом, чтобы заполнить всё пространство, доступное в её контейнере. В большинстве случаев это означает, что коробка станет такой же ширины, как и её контейнер, заполняя 100% доступного пространства.</li>
+ <li>Будет признавать свойства {{cssxref("width")}} и {{cssxref("height")}}.</li>
+ <li>Внешние и внутренние отступы, граница будут отодвигать от неё другие элементы.</li>
+</ul>
+
+<p>Если не изменить намеренно тип отображения на строчный, то такие элементы, как заголовки (например, <code>&lt;h1&gt;</code>) и <code>&lt;p&gt;</code>, все используют <code>block</code> как свой внешний тип отображения по умолчанию.</p>
+
+<p>Если коробка имеет внешний тип отображения <code>inline</code>, то:</p>
+
+<ul>
+ <li>Она не будет занимать новую строку.</li>
+ <li>Свойства {{cssxref("width")}} и {{cssxref("height")}} не будут применяться.</li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Вертикальные внешние и внутренние отступы, границы будут применяться, но не </span></span>будут отодвигать другие строчные коробки<span class="tlid-translation translation" lang="ru"><span title="">.</span></span></li>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Горизонтальные внешние и внутренние отступы, границы будут применяться и </span></span>будут отодвигать другие строчные коробки<span class="tlid-translation translation" lang="ru"><span title="">.</span></span></li>
+</ul>
+
+<p>Элемент <code>&lt;a&gt;</code>, используемый для ссылок, <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> и <code>&lt;strong&gt;</code> — всё это примеры элементов, которые будут отображаться в линию по умолчанию.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Тип коробки, применяемый к элементу, определяется значениями свойства</span></span> {{cssxref("display")}}, такими как <code>block</code> и <code>inline</code>, и относится к <strong>внешнему</strong> значению <code>display</code>.</p>
+
+<h2 id="Экскурс_внутренний_и_внешний_типы_отображения">Экскурс: внутренний и внешний типы отображения</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Здесь следует объяснить, что такое <strong>внутренние</strong> и <strong>внешние</strong> типы отображения.</span> <span title="">Как уже говорилось выше, коробки в CSS имеют <em>внешний</em> тип отображения, который определяет, блочная она или строчная.</span></span></p>
+
+<p>Коробки также имеют <em>внутренний</em> тип отображения, который определяет расположение элементов внутри неё. По умолчанию, элементы внутри коробки располагаются в <strong><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/%D0%9D%D0%BE%D1%80%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA">нормальном потоке</a></strong>, что означает, что они ведут себя так же, как и любые другие блочные или строчные элементы (как описано выше).</p>
+
+<p>Однако, мы можем изменить внутренний тип отображения, используя такие значения <code>display</code> как <code>flex</code>. Если мы установим <code>display: flex;</code> для элемента, внешний тип отображения примет значение <code>block</code>, но внутренний тип изменится на <code>flex</code>. Любые прямые дочерние элементы этой коробки станут <em>гибкими</em> (flex) объектами и будут размещены в соответствии с правилами, изложенными в спецификации <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, о которой вы узнаете позже.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Чтобы узнать больше о значениях display, и о том, как работают коробки при блочном или строчном расположении, посмотрите руководство MDN <a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Flow_Layout/%D0%91%D0%BB%D0%BE%D1%87%D0%BD%D0%BE%D0%B5_%D0%B8_%D1%81%D1%82%D1%80%D0%BE%D1%87%D0%BD%D0%BE%D0%B5_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_%D0%BD%D0%BE%D1%80%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%BC_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA%D0%B5">Блочное и cтрочное расположение</a>.</p>
+</div>
+
+<p>Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите <code>flex</code>, и другие внутренние значения, которые могут иметь ваши элементы, например <code><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p>
+
+<p>Тем не менее, блочное и строчное расположение, это поведение web-элементов по умолчанию — как было сказано выше, это иногда называют <em>нормальным потоком (normal flow)</em>, потому что при отсутствии какой-либо другой инструкций коробки имеют блочное или строчное расположение.</p>
+
+<h2 id="Примеры_разных_типов_отображения">Примеры разных типов отображения</h2>
+
+<p>Давайте продолжим и рассмотрим некоторые примеры. Ниже мы имеем три разных элемента HTML, каждый из которых имеет внешний тип отображения <code>block</code>. Первый — это абзац, который имеет обрамление, указанное в CSS. Браузер отображает его как блочный элемент, поэтому абзац начинается на новой строке, и расширяется на всю доступную ему ширину.</p>
+
+<p>Второй — это список, который свёрстан с использованием <code>display: flex</code>. Это устанавливает гибкое (flex) расположение для элементов внутри контейнера, однако, список сам по себе — блочный элемент и — как и абзац — расширяется на всю ширину контейнера и начинается с новой строки.</p>
+
+<p>Ниже у нас есть абзац блочного типа, внутри которого есть два элемента <code>&lt;span&gt;</code>. Эти элементы по умолчанию имеют тип <code>inline</code>, однако один из элементов имеет класс block, для которого мы установили <code>display: block</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p>
+
+<p>Мы можем видеть, как строчные элементы (<code>inline)</code> ведут себя в следующем примере. Элементы <code>&lt;span&gt;</code> в первом абзаце строчные по умолчанию и поэтому не приводят к разрыву строки.</p>
+
+<p>Мы также имеем элемент <code>&lt;ul&gt;</code>, для которого установлено <code>display: inline-flex</code>, что создаёт строчную коробку вокруг нескольких flex-объектов.</p>
+
+<p>Наконец, у нас есть два абзаца, для которых установлено <code>display: inline</code>. И строчный f<span class="tlid-translation translation" lang="ru"><span title="">lex-контейнер, и абзацы располагаются вместе на одной строке, а не начинаются каждый с новой строки, как они отображались бы, будучи элементами блочного уровня.</span></span></p>
+
+<p><strong>В примере вы можете заменить <code>display: inline</code> на <code>display: block</code> или <code>display: inline-flex</code> на <code>display: flex</code> для переключения между этими двумя режимами отображения.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p>
+
+<p>Позже в этих уроках вы встретите такое понятие как гибкая (flex) вёрстка; главное, что нужно запомнить сейчас, это то, что изменение значения свойства <code>display</code> может изменить внешний тип отображения элемента на блочный или строчный, что меняет способ его отображения относительно других элементов в макете. </p>
+
+<p>В оставшейся части урока мы сосредоточимся на внешнем типе отображения.</p>
+
+<h2 id="Что_такое_модель_коробки_CSS">Что такое модель коробки CSS?</h2>
+
+<p>Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определенные блочной моделью. Модель определяет, как разные части элемента — поля, границы, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Чтобы добавить дополнительную сложность элементу, используются стандартные и альтернативные блочные модели.</p>
+
+<h3 id="Составляющие_элемента">Составляющие элемента</h3>
+
+<p>Составляя блочный элемент в CSS мы имеем:</p>
+
+<ul>
+ <li><strong>Поле содержимого</strong>: Область где отображается ваш контент, размер которой можно изменить с помощью таких свойств, как {{cssxref("width")}} и {{cssxref("height")}}.</li>
+ <li><strong>Поле внутреннего отступа</strong>: отступы располагаются вокруг содержимого, как пустое пространство; их размер контролируется с помощью {{cssxref("padding")}} и связанных свойств.</li>
+ <li><strong>Рамка границы</strong>: рамка оборачивает содержимое и внутренние отступы. Её размер и стиль можно контролировать с помощью {{cssxref("border")}} и связанных свойств.</li>
+ <li><strong>Поле внешнего отступа</strong>: внешний слой, включающий в себя содержимое, внутренний отступ и границы, представляет собой пространство между текущим и другими элементами. Размер его контролируется с помощью {{cssxref("margin")}} и связанных свойств.</li>
+</ul>
+
+<p>Рисунок ниже показывает эти области:</p>
+
+<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+
+<h3 id="Стандартная_блочная_модель_CSS">Стандартная блочная модель CSS</h3>
+
+<p>В стандартной блочной модели, если указать элементу атрибуты <code>width</code> и <code>height</code>, это определит ширину и высоту <em>содержимого элемента</em>. Любые отступы и границы затем добавляются к этой ширине и высоте, для получения общего размера элемента. Это показано на изображении ниже.</p>
+
+<p>Предположим, что в элементе есть следующий CSS определяющий <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, и <code>padding</code>:</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 350px;
+  height: 150px;
+  margin: 10px;
+  padding: 25px;
+  border: 5px solid black;
+}
+</pre>
+
+<p>Пространство, занимаемое нашим объектом с использованием стандартной блочной модели, на самом деле будет равно по ширине 410px (350 + 25 + 25 + 5 + 5), и по высоте 210px (150 + 25 + 25 + 5 + 5), поскольку отступы и границы добавляются к размерам поля содержимого.</p>
+
+<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Внешний отступ не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнее пространство. Область элемента заканчивается на границах — она не распространяется за них.</p>
+</div>
+
+<h3 id="Альтернативная_блочная_модель_CSS">Альтернативная блочная модель CSS</h3>
+
+<p>Вы можете подумать, что довольно неудобно добавлять границы и отступы, чтобы получить реальный размер элемента, и окажетесь правы! По этой причине, спустя некоторое время после стандартной блочной модели, в CSS была введена альтернативная блочная модель. При использовании альтернативной модели, любая ширина – это ширина видимой части элемента на странице, поэтому ширина области содержимого будет равна общей ширине минус ширина границы и внутреннего отступа. Тот же CSS, который использовался выше, даст следующий результат (ширина = 350px, высота = 150px).</p>
+
+<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p>
+
+<p>По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установивите для него свойство <code>box-sizing: border-box</code>. С помощь этого вы говорите браузеру о том, что граница элемента определяется любыми размерами которые вы устанавливаете.</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  box-sizing: border-box;
+} </code></pre>
+
+<p>Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространенным выбором среди разработчиков, установите свойство <code>box-sizing</code> для элемента <code>&lt;html&gt;</code>, затем настройте все элементы для наследования этого значения (inherit), как показано на фрагменте ниже. Если вы хотите понять, что стоит за этим, смотрите статью <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">the CSS Tricks article on box-sizing</a>.</p>
+
+<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Интересный факт - Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения.</span></span></p>
+</div>
+
+<h2 id="Играем_с_блочными_моделями">Играем с блочными моделями</h2>
+
+<p>В примере ниже, вы можете видеть 2 объекта. Оба имеют класс <code>.box</code>, который дает им одинаковые параметры <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, и <code>padding</code>. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.</p>
+
+<p><strong>Можете ли вы изменить размер второго объекта (добавляя CSS в класс <code>.alternate)</code> чтобы ишрина и высота совпали с первым блоком?</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Вы можете найти решение этой задачи <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">здесь</a>.</p>
+</div>
+
+<h3 id="Использование_инструментов_разработчика_в_браузере_для_просмотра_блочных_моделей">Использование инструментов разработчика в браузере для просмотра блочных моделей</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Инструменты разработчика вашего браузера могут значительно облегчить понимание блочной модели.</span> <span title="">Если вы проверяете элемент в инструментах разработчика Firefox, вы можете увидеть размер элемента, а также его поле, отступы и границу.</span> <span title="">Проверка элемента таким способом </span></span>—<span class="tlid-translation translation" lang="ru"><span title=""> отличный способ выяснить, действительно ли размер вашего блока такой, какой вы думаете!</span></span></p>
+
+<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание: </strong>Информацию об инструментах разработчика вы можете получить по <a href="https://developer.mozilla.org/ru/docs/Tools">этой ссылке.</a></p>
+</div>
+
+<h2 id="Поля_отступы_и_границы"><span class="tlid-translation translation" lang="ru"><span title="">Поля, отступы и границы</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вы уже видели свойства {{cssxref ("margin")}}, {{cssxref ("padding")}} и {{cssxref ("border")}} в работе в приведенном выше примере.</span> <span title="">Свойства, используемые в этом примере, являются общими и позволяют нам устанавливать все четыре стороны поля одновременно.</span> <span title="">Эти параметры также имеют эквивалентные свойства, которые позволяют индивидуально управлять разными сторонами поля.</span><br>
+ <br>
+ <span title="">Давайте рассмотрим эти свойства более подробно.</span></span></p>
+
+<h3 id="Поле_внешнего_отступа_margin">Поле внешнего отступа (margin)</h3>
+
+<p>Margin это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него. Margin может быть как положительным, так и отрицательным. Негативное значение для внешнего отступа может привести к перекрытию некоторых элементов страницы. Независимо от того, используете ли вы стандартную или альтернативную блочную модель, мargin всегда добавляется после расчета размера видимого бокса.</p>
+
+<p>Мы можем контролировать все поля элемента сразу, используя свойство {{cssxref ("margin")}}, или каждую сторону индивидуально, используя эквивалентные полные свойства:</p>
+
+<ul>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+</ul>
+
+<p><strong>В примере ниже, попробуйте изменить значение margin чтобы увидеть как блок смещается, создавая или удаляя пространство (если вводить отрицательные значения margin) между этим элементом и элементом его содержащим.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p>
+
+<h4 id="Cхлопывание_margin"> Cхлопывание margin </h4>
+
+<p>Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания полей. Если у вас есть два элемента, поля которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба зничения негативны, то сумма отрицательнных значений будет вычтена из общей суммы.</p>
+
+<p>В примере ниже имеется два абзаца. Первый абзац имеет ширину <code>margin-bottom</code>  50 пикселей. Ширина второго параграфа — <code>margin-top</code> 30 пикселей. Поля схлопываются так, что в результате  margin между двумя блоками составляет 50 пикселей, а не сумму значений отдельных значений margin.</p>
+
+<p><strong>Вы можете проверить это устанавливая значения <code>margin-top</code> . Видимая граница между двумя параграфами не изменится — если сохранять значение в 50 пикселей в <code>bottom-margin</code> первого параграфа. Если вы установите значение -10px, то увидите, что margin становится 40px — происходит вычитание из положительного значения первого параграфа.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p>
+
+<p>Существует ряд правил, которые определяют, когда поля уменьшаются, а когда нет. Для получения подробной информации см. <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">margin collapsing</a>. Главное, что нужно сейчас помнить, — это то, что происходит схлопывание полей. Если вы создаете пространство с полями и не получаете ожидаемого результата, вероятно, именно это и происходит. </p>
+
+<h3 id="Границы">Границы</h3>
+
+<p>Граница распологается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер границы прибавляется к значениям <code>width</code> и <code>height</code> бокса. Если вы используете альтернативную блочную модель, то размер границы уменьшает поле контента данного блока, так как значения границы входит в значения <code>width</code> и <code>height</code>.</p>
+
+<p>Для слилизации границ существует большое количество различных свойств — имеется четыре границы,  и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.</p>
+
+<p>Вы можете установить ширину, стиль или цвет всех четырех границ сразу используя {{cssxref("border")}} свойства.</p>
+
+<p>Чтобы установить индивидуальные свойства для каждой из четырех сторон вы можете использовать:</p>
+
+<ul>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+</ul>
+
+<p>Для утановки ширины, стиля или цвета всех границ используйте:</p>
+
+<ul>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+</ul>
+
+<p>Чтобы установить ширину, стиль или цвет для каждой границы индивидуально, вы можете использовать следующие свойства:</p>
+
+<ul>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+</ul>
+
+<p><strong>В примере ниже мы использовали различные сокращенные и длинные способы создания границ. Поиграйте с различными свойствами чтобы проверить как вы поняли принципы их работы. MDN страницы свойств границ дадут вам информацию о различных стилях, которые вы можете использовать.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p>
+
+<h3 id="Padding">Padding</h3>
+
+<p>Padding расположен между границей и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding, поэтому значения должны быть положительными или равными 0. Любой, примененный к вашим элементам фон, будет отображаться под областью padding, и поэтому он обычно используется чтобы отодвинуть контент от границы.</p>
+
+<p>Вы можете контролировать значение padding для всех сторон элемента, используя {{cssxref("padding")}} свойство, или для каждой стороны индивидуально, используя используя следующие свойства:</p>
+
+<ul>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+</ul>
+
+<p><strong>Если вы измените значения padding в классе <code>.box</code> в примере ниже, вы можете увидеть что это изменяет положение текста относительно поля.</strong></p>
+
+<p><strong>Вы также можете изменить padding в классе <code>.container,</code> который создает пространство между контейнером и боксом. Padding может быть изменен для любого элемента, и создать пространство между этой и любой другой границей внутри элемента.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p>
+
+<h2 id="Блочная_модель_и_строчные_элементы">Блочная модель и строчные элементы</h2>
+
+<p>Всё, сказанное ранее, полностью применимо к блочным элементам. Некоторые из свойств могут быть также применены и к строчным (inline) элементам, например, элемент, создаваемый с помощью <code>&lt;span&gt;</code>.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В приведенном ниже примере у нас есть &lt;span&gt; внутри абзаца, и мы применили к нему </span></span><code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> и <code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Вы можете видеть, что ширина и высота игнорируются.</span> <span title="">Вертикальные поля, отступы и границы соблюдаются, но они не изменяют отношения другого содержимого к нашему строчному элементу, и поэтому отступ и граница перекрывают другие слова в абзаце.</span> <span title="">Горизонтальные отступы, поля и границы соблюдаются и заставят другой контент отодвинуться от нашего элемента.</span></span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p>
+
+<h2 id="Использование_display_inline-block">Использование display: inline-block</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Существует особое значение <code>display</code>, которое обеспечивает золотую середину между </span></span><code>inline</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>block</code><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Это полезно в ситуациях, когда вы не хотите, чтобы элемент разбивался на новую строку, но нужно, чтобы он использовал </span></span><code>width</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>height</code><span class="tlid-translation translation" lang="ru"><span title=""> и избегал перекрытия, показанного выше.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Элемент с <code>display: inline-block</code> содержит ряд свойств блочного элемента, о которых мы уже знаем:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Применяются свойства </span></span><code>width</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>height</code><span class="tlid-translation translation" lang="ru"><span title="">.</span></span></li>
+ <li>Использование <code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">, </span></span><code>margin</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>border</code><span class="tlid-translation translation" lang="ru"><span title=""> приведёт к тому, что другие элементы будут отодвинуты от нашего элемена.</span></span></li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Он не прервётся на новую строку и станет больше, чем его содержимое, только если вы явно не укажите свойства </span></span><code>width</code><span class="tlid-translation translation" lang="ru"><span title=""> и </span></span><code>height</code><span class="tlid-translation translation" lang="ru"><span title="">.</span></span></p>
+
+<p><strong><span class="tlid-translation translation" lang="ru"><span title="">В следующем примере мы добавили <code>display: inline-block</code> к нашему элементу <code>&lt;span&gt;</code>.</span> <span title="">Попробуйте изменить это на <code>display: block</code> или полностью удалить строку, чтобы увидеть разницу.</span></span></strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Это может быть полезно, когда вы хотите создать ссылку с большой областью попадания, добавив </span></span><code>padding</code><span class="tlid-translation translation" lang="ru"><span title="">.</span> </span><code>&lt;a&gt;</code><span class="tlid-translation translation" lang="ru"><span title=""> - это строчный элемент, такой же как <code>&lt;span&gt;</code>;</span> <span title="">вы можете использовать <code>display: inline-block</code>, чтобы разрешить установку отступов, что упростит пользователю переход по ссылке.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вы довольно часто видите это на панели навигации.</span> <span title="">Приведенная ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <code>&lt;a&gt;</code>, также мы хотим чтобы изменялся </span></span><code>background-color</code><span class="tlid-translation translation" lang="ru"><span title=""> при наведении курсора на <code>&lt;a&gt;</code>.</span> <span title="">Отступы перекрывают границу элемента <code>&lt;ul&gt;</code>.</span> <span title="">Это потому, что <code>&lt;a&gt;</code> является строчным элементом.</span></span></p>
+
+<p><strong><span class="tlid-translation translation" lang="ru"><span title="">Добавьте в правило <code>display: inline-block</code> с помощью селектора <code>.links-list a</code>, и вы увидите, как он решает эту проблему, заставляя другие элементы соблюдать отступы.</span></span></strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p>
+
+<h2 id="Проверьте_свои_навыки!"><span class="tlid-translation translation" lang="ru"><span title="">Проверьте свои навыки!</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию?</span> <span title="">Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше - см. <a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks">Проверка своих навыков: блочная модель</a>.</span></span></p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Это большая часть того, что вам нужно знать о блочной модели.</span> <span title="">Возможно, вы захотите вернуться к этому уроку в будущем, если когда-нибудь обнаружите, что не понимаете, насколько большие блоки в вашем макете.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В следующем уроке мы рассмотрим, как можно использовать <a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">фон и границы</a>, чтобы сделать ваши простые блоки более интересными.</span></span></p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a>
+  <ul>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a></li>
+  </ul>
+ </li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing"> </a></li>
+</ol>
+
+<div id="gtx-anchor" style="position: absolute; left: 20px; top: 9989px; width: 532.385px; height: 68.667px;"></div>
+
+<div class="jfk-bubble gtx-bubble">
+<div class="jfk-bubble-content-id" id="bubble-11">
+<div id="gtx-host" style="max-width: 400px;"></div>
+</div>
+
+<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div>
+
+<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 246.5px;">
+<div class="jfk-bubble-arrowimplbefore"></div>
+
+<div class="jfk-bubble-arrowimplafter"></div>
+</div>
+</div>
diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.html b/files/ru/learn/css/building_blocks/values_and_units/index.html
new file mode 100644
index 0000000000..7aa0744ad9
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/values_and_units/index.html
@@ -0,0 +1,394 @@
+---
+title: Значения свойств CSS
+slug: Learn/CSS/Building_blocks/Values_and_units
+translation_of: Learn/CSS/Building_blocks/Values_and_units
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Каждое свойство используемое в CSS имеет значение или набор значений которые допустимы для этого свойства, и изучение страниц MDN со свойствами поможет вам понять какие значения валидны для того или иного свойства. В этом уроке мы рассмотрим некоторые наиболее общие значения и единицы в использовании.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To learn about the different types of values and units used in CSS properties.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Что_такое_значение_CSS">Что такое значение CSS?</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например </span></span><code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> или <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code><a href="/en-US/docs/Web/CSS/length">. </a>Если вы видите значение <code>&lt;color&gt;</code> как действительное для определенного свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечисленно на странице <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code><a href="/en-US/docs/Web/CSS/color_value">.</a></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You'll also see CSS values referred to as <em>data types</em>. 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.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the {{cssxref("color")}} property, versus the <a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a> 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.</p>
+</div>
+
+<p>В следующем примере мы установили цвет нашего заголовка используя ключевое слово и фон используя функцию  <code>rgb()</code>:</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} </code>
+</pre>
+
+<p>Значение в CSS это путь определения коллекции допустимых под-значений. То есть если вы видите <code>&lt;color&gt;</code> как примененный, то вам не надо озадачиваться какой из разных типов значения цвета может быть использован — ключевое слово, hex значение, функция <code>rgb()</code> и т.д. Вы можете воспользоваться <em>любым </em>доступным значением <code>&lt;color&gt;</code> при условии, что они поддерживаются вашим браузером. Страницы для всех значений на MDN дадут вам информацию о поддержке браузеров. Например, если вы посмотрите на страницу <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> то вы увидите раздел совместимости браузеров в котором перечислены различные типы значений цвета и их поддержка.</p>
+
+<p>Давайте посмотрим на некоторые типы значений и единиц с примерами чтобы вы могли опробовать различные возможные значения, с которыми вы можете часто сталкиваться.</p>
+
+<h2 id="Числа_длины_и_проценты">Числа, длины и проценты</h2>
+
+<p>Существуют различные типы числовых данных, которые вы можете использовать в CSS. Следующие типы классифицируются как числовые:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Тип данных</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/integer">&lt;integer&gt;</a></code></td>
+   <td><code>&lt;integer&gt;</code> (целое число) — целое число такое как <code>1024</code> или <code>-55</code>.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/number">&lt;number&gt;</a></code></td>
+   <td>
+    <p><code>&lt;number&gt;</code> (число) представляет десятичное число — оно может иметь, а может и не иметь десятичную точку с факториальным компонентом, например <code>0.255</code>, <code>128</code>, или <code>-1.2</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>&lt;dimension&gt;</code></td>
+   <td>
+    <p><code>&lt;dimension&gt;</code> (измерение) это — <code>&lt;number&gt;</code> (число) с единицей измерения, прикрепленной к нему, например <code>45deg</code>, <code>5s</code>, или <code>10px</code>. <code>&lt;dimension&gt;</code> — это зонт категорий, включающих в себя типы <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>, <code><a href="/en-US/docs/Web/CSS/angle">&lt;angle&gt;</a></code>, <code><a href="/en-US/docs/Web/CSS/time">&lt;time&gt;</a></code>, и <code><a href="/en-US/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code><a href="/en-US/docs/Web/CSS/resolution"> </a>(длина, угол, время и разрешение)<a href="/en-US/docs/Web/CSS/resolution">. </a></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/percentage">&lt;percentage&gt;</a></code></td>
+   <td>
+    <p><code>&lt;percentage&gt;</code> (проценты) представляют собой долю некоторого другого значения, например <code>50%</code>. Процентные значения всегда относительны по отношению к другому количеству, например длина элемента относительна к длине ее родительского элемента.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Длины">Длины</h3>
+
+<p>Числовой тип, с которым вы будете сталкиваться чаще всего это <code>&lt;length&gt;</code> (длина), например <code>10px</code> (пиксели) или <code>30em</code>. Существует два типа длин используемых в CSS — относительные и абсолютные. Важно знать разницу для того, чтобы понимать, насколько большими станут вещи.</p>
+
+<h4 id="Абсолютные_единицы_длины">Абсолютные единицы длины</h4>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Ниже приведены все единицы абсолютной длины </span></span>— они не являются относительными к чему-либо и обычно считаются всегда одинакового размера.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Единицы</th>
+   <th scope="col">Название</th>
+   <th scope="col">Эквивалент</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cm</code></td>
+   <td>Centimeters/Сантиметры</td>
+   <td>1cm = 96px/2.54</td>
+  </tr>
+  <tr>
+   <td><code>mm</code></td>
+   <td>Millimeters/Миллиметры</td>
+   <td>1mm = 1/10th of 1cm</td>
+  </tr>
+  <tr>
+   <td><code>Q</code></td>
+   <td>Quarter-millimeters/Четверть-мм</td>
+   <td>1Q = 1/40th of 1cm</td>
+  </tr>
+  <tr>
+   <td><code>in</code></td>
+   <td>Inches/Дюймы</td>
+   <td>1in = 2.54cm = 96px</td>
+  </tr>
+  <tr>
+   <td><code>pc</code></td>
+   <td>Picas/Пики</td>
+   <td>1pc = 1/16th of 1in</td>
+  </tr>
+  <tr>
+   <td><code>pt</code></td>
+   <td>Points/Точки</td>
+   <td>1pt = 1/72th of 1in</td>
+  </tr>
+  <tr>
+   <td><code>px</code></td>
+   <td>Pixels/Пиксели</td>
+   <td>1px = 1/96th of 1in</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Большинство из этих значений больше полезны при использовании печати, чем для вывода на экран. Например, мы обычно не используем <code>cm</code> (сантиметры) на экране. Единственное значение которое вы в основном будете использовать это <code>px</code> (пиксели).</p>
+
+<h4 id="Единицы_относительной_длины">Единицы относительной длины</h4>
+
+<p>Относительные единицы длин являются относительными к чему-то еще, возможно к размеру родительского шрифта или к размеру окна просмотра. Преимущество использования относительных единиц состоит в том, что при тщательном планировании вы можете сделать так, чтобы размер текста или других элементов масштабировался <span class="tlid-translation translation" lang="ru"><span title="">относительно всего остального на странице.</span></span> Некоторые наиболее используемые единицы веб-разработки перечислены в таблице ниже.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Единица</th>
+   <th scope="col">Отосительна к</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>em</code></td>
+   <td>Размер шрифта родительского элемента.</td>
+  </tr>
+  <tr>
+   <td><code>ex</code></td>
+   <td>x-высота шрифта элемента.</td>
+  </tr>
+  <tr>
+   <td><code>ch</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Предварительная мера (ширина) глифа "0" шрифта элемента.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>rem</code></td>
+   <td>Размер шрифта корневого элемента.</td>
+  </tr>
+  <tr>
+   <td><code>lh</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Высота строки элемента.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>vw</code></td>
+   <td>1% от ширины окна просмотра.</td>
+  </tr>
+  <tr>
+   <td><code>vh</code></td>
+   <td>1% от высоты окна просмотра.</td>
+  </tr>
+  <tr>
+   <td><code>vmin</code></td>
+   <td>1% от меньшего измерения ширины окна просмотра.</td>
+  </tr>
+  <tr>
+   <td><code>vmax</code></td>
+   <td>1% от большего измерения ширины окна просмотра.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Изучение_на_примере">Изучение на примере</h4>
+
+<p>В примере ниже вы можете увидеть, как некоторые относительные и абсолютные единицы длин ведут себя. Первый блок имеет {{cssxref("width")}} (ширину) установленную в пикселях. Как абсолютная единица эта ширина будет оставаться такой же неважно что еще измениться.</p>
+
+<p>Второй блок имеет ширину, установленную в единицах <code>vw</code> (ширина окна просмотра). Это значение относительно к ширине окна просмотра и таким образом 10vw это 10 процентов от ширины окна просмотра. Если вы измените ширину окна вашего браузера, размер блока должен измениться, однако этот пример встроен в страницу с использованием <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>, поэтому это не сработает. Для того чтобы увидеть это в действии вы должны <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">открыть этот пример в отдельной вкладке браузера</a>.</p>
+
+<p>Третий блок использует единицы <code>em</code>. Они относительны к размеру шрифта. Я установил размер шрифта <code>1em</code> для содержимого {{htmlelement("div")}}, который имеет класс <code>.wrapper</code>. Измените это значение на <code>1.5em</code> и вы увидите что, размер шрифта всех этих элементов увеличится, но только последний объект станет шире, поскольку его ширина относительна к тому размера шрифта.</p>
+
+<p>После выполнения инструкция выше, попробуйте поиграть со значениями и посмотрите, что у вас получится.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p>
+
+<h4 id="em_и_rem">em и rem</h4>
+
+<p><code>em</code> и <code>rem</code> — две относительные длины, с которыми вы вероятное всего сталкиваетесь чаще при разметке чего-либо от блоков до текста. Стоит понимать как они работают, понимать различия между ними, особенно когда вы начинаете переходить к более сложным темам как <a href="/en-US/docs/Learn/CSS/Styling_text">стилизация текста</a> или <a href="/en-US/docs/Learn/CSS/CSS_layout">разметка CSS</a>. Приведенный ниже пример показывает это.</p>
+
+<p>HTML это набор вложенных списков — у нас имеется три списка в общей сложности и оба примера имеют одинаковый HTML. Единственное различие в том, что первый имеет класс <em>ems, </em>а второй класс <em>rems</em>.</p>
+
+<p>Чтобы начать, мы установили 16px для размера шрифта элемента <code>&lt;html&gt;</code>.</p>
+
+<p><strong>Повторим, единица em означает "размер шрифта родительского элемента"</strong>. Элементы {{htmlelement("li")}} внутри {{htmlelement("ul")}} с классом <code>ems</code> получают свои размеры от своего родителя. Так, каждый последующий уровень вложения становится прогрессивно больше, так как каждый имеет свой размер шрифта установленный на <code>1.3em</code> — 1.3 раза от размера шрифта родителя.</p>
+
+<p><strong>Повторим, единица rem означает "размер шрифта корневого элемента"</strong> (rem значит "root em". (root - корень)). Элементы {{htmlelement("li")}} внутри {{htmlelement("ul")}} с классом <code>rems</code> получают свои размеры от корневого элемента (<code>&lt;html&gt;</code>). Это значит, что каждый последующий уровень вложения не продолжает увеличиваться.</p>
+
+<p>Однако, если вы измените <code>font-size</code> (размер шрифта) <code>&lt;html&gt;</code> в CSS, вы увидите что все остальное изменится относительно ему — и <code>rem</code>- и <code>em</code>-размеры текста</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p>
+
+<h3 id="Проценты">Проценты</h3>
+
+<p>Во многих случаях проценты обрабатываются таким же образом, как и длина. С процентами фишка в том, что они всегда устанавливаются относительно некоторого другого значения. Например, если вы установите <code>font-size</code> элемента как проценты, то это будет процент от <code>font-size</code> родительского элемента. Если вы используете процент для значения <code>width </code>(ширина), то это будет процент от <code>width</code> родителя.</p>
+
+<p>В примере ниже два блока с размерами в процентах и два с размерами в пикселях имеющих одинаковые имена классов. Оба набора имеют ширину 200px и 40% соответственно.</p>
+
+<p>Различие в том, что второй набор блоков находится внутри обертки которая имеет ширину 400 пикселей. Второй блок шириной в 200px имеет ту же ширину что и первый, но второй 40 процентный блок теперь имеет 40% от 400px — намного уже чем первый.</p>
+
+<p><strong>Попробуйте изменить ширину обертки (.wrapper) или процентное значение чтобы увидеть, как это работает.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p>
+
+<p>В следующем примере размер шрифта установлен в процентах. Каждый <code>&lt;li&gt;</code> имеет <code>font-size</code> 80%, поэтому элементы вложенного списка становятся прогрессивно меньше так как они наследуют свои размеры от родителя.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p>
+
+<p>Обратите внимание, в то время как многие значения принимают как длину, так и проценты, существуют те, которые принимают только длину. Вы можете посмотреть какие значения допустимы на справочной странице свойств MDN. Если допустимые значения включают <code><a href="/en-US/docs/Web/CSS/length-percentage">&lt;length-percentage&gt;</a></code>, тогда вы можете использовать и длину, и проценты. Если же допустимые значения включают только <code>&lt;length&gt;</code>, то использование процентов невозможно.</p>
+
+<h3 id="Числа">Числа</h3>
+
+<p>Некоторые значения принимают числа без каких-либо единиц измерения. Примером свойства принимающего числа без единиц измерения может служить свойство <code>opacity</code>, которое контролирует мутность элемента (настолько он прозрачен). Это свойство принимает числа между <code>0</code> (полностью прозрачное) и <code>1</code> (полностью мутное).</p>
+
+<p><strong>В примере ниже, попробуйте изменить значение </strong><code><strong>opacity</strong></code><strong> на различные десятичные значения между </strong><code><strong>0</strong></code><strong> и </strong><code><strong>1</strong></code><strong> и посмотрите, как блок и его содержимое становится более и/или менее мутными.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Внимание</strong>: Когда вы используете числа в CSS в качестве значений, они не должны быть заключены в кавычки.</p>
+</div>
+
+<h2 id="Цвет">Цвет</h2>
+
+<p>Существует много способов определения цвета в CSS, некоторые из которых реализованы довольно-таки недавно по сравнению с другими. Одинаковые значения цвета могут использоваться везде в CSS, определяете ли вы при этом цвет текста, цвет фона или цвет чего-либо еще.</p>
+
+<p>Стандартная система цветов доступная в современных компьютерах — это 24-битная система, которая позволяет отображать около 16.7 миллионов отдельных цветов через комбинацию различных красных, зеленых и синих каналов с 256 различными значениями каждого канала (256 x 256 x 256 = 16,777,216). Давайте взглянем на некоторые способы, с помощью которых мы можем определять цвет в CSS.</p>
+
+<div class="blockIndicator note">
+<p><strong>Внимание</strong>: В этом руководстве мы рассмотрим общие методы определения цвета, которые имеют хорошую поддержку браузерами; существуют и другие методы, но они не имеют столь же хорошей поддержки и являются менее общими.</p>
+</div>
+
+<h3 id="Ключевые_слова_цвета">Ключевые слова цвета</h3>
+
+<p>Довольно часто в примерах как здесь, так и на других страницах в MDN вы будете видеть использование ключевых слов цвета, поскольку это простой и понятный способ определения цвета. Существует определенное количество этих ключевых слов и некоторые их них имеют довольно занимательные имена! Полный список вы можете посмотреть на странице значений <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> .</p>
+
+<p><strong>Попробуйте поиграть с разными значениями цвета на живом примере ниже, чтобы понять больше об идее как они работают.</strong></p>
+
+<h3 id="Шестнадцатеричные_RGB_значения"><span class="tlid-translation translation" lang="ru"><span title="">Шестнадцатеричные</span></span> RGB значения</h3>
+
+<p>Следующий тип значения цвета, с которым вы сталкиваетесь вероятнее всего — это шестнадцатеричные коды. Каждое hex-значение состоит из символа решетки (#) за которым следуют 6 шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (представляющая 15) — то есть <code>0123456789abcdef</code>. Каждая пара значений представляет один из каналов — красного, зеленого или синего цветов — и позволяет нам определять любой из 256 доступных значений для каждого (16 x 16 = 256).</p>
+
+<p>Эти значения являются немного более сложными и менее простыми для понимания, но они намного более универсальны чем ключевые слова — вы можете использовать hex-значения чтобы отобразить любой цвет, который вы хотите использовать в своей цветовой схеме.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p>
+
+<p><strong>И снова, попробуйте изменить значения, чтобы посмотреть, как варьируют цвета.</strong></p>
+
+<h3 id="RGB_и_RGBA_зачения">RGB и RGBA зачения</h3>
+
+<p>Третья схема, о которой мы здесь поговорим это RGB. Значения RGB это функция — <code>rgb()</code> — которой дается три параметра представляющих каналы красного, зеленого и синего значений цветов, во многом так же, как hex-значения. Отличие с RGB является то, что каждый канал представлен не двумя hex-цифрами, а десятичным числом между 0 и 255 — что отчасти проще в понимании.</p>
+
+<p>Давайте перепишем наш последний пример используя RGB цвета:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p>
+
+<p>А также вы можете использовать цвета RGBA — что работает в точности, как и цвета RGB и то есть вы можете использовать любое значение RGB, однако существует четвертое значение, которое представляет альфа канал цвета, которое контролирует мутность. Если вы установите это значение на <code>0</code>, то это сделает цвет полностью прозрачным, тогда как <code>1</code> сделает его полностью мутным. Значения между дают вам разные уровни прозрачности.</p>
+
+<div class="blockIndicator note">
+<p><strong>Внимание</strong>: Настройка альфа канала в цвете имеет одно ключевое различие в использовании свойства {{cssxref("opacity")}} которое мы рассматривали ранее. когда вы используете мутность вы делаете элемент и все внутри него мутным, тогда как при использовании цвета RGBA вы делаете мутным только тот цвет который вы специфицируете.</p>
+</div>
+
+<p>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.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p>
+
+<p><strong>In this example, try changing the alpha channel values to see how it affects the color output. </strong></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: At some point modern browsers were updated so that <code>rgba()</code> and <code>rgb()</code>, and <code>hsl()</code> and <code>hsla()</code> (see below), became pure aliases of each other and started to behave exactly the same. So for example both <code>rgba()</code> and <code>rgb()</code> accept colors with and without alpha channel values. Try changing the above example's <code>rgba()</code> functions to <code>rgb()</code> 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.</p>
+</div>
+
+<h3 id="HSL_and_HSLA_values">HSL and HSLA values</h3>
+
+<p>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 <code>hsl()</code> function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:</p>
+
+<ul>
+ <li><strong>Hue</strong>: The base shade of the color. This takes a value between 0 and 360, representing the angles round a color wheel.</li>
+ <li><strong>Saturation</strong>: 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</li>
+ <li><strong>Lightness</strong>: 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)</li>
+</ul>
+
+<p>We can update the RGB example to use HSL colors like this:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p>
+
+<p>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.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p>
+
+<p>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!</p>
+
+<h2 id="Images">Images</h2>
+
+<p>The <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> data type is used wherever an image is a valid value. This can be an actual image file pointed to via a <code>url()</code> function, or a gradient.</p>
+
+<p>In the example below we have demonstrated an image and a gradient in use as a value for the CSS <code>background-image</code> property.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: there are some other possible values for <code>&lt;image&gt;</code>, however these are newer and currently have poor browser support. Check out the page on MDN for the <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> data type if you want to read about them.</p>
+</div>
+
+<h2 id="Position">Position</h2>
+
+<p>The <code><a href="/en-US/docs/Web/CSS/position_value">&lt;position&gt;</a></code> data type represents a set of 2D coordinates, used to position an item such as a background image (via <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code>). It can take keywords such as <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, and <code>center</code> 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.</p>
+
+<p>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 <code>center</code>.</p>
+
+<p>In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p>
+
+<p><strong>Play around with these values to see how you can push the image around.</strong></p>
+
+<h2 id="Strings_and_identifiers">Strings and identifiers</h2>
+
+<p>Throughout the examples above, we've seen places where keywords are used as a value (for example <code>&lt;color&gt;</code> keywords like <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, and <code>goldenrod</code>). These keywords are more accurately described as <em>identifiers</em>, a special value that CSS understands. As such they are not quoted — they are not treated as strings.</p>
+
+<p>There are places where you use strings in CSS, for example <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">when specifying generated content</a>. 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.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p>
+
+<h2 id="Functions">Functions</h2>
+
+<p>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 — <code>rgb()</code>, <code>hsl()</code>, etc. The value used to return an image from a file — <code>url()</code> — is also a function.</p>
+
+<p>A value that behaves more like something you might find in a traditional programming language is the <code>calc()</code> 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.</p>
+
+<p>For example, below we are using <code>calc()</code> to make the box <code>20% + 100px</code> wide. The 20% is calculated from the width of the parent container <code>.wrapper</code> 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 <code>calc()</code> to tell the browser to do it for us.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>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 <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS Values and units</a> reference page; you will encounter many of these in use as you work through these lessons.</p>
+
+<p>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.</p>
+
+<p>For example, understanding that <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/каскад_задачи/index.html b/files/ru/learn/css/building_blocks/каскад_задачи/index.html
new file mode 100644
index 0000000000..b6524f9ed3
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/каскад_задачи/index.html
@@ -0,0 +1,51 @@
+---
+title: 'Проверьте ваши навыки: Каскад'
+slug: Learn/CSS/Building_blocks/Каскад_задачи
+tags:
+  - CSS
+  - Начинающий
+translation_of: Learn/CSS/Building_blocks/Cascade_tasks
+---
+<div>{{LearnSidebar}}</div>
+
+<div></div>
+
+<p>Цель этого задания — помочь вам проверить ваше понимание некоторых значений и элементов, которые мы рассмотрели в уроке <a href="/ru-RU/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как  <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>, которые можно использовать для работы над заданием, предварительно загрузив в них код.<br>
+ <br>
+ Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел {{anch("Оценка или дальнейшая помощь")}} внизу этой страницы.</p>
+</div>
+
+<h2 id="Задание_1">Задание 1</h2>
+
+<p>В этом задании вам надо использовать одно из специальных значений, рассмотренных нами в разделе <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#%D0%9A%D0%BE%D0%BD%D1%82%D1%80%D0%BE%D0%BB%D1%8C_%D0%BD%D0%B0%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F">Контроль наследования</a>,  чтобы написать в новом правиле объявление, которое восстановит белый цвет фона без использования фактического значения цвета.</p>
+
+<p><img alt="Barely visible yellow links on a white background." src="https://mdn.mozillademos.org/files/17146/mdn-cascade.png" style="height: 234px; width: 1244px;"></p>
+
+<p>Посмотрите, сможете ли вы повторить эту картинку в примере ниже.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascade.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p>Для получения оценки или для дальнейшей работы <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/cascade/cascade-download.html">загрузите исходный код для этого задания</a> в ваш собственный редактор или в онлайн-редактор.</p>
+</div>
+
+<h2 id="Оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</h2>
+
+<p>Вы можете упражняться на этих примерах в интерактивных редакторах, упомянутых выше.</p>
+
+<p>Если вы хотите, чтобы вашу работу оценили, или вы зашли в тупик и хотите попросить о помощи:</p>
+
+<ol>
+ <li>Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>. Вы можете сами написать код или использвать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.</li>
+ <li>Напишите сообщение с просьбой оценить и/или помочь на форуме в категории "Обучение": <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваше сообщение должно включать:
+  <ul>
+   <li>Описательный заголовок, например, "Необходима оценка для теста 1 Каскад" ("Assessment wanted for Cascade skill test 1").</li>
+   <li>Подробности того, что вы уже попытались сделать, и чего бы вы хотели от нас, т.е. или вы в тупике и нуждаетесь в помощи, или хотите оценки.</li>
+   <li>Ссылка на пример, который вы просите оценить или который вызвал затруднения, в онлайн-редакторе с возможностью совместного редактирования (как указано в шаге 1 выше). Это принятая<span class="Translate-ValuesContent"> практика</span> погружения в вопрос — очень трудно помочь кому-либо решить проблему кодирования, если вы не видите его код.</li>
+   <li>Ссылка на страницу с заданием, чтобы мы могли найти вопрос, на который вы затрудняетесь ответить.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/селекторы/attribute_selectors/index.html b/files/ru/learn/css/building_blocks/селекторы/attribute_selectors/index.html
new file mode 100644
index 0000000000..9a6a2c4c07
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/селекторы/attribute_selectors/index.html
@@ -0,0 +1,160 @@
+---
+title: Селекторы атрибута
+slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors
+tags:
+  - CSS
+  - Атрибут
+  - Начинающий
+  - Обучение
+  - Селекторы
+translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе.</span></span> <span class="tlid-translation translation" lang="ru"><span title="">В CSS вы можете использовать селекторы атрибута</span></span> <span class="tlid-translation translation" lang="ru"><span title="">для стилизации элементов с определенными атрибутами</span></span>. <span class="tlid-translation translation" lang="ru"><span title="">Этот урок покажет вам, как использовать эти очень полезные селекторы.</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые условия:</th>
+   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового ПО</a>, базовые знания о <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, основы HTML (изучите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и понимание работы CSS (изучите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Узнать, что такое селекторы атрибута и как их использовать.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Селекторы_наличия_и_значения"><span class="tlid-translation translation" lang="ru"><span title="">Селекторы наличия и значения</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например,</span></span> <code>href</code>) <span class="tlid-translation translation" lang="ru"><span title="">или на всевозможных разного рода сочетаниях со значением атрибута</span></span>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Селектор</th>
+   <th scope="col">Пример</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[<em>attr</em>]</code></td>
+   <td><code>a[title]</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает элементы с атрибутом <em>attr</em> (имя которого </span></span> — <span class="tlid-translation translation" lang="ru"><span title=""> это значение в квадратных скобках).</span></span></td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>=<em>value</em>]</code></td>
+   <td><code>a[href="https://example.com"]</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает элементы с атрибутом <em>attr</em>, значение которого в точности равно <em>value</em> </span></span> — <span class="tlid-translation translation" lang="ru"><span title="">строке внутри кавычек.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>~=<em>value</em>]</code></td>
+   <td><code>p[class~="special"]</code></td>
+   <td>
+    <p><span class="tlid-translation translation" lang="ru"><span title="">Выбирает</span></span> элементы с атрибутом <em>attr,</em> значение которого в точности равно <em>value</em> или содержит <em>value</em> в своём (разделённом пробелами) списке значений.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>|=<em>value</em>]</code></td>
+   <td><code>div[lang|="zh"]</code></td>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Выбирает</span></span> элементы с атрибутом <em>attr</em>, значение которого в точности равно <em>value </em>или начинается с <em>value</em>, за которым сразу следует дефис.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В приведённом ниже примере вы можете увидеть использование этих селекторов.</span></span></p>
+
+<ul>
+ <li>Используя <code>li[class],</code> мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.</li>
+ <li><code>li[class="a"]</code> выбирает селектор с классом <code>a</code>, но не селектор с классом <code>a</code> в сочетании с другим, отделённым запятой, классом как частью зачения. Он выбирает второй пункт списка.</li>
+ <li><code>li[class~="a"]</code> выберет класс <code>a</code>, а также значение, которое содержит класс <code>a</code> как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p>
+
+<h2 id="Селекторы_вхождения_подстроки"><span class="tlid-translation translation" lang="ru"><span title="">Селекторы вхождения подстроки</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута</span></span>. Например, если у вас есть классы <code>box-warning</code> и <code>box-error</code> и вы хотите выбрать всё, что начинается со стороки "box-", вы можете использовать <code>[class^="box-"]</code>, чтобы выбрать оба класса (или <code>[class|="box"]</code> как описано в предыдущем разделе).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Селектор</th>
+   <th scope="col">Пример</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[<em>attr</em>^=<em>value</em>]</code></td>
+   <td><code>li[class^="box-"]</code></td>
+   <td>Выбирает элементы с атрибутом <em>attr</em> (<span class="tlid-translation translation" lang="ru"><span title="">его имя </span></span> — <span class="tlid-translation translation" lang="ru"><span title=""> это значение в квадратных скобках</span></span>), значение которого начинается с <em>value</em>.</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>$=<em>value</em>]</code></td>
+   <td><code>li[class$="-box"]</code></td>
+   <td>Выбирает элементы с атрибутом <em>attr</em>, значение которого заканчивается на <em>value</em>.</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>*=<em> </em>]</code></td>
+   <td><code>li[class*="box"]</code></td>
+   <td>Выбирает элементы с атрибутом <em>attr</em>, значение которого содержит <em>value</em>, независимо от его положения внутри строки.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Отступление: возможно, будет полезным заметить, что <code>^</code> и <code>$</code> давно используются как <em>якоря </em>в так называемых <em>регулярных выражениях</em> и обозначают <em>начинается с </em>и <em>заканчивается на</em>.)</p>
+
+<p>Следующий пример показывает, как используются эти селекторы:</p>
+
+<ul>
+ <li><code>li[class^="a"]</code> выбирает все значения атрибута, которые начинаются с <code>a</code>, что соответствует первым двум элементам списка.</li>
+ <li><code>li[class$="a"]</code> выбирает все значения атрибута, которые заканчиваются на <code>a</code>, что соответствует первому и третьему элементу списка.</li>
+ <li><code>li[class*="a"]</code> выбирает все значения атрибута, где появляется <code>a</code>, независимо от положения в строке, что соответствует всем элементам нашего списка.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p>
+
+<h2 id="Чувствительность_к_регистру">Чувствительность к регистру</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы хотите выбрать значения атрибута без учета регистра</span></span><span class="tlid-translation translation" lang="ru"><span title="">, вы можете использовать значение</span></span> <code>i</code> перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учета регистра. <span class="tlid-translation translation" lang="ru"><span title="">Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа</span></span> — <span class="tlid-translation translation" lang="ru"><span title="">в случае HTML такая чувствительность присутствует</span></span>.</p>
+
+<p>В примере ниже первый селектор выберет значение, начинающееся с <code>a</code> — <span class="tlid-translation translation" lang="ru"><span title="">это соответствует только первому элементу списка</span></span><span class="tlid-translation translation" lang="ru"><span title="">, потому что два других элемента списка начинаются с заглавной буквы A</span></span>. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Существует также более новое значение <code>s</code>, <span class="tlid-translation translation" lang="ru"><span title="">которое вызывает сопоставление с учетом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.</span></span></p>
+</div>
+
+<h2 id="Следующие_шаги">Следующие шаги</h2>
+
+<p>Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">псевдоклассах и псевдоэлементах</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a>
+  <ul>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a></li>
+  </ul>
+ </li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки (The box model)</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/селекторы/combinators/index.html b/files/ru/learn/css/building_blocks/селекторы/combinators/index.html
new file mode 100644
index 0000000000..7a076e05a8
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/селекторы/combinators/index.html
@@ -0,0 +1,113 @@
+---
+title: Комбинаторы
+slug: Learn/CSS/Building_blocks/Селекторы/Combinators
+tags:
+  - CSS
+  - Селекторы
+  - комбинаторы
+translation_of: Learn/CSS/Building_blocks/Selectors/Combinators
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+
+<p>Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые условия:</th>
+   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">установленное базовое программное обеспечение</a>, базовые знания о <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, основы HTML (изучите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и понимание работы CSS (изучите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Комбинатор_потомка">Комбинатор потомка</h2>
+
+<p><strong>Селектор потомка</strong> — обычно представляется символом пробела (<code> </code>) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются <dfn>селекторами потомка.</dfn></p>
+
+<pre class="brush: css notranslate">body article p</pre>
+
+<p>В приведенном ниже примере выбирается только тот элемент &lt;p&gt;, который находится внутри элемента с классом<code>.box</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p>
+
+<h2 id="Дочерний_комбинатор">Дочерний комбинатор</h2>
+
+<p><strong>Дочерний комбинатор</strong> (<code>&gt;</code>) помещается между двумя селекорами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <code>&lt;p&gt;</code>, которые являются дочерними элементами <code>&lt;article&gt;</code>, селетор пишется так:</p>
+
+<pre class="brush: css notranslate">article &gt; p</pre>
+
+<p>Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <code>&lt;li&gt;</code>, которые являются прямыми потомками <code>&lt;ul&gt;</code>, и присвоить им верхнюю границу красного цвета.</p>
+
+<p>Если вы уберёте символ <code>&gt;</code>, указывающий на то, что это селектор с дочерним комбинатором, селетор превратится в селектор всех потомков (комбинатор - пробел) и все элементы <code>&lt;li&gt;</code> получат верхнюю границу красного цвета.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p>
+
+<h2 id="Соседний_родственный_комбинатор">Соседний родственный комбинатор</h2>
+
+<p>Соседний родственный селектор (<code>+</code>) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы <code>&lt;img&gt;</code> , которые идут сразу после элементов <code>&lt;p&gt;</code> :</p>
+
+<pre class="brush: css notranslate">p + img</pre>
+
+<p>Распространенный вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <code>&lt;h1&gt;</code>, и стилизуем его.</p>
+
+<p>Если вы вставите какой-то другой элемент, например <code>&lt;h2&gt;</code> между <code>&lt;h1&gt;</code> и <code>&lt;p&gt;</code>, вы обнаружите, что абзац больше не соответствует селектору и поэтому не получает цвет фона и переднего плана, применяемый, когда элемент является соседним.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p>
+
+<h2 id="Общий_родственный_комбинатор">Общий родственный комбинатор</h2>
+
+<p>Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (<code>~</code>). Чтобы выбрать все элементы <code>&lt;img&gt;</code>, которые находятся в <em>любом</em> месте после элементов <code>&lt;p&gt;</code>, надо указать так:</p>
+
+<pre class="brush: css notranslate">p ~ img</pre>
+
+<p>В приведенном ниже примере мы выбираем все элементы <code>&lt;p&gt;</code>, которые идут после <code>&lt;h1&gt;</code>, и хотя в документе есть также <code>&lt;div&gt;</code>, тем не менее <code>&lt;p&gt;</code>, который идет после него, будет выбран.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p>
+
+<h2 id="Использование_комбинаторов">Использование комбинаторов</h2>
+
+<p>Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками <code>&lt;ul&gt;</code>, можно использовать следующую комбинацию:</p>
+
+<pre class="brush: css notranslate">ul &gt; li[class="a"]  {  }</pre>
+
+<p>Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.</p>
+
+<p>Часто бывает лучше создать простой класс и применить его к рассматриваемому элементу. Тем не менее, ваши знания о комбинаторах будут очень полезны, если вам нужно добраться до чего-то в вашем документе и вы не можете получить доступ к HTML, возможно, из-за того, что он генерируется CMS.</p>
+
+<h2 id="Проверьте_ваши_навыки!">Проверьте ваши навыки!</h2>
+
+<p>Мы охватили много тем в этой статье. А вы можете вспомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B_%D0%97%D0%B0%D0%B4%D0%B0%D1%87%D0%B8">Проверьте ваши навыки: Селекторы</a>.</p>
+
+<h2 id="Двигаемся_дальше">Двигаемся дальше</h2>
+
+<p>Это последний раздел в наших уроках по селекторам. Далее мы перейдем к другой важной части CSS — <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">CSS модель коробки</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a>
+  <ul>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a></li>
+  </ul>
+ </li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/селекторы/index.html b/files/ru/learn/css/building_blocks/селекторы/index.html
new file mode 100644
index 0000000000..3819af4207
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/селекторы/index.html
@@ -0,0 +1,235 @@
+---
+title: Селекторы CSS
+slug: Learn/CSS/Building_blocks/Селекторы
+tags:
+  - Attribute
+  - Beginner
+  - CSS
+  - Learn
+  - Pseudo-class
+  - Pseudo-element
+  - id
+  - Обучение
+  - Псевдоэлемент
+  - псевдокласс
+  - селектор
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p class="summary">В {{Glossary("CSS")}}-селекторы используются для стилизации {{glossary("HTML")}} элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>Базовая компьютерная грамотность, <a href="/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения">основное программное обеспечение</a>, понимание <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, базовые знания HTML (смотрите <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>), и представление о том, как работает CSS (смотрите <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Узнать, как работают CSS-селекторы.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Что_такое_селекторы">Что такое селекторы?</h2>
+
+<p>Вы уже встерчались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.</p>
+
+<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
+
+<p>Ранее Вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент <code>h1</code> или класс <code>.special</code>.</p>
+
+<p>В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые Вы встретите, определены в <a href="https://www.w3.org/TR/selectors-3/">Спецификации селекторов 3 уровня</a>, где Вы сможете найти всю информацию о поддержке селекторов в браузерах.</p>
+
+<h2 id="Несколько_селекторов">Несколько селекторов</h2>
+
+<p>Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в <em>лист селекторов</em>: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка <code>h1</code> и класса <code>.special</code>; я могу написать их так:</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+} </code></pre>
+
+<p>А могу написать короче — просто отделив селекторы запятыми:</p>
+
+<pre class="brush: css notranslate"><code>h1, .special {
+  color: blue;
+} </code></pre>
+
+<p>Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:</p>
+
+<pre class="brush: css notranslate"><code>h1,
+.special {
+  color: blue;
+} </code></pre>
+
+<p>В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>
+
+<p>При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.</p>
+
+<p>В примере ниже правило для селектора класса не будет работать, в то время как <code>h1</code> будет стилизован.</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+} </code></pre>
+
+<p>Но если мы объединим селекторы, правило не применится ни к <code>h1</code>, ни к классу: оно считается недействительным.</p>
+
+<pre class="brush: css notranslate"><code>h1, ..special {
+  color: blue;
+} </code></pre>
+
+<h2 id="Типы_селекторов">Типы селекторов</h2>
+
+<p>Понимание того, какой именно селектор вам нужен, очень помогает подобрать подходящий элемент. Сейчас мы разберём разные виды селекторов.</p>
+
+<h3 id="Селекторы_тегов_классов_и_идентификаторов">Селекторы тегов, классов и идентификаторов</h3>
+
+<p>К этой группе относятся селекторы HTML-элементов, таких как <code>&lt;h1&gt;</code>.</p>
+
+<pre class="brush: css notranslate">h1 { }</pre>
+
+<p>К группе относятся и селекторы классов:</p>
+
+<pre class="brush: css notranslate">.box { }</pre>
+
+<p>или селекторы идентификаторов (ID):</p>
+
+<pre class="brush: css notranslate">#unique { }</pre>
+
+<h3 id="Селекторы_атрибутов">Селекторы атрибутов</h3>
+
+<p>Эта группа селекторов позволяет выбирать селекторы, основываясь на <em>наличии</em> у них конкретного атрибута элемента:</p>
+
+<pre class="brush: css notranslate">a[title] { }</pre>
+
+<p>или основываясь на <em>значении</em> атрибута:</p>
+
+<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre>
+
+<h3 id="Псевдоклассы_псевдоэлементы">Псевдоклассы, псевдоэлементы</h3>
+
+<p>К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс <code>:hover</code>, например, применяет правило, только если на элемент наведён курсор мыши</p>
+
+<pre class="brush: css notranslate">a:hover { }</pre>
+
+<p>К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, <code>::first-line</code> всегда выбирает первую строку внутри элемента (абзаца <code>&lt;p&gt;</code> в нашем случае), действуя, как если бы тег <code>&lt;span&gt;</code> оборачивал первую строку, а затем был стилизован.</p>
+
+<pre class="brush: css notranslate">p::first-line { }</pre>
+
+<h3 id="Комбинаторы">Комбинаторы</h3>
+
+<p>И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <code>&lt;article&gt;</code> с помощью комбинатора дочерних элементов (<code>&gt;</code>):</p>
+
+<pre class="brush: css notranslate">article &gt; p { }</pre>
+
+<h2 id="Продолжение">Продолжение</h2>
+
+<p>Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или Вы можете двинуться дальше: нас ждут <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors">селекторы тегов, классов и идентификаторов</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Справка_о_селекторах">Справка о селекторах</h2>
+
+<p>В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Селектор</th>
+   <th scope="col">Пример</th>
+   <th scope="col">Руководство</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/ru/docs/Web/CSS/Type_selectors">Селектор по типу</a></td>
+   <td><code>h1 {  }</code></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Селекторы_по_типу">Селектор по типу</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/CSS/Universal_selectors">Универсальный селектор</a></td>
+   <td><code>* {  }</code></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Универсальный_селектор">Универсальный селектор</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/CSS/Class_selectors">Селектор класса</a></td>
+   <td><code>.box {  }</code></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Селекторы_классов">Селекторы классов</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/CSS/ID_selectors">Селектор ID</a></td>
+   <td><code>#unique { }</code></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors#Селекторы_по_ID">Селекторы по ID</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/CSS/Attribute_selectors">Селектор атрибутов </a></td>
+   <td><code>a[title] {  }</code></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Attribute_selectors">Селекторы атрибутов </a></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/CSS/Псевдо-классы">Селектор псевдоклассов</a></td>
+   <td><code>p:first-child { }</code></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements#Что_такое_псевдокласс">Псевдоклассы</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/CSS/Pseudo-elements">Селектор псевдоэлементов</a></td>
+   <td><code>p::first-line { }</code></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements#Что_такое_псевдоэлемент">Псевдоэлементы</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/CSS/Descendant_combinator">Селектор потомков</a></td>
+   <td><code>article p</code></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Селектор_потомков">Селектор потомков</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/CSS/Child_combinator">Селектор дочерних элементов</a></td>
+   <td><code>article &gt; p</code></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Комбинатор">Селектор дочерних элементов</a></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/CSS/Adjacent_sibling_combinator">Смежные селекторы</a></td>
+   <td><code>h1 + p</code></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Смежные_селекторы">Смежные селекторы </a></td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/CSS/General_sibling_combinator">Селектор братских элементов</a></td>
+   <td><code>h1 ~ p</code></td>
+   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators#Братские_элементы">Селектор братских элементов</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">CSS-селекторы </a>
+  <ul>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors">Селекторы по типу, классу и идентификатору</a></li>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Attribute_selectors">Селекторы атрибутов </a></li>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements">Псевдоклассы, псевдоэлементы </a></li>
+   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators">Комбинации селекторов </a></li>
+  </ul>
+ </li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блоки в CSS </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Изменение направления текста </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Перекрытие содержимого</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения свойств CSS </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Изображения, формы и прочие медиа-элементы </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS </a></li>
+ <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация CSS-кода</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/селекторы/pseudo-classes_and_pseudo-elements/index.html b/files/ru/learn/css/building_blocks/селекторы/pseudo-classes_and_pseudo-elements/index.html
new file mode 100644
index 0000000000..4fe67b8adb
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/селекторы/pseudo-classes_and_pseudo-elements/index.html
@@ -0,0 +1,415 @@
+---
+title: 'Псевдоклассы, псевдоэлементы'
+slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements
+tags:
+  - CSS
+  - Начинающий
+  - Обучение
+  - Псевдо
+  - Псевдоэлемент
+  - Селекторы
+  - псевдокласс
+translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>
+
+<p>Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые условия:</th>
+   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового ПО</a>, базовые знания о <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, основы HTML (изучите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и понимание работы CSS (изучите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Узнать о селекторах псевдокласса и псевдоэлемента.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Что_такое_псевдокласс">Что такое псевдокласс?</h2>
+
+<p>Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии, например, они являются первым элементом своего типа, или на них наведён указатель мыши. Они обычно действуют так, как если бы вы применили класс к какой-то части вашего документа, что часто помогает сократить избыточные классы в разметке и даёт более гибкий, удобный в поддержке код.</p>
+
+<p>Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:</p>
+
+<pre class="notranslate">:<em>pseudo-class-name</em></pre>
+
+<h3 id="Простой_пример_псевдокласса">Простой пример псевдокласса</h3>
+
+<p>Давайте рассмотрим простой пример. Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p>
+
+<p>Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса {{cssxref(":first-child")}} — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS.)</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p>
+
+<p>Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определенном состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:</p>
+
+<ul>
+ <li><code><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/:last-child">:last-child</a></code></li>
+ <li><code><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/:only-child">:only-child</a></code></li>
+ <li><code><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/:invalid">:invalid</a></code></li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong> : Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать <code>:first-child</code> и правило было бы применено к <em>любому</em> элементу, оказавшемуся первым дочерним для <code>&lt;article&gt;</code>, не только к первому дочернему абзацу — <code>:first-child</code> равнозначно <code>*:first-child</code>. Однако обычно вы хотите б<em>о</em>льшего контроля, поэтому вам нужен более специфичный селектор.</p>
+</div>
+
+<h3 id="Псевдоклассы_пользовательского_действия">Псевдоклассы пользовательского действия</h3>
+
+<p>Некоторые псевдоклассы применяются только тогда, когда пользователь некоторым образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как если бы класс был добавлен к элементу в момент взаимодействия с ним пользователя. Примеры даны для:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code> — упоминался выше; он применяется только в том случае, если пользователь наводит указатель мыши на элемент, обычно на ссылку.</li>
+ <li><code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> — применяется только в том случае, если пользователь фокусируется на элементе, используя управление с клавиатуры.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p>
+
+<h2 id="Что_такое_псевдоэлемент">Что такое псевдоэлемент?</h2>
+
+<p>Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия <code>::</code>.</p>
+
+<pre class="notranslate"><em>::pseudo-element-name</em></pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости.</p>
+</div>
+
+<p>Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть ее в <code>&lt;span&gt;</code> и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.</p>
+
+<p>Селектор псевдоэлемента <code>::first-line</code> сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p>
+
+<p>Он действует так, как если бы <code>&lt;span&gt;</code> волшебным образом был обёрнут вокруг этой первой отформатированной строки и обновлялся бы каждый раз при изменении длины строки.</p>
+
+<p>Вы можете видеть, что селектор выбирает первую строку обоих абзацев.</p>
+
+<h2 id="Объединение_псевдоклассов_и_псевдоэлементов">Объединение псевдоклассов и псевдоэлементов</h2>
+
+<p>Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы <code>:first-child</code> и <code>::first-line</code>. Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента <code>&lt;p&gt;,</code> который находится внутри элемента <code>&lt;article&gt;</code>.</p>
+
+<pre class="brush: css notranslate"><code>article p:first-child::first-line {
+  font-size: 120%;
+  font-weight: bold;
+}</code></pre>
+
+<h2 id="Генерация_контента_с_помощью_before_и_after">Генерация контента с помощью ::before и ::after</h2>
+
+<p>Существует пара специальных псевдоэлементов, которые используются вместе со свойством <code><a href="/en-US/docs/Web/CSS/content">content</a></code> для вставки содержимого в документ с помощью CSS.</p>
+
+<p>Вы можете использовать их для вставки строки текста, как в приведенном ниже живом примере. Попробуйте изменить текстовое значение свойства {{cssxref("content")}} и вы увидите, как изменится результат. Можете также изменить псевдоэлемент <code>::before</code> на <code>::after</code> и увидите, что текст вставлен в конце элемента, а не в начале.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p>
+
+<p>Однако вставка строк текста из CSS в реальности происходит не слишком часто, поскольку этот текст недоступен для некоторых <span class="extended-text__full">экранных диктор</span>ов и его будет трудно найти и отредактировать в будущем.</p>
+
+<p>Более корректным использованием этих псевдоэлементов является вставка значка, например маленькой стрелки, добавленной в приведенном ниже примере, которая является визуальным указателем, не предназначенным для зачитывания с помощью <span class="extended-text__full">экранного диктор</span>а:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p>
+
+<p>Эти псевдоэлементы также часто используются для вставки пустой строки, которая затем может быть стилизована так же, как и любой элемент на странице.</p>
+
+<p>В следующем примере мы добавили пустую строку, используя псевдоэлемент <code>::before.</code> Мы установили <code>display: block</code>, чтобы стилизовать его по ширине и высоте. Затем мы используем CSS, чтобы стилизовать его так же, как и любой другой элемент. Вы можете поиграть с CSS и изменить его внешний вид и поведение.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p>
+
+<p>Использование псевдоэлементов <code>::before</code> и <code>::after</code> вместе со свойством <code>content</code> в CSS называется "генерируемым контентом" в CSS, и вы часто будете видеть, как этот метод используется для различных задач. Отличным примером является сайт <a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>, который помогает вам генерировать стрелку с помощью CSS. Посмотрите на CSS, когда вы создадите свою стрелку, и вы увидите использование псевдо-элементов {{cssxref("::before")}} и {{cssxref("::after")}}. Всякий раз, когда вы будете видеть эти селекторы, смотрите на свойство {{cssxref("content")}}, чтобы увидеть, что добавляется в документ..</p>
+
+<h2 id="Справочный_раздел">Справочный раздел</h2>
+
+<p>Существует большое количество псевдоклассов и псевдоэлементов, и полезно иметь список, к которому можно обращаться. Ниже приведены таблицы, в которых они перечислены, со ссылками на их справочные страницы в MDN. Используйте эти таблицы как справочник, чтобы видеть массив доступных вам средств для нацеливания на элементы.</p>
+
+<h3 id="Псевдоклассы">Псевдоклассы</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Селектор</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ Cssxref(":active") }}</td>
+   <td>Подходит, когда пользователь активирует (например, щелкает мышью) элемент.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":any-link") }}</td>
+   <td>Соответствует как состоянию <code>:link,</code> так и состоянию<code>:visited</code> ссылки.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":blank") }}</td>
+   <td>Соответствует <a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Element/Input">элементу <code>&lt;input&gt;</code></a>, для которого значение ввода является пустым.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":checked") }}</td>
+   <td>Соответствует переключателю или флажку в выбранном состоянии.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":current") }}</td>
+   <td>Соответствует элементу или предку элемента, который в данный момент отображается.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":default") }}</td>
+   <td>Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (<em>обрабатывают нажатие клавиши enter</em>) в наборе сходных элементов.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":dir") }}</td>
+   <td>Выбирает элемент на основе его направленности (значение атрибута HTML <code><a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/dir">dir</a></code> или свойства CSS <code><a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/direction">direction</a></code> ).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":disabled") }}</td>
+   <td>Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":empty") }}</td>
+   <td>Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":enabled") }}</td>
+   <td>Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":first") }}</td>
+   <td>В <a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/Paged_Media">постраничном носителе</a> соответствует первой странице.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":first-child") }}</td>
+   <td>Соответствует элементу, который является первым среди других дочерних элементов одного предка.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":first-of-type") }}</td>
+   <td>Соответствует элементу, который является первым определенного типа среди других дочерних элементов одного предка.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":focus") }}</td>
+   <td>Соответствует элементу, имеющему фокус.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":focus-visible")}}</td>
+   <td>Соответствует элементу, имеющему фокус, при этом фокус должен быть виден пользователю.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":focus-within") }}</td>
+   <td>Соответствует элементу с фокусом, а также элементу с потомком, который имеет фокус.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":future") }}</td>
+   <td>Соответствует элементам после текущего элемента.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":hover") }}</td>
+   <td>Соответствует элементу, на который наведён курсор мыши.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":indeterminate") }}</td>
+   <td>Соответствует элементам пользовательского интерфейса, значение которых находится в неопределенном состоянии, обычно <a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Element/Input/checkbox">checkboxes</a>.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":in-range") }}</td>
+   <td>Соответствует элементу с диапазоном, когда его значение находится в пределах диапазона.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":invalid") }}</td>
+   <td>Соответствует элементу, например <code>&lt;input&gt;</code>, в недопустимом состоянии.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":lang") }}</td>
+   <td>Соответствует элементу, основанному на языке (значение атрибута HTML <a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/lang">lang</a>).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":last-child") }}</td>
+   <td>Соответствует элементу, который является последним среди других дочерних элементов одного предка.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":last-of-type") }}</td>
+   <td>Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":left") }}</td>
+   <td>В <a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/Paged_Media">постраничном носителе</a> соответствует левосторонним страницам.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":link")}}</td>
+   <td>Соответствует непосещавшимся ссылкам.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":local-link")}}</td>
+   <td>Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":is", ":is()")}}</td>
+   <td>Соответствует любому селектору из полученного списка селекторов.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":not") }}</td>
+   <td>Соответствует объектам, не входящим в список селекторов, переданный в качестве значения этому селектору.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-child") }}</td>
+   <td>Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечетные числа.)</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-of-type") }}</td>
+   <td>Соответствует элементам из списка дочерних элементов одного предка, имеющим определенный тип (например, элементы &lt;p&gt;) — дочерние элементы подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечетные числа.)</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-last-child") }}</td>
+   <td>Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечетные, считая с конца.)</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-last-of-type") }}</td>
+   <td>Соответствует элементам из списка дочерних элементов одного предка, имеющим определенный тип (например, элементы &lt;p&gt;), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечетные, считая с конца.)</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":only-child") }}</td>
+   <td>Соответствует элементу, являющемуся единственным дочерним для своего предка.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":only-of-type") }}</td>
+   <td>Соответствует элементу, который отличается по типу от всех других дочерних элементов общего предка.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":optional") }}</td>
+   <td>Соответствует необязательным элементам формы.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":out-of-range") }}</td>
+   <td>Соответствует элементу с диапазоном, когда его значение находится вне диапазона.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":past") }}</td>
+   <td>Соответствует элементам перед текущим элементом.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":placeholder-shown") }}</td>
+   <td>Соответствует элементу input, который показывает текст-заполнитель.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":playing") }}</td>
+   <td>Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “воспроизводится”.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":paused") }}</td>
+   <td>Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “приостановлен”.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":read-only") }}</td>
+   <td>Соответствует элементу, который не может быть изменён пользователем.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":read-write") }}</td>
+   <td>Соответствует элементу, который может быть изменён пользователем.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":required") }}</td>
+   <td>Соответствует обязательным элементам формы.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":right") }}</td>
+   <td>В <a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/Paged_Media">постраничном носителе</a> соответствует правосторонним страницам.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":root") }}</td>
+   <td>Соответствует элементу, который является корнем документа.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":scope") }}</td>
+   <td>Соответствует любому элементу, который является элементом области видимости.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":valid") }}</td>
+   <td>Соответствует элементу, такому как &lt;input&gt;, в допустимом состоянии.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":target") }}</td>
+   <td>Соответствует элементу, если он является целью текущего URL (т. е. если у него есть ID, соответствующий текущему <a href="https://en.wikipedia.org/wiki/Fragment_identifier">URL fragment</a>).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":visited") }}</td>
+   <td>Соответствует посещённым ссылкам.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Псевдоэлементы">Псевдоэлементы</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Селектор</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ Cssxref("::after") }}</td>
+   <td>Соответствует элементу, который допускает стилизацию и появляется после текущего содержимого порождающего элемента.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::before") }}</td>
+   <td>Соответствует элементу, который допускает стилизацию и появляется перед текущим содержимым порождающего элемента.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::first-letter") }}</td>
+   <td>Соответствует первой букве элемента.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::first-line") }}</td>
+   <td>Соответствует первой строке содержимого порождающего элемента.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::grammar-error") }}</td>
+   <td>
+    <p>Соответствует части документа, содержащей грамматическую ошибку, отмеченную браузером.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::marker") }}</td>
+   <td>Соответствует полю маркера пункта списка, которое обычно содержит жирную точку или число.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{ Cssxref("::selection") }}</p>
+   </td>
+   <td>Соответствует части документа, которая была выбрана.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::spelling-error") }}</td>
+   <td>
+    <p>Соответствует части документа, содержащей орфографическую ошибку, отмеченную браузером.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a>
+  <ul>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a></li>
+  </ul>
+ </li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/селекторы/type_class_and_id_selectors/index.html b/files/ru/learn/css/building_blocks/селекторы/type_class_and_id_selectors/index.html
new file mode 100644
index 0000000000..875899ab41
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/селекторы/type_class_and_id_selectors/index.html
@@ -0,0 +1,130 @@
+---
+title: 'Селекторы типа, класса и ID'
+slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors
+tags:
+  - CSS
+  - id
+  - Класс
+  - Начинающий
+  - Обучение
+  - Селекторы
+translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<p>В этом уроке мы рассмотрим некоторые из базисных селекторов, которые вы, вероятно, будете чаще всего использовать в вашей работе.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые условия:</th>
+   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового ПО</a>, базовые знания о <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, основы HTML (изучите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и понимание работы CSS (изучите <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Селекторы_типа">Селекторы типа</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title=""><strong>Селектор типа</strong> иногда называется <em>селектором имени тега</em> или <em>селектором элемента</em>, поскольку он выбирает тег/элемент HTML в вашем документе.</span></span> В примере ниже мы использовали селекторы span, em и strong.</p>
+
+<p><strong>Попробуйте добавить CSS-правило, чтобы выбрать элемент <code>&lt;h1&gt;</code> и изменить его цвет на синий.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p>
+
+<h2 id="Универсальный_селектор">Универсальный селектор</h2>
+
+<p>Универсальный селектор обозначается звездочкой (<code>*</code>). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера.</span></span> Так как <span class="tlid-translation translation" lang="ru"><span title="">универсальный селектор вызывает глобальные изменения, </span></span><span class="tlid-translation translation" lang="ru"><span title="">мы используем его в очень специфических ситуациях, таких как та, что описана ниже.</span></span></p>
+
+<h3 id="Использование_универсального_селектора_для_облегчения_чтения_ваших_селекторов"><span class="tlid-translation translation" lang="ru"><span title="">Использование универсального селектора для облегчения чтения ваших селекторов</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают.</span></span> Например, если мы хотим выбрать элементы-потомки элемента <code>&lt;article&gt;</code>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <code>&lt;article&gt;</code>, и сделать их шрифт жирным, мы могли бы использовать псевдо-класс {{cssxref(":first-child")}}, который мы будем изучать в уроке о <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">псевдо-классах и псевдо-элементах</a>, как селектор-потомок вместе с селектором элемента <code>&lt;article&gt;</code>: </p>
+
+<pre class="brush: css notranslate">article :first-child {
+  font-weight: bold;
+}</pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Однако этот селектор можно спутать с</span></span> <code>article:first-child</code>, <span class="tlid-translation translation" lang="ru"><span title="">который выберет любой элемент</span></span> <code>&lt;article&gt;</code><span class="tlid-translation translation" lang="ru"><span title="">, являющийся первым дочерним элементом другого элемента</span></span> .</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдо-класс</span></span> <code>:first-child</code> <span class="tlid-translation translation" lang="ru"><span title="">, чтобы было очевидно, что делает селектор.</span> <span title="">Он выбирает <em>любой</em> элемент, который является первым дочерним элементом элемента</span></span> <code>&lt;article&gt;</code> или <span class="tlid-translation translation" lang="ru"><span title="">первым дочерним элементом любого потомка</span></span> <span class="tlid-translation translation" lang="ru"><span title="">элемента</span></span> <code>&lt;article&gt;</code>:</p>
+
+<pre class="brush: css notranslate">article *:first-child {
+  font-weight: bold;
+} </pre>
+
+<p>Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.</p>
+
+<h2 id="Селекторы_класса">Селекторы класса</h2>
+
+<p>Селектор класса начинается с символа точки (<code>.</code>). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем <code>.highlight</code>, и применили его к нескольким местам в документе. <span class="tlid-translation translation" lang="ru"><span title="">Все элементы, к которым применён класс, подсвечиваются</span></span>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p>
+
+<h3 id="Нацеливание_классов_на_отдельные_элементы"><span class="tlid-translation translation" lang="ru"><span title="">Нацеливание классов на отдельные элементы</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс</span></span>. В следующем примере мы подсветим <code>&lt;span&gt;</code> с классом <code>highlight</code> иначе, чем заголовок <code>&lt;h1&gt;</code> с классом <code>highlight</code>. <span class="tlid-translation translation" lang="ru"><span title="">Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними</span></span>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.</span></span></p>
+
+<h3 id="Нацеливание_на_элемент_к_которому_применено_более_одного_класса"><span class="tlid-translation translation" lang="ru"><span title="">Нацеливание на элемент, к которому применено более одного класса</span></span></h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете применить несколько классов к элементу и нацелиться на них по отдельности, или выбрать элемент только если присутствуют все классы селектора.</span> <span title="">Это может быть полезно при создании компонентов, которые могут сочетаться на вашем сайте разными способами.</span></span></p>
+
+<p>В примере ниже у нас есть <code>&lt;div&gt;</code>, содержащий примечание. Серая граница применятеся когда блок имеет класс <code>notebox</code>. Если у блока есть также класс <code>warning</code> или <code>danger</code>, мы меняем {{cssxref("border-color")}}.</p>
+
+<p>Мы можем указать браузеру, что мы хотим подобрать только такой элемент, <span class="tlid-translation translation" lang="ru"><span title="">к которому применены два класса, сцепив их вместе без пробелов между ними. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Вы увидите, что к последнему </span></span><code>&lt;div&gt;</code> <span class="tlid-translation translation" lang="ru"><span title=""> не применён ни один стиль, так как он имеет только класс</span></span> <code>danger</code>; <span class="tlid-translation translation" lang="ru"><span title="">ему нужен ещё и класс </span></span> <code>notebox</code><span class="tlid-translation translation" lang="ru"><span title="">, чтобы получить какую-нибудь стилизацию.</span></span></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p>
+
+<h2 id="Селекторы_ID">Селекторы ID</h2>
+
+<p>Селектор ID начинается с <code>#</code>, а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один <code>id</code>. Можно выбрать элемент, которому присвоен  <code>id</code>, а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>Предупреждение: </strong>Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong> Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.</p>
+</div>
+
+<h2 id="В_следующей_статье">В следующей статье</h2>
+
+<p>Мы продолжим изучение селекторов и рассмотрим <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">селекторы атрибута</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a>
+  <ul>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
+   <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a></li>
+  </ul>
+ </li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки (The box model)</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
+</ol>
diff --git a/files/ru/learn/css/building_blocks/селекторы/селекторы_задачи/index.html b/files/ru/learn/css/building_blocks/селекторы/селекторы_задачи/index.html
new file mode 100644
index 0000000000..b8f36063c2
--- /dev/null
+++ b/files/ru/learn/css/building_blocks/селекторы/селекторы_задачи/index.html
@@ -0,0 +1,137 @@
+---
+title: 'Проверьте ваши навыки: Селекторы'
+slug: Learn/CSS/Building_blocks/Селекторы/Селекторы_Задачи
+tags:
+  - CSS
+  - Начинающий
+translation_of: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
+---
+<div>{{LearnSidebar}}</div>
+
+<div></div>
+
+<p>Цель этой задачи — помочь вам проверить ваше понимание селекторов в CSS.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как  <a class="external external-icon" href="https://codepen.io/" rel="noopener">CodePen</a>, <a class="external external-icon" href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> или <a class="external external-icon" href="https://glitch.com/" rel="noopener">Glitch</a>, которые можно использовать для работы над заданием, предварительно загрузив в них код.<br>
+ <br>
+ Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4_%D0%B7%D0%B0%D0%B4%D0%B0%D1%87%D0%B8#Оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</a> внизу этой страницы.</p>
+</div>
+
+<h2 id="Selectors_One">Selectors One</h2>
+
+<p>Without changing the HTML, use CSS to do the following things:</p>
+
+<ul>
+ <li>Make h1 headings blue.</li>
+ <li>Give h2 headings a blue background and white text.</li>
+ <li>Cause text wrapped in a span to have a font-size of 200%.</li>
+</ul>
+
+<p><img alt="Text with the CSS applied for the solution to task 1." src="https://mdn.mozillademos.org/files/17118/selectors1.jpg" style="height: 781px; width: 1026px;"></p>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/type-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Selectors_Two">Selectors Two</h2>
+
+<p>Without changing the HTML, make the following changes to the look of the content in this example:</p>
+
+<ul>
+ <li>Give the element with an id of <code>special</code> a yellow background.</li>
+ <li>Give the element with a class of <code>alert</code> a 1px grey border.</li>
+ <li>If the element with a class of <code>alert</code> also has a class of <code>stop</code>, make the background red.</li>
+ <li>If the element with a class of <code>alert</code> also has a class of <code>go</code>, make the background green.</li>
+</ul>
+
+<p><img alt="Text with the CSS applied for the solution to task 2." src="https://mdn.mozillademos.org/files/17119/selectors2.jpg" style="height: 891px; width: 1027px;"></p>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/class-id-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Selectors_Three">Selectors Three</h2>
+
+<p>In this example, try making the following changes without adding to the HTML.</p>
+
+<ul>
+ <li>Style links, making the link-state orange, visited links green, and remove the underline on hover.</li>
+ <li>Make the first element inside the container font-size: 150% and the first line of that element red.</li>
+ <li>Stripe every other row in the table by selecting these rows and giving them a background color of #333 and foreground of white.</li>
+</ul>
+
+<p><img alt="Text with the CSS applied for the solution to task 3." src="https://mdn.mozillademos.org/files/17120/selectors3.jpg" style="height: 926px; width: 1227px;"></p>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/pseudo-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Selectors_Four">Selectors Four</h2>
+
+<p>In this task try the following:</p>
+
+<ul>
+ <li>Make any paragraph that directly follows an h2 element red.</li>
+ <li>Remove the bullets and add a 1px grey bottom border only to list items that are a direct child of the ul with a class of list.</li>
+</ul>
+
+<p><img alt="Text with the CSS applied for the solution to task 4." src="https://mdn.mozillademos.org/files/17121/selectors4.jpg" style="height: 788px; width: 1222px;"></p>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/combinators-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Selectors_Five">Selectors Five</h2>
+
+<p>In this final task add CSS using attribute selectors to do the following:</p>
+
+<ul>
+ <li>Target the <code>&lt;a&gt;</code> element with a <code>title</code> attribute and make the border pink (<code>border-color: pink</code>).</li>
+ <li>Target the <code>&lt;a&gt;</code> element with an <code>href</code> attribute that contains the word <code>contact</code> somewhere in its value and make the border orange (<code>border-color: orange</code>).</li>
+ <li>Target the <code>&lt;a&gt;</code> element with an <code>href</code> value starting with <code>https</code> and give it a green border (<code>border-color: green</code>).</li>
+</ul>
+
+<p><img alt="Four links with different color borders." src="https://mdn.mozillademos.org/files/17147/selectors-attribute.png" style="height: 485px; width: 1264px;"></p>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/attribute-links-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Assessment_or_further_help">Assessment or further help</h2>
+
+<p>You can practice these examples in the Interactive Editors mentioned above.</p>
+
+<p>If you would like your work assessed, or are stuck and want to ask for help:</p>
+
+<ol>
+ <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li>
+ <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include:
+  <ul>
+   <li>A descriptive title such as "Assessment wanted for Selectors skill test 1".</li>
+   <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li>
+   <li>A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
+   <li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html
new file mode 100644
index 0000000000..fcb1840af7
--- /dev/null
+++ b/files/ru/learn/css/css_layout/flexbox/index.html
@@ -0,0 +1,314 @@
+---
+title: Flexbox
+slug: Learn/CSS/CSS_layout/Flexbox
+tags:
+  - CSS
+  - Обучение
+  - Стилизация
+translation_of: Learn/CSS/CSS_layout/Flexbox
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">Это новая технология, которая уже имеет достаточно широкую поддержку браузеров. Flexbox предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS. В этой статье объясняются все основы данной технологии.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые навыки:</th>
+   <td>HTML основы (изучите <a href="ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>), знание того, как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Узнать, как использовать систему адаптируемых блоков Flexbox для создания веб-макетов.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Почему_Flexbox">Почему Flexbox?</h2>
+
+<p>Долгое время единственными надёжными инструментами CSS верстки были такие способы как Float (обтекание) и позиционирование.</p>
+
+<p>С их помощью сложно или невозможно достичь следующих простых требований к макету:</p>
+
+<ul>
+ <li>Вертикального выравнивания блока внутри родителя.</li>
+ <li>Оформления всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно.</li>
+ <li>Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.</li>
+</ul>
+
+<p>Как вы увидите в последующих разделах, flexbox значительно облегчает работу с макетами. Погружаемся!</p>
+
+<h2 id="Разберём_простой_пример">Разберём простой пример</h2>
+
+<p>В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox. Чтобы начать, скачайте на компьютер стартовый файл — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> с нашего Github репозитория — загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">посмотреть его вживую</a>.</p>
+
+<p>Вы увидите элемент {{htmlelement("header")}} с заголовком верхнего уровня внутри, и элемент {{htmlelement("section")}} содержащий три элемента {{htmlelement("article")}}. Мы будем использовать их для создания стандартного трехколоночного макета.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<h2 id="Определяем_какие_элементы_разместить_в_виде_flex_блоков">Определяем, какие элементы разместить в виде flex блоков</h2>
+
+<p>Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков. Для этого мы устанавливаем специальное значение {{cssxref ("display")}} в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы {{htmlelement ("article")}}, поэтому мы устанавливаем это значение на {{htmlelement ("section")}} (который становится flex контейнером):</p>
+
+<pre class="brush: css notranslate">section {
+  display: flex;
+}</pre>
+
+<p>В результате у нас получится вот так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p>
+
+<p>Так, всего одно объявление делает всё, что нам нужно — здорово, правда? Мы получили 3-х колоночный макет с колонками равных размеров по ширине и высоте. Это связано с тем, что значения по умолчанию, заданные для flex элементов (дочерние элементы flex контейнера), настроены для решения основных задач. Подробнее об этом позже.</p>
+
+<p><strong>Примечание</strong>: Вы также можете установить значение {{cssxref("display")}} <code>inline-flex, </code>если хотите расставить inline элементы как flex блоки.</p>
+
+<h2 id="Внутри_flex_модели">Внутри flex модели</h2>
+
+<p>Когда элементы выложены как flex блоки, они располагаются вдоль двух осей:</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p>
+
+<ul>
+ <li><strong>Главная ось (main axis)</strong> проходит в том направлении, вдоль которого расположены Flex элементы (например, в строку слева направо или вдоль колонок вниз.) Начало и конец этой оси называются <strong>main start</strong> и <strong>main end</strong>.</li>
+ <li><strong>Поперечная ось (сross axis)</strong>  проходит перпендикулярно Flex элементам. Начало и конец этой оси называются <strong>cross start</strong> and <strong>cross end</strong>.</li>
+ <li>Родительский элемент, на который назначено свойство <code>display: flex ( </code>{{htmlelement("section")}} в нашем примере) называется <strong>flex container</strong>.</li>
+ <li>Элементы, размещённые в нём как Flex блоки называются <strong>flex items</strong> (в нашем примере это {{htmlelement("article")}} ).</li>
+</ul>
+
+<p>Запомните эти термины, они пригодятся вам в последующих разделах.</p>
+
+<h2 id="Столбцы_или_строки">Столбцы или строки?</h2>
+
+<p>В Flexbox есть свойство под названием {{cssxref("flex-direction")}}, которое определяет направление главной оси (в каком направлении располагаются flexbox-дочерние элементы) — по умолчанию ему присваивается значение <code>row</code>, т.е. располагать дочерние элементы в ряд слева направо (для большинства языков) или справа налево (для арабских языков).</p>
+
+<p>Попробуйте добавить следующую строчку в ваш файл:</p>
+
+<pre class="brush: css notranslate">flex-direction: column</pre>
+
+<p>Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете также распологать flex элементы в обратном направлении, используя значения <code>row-reverse</code> и <code>column-reverse</code>. Попробуйте их тоже!</p>
+</div>
+
+<h2 id="Перенос_строк">Перенос строк</h2>
+
+<p>Проблема может быть в том, что, если у вас фиксированная ширина или высота макета, ваши flexbox элементы переполнят контейнер и нарушат макет. Посмотрите на этот пример: <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> и <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">посмотрите его вживую</a> (сохраните его себе на компьютер, если хотите изучить этот пример):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+
+<p>Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера. Один из способов как это исправить - это добавить следующее свойство:</p>
+
+<pre class="brush: css notranslate">flex-wrap: wrap</pre>
+
+<p>Попробуйте, и вы увидите, что так макет стал выглядеть гораздо лучше:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+
+<p>Теперь у нас в макете несколько рядов— все дети-блоки, которые не помещаются, переносятся на следующую строку, чтобы не было переполнения. Свойство <code>flex: 200px</code>, установленное на статьях, означает, что каждый блок должен быть минимум 200 пикселей в ширину. Мы обсудим это свойство более подробно позже. Вы также можете заметить, что несколько дочерних блоков в последней строке стали более широкими, так что вся строка стала заполнена.</p>
+
+<p>Но мы можем пойти дальше. Прежде всего, попробуйте изменить значение свойства {{cssxref("flex-direction")}} на <code>row-reverse</code> — теперь у вас также макет в несколько строк, но он начинается из противоположного угла окна браузера и теперь выстраивается в обратном порядке.</p>
+
+<h2 id="flex-flow_сокращение">flex-flow сокращение</h2>
+
+<p>На этом этапе нужно заметить, что существует сокращение для свойств {{cssxref("flex-direction")}} и {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Например, вы можете заменить</p>
+
+<pre class="brush: css notranslate">flex-direction: row;
+flex-wrap: wrap;</pre>
+
+<p>на</p>
+
+<pre class="brush: css notranslate">flex-flow: row wrap;</pre>
+
+<h2 id="Гибкое_изменение_размеров_flex_элементов">Гибкое изменение размеров flex элементов</h2>
+
+<p>Теперь давайте вернёмся к нашему первому примеру и посмотрим, как мы можем контролировать, в каких пропорциях flex элементы будут занимать место. Включите свою копию файла <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, или скачайте <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">просмотр</a>).</p>
+
+<p>Прежде всего, добавим следующее правило в конец вашего CSS кода:</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1;
+}</pre>
+
+<p>Это безразмерное значение пропорции, которое указывает, сколько свободного пространства на главной оси (main axis) каждый flex элемент сможет занять. В этом случае, мы даём каждому элементу {{htmlelement("article")}} значение 1, а это значит, что они будут занимать равное количество свободного места в макете, которое осталось после установки свойств padding и margin.</p>
+
+<p>Теперь добавьте следующее правило в строку после предыдущего:</p>
+
+<pre class="brush: css notranslate">article:nth-of-type(3) {
+  flex: 2;
+}</pre>
+
+<p>Обновив страницу, вы увидите, что третий элемент {{htmlelement("article")}} занимает в два раза больше доступной ширины, чем два других — итого теперь доступно 4 единицы пропорции. Первые два flex элемента имеют по одной единице, поэтому берут 1/4 пространства каждый. А у третьего 2 единицы, так что он берёт 2/4 свободного места (или 1/2).</p>
+
+<p>Вы также можете указать минимальный размер внутри значения flex. Попробуйте изменить существующие правила, добавив размеры:</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}</pre>
+
+<p>Это просто означает, что каждому flex элементу сначала будет дано 200px от свободного места. Потом оставшееся место будет поделено в соответствии с частями пропорций. Обновите страницу, и вы увидите разницу, как пространство поделено теперь.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+
+<p>Настоящая ценность flexbox можно увидеть в его гибкости/отзывчивости — если изменить размер окна или добавить ещё элемент {{htmlelement("article")}}, макет будет и дальше выглядеть также хорошо.</p>
+
+<h2 id="flex_краткий_код_против_развёрнутого">flex: краткий код против развёрнутого</h2>
+
+<p>{{cssxref("flex")}} это сокращённое свойство, в которым можно задать до трёх разных свойств:</p>
+
+<ul>
+ <li>Значение пропорции, которое мы обсуждали выше. Оно может быть установлено отдельно с помощью свойства {{cssxref("flex-grow")}}.</li>
+ <li>Следующее значение пропорции — {{cssxref("flex-shrink")}} — вступает в роль, когда flex элементы переполняют контейнер. Оно указывает, сколько забирается от размера каждого flex элемента, чтобы он перестал переполнять контейнер. Это продвинутая функция flexbox, и в этом параграфе мы не будем её разбирать.</li>
+ <li>Значение минимального размера, как мы обсуждали ранее. Оно может быть установлено отдельно с помощью свойства {{cssxref("flex-basis")}}.</li>
+</ul>
+
+<p>Мы не советуем использовать развёрнутые свойства flex, если вам в действительности это не нужно (например, переопределить ранее установленное). Они приводят к написанию большого количества дополнительного кода и могут запутать кого угодно.</p>
+
+<h2 id="Горизонтальное_и_вертикальное_выравнивание">Горизонтальное и вертикальное выравнивание</h2>
+
+<p>Flexbox также имеет функции для выравнивания flex элементов вдоль основной (main) или поперечной (cross) осей. Рассмотрим их на новом примере — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">просмотр</a>) — который мы превратим в аккуратную, гибкую кнопочную панель инструментов. На данный момент вы видите горизонтальную панель меню, кнопки которой застряли в верхнем левом углу.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p>
+
+<p>Сначала сделайте себе копию этого примера.</p>
+
+<p>Теперь добавьте следующую строку в низ кода CSS:</p>
+
+<pre class="brush: css notranslate">div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>Обновите страницу, и вы увидите, что кнопки теперь хорошо центрированы, горизонтально и вертикально. Мы сделали это с помощью двух новых свойств.</p>
+
+<p>{{cssxref("align-items")}} контролирует, где на поперечной оси находятся flex элементы.</p>
+
+<ul>
+ <li>По умолчанию стоит значение <code>stretch</code>, которое растягивает все flex элементы, чтобы заполнить родителя вдоль поперечной (cross axis) оси. Если у родителя нет фиксированной ширины вдоль поперечной оси, все flex элементы примут длину самого длинного flex элемента. Вот почему наш первый пример по умолчанию получил столбцы с одинаковой высотой.</li>
+ <li>Значение <code>center</code> , которое мы использовали в коде вверху, заставляет элементы сохранять свои собственные размеры, но центрирует их вдоль поперечной оси. Вот почему кнопки текущего примера центрированы по вертикали.</li>
+ <li>Также есть значения <code>flex-start</code> и <code>flex-end</code>, которые выравнивают все элементы по началу и концу поперечной оси соответственно. См. подробнее {{cssxref("align-items")}}.</li>
+</ul>
+
+<p>Вы можете переопределить {{cssxref("align-items")}} поведение для отдельных flex элементов, применив свойство {{cssxref("align-self")}} к ним. Например, попробуйте добавить эти строки в код:</p>
+
+<pre class="brush: css notranslate">button:first-child {
+  align-self: flex-end;
+}</pre>
+
+<p>Посмотрите, что произошло и удалите эти строки.</p>
+
+<p>{{cssxref("justify-content")}} контролирует, где flex элементы располагаются на главной оси.</p>
+
+<ul>
+ <li>По умолчанию стоит значение <code>flex-start</code>, которое располагает все элементы в начале главной оси. </li>
+ <li>Также можно использовать <code>flex-end, </code>чтобы расположить их в конце.</li>
+ <li><code>center</code> - также одно из значений <code>justify-content</code>, располагает все элементы по центру главной оси.</li>
+ <li>Значение, которое мы использовали выше, <code>space-around</code>, весьма полезно — оно распределяет все элементы равномерно по главной оси, с небольшим количеством свободного места на обоих концах.</li>
+ <li>И ещё одно значение, <code>space-between</code>, которое очень похоже на <code>space-around,</code> за исключением того, что оно не оставляет места на обоих концах.</li>
+</ul>
+
+<p>Попробуйте немного поиграть с этими значениями прежде чем продолжить</p>
+
+<h2 id="Порядок_элементов_flex">Порядок элементов flex</h2>
+
+<p>В Flexbox также есть возможность менять порядок расположения flex элементов, не влияя на исходный порядок. Это ещё одна вещь, которую невозможно сделать традиционными методами CSS.</p>
+
+<p>Код здесь простой: попробуйте добавить следующий CSS вниз вашего кода примера:</p>
+
+<pre class="brush: css notranslate">button:first-child {
+  order: 1;
+}</pre>
+
+<p>и теперь вы увидите, что кнопка «Smile» переместилась в конец главной оси. Давайте теперь поговорим подробнее о том, как это работает:</p>
+
+<ul>
+ <li>По умолчанию все элементы flex имеют значение {{cssxref ("order")}} равное 0.</li>
+ <li>Элементы Flex с установленными на них бОльшими значениями будут отображаться позже в порядке отображения, чем элементы с меньшими значениями порядка.</li>
+ <li>Элементы Flex с одинаковым значением порядка будут отображаться в исходном порядке. Так, если у вас есть четыре элемента с порядковыми значениями 2, 1, 1 и 0, установленными на них соответственно, их порядок отображения будет 4-й, 2-й, 3-й, затем 1-й.</li>
+ <li>Третий элемент появляется после второго, потому что он имеет то же значение порядка и находится после него в порядке написания.</li>
+</ul>
+
+<p>Вы можете установить отрицательные значения , чтобы элементы отображались раньше, чем элементы с установленным 0. Например, вы можете сделать, чтобы кнопка «Blush» появлялась в начале основной оси, используя следующее правило:</p>
+
+<pre class="brush: css notranslate">button:last-child {
+  order: -1;
+}</pre>
+
+<h2 id="Вложенные_flex_блоки">Вложенные flex блоки</h2>
+
+<p>Можно создать несколько довольно сложных макетов с помощью flexbox. Совершенно нормально сделать flex элемент flex контейнером, чтобы его потомки также были flex блоками. Посмотрите на <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">см. вживую</a>).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>HTML для этого довольно простой. У нас есть элемент {{htmlelement ("section")}}, содержащий три {{htmlelement ("article")}}. Третий {{htmlelement ("article")}} содержит ещё три {{htmlelement ("div")}}.</p>
+
+<pre class="notranslate">section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button</pre>
+
+<p>Давайте посмотрим на код, который мы использовали для макета.</p>
+
+<p>Прежде всего, мы устанавливаем дочерние элементы {{htmlelement ("section")}} в виде flex блоков.</p>
+
+<pre class="brush: css notranslate">section {
+  display: flex;
+}</pre>
+
+<p>Затем мы устанавливаем несколько значений на самих {{htmlelement ("article")}}. Обратите внимание на второе правило: мы устанавливаем третий {{htmlelement ("article")}}, чтобы его дети были в макете в виде flex блоков, но на этот раз мы располагаем их как столбец.</p>
+
+<pre class="brush: css notranslate">article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+</pre>
+
+<p>Затем мы берём первый {{htmlelement ("div")}}. Сначала мы пишем flex: 1 100px; чтобы дать ему минимальную высоту 100px, потом мы устанавливаем его дочерние элементы (элементы {{htmlelement ("button")}}) также в виде flex блоков. Им мы назначаем перенос блоков и выравниваем их по центру доступного пространства, как это было в примере с кнопкой.</p>
+
+<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child {
+  flex: 1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}</pre>
+
+<p>Наконец, мы устанавливаем размер кнопке, мы даем ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.</p>
+
+<pre class="brush: css notranslate">button {
+  flex: 1;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}</pre>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>Поддержка Flexbox доступна в большинстве новых браузеров: Firefox, Chrome, Opera, Microsoft Edge и IE 11, более поздних версиях Android / iOS и т. д.. Однако помните, что до сих пор используются более старые браузеры, которые не поддерживают Flexbox ( или поддерживают, но старую версию.)</p>
+
+<p>Пока вы просто учитесь и экспериментируете, это не имеет большого значения. Однако, если вы рассматриваете возможность использования flexbox на реальном веб-сайте, вам необходимо провести тестирование и убедиться, что ваш пользовательский интерфейс по-прежнему приемлем в максимально возможном количестве браузеров.</p>
+
+<p>Flexbox немного сложнее, чем некоторые функции CSS. Например, если в браузере отсутствует поддержка CSS тени, сайт по-прежнему будет можно использовать. А вот неподдерживаемые функции flexbox, возможно, полностью сломают макет, что сделает сайт непригодным.</p>
+
+<p>Мы обсудим возможности преодоления проблем поддержки кросс-браузерности в следующем модуле.</p>
+
+<h2 id="Подытожим">Подытожим</h2>
+
+<p>Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим еще один важный аспект макетов CSS - grid-системы.</p>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html
new file mode 100644
index 0000000000..4c4914cbe9
--- /dev/null
+++ b/files/ru/learn/css/css_layout/floats/index.html
@@ -0,0 +1,517 @@
+---
+title: Float
+slug: Learn/CSS/CSS_layout/Floats
+translation_of: Learn/CSS/CSS_layout/Floats
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">Первоначально используемое для "обтекания" картинок текстом, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания макетов из нескольких столбцов на веб-страницах. С появлением flexbox и grid оно снова используется как задумывалось в начале, о чем подробнее в этой статье.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Предварительные требования:</th>
+   <td>Базовое знакомство с HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), а также идея о том как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Научиться как создавать обтекаемые свойства на веб-страницах и как использовать свойство clear и другие методы <span class="tlid-translation translation" lang="ru"><span title="">очистки обтекаемых элементов</span></span>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Общие_сведения_о_float">Общие сведения о float</h2>
+
+<p>Свойство {{cssxref("float")}} вводилось для того, чтобы разработчики могли включать изображение, с обтеканием текста вокруг него слева или справа, как это часто используется в газетах.</p>
+
+<p>Но разработчики быстро осознали, что можно обтекать все что угодно, не только изображения, поэтому использование float расширилось, например для верстки забавных эффектов таких как <a href="https://css-tricks.com/snippets/css/drop-caps/">drop-caps</a> (буквица).</p>
+
+<p>Floats очень часто использовались для создания макетов целых веб-страниц, отображающих несколько колонок информации, обтекаемых так, что колонки располагаются друг за другом (поведение по умолчанию предполагает, что колонки должны располагаются друг за другом, в том же порядке в котором они появляются в источнике). Доступны более новые, лучшие методы и поэтому использование floats для этих целей следует рассматривать как <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">устаревшей техникой</a>.</p>
+
+<p>В этой статье мы сконцентрируемся только на надлежащем использовании floats.</p>
+
+<h2 id="Простой_пример_float">Простой пример float</h2>
+
+<p>Давайте выясним как использовать floats. Мы начнем с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый <code>index.html</code> файл на вашем компьютере, заполнив его <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">простым шаблоном HTML</a>, и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.</p>
+
+<p>Во-первых, мы начнем с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив все что там было до этого:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. &lt;/p&gt;
+
+&lt;p&gt;Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;</pre>
+
+<p>А теперь примените следующий CSS для вашего HTML (используя элемент {{htmlelement("style")}} или {{htmlelement("link")}} на отдельный файл <code>.css</code> — на ваше усмотрение):</p>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}</pre>
+
+<p>Если вы сохраните и обновите сейчас, то <span class="tlid-translation translation" lang="ru"><span title="">вы увидите нечто похожее на то, чего ожидаете </span></span>— блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу <code>.box</code>:</p>
+
+<pre class="brush: css notranslate">.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}</pre>
+
+<p>Если вы сохраните и обнавите сейчас, то <span class="tlid-translation translation" lang="ru"><span title="">вы увидите нечто похожее на следующее</span></span>:</p>
+
+<div id="Float_1">
+<div class="hidden">
+<h6 id="Float_Example_1">Float Example 1</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_1', '100%', 500) }}</p>
+
+<p>Итак, давайте подумаем над тем, как работает float — элемент с установленным float (элемент {{htmlelement("div")}} в данном случае) изымается из нормального потока документа и крепится с левой стороны от родительского контейнера (элемент {{htmlelement("body")}} в данном случае). Любой контент, который следует ниже за обтекаемым элементом в макете при нормальном потоке теперь будет оборачивать его вокруг, заполняя пространство справа от него начиная на той же высоте что и вершина обтекаемого элемента. Там он остановится.</p>
+
+<p>Обтекание контента справа имеет точно такой же эффект, но наоборот — обтекаемый элемент будет прилипать справа, а контент будет оборачивать вокруг слева. Попробуйте изменить значение на <code>right</code> и замените {{cssxref("margin-right")}} на {{cssxref("margin-left")}} в последнем наборе правил, чтобы увидеть каков результат.</p>
+
+<p>В то время как мы можем добавлять margin к обтекаемому элементу чтобы оттолкнуть текст от него, мы не можем добавлять margin к тексту чтобы отодвинуть его от обтекаемого элемента. так происходит потому, что обтекаемые элементы изъяты из нормального потока, а следующие за ним блоки фактически располагаются за обтекаемым элементом. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете продемонстрировать это, внеся некоторые изменения в ваш пример.</span></span></p>
+
+<p>Добавьте класс <code>special</code> к первому параграфу текста, тот который непосредственно следует за обтекаемым блоком, далее добавьте следующие правила в ваш CSS. Они дадут нашему параграфу цвет фона.</p>
+
+<pre class="brush: css notranslate">.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+</pre>
+
+<p>Чтобы эфект был лучше виден, измените <code>margin-right</code> обтекаемого объекта на <code>margin</code>, так вы получите пространство вокруг него. Вы сможете увидеть фон параграфа располагающегося прям под обтекаемым блоком, как на примере ниже.</p>
+
+<div id="Float_2">
+<div class="hidden">
+<h6 id="Float_Example_2">Float Example 2</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p class="special"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p>
+
+<p><a href="/en-US/docs/Web/CSS/Visual_formatting_model#Line_boxes">Линейные блоки</a> нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все еще остается в полную ширину.</p>
+
+<h2 id="Очистка_обтекания">Очистка обтекания</h2>
+
+<p>Мы увидели, что обтекаемый объект удален из нормального потока и что другие элементы будут располагаться за ним, поэтому если мы хотим остановить перемещение следующего элемента нам необходимо очистить его; что достигается при помощи свойства {{cssxref("clear")}}.</p>
+
+<p>Добавьте класс <code>cleared</code> ко второму параграфу после обтекаемого элемента в ваш HTML из предыдущего примера. Далее добавьте следующий CSS:</p>
+
+<pre class="brush: css notranslate">.cleared {
+  clear: left;
+}
+</pre>
+
+<div id="Float_3">
+<div class="hidden">
+<h6 id="Float_Example_3">Float Example 3</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p class="special"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.cleared {
+  clear: left;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_3', '100%', 600) }}</p>
+
+<p>Вы должны увидеть, что следующий параграф очищает float элемента <span class="tlid-translation translation" lang="ru"><span title="">и больше не появляется рядом с ним. Свойство </span></span><code>clear</code> принимает следующие значения:</p>
+
+<ul>
+ <li><code>left</code>: очищает объекты, обтекаемые слева.</li>
+ <li><code>right</code>: очищает объекты, обтекаемые справа.</li>
+ <li><code>both</code>: очищает любые обтекаемые объекты, слева или справа.</li>
+</ul>
+
+<h2 id="Очистка_блоков_обернутых_вокруг_обтекаемых_элементов">Очистка блоков обернутых вокруг обтекаемых элементов</h2>
+
+<p>Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обернуты в {{htmlelement("div")}} с классом <code>wrapper</code>.</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>В вашем CSS добавьте следующее правило для класса <code>.wrapper</code> и обновите страницу:</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}</pre>
+
+<p>В добавок удалите класс <code>.cleared</code>:</p>
+
+<pre class="brush: css notranslate" id="ct-0">.cleared {
+    clear: left;
+}</pre>
+
+<p>Вы увидите, что, точно так же как и в примере где мы устанавливаем цвет фона для параграфа, цвет фона располагается за обтекаемым объектом.</p>
+
+<div id="Float_4">
+<div class="hidden">
+<h6 id="Float_Example_4">Float Example 4</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p>
+
+<p>И еще раз, так происходит потому, что обтекаемый объект изымается из нормального потока. <span class="tlid-translation translation" lang="ru"><span title="">Очистка следующего элемента не помогает с этой проблемой очистки блока, где вы хотите, чтобы нижняя часть блока обернула </span></span>обтекаемый объект и оборачивающий контент даже если контент короче. Существует три потенциальных способа разобраться с этой проблемой, два из которых работают во всех браузерах, но при этом немного хитры и третий новый способ, который <span class="tlid-translation translation" lang="ru"><span title="">правильно справляется с этой ситуацией.</span></span></p>
+
+<h3 id="Clearfix_hack">Clearfix hack</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Традиционно эта ситуация решалась с помощью так называемого «clearfix hack».</span></span> Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и оберточный контент, а также настройки для очистки обоих.</p>
+
+<p>Добавьте следующий CSS в наш пример:</p>
+
+<pre class="brush: css notranslate">.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}</pre>
+
+<p>Теперь перезагрузите страницу и блок должен быть очищенным. <span class="tlid-translation translation" lang="ru"><span title="">По сути, это то же самое, как если бы вы добавили </span></span>HTML элемент такой как <code>&lt;div&gt;</code> ниже объекта и установили <code>clear: both</code>.</p>
+
+<div id="Float_5">
+<div class="hidden">
+<h6 id="Float_Example_5">Float Example 5</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;      </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_5', '100%', 600) }}</p>
+
+<h3 id="Использование_overflow">Использование overflow</h3>
+
+<p>Альтернативный метод — это задать свойство {{cssxref("overflow")}} для обертки (wrapper) на значение отличное от <code>visible</code>.</p>
+
+<p>Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте <code>overflow: auto</code> к правилу для обертки. Блок снова должен быть очищен.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}</pre>
+
+<div id="Float_6">
+<div class="hidden">
+<h6 id="Float_Example_6">Float Example 6</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p>
+
+<p>Этот пример работает путем создания того, что известно как <strong>Блочный Контекст Форматирования (block formatting context </strong>(BFC)<strong>). </strong>Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определенных случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за <span class="tlid-translation translation" lang="ru"><span title="">непреднамеренный</span></span> последствий использования overflow.</p>
+
+<h3 id="display_flow-root">display: flow-root</h3>
+
+<p>Современный способ решения этой проблемы — это использование значения <code>flow-root</code> свойства <code>display</code>. Он существует только для создания BFC без использования хака — не будет возникать <span class="tlid-translation translation" lang="ru"><span title="">непреднамеренных </span></span>последствий, когда вы используете его. Удалите <code>overflow: auto</code> из вашего правила <code>.wrapper</code> и добавьте <code>display: flow-root</code>. <span class="tlid-translation translation" lang="ru"><span title="">Если предположить,</span></span> что у вас <a href="/en-US/docs/Web/CSS/display#Browser_compatibility">поддерживающий браузер</a>, блок будет очищаться.</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}</pre>
+
+<div id="Float_7">
+<div class="hidden">
+<h6 id="Float_Example_7">Float Example 7</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+&lt;div class="wrapper"&gt;
+  &lt;div class="box"&gt;Float&lt;/div&gt;
+
+  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+&lt;/div&gt;
+&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Float_7', '100%', 600) }}</p>
+
+<h2 id="Проверьте_свои_навыки!">Проверьте свои навыки!</h2>
+
+<p>Вы достигли конца этой статьи, но помните ли вы самую важную информацию?  <span class="tlid-translation translation" lang="ru"><span title="">Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше </span></span>— см. <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats_skills">Проверка ваших навыков: Floats</a>.</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Теперь вы знаете все, что нужно знать о float в современной веб-разработке. См. Статью об </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">устаревших методах макета </a><span class="tlid-translation translation" lang="ru"><span title="">устаревших методах макета для получения информации о том, как они использовались раньше, что может быть полезно, если вы работаете над старыми проектами.</span></span></p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS макет</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Отзывчивый дизайн</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Руководство новичка в media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы макета</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Базовая оценка понимания макета</a></li>
+</ul>
diff --git a/files/ru/learn/css/css_layout/floats_skills/index.html b/files/ru/learn/css/css_layout/floats_skills/index.html
new file mode 100644
index 0000000000..425e8c3b50
--- /dev/null
+++ b/files/ru/learn/css/css_layout/floats_skills/index.html
@@ -0,0 +1,76 @@
+---
+title: 'Проверка ваших навыков: floats'
+slug: Learn/CSS/CSS_layout/Floats_skills
+translation_of: Learn/CSS/CSS_layout/Floats_skills
+---
+<div>{{LearnSidebar}}</div>
+
+<div></div>
+
+<p>Цель этого задания - чтобы вы поработали со свойствами CSS {{CSSxRef("float")}} и {{CSSxRef("clear")}} которые описаны в нашем уроке <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a>. <span class="tlid-translation translation" lang="ru"><span title="">Вы будете работать над тремя небольшими задачами,</span></span> использующими различные элементы из пройденного материала.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Вы можете опробовать решения в интерактивных редакторах ниже</span></span>, однако может быть полезным загрузить код и использовать онлайн инструменты такие как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, или <a href="https://glitch.com/">Glitch</a> чтобы проработать задания.</p>
+
+<p>Если вы застрянете, попросите нас о помощи — см. раздел {{anch("Оценка или дальнейшая помощь")}} в конце страницы</p>
+</div>
+
+<h2 id="Floats_Раз">Floats Раз</h2>
+
+<p>В этом задании вам необходимо чтобы два элемента с классами float1 и float2 обтекали слева и справа соответственно. Текст должен появляться между двумя блоками как на изображении ниже.</p>
+
+<p><img alt="Two blocks displaying left and right of some text." src="https://mdn.mozillademos.org/files/17073/float-task1.png" style="height: 425px; width: 1067px;"></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример</span></span>:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/float/float1.html", '100%', 700)}}</p>
+
+<div class="blockIndicator note">
+<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float1-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
+</div>
+
+<h2 id="Float_Два">Float Два</h2>
+
+<p>В этом примере элемент с классом float должен примыкать к левому краю и обтекаться справа. Далее мы хотим чтобы первая строка текста отображалась рядом с тем элементом, а следующая строка (с классом .below) отображалась под ним. Вы можете посмотреть желаемый результат на этом изображении.</p>
+
+<p><img alt="A box displayed to the left of a line of text, with some more text below." src="https://mdn.mozillademos.org/files/17074/float-task2.png" style="height: 522px; width: 1373px;"></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример</span></span>:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/float/float2.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float2-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
+</div>
+
+<h2 id="Float_Три">Float Три</h2>
+
+<p>И наконец у нас есть обтекаемый элемент в этом примере. Блок оборачивающий обтекаемый элемент и текст отображается за ними. Используйте самый последний доступный метод чтобы фон тянулся за обтеканием как показано на изображении.</p>
+
+<p><img alt="A block displayed to the right of some text both wrapped by a box with a background color." src="https://mdn.mozillademos.org/files/17075/float-task3.png" style="height: 427px; width: 1024px;"></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример</span></span>:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/float/float3.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float3-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
+</div>
+
+<h2 id="Оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</h2>
+
+<p>Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.</p>
+
+<p>Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:</p>
+
+<ol>
+ <li>Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как <a class="external external-icon" href="https://codepen.io/" rel="noopener">CodePen</a>, <a class="external external-icon" href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, или <a class="external external-icon" href="https://glitch.com/" rel="noopener">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.</li>
+ <li>Напишите пост с просьбой оценки и/или помощи на <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваш пост должен включать:
+  <ul>
+   <li>Описательный заголовок такой как "Требуется оценка теста по навыкам Float".</li>
+   <li>Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.</li>
+   <li>Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.</li>
+   <li>Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/ru/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/ru/learn/css/css_layout/fundamental_layout_comprehension/index.html
new file mode 100644
index 0000000000..4a85d07667
--- /dev/null
+++ b/files/ru/learn/css/css_layout/fundamental_layout_comprehension/index.html
@@ -0,0 +1,69 @@
+---
+title: Фундаментальное понимание раскладки
+slug: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension
+tags:
+  - CSS
+  - Начинающий
+  - Обучение
+  - Раскладка
+translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Если вы проработали этот модуль, то уже имеете базовое представление о том, что вам нужно знать, чтобы создавать современную CSS раскладку и работать с более старым CSS. Это задание проверит некоторые из ваших знаний путём разработки раскладки для простой веб-страницы, используя различные техники.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимое условие:</th>
+   <td>Прежде чем приступать к этой аттестации, вы должны были уже проработать все статьи в этом модуле.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Проверить понимание фундаментальных навыков раскладки, освещаемых в этом модуле.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Резюме_проекта">Резюме проекта</h2>
+
+<p>Вам предоставили некоторый html, базовый css и изображения — ваша задача, создать раскладку для дизайна, который должен выглядеть как на изображении ниже.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16076/layout-task-complete.png" style="height: 706px; width: 1000px;"></p>
+
+<h3 id="Базовые_настройки">Базовые настройки</h3>
+
+<p>Вы можете скачать HTML, CSS, и набор из шести изображений <a href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension">тут</a>.</p>
+
+<p>Сохраните HTML документ и css стили внутри директории на вашем компьютере и добавьте изображения внутрь папки с именем <code>images</code>. Открыв <code>index.html</code> файл в браузере, вы должны получить страницу с базовой стилизацией, но без раскладки, что должно выглядеть как на изображении ниже.</p>
+
+<p>Эта отправная точка и всё содержимое отображается браузером в нормальном потоке.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16075/layout-task-start.png" style="height: 675px; width: 1000px;"></p>
+
+<h3 id="Ваши_задачи">Ваши задачи</h3>
+
+<p>Теперь вам нужно реализовать раскладку. Задачи, которые вам необходимо выполнить:</p>
+
+<ol>
+ <li>Отобразить пункты навигации в строку, с одинаковым количеством пространства между элементами.</li>
+ <li>Панель навигации должна прокручиваться вместе с содержимым страницы и закрепляться вверху видимой области документа в рамках экрана.</li>
+ <li>Изображение, которое находится внутри статьи, должно обтекаться текстом вокруг него.</li>
+ <li>{{htmlelement("article")}} и {{htmlelement("aside")}} элементы должны отображаться как двухколоночная раскладка. Колонки должны иметь гибкий размер, если окно браузера уменьшится, колонки должны стать более узкими.</li>
+ <li>Фотографии должны отображаться как двухколоночная сетка с отступом в 1px между изображениями.</li>
+</ol>
+
+<p>Вам нет необходимости изменять HTML для создания этой раскладки и техник, которые вы должны использовать:</p>
+
+<ul>
+ <li>Позиционирование</li>
+ <li>Раскладка на Float</li>
+ <li>Раскладка на Flexbox</li>
+ <li>Раскладка на CSS Grid</li>
+</ul>
+
+<p>Есть множество способов, как выполнить некоторые из этих задач и часто не существует одного правильного или неправильного способа это сделать. Попробуйте несколько разных способов и увидите, какой работает лучше. Делайте заметки о ваших экспериментах и вы всегда сможете обсудить ваш способ в отдельной дискуссии для этого задания или на <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC канале.</p>
+
+<h2 id="Оценка_работы">Оценка работы</h2>
+
+<p>Если вы проходите эту аттестацию как часть организованного курса, вы должны быть в состоянии дать свою работу вашему учителю/наставнику для оценки. Если вы занимаетесь самообучением, тогда вы легко можете получить руководство по оценке работы, задавая вопросы в <a href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982">отдельной дискуссии для этого задания</a> или на <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC канале в <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Сначала попробуйте выполнить упражнение — нет никаких причин для жульничества!</p>
diff --git a/files/ru/learn/css/css_layout/grids/index.html b/files/ru/learn/css/css_layout/grids/index.html
new file mode 100644
index 0000000000..f94f97fb10
--- /dev/null
+++ b/files/ru/learn/css/css_layout/grids/index.html
@@ -0,0 +1,642 @@
+---
+title: Grids
+slug: Learn/CSS/CSS_layout/Grids
+translation_of: Learn/CSS/CSS_layout/Grids
+---
+<div>
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div>
+Сетки (grids) являются установленным инструментом проектирования и многие современные макеты веб-сайта основаны на регулярной сетке. В этой статье мы рассмотрим дизайн на основе сетки и увидим как CSS можно использовать для создания сеток <span class="seoSummary">—</span> как с помощью современных инструментов, так и с помощью новых технологий, которые только начинают становиться доступными в браузерах.</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые навыки:</th>
+   <td>основы HTML(изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), понимание как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> и <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Понять основные концепции, лежащие в основе систем компоновки сетки и как реализовать сетку на веб-странице.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Что_такое_макет_сетки_grid_layout">Что такое макет сетки (grid layout)?</h2>
+
+<p>Сетка (grid) - это просто набор горизонтальных и вертикальных линий, создающих шаблон, по которому мы можем выстроить элементы дизайна. Они помогают нам создавать проекты, в которых элементы не прыгают или не меняют ширину при переходе от страницы к странице, обеспечивая большую согласованность на наших сайтах.</p>
+
+<p>В сетке обычно будут <strong>столбцы (columns)</strong>, <strong>строки (rows)</strong>, а затем промежутки между каждой строкой и столбцом, обычно называемые <strong>желобами (gutters)</strong>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p>
+
+<p>[Временная диаграмма; скоро будет заменена лучшей диаграммой.]</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Может показаться удивительным, если кто-нибудь из фона дизайна, что CSS не имеет встроенной сетки, и вместо этого мы, похоже, используем множество субоптимальных методов для создания сетчатых конструкций. Как вы узнаете в последней части этой статьи, это изменится, однако вам, вероятно, понадобятся существующие методы создания гридов в течение некоторого времени.</p>
+</div>
+
+<h2 id="Использование_“grid_system”_в_ваших_проектах">Использование “grid system” в ваших проектах</h2>
+
+<p>Чтобы обеспечить постоянный опыт на вашем сайте или в приложении, основываясь на системе сетки с самого начала, вам не нужно думать о том, насколько широкий элемент имеет отношение к другим элементам. Ваш выбор ограничен «количеством столбцов сетки, которые этот элемент будет охватывать».</p>
+
+<p>Ваша «сеточная система» может быть просто решением, принятым в процессе проектирования, для использования регулярной сетки. Если ваши проекты начнутся в приложении для редактирования графики, например Photoshop, вы можете создать сетку для ссылки во время этого процесса, как описано в  <a href="http://www.elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/">A better Photoshop grid for responsive web design</a> by Elliot Jay Stocks.</p>
+
+<p>Ваша сетевая система также может быть структурой - либо третьей стороной, либо созданной вами только для вашего проекта, - которую вы используете для обеспечения сетки с помощью CSS.</p>
+
+<h2 id="Создание_простых_рамок_сетки">Создание простых рамок сетки</h2>
+
+<p>Мы начнем с рассмотрения того, как вы можете создать простую сетку для вашего проекта.</p>
+
+<p>В настоящее время большинство макетов типа grid создаются с использованием поплавков (floats). Если вы прочитали<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats"> нашу предыдущую статью о поплавках,</a> вы уже видели, как мы можем использовать эту технику для создания раскладки нескольких столбцов, что является сущностью любой сетки, использующей этот метод.</p>
+
+<p>Самый простой тип структуры сетки для создания фиксированной ширины — нам просто нужно выяснить, сколько общей ширины мы хотим для нашего дизайна, сколько столбцов мы хотим и насколько широки должны быть желоба и столбцы. Если бы вместо этого мы решили выложить наш проект на сетке со столбцами, которые растут и сокращаются в соответствии с шириной браузера, нам нужно будет рассчитать процентную ширину для столбцов и желобов между ними.</p>
+
+<p>В следующих разделах мы рассмотрим, как создать оба. Мы создадим сетку с 12 столбцами - очень общий выбор, который, как видно, очень адаптируется к различным ситуациям, учитывая, что 12 прекрасно делится на 6, 4, 3 и 2.</p>
+
+<h3 id="Простая_сетка_с_фиксированной_шириной">Простая сетка с фиксированной шириной</h3>
+
+<p>Давайте сначала создадим сетку, использующую столбцы фиксированной ширины.</p>
+
+<p>Начните с создания локальной копии нашего образца <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> файла, который содержит следующую разметку в своем теле.</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col"&gt;1&lt;/div&gt;
+    &lt;div class="col"&gt;2&lt;/div&gt;
+    &lt;div class="col"&gt;3&lt;/div&gt;
+    &lt;div class="col"&gt;4&lt;/div&gt;
+    &lt;div class="col"&gt;5&lt;/div&gt;
+    &lt;div class="col"&gt;6&lt;/div&gt;
+    &lt;div class="col"&gt;7&lt;/div&gt;
+    &lt;div class="col"&gt;8&lt;/div&gt;
+    &lt;div class="col"&gt;9&lt;/div&gt;
+    &lt;div class="col"&gt;10&lt;/div&gt;
+    &lt;div class="col"&gt;11&lt;/div&gt;
+    &lt;div class="col"&gt;12&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col span1"&gt;13&lt;/div&gt;
+    &lt;div class="col span6"&gt;14&lt;/div&gt;
+    &lt;div class="col span3"&gt;15&lt;/div&gt;
+    &lt;div class="col span2"&gt;16&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>Цель состоит в том, чтобы превратить это в демонстрационную сетку из двух рядов на двенадцать столбцов сетки (grid) - верхний ряд, демонстрирующий размер отдельных столбцов, второй ряд - некоторые области разного размера в сетке.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p>
+
+<p>В элементе {{htmlelement ("style")}} добавьте следующий код, который дает контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это дает нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. <a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Changing the box model completely</a> для большего объяснения).</p>
+
+<pre class="brush: css notranslate">* {
+  box-sizing: border-box;
+}
+
+
+body {
+  width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 20px;
+}</pre>
+
+<p>Теперь используйте контейнер строк, который обернут вокруг каждой строки сетки, чтобы очистить одну строку от другой. Добавьте следующее правило ниже предыдущего:</p>
+
+<pre class="brush: css notranslate">.row {
+  clear: both;
+}</pre>
+
+<p>Применение этого клиринга означает, что нам не нужно полностью заполнять каждую строку элементами, составляющими полные двенадцать столбцов. Строки будут разделены и не будут мешать друг другу.</p>
+
+<p>Желоба между колоннами шириной 20 пикселей. Мы создаем эти желоба в качестве поля в левой части каждого столбца, включая первый столбец, чтобы сбалансировать 20 пикселей прокладки в правой части контейнера. Таким образом, у нас есть 12 водосточных желобов - 12 x 20 = 240.</p>
+
+<p>Нам нужно вычесть это из нашей общей ширины 960 пикселей, что дает нам 720 пикселей для наших столбцов. Если мы разделим это на 12, мы знаем, что каждый столбец должен быть 60 пикселей в ширину. Наш следующий шаг - создать правило для класса <code>.col</code>, плавающее влево, предоставив ему {{cssxref ("margin-left")}} из 20 пикселей для формирования желоба и {{cssxref ("width" )}} из 60 пикселей. Добавьте нижеследующее правило в CSS:</p>
+
+<pre class="brush: css notranslate">.col {
+  float: left;
+  margin-left: 20px;
+  width: 60px;
+  background: rgb(255, 150, 150);
+}</pre>
+
+<p>Верхний ряд отдельных столбцов теперь будет аккуратно размещаться в виде сетки.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Мы также дали каждому столбцу светло-красный цвет, чтобы вы могли точно видеть, сколько места занимает каждый.</p>
+</div>
+
+<p>В контейнерах макетов, которые мы хотим разместить более одного столбца, нужно предоставить специальные классы, чтобы скорректировать их значения {{cssxref ("width")}} до необходимого количества столбцов (плюс желоба между ними). Нам нужно создать дополнительный класс, чтобы контейнеры могли охватывать от 2 до 12 столбцов. Каждая ширина является результатом сложения ширины столбца этого количества столбцов плюс ширины желоба, который всегда будет набирать номер меньше, чем число столбцов.</p>
+
+<p>Добавьте нижеследующую часть вашего CSS:</p>
+
+<pre class="brush: css notranslate">/ * Ширина двух колонок (120 пикселей) плюс одна ширина желоба (20 пикселей) */
+.col.span2 { width: 140px; }
+/ * Три ширины столбца (180 пикселей) плюс две ширины желоба (40 пикселей) * /
+.col.span3 { width: 220px; }
+/* И так далее... */
+.col.span4 { width: 300px; }
+.col.span5 { width: 380px; }
+.col.span6 { width: 460px; }
+.col.span7 { width: 540px; }
+.col.span8 { width: 620px; }
+.col.span9 { width: 700px; }
+.col.span10 { width: 780px; }
+.col.span11 { width: 860px; }
+.col.span12 { width: 940px; }</pre>
+
+<p>С помощью этих классов мы можем теперь выкладывать разные столбцы ширины в сетке. Попробуйте сохранить и загрузить страницу в своем браузере, чтобы увидеть эффекты.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Если вам не удается заставить приведенный выше пример работать, попробуйте сравнить его с нашей <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">готовой версией</a> на GitHub (см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">запуск в режиме реального времени</a>).</p>
+</div>
+
+<p>Попробуйте изменить классы на своих элементах или даже добавить и удалить некоторые контейнеры, чтобы увидеть, как вы можете изменять макет. Например, вы можете сделать вторую строку следующим образом:</p>
+
+<pre class="brush: css notranslate">&lt;div class="row"&gt;
+  &lt;div class="col span8"&gt;13&lt;/div&gt;
+  &lt;div class="col span4"&gt;14&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>Теперь у вас работает сетка, вы можете просто определить строки и количество столбцов в каждой строке, а затем заполнить каждый контейнер своим необходимым контентом. Отлично!</p>
+
+<h3 id="Создание_fluid_grid">Создание fluid grid</h3>
+
+<p>Наша сетка работает красиво, но имеет фиксированную ширину. Нам очень нужна гибкая (жидкая) сетка, которая будет расти и сокращаться с доступным пространством в браузере {{Glossary ("viewport")}}. Для этого мы можем использовать опорные пиксельные ширины и превратить их в проценты</p>
+
+<p>Уравнение, которое превращает фиксированную ширину в гибкую, основанную на процентах, выглядит следующим образом.</p>
+
+<pre class="notranslate">target / context = result</pre>
+
+<p>Для нашей ширины столбца наша <strong>целевая ширина</strong> составляет 60 пикселей, а наш <strong>контекст</strong>  960 пикселей. Для расчета процента мы можем использовать следующее.</p>
+
+<pre class="notranslate">60 / 960 = 0.0625</pre>
+
+<p>Затем мы перемещаем десятичные точки на 2 места, давая нам процент от 6,25%. Таким образом, в нашем CSS мы можем заменить ширину столбца 60 пикселей на 6,25%.</p>
+
+<p>Мы должны сделать то же самое с нашей шириной желоба:</p>
+
+<pre class="notranslate">20 / 960 = 0.02083333333</pre>
+
+<p>Поэтому нам нужно заменить 20 пикселей {{cssxref ("margin-left")}} на наше правило <code>.col</code>  20 пикселей {{cssxref ("padding-right")}} на <code>.wrapper </code>с 2.08333333%.</p>
+
+<h4 id="Обновление_нашей_сетки">Обновление нашей сетки</h4>
+
+<p>Чтобы начать работу в этом разделе, создайте новую копию предыдущей страницы примера или создайте локальную копию нашего кода <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a>, который будет использоваться в качестве отправной точки.</p>
+
+<p>Обновите второе правило CSS (с помощью селектора <code>.wrapper</code>) следующим образом:</p>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}</pre>
+
+<p>Мы не только дали нам процент {{cssxref ("width")}}, мы также добавили свойство {{cssxref ("max-width")}}, чтобы остановить распространение макета.</p>
+
+<p>Затем обновите четвертое правило CSS (с селектором <code>.col</code>) следующим образом:</p>
+
+<pre class="brush: css notranslate">.col {
+  float: left;
+  margin-left: 2.08333333%;
+  width: 6.25%;
+  background: rgb(255, 150, 150);
+}</pre>
+
+<p>Теперь идет немного более трудоемкая часть - нам нужно обновить все наши правила <code>.col.span</code>, чтобы использовать проценты, а не ширину пикселей. Это занимает немного времени с калькулятором; чтобы сэкономить вам немного усилий, мы сделали это для вас ниже.</p>
+
+<p>Обновите нижний блок правил CSS следующим образом:</p>
+
+<pre class="brush: css notranslate">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
+.col.span2 { width: 14.58333333%; }
+/* Three column widths (18.75%) plus two gutter widths (4.1666666) */
+.col.span3 { width: 22.91666666%; }
+/* And so on... */
+.col.span4 { width: 31.24999999%; }
+.col.span5 { width: 39.58333332%; }
+.col.span6 { width: 47.91666665%; }
+.col.span7 { width: 56.24999998%; }
+.col.span8 { width: 64.58333331%; }
+.col.span9 { width: 72.91666664%; }
+.col.span10 { width: 81.24999997%; }
+.col.span11 { width: 89.5833333%; }
+.col.span12 { width: 97.91666663%; }</pre>
+
+<p>Теперь сохраните свой код, загрузите его в браузере и попробуйте изменить ширину видового экрана - вы должны увидеть, что ширины столбцов хорошо меняются. Отлично!</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Если вам не удается заставить приведенный выше пример работать, попробуйте сравнить его с нашей <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">готовой версией на GitHub</a> (см. также<a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html"> запуск в режиме реального времени</a>).</p>
+</div>
+
+<h3 id="Более_простые_вычисления_с_использованием_функции_calc">Более простые вычисления с использованием функции calc()</h3>
+
+<p>Вы можете использовать функцию {{cssxref ("calc ()")}} для выполнения математики прямо внутри вашего CSS - это позволяет вставлять простые математические уравнения в ваши значения CSS, чтобы рассчитать, какое значение должно быть. Это особенно полезно, когда необходимо выполнить сложную математику и вы даже можете сделать расчет, который использует разные единицы, например «Я хочу, чтобы высота этого элемента всегда была на 100% от высоты родителя, минус 50 пикселей». См. <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">этот пример из учебника API MediaRecorder</a>.</p>
+
+<p>В любом случае, вернемся к нашим сетям! Любой столбец, который охватывает более одного столбца нашей сетки, имеет общую ширину 6,25%, умноженную на количество столбцов, спаренных плюс 2.08333333%, умноженное на количество желобов (которые всегда будут числом столбцов минус 1). Функция <code>calc () </code>позволяет нам делать это вычисление прямо внутри значения ширины, поэтому для любого элемента, охватывающего 4 столбца, мы можем это сделать, например:</p>
+
+<pre class="brush: css notranslate">.col.span4 {
+  width: calc((6.25%*4) + (2.08333333%*3));
+}</pre>
+
+<p>Попробуйте заменить нижний блок правил следующим, а затем перезагрузите его в браузере, чтобы узнать, получаете ли вы тот же результат:</p>
+
+<pre class="brush: css notranslate">.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
+.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
+.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
+.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
+.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
+.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
+.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
+.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
+.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
+.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
+.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете увидеть нашу законченную версию в файле <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">liquid-grid-calc.html</a> (также см. ее <a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">в режиме реального времени</a>).</p>
+</div>
+
+<div class="note">
+<p><strong>Примечание</strong>: Если вы не можете заставить это работать, возможно, это связано с тем, что ваш браузер не поддерживает функцию <code>calc ()</code>, хотя он довольно хорошо поддерживается в браузерах - еще в IE9.</p>
+</div>
+
+<h3 id="Семантические_и_несемантические_сетчатые_системы">Семантические и "несемантические" сетчатые системы</h3>
+
+<p>Добавление классов в вашу разметку для определения макета означает, что ваш контент и разметка привязаны к его визуальному представлению. Иногда вы слышите это использование классов CSS, описанных как «несемантические», - описывая, как выглядит контент, а не семантическое использование классов, описывающих контент. Это относится к классам <code>span2</code>, <code>span3</code> и т. Д.</p>
+
+<p>Это не единственный подход. Вместо этого вы можете выбрать свою сетку, а затем добавить информацию о размерах в правила для существующих семантических классов. Например, если у вас есть {{htmlelement ("div")}} с классом <code>content</code> в нем, который вы хотите разбить на 8 столбцов, вы можете скопировать по ширине из класса <code>span8</code>, предоставив вам следующее правило:</p>
+
+<pre class="brush: css notranslate">.content {
+  width: calc((6.25%*8) + (2.08333333%*7));
+}</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Если вы использовали препроцессор, такой как <a href="http://sass-lang.com/">Sass</a>, вы могли бы создать простой mixin, чтобы вставить это значение для вас.</p>
+</div>
+
+<h3 id="Включение_офсетных_контейнеров_в_нашей_сетке">Включение офсетных контейнеров в нашей сетке</h3>
+
+<p>Сетка, которую мы создали, работает хорошо, пока мы хотим запустить все контейнеры заподлицо с левой стороны сетки. Если бы мы хотели оставить пустое пространство столбца перед первым контейнером - или между контейнерами - нам нужно было бы создать класс смещения, чтобы добавить левое поле на наш сайт, чтобы визуально визуализировать его по сетке. Больше математики!</p>
+
+<p>Давайте попробуем это.</p>
+
+<p>Начните с предыдущего кода или используйте наш файл <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a> в качестве отправной точки.</p>
+
+<p>Давайте создадим класс в нашем CSS, который будет смещать элемент контейнера на одну ширину столбца. Добавьте нижеследующую часть вашего CSS:</p>
+
+<pre class="brush: css notranslate">.offset-by-one {
+  margin-left: calc(6.25% + (2.08333333%*2));
+}</pre>
+
+<p>Или если вы предпочитаете самостоятельно рассчитать проценты, используйте это:</p>
+
+<pre class="brush: css notranslate">.offset-by-one {
+  margin-left: 10.41666666%;
+}</pre>
+
+<p>Теперь вы можете добавить этот класс в любой контейнер, в котором вы хотите оставить пустое пространство с одним столбцом в левой части окна. Например, если у вас есть это в вашем HTML:</p>
+
+<pre class="brush: html notranslate">&lt;div class="col span6"&gt;14&lt;/div&gt;</pre>
+
+<p>Попробуйте заменить его на</p>
+
+<pre class="brush: html notranslate">&lt;div class="col span5 offset-by-one"&gt;14&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: Обратите внимание, что вам необходимо уменьшить количество столбцов, чтобы освободить место для смещения!</p>
+</div>
+
+<p>Попытайтесь загрузить и обновить, чтобы увидеть разницу или посмотрите наш пример <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a> (см. <a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">также «live»</a>). Готовый пример должен выглядеть так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p>
+
+<div class="note">
+<p><strong>Примечание:</strong> В качестве дополнительного упражнения вы можете реализовать класс «смещение на два»?</p>
+</div>
+
+<h3 id="Ограничения_с_плавающей_сеткой">Ограничения с плавающей сеткой</h3>
+
+<p>При использовании такой системы вам необходимо позаботиться о том, чтобы ваша общая ширина была правильно вставлена и что вы не включаете элементы в строку, которая содержит больше столбцов, чем может содержать строка. Из-за того, как работают поплавки, если количество столбцов сетки становится слишком большим для сетки, элементы на конце будут опускаться до следующей строки, разбивая сетку.</p>
+
+<p>Также имейте в виду, что если содержимое элементов становится шире, чем занимаемые им строки, оно будет переполняться и выглядит как беспорядок.</p>
+
+<p>Самое большое ограничение этой системы состоит в том, что она по существу одномерна. Мы имеем дело со столбцами и охватываем элементы по столбцам, но не по строкам. С помощью этих старых методов компоновки очень сложно контролировать высоту элементов без явной установки высоты, и это тоже очень негибкий подход - он работает только, если вы можете гарантировать, что ваш контент будет определенной высоты.</p>
+
+<h2 id="Flexbox_grids">Flexbox grids?</h2>
+
+<p>Если вы прочтете нашу предыдущую статью о <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, вы можете подумать, что flexbox - идеальное решение для создания сетчатой системы. В настоящее время доступно множество систем gridbox на основе flexbox и flexbox может решить многие из проблем, которые мы уже обнаружили при создании нашей сетки выше.</p>
+
+<p>Однако flexbox никогда не разрабатывался как сетчатая система и создает новый набор проблем при использовании в качестве одного. В качестве простого примера мы можем использовать тот же пример разметки, который мы использовали выше, и использовать следующий CSS для стилей классов-оболочек (<code>wrapper</code>), <code>row</code> и <code>col</code> классов:</p>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}
+
+
+.row {
+  display: flex;
+}
+
+.col {
+  margin-left: 2.08333333%;
+  margin-bottom: 1em;
+  width: 6.25%;
+  flex: 1 1 auto;
+  background: rgb(255,150,150);
+}</pre>
+
+<p>Вы можете попробовать сделать эти замены в своем собственном примере или посмотреть на наш пример кода <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html </a>(см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">он работает в режиме реального времени</a>).</p>
+
+<p>Здесь мы превращаем каждую строку в гибкий контейнер. С сеткой на основе flexbox нам все еще нужны строки, чтобы мы могли иметь элементы, которые составляют менее 100%. Мы установили этот контейнер для <code>display: flex</code>.</p>
+
+<p>На <code>.col </code>мы устанавливаем первое значение свойства {{cssxref ("flex")}} ({{cssxref ("flex-grow")}}) до 1, чтобы наши объекты могли расти, второе значение ({{cssxref (" flex-shrink ")}}) до 1, поэтому элементы могут сокращаться, а третье значение ({{cssxref (" flex-basis ")}}) - <code>auto</code>. Поскольку наш элемент имеет набор {{cssxref ("width")}}, <code>auto</code> будет использовать эту ширину в качестве базового значения flex (<code>flex-basis</code>).</p>
+
+<p>В верхней строке мы получаем двенадцать аккуратных коробок на сетке, и они растут и сжимаются одинаково, когда мы меняем ширину окна просмотра. Однако на следующей строке у нас есть только четыре элемента, и они также растут и сокращаются с 60px. Только с четырьмя из них они могут расти намного больше, чем элементы в строке выше, в результате они все занимают одну и ту же ширину во второй строке.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p>
+
+<p>Чтобы исправить это, нам все равно нужно включить наши классы <code>span</code>, чтобы обеспечить ширину, которая заменит значение, используемое <code>flex-basis</code> для этого элемента.</p>
+
+<p>Они также не уважают сетку, используемую выше, потому что они ничего не знают об этом.</p>
+
+<p>Flexbox является <strong>одномерным</strong> по дизайну. Он имеет дело с одним измерением - со строкой или столбцом. Мы не можем создать строгую сетку для столбцов и строк, что означает, что если мы будем использовать flexbox для нашей сетки, нам все равно нужно рассчитать проценты, как для плавающего макета.</p>
+
+<p>В вашем проекте вы все равно можете использовать сетку flexbox из-за дополнительных возможностей выравнивания и распределения пространства. Flexbox обеспечивает надплавки. Однако вам следует помнить, что вы все еще используете инструмент для чего-то другого, кроме того, для чего он предназначен. Таким образом, вы можете почувствовать, что он заставляет вас прыгать через дополнительные обручи, чтобы получить конечный результат, который вы хотите.</p>
+
+<h2 id="Системы_сторонних_сетей">Системы сторонних сетей</h2>
+
+<p>Теперь, когда мы понимаем математику за нашими расчетами в сетке, мы находимся в хорошем месте, чтобы взглянуть на некоторые из сторонних сетевых систем, которые используются совместно. Если вы ищете «CSS Grid framework» в Интернете, вы найдете огромный список вариантов на выбор. В популярных структурах, таких как <a href="http://getbootstrap.com/">Bootstrap</a> и <a href="https://foundation.zurb.com/">Foundation</a>, есть сетка. Существуют также автономные сетчатые системы, разработанные с использованием CSS или с использованием препроцессоров.</p>
+
+<p>Давайте рассмотрим одну из этих автономных систем, поскольку она демонстрирует общие методы работы с сеткой. Сетка, которую мы будем использовать, является частью Skeleton, простой CSS-структуры.</p>
+
+<p>Для начала посетите <a href="http://getskeleton.com/">веб-сайт Skeleton</a> и выберите «Загрузить», чтобы загрузить ZIP-файл. Разархивируйте это и скопируйте файлы skeleton.css и normalize.css в новый каталог.</p>
+
+<p>Сделайте копию нашего файла <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a> и сохраните его в том же каталоге, что и скелет, и нормализовать CSS.</p>
+
+<p>Включите скелет и нормализуйте CSS на странице HTML, добавив следующее в голову:</p>
+
+<pre class="brush: html notranslate">&lt;link href="normalize.css" rel="stylesheet"&gt;
+&lt;link href="skeleton.css" rel="stylesheet"&gt;</pre>
+
+<p>Скелет включает в себя больше, чем сетку - он также содержит CSS для типографики и других элементов страницы, которые вы можете использовать в качестве отправной точки. На данный момент мы оставим их по умолчанию, но именно эта сетка нас действительно интересует.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Нормализация - очень полезная небольшая библиотека CSS, написанная Николасом Галлахером, которая автоматически делает некоторые полезные основные исправления макета и делает стиль элементов по умолчанию более согласованным в разных браузерах.</p>
+</div>
+
+<p>Мы будем использовать аналогичный HTML для нашего предыдущего примера. Добавьте в свой HTML-код следующее:</p>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col"&gt;1&lt;/div&gt;
+    &lt;div class="col"&gt;2&lt;/div&gt;
+    &lt;div class="col"&gt;3&lt;/div&gt;
+    &lt;div class="col"&gt;4&lt;/div&gt;
+    &lt;div class="col"&gt;5&lt;/div&gt;
+    &lt;div class="col"&gt;6&lt;/div&gt;
+    &lt;div class="col"&gt;7&lt;/div&gt;
+    &lt;div class="col"&gt;8&lt;/div&gt;
+    &lt;div class="col"&gt;9&lt;/div&gt;
+    &lt;div class="col"&gt;10&lt;/div&gt;
+    &lt;div class="col"&gt;11&lt;/div&gt;
+    &lt;div class="col"&gt;12&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col"&gt;13&lt;/div&gt;
+    &lt;div class="col"&gt;14&lt;/div&gt;
+    &lt;div class="col"&gt;15&lt;/div&gt;
+    &lt;div class="col"&gt;16&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p><br>
+ Чтобы начать использовать Skeleton, нам нужно предоставить оболочку {{htmlelement ("div")}} класс <code>container</code> - это уже включено в наш HTML. Это центрирует контент с максимальной шириной 960 пикселей. Вы можете видеть, как теперь коробки не становятся шире, чем 960 пикселей.</p>
+
+<p>Вы можете посмотреть в файле skeleton.css, чтобы увидеть CSS, который используется, когда мы применяем этот класс. <code>&lt;div&gt;</code> центрируется с использованием <code>auto</code> левого и правого полей, а отступы в 20 пикселей применяются слева и справа. Скелет также устанавливает свойство {{cssxref ("box-sizing")}} в <code>border-box</code>, как мы делали это раньше, поэтому дополнение и границы этого элемента будут включены в общую ширину.</p>
+
+<pre class="brush: css notranslate">.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+}</pre>
+
+<p>Элементы могут быть только частью сетки, если они находятся внутри строки, так как в нашем предыдущем примере нам нужен дополнительный <code>&lt;div&gt;</code> или другой элемент с классом строки (<code>row</code>), вложенным между <code>content</code> <code>&lt;div&gt;</code> и нашим контейнером фактического содержимого <code>&lt;div&gt;</code>. Мы уже это сделали.</p>
+
+<p>Теперь давайте выложим контейнеры. Скелет основан на сетке из 12 столбцов. В верхних строках нужны классы из <code>one column</code>, чтобы они охватывали один столбец.</p>
+
+<p>Добавьте их сейчас, как показано в следующем фрагменте:</p>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="one column"&gt;1&lt;/div&gt;
+    &lt;div class="one column"&gt;2&lt;/div&gt;
+    &lt;div class="one column"&gt;3&lt;/div&gt;
+    /* and so on */
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>Затем дайте контейнеры во втором классе классов, объясняющие количество столбцов, которые они должны охватывать, например:</p>
+
+<pre class="brush: html notranslate">&lt;div class="row"&gt;
+  &lt;div class="one column"&gt;13&lt;/div&gt;
+  &lt;div class="six columns"&gt;14&lt;/div&gt;
+  &lt;div class="three columns"&gt;15&lt;/div&gt;
+  &lt;div class="two columns"&gt;16&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>Попробуйте сохранить свой HTML-файл и загрузить его в свой браузер, чтобы увидеть эффект.</p>
+
+<div class="note">
+<p>Примечание. Если вам не удается заставить этот пример работать, попробуйте сравнить его с нашим <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> - файлом (см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">в режиме реального времени</a>).</p>
+</div>
+
+<p>Если вы посмотрите в файле skeleton.css, вы увидите, как это работает. Например, у Skeleton определены следующие элементы стиля с добавленными к ним классами «три столбца».</p>
+
+<pre class="brush: css notranslate">.three.columns { width: 22%; }</pre>
+
+<p>Весь Skeleton (или любая другая структура сетки) выполняет настройку предопределенных классов, которые вы можете использовать, добавив их в свою разметку. Это точно так же, как если бы вы сами делали расчет этих процентов.</p>
+
+<p>Как вы можете видеть, нам нужно написать очень мало CSS при использовании Skeleton. Он касается всех плавающих для нас, когда мы добавляем классы в нашу разметку. Именно эта способность нести ответственность за компоновку над чем-то еще, что делает использование рамки для сетчатой системы неотразимым выбором!</p>
+
+<p>Skeleton - это более простая сетка, чем некоторые из структур, с которыми вы можете столкнуться. Сетки в больших рамках, таких как Bootstrap и Foundation, предлагают больше функциональности и дополнительные точки останова для различной ширины экрана. Тем не менее, все они работают аналогичным образом - добавив определенные классы в свою разметку, вы можете контролировать, как элемент выложен с использованием предопределенной сетки.</p>
+
+<h2 id="Родные_CSS_Сетки_с_Grid_Layout">Родные CSS Сетки с Grid Layout</h2>
+
+<p>В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы еще не можем использовать встроенную сетовую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout Module</a>).</p>
+
+<p>В настоящее время вы можете использовать только те методы, которые мы покажем вам в браузерах, которые реализуют макет сетки CSS «за флагом» - это означает, что он в настоящее время реализован, но в экспериментальном состоянии, которое вам нужно включить.</p>
+
+<p>В Firefox, например, вам нужно перейти к URL-адресу <code>about: config</code>, выполнить поиск по предпочтению <code>layout.css.grid.enabled</code> и дважды щелкнуть его, чтобы включить CSS-сетки. Вы можете узнать, как использовать его в других браузерах, посетив <a href="http://gridbyexample.com/browsers">Grid by Example</a>.</p>
+
+<p>Мы рассмотрели структуру Скелетной сетки выше - как и другие сторонние решетки и даже ручные сетки, для этого требуется добавить <code>&lt;div&gt;</code> для формирования строк, а затем указать количество столбцов, которые будут охватывать элементы в этих рядах.</p>
+
+<p>С помощью CSS Grid Layout вы можете полностью указать свою сетку в CSS, не добавляя эти вспомогательные классы в разметку вообще. Давайте рассмотрим наш простой пример и посмотрим, как мы будем создавать тот же макет с помощью CSS Grid Layout.</p>
+
+<h3 id="Создание_собственной_сетки">Создание собственной сетки</h3>
+
+<p>Сначала начните с создания локальной копии файла <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid.html">css-grid.html</a>. Он содержит следующую разметку:</p>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="col"&gt;1&lt;/div&gt;
+  &lt;div class="col"&gt;2&lt;/div&gt;
+  &lt;div class="col"&gt;3&lt;/div&gt;
+  &lt;div class="col"&gt;4&lt;/div&gt;
+  &lt;div class="col"&gt;5&lt;/div&gt;
+  &lt;div class="col"&gt;6&lt;/div&gt;
+  &lt;div class="col"&gt;7&lt;/div&gt;
+  &lt;div class="col"&gt;8&lt;/div&gt;
+  &lt;div class="col"&gt;9&lt;/div&gt;
+  &lt;div class="col"&gt;10&lt;/div&gt;
+  &lt;div class="col"&gt;11&lt;/div&gt;
+  &lt;div class="col"&gt;12&lt;/div&gt;
+  &lt;div class="col"&gt;13&lt;/div&gt;
+  &lt;div class="col span6"&gt;14&lt;/div&gt;
+  &lt;div class="col span3"&gt;15&lt;/div&gt;
+  &lt;div class="col span2"&gt;16&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>На этот раз у нас есть родительский <code>&lt;div&gt;</code> с классом обертки (<code>wrapper</code>), а затем все дочерние элементы просто появляются непосредственно внутри обертки - никаких элементов строки. Мы добавили класс к элементам, которые должны охватывать более одного столбца.</p>
+
+<p>Теперь добавьте следующее в элемент {{htmlelement ("style")}}:</p>
+
+<pre class="brush: css notranslate">.wrapper {
+  width: 90%;
+  max-width: 960px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-gap: 20px;
+}
+
+.col {
+  background: rgb(255,150,150);
+}</pre>
+
+<p>Здесь мы устанавливаем правило <code>.wrapper</code>, поэтому оно составляет 90% от ширины тела, с центром и имеет {{cssxref ("max-width")}} 960px.</p>
+
+<p>Теперь для свойств сетки CSS. Мы можем объявить сетку, используя значение <code>grid</code> свойства {{cssxref ("display")}}, установить желоб с свойством {{cssxref ("grid-gap")}}, а затем создать сетку из 12 столбцов равной ширине, используя {{cssxref ("grid-template-columns")}}, новую функцию <code>repeat()</code> и новую единицу, определенную для макета сетки - блок <code>fr</code>.</p>
+
+<p>Блок <code>fr</code> представляет собой блок фракции - он описывает долю доступного пространства в контейнере сетки. Если все столбцы равны <code>1fr</code>, каждый из них занимает равное количество места. Это устраняет необходимость вычислять проценты для создания гибкой сетки.</p>
+
+<p>Создав сетку, правила автоматического размещения сетки немедленно выведут наши коробки в этой сетке, и мы получим гибкую сетку с двенадцатью столбцами.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13907/css-grid-incomplete.png" style="display: block; height: 70px; margin: 0px auto; width: 971px;"></p>
+
+<p>Чтобы создать контейнеры, которые охватывают несколько треков столбцов в сетке, мы можем использовать свойство {{cssxref ("grid-column")}}. Чтобы охватить 6 столбцов, например:</p>
+
+<pre class="brush: css notranslate">.span6 {
+  grid-column: auto / span 6;
+}</pre>
+
+<p>И для span 3:</p>
+
+<pre class="brush: css notranslate">.span3 {
+  grid-column: auto / span 3;
+}</pre>
+
+<p>Значение перед косой чертой - это начальная строка - в этом случае мы явно не устанавливаем это и не позволяем браузеру размещать элемент на следующей доступной строке. Затем мы можем установить его на 6, 3 или сколько угодно строк.</p>
+
+<p>Добавьте нижеследующую часть вашего CSS:</p>
+
+<pre class="brush: css notranslate">.span2 { grid-column: auto / span 2;}
+.span3 { grid-column: auto / span 3;}
+.span4 { grid-column: auto / span 4;}
+.span5 { grid-column: auto / span 5;}
+.span6 { grid-column: auto / span 6;}
+.span7 { grid-column: auto / span 7;}
+.span8 { grid-column: auto / span 8;}
+.span9 { grid-column: auto / span 9;}
+.span10 { grid-column: auto / span 10;}
+.span11 { grid-column: auto / span 11;}
+.span12 { grid-column: auto / span 12;}</pre>
+
+<p>Попробуйте сохранить и обновить, и вы увидите, что контейнеры охватывают несколько столбцов, если это необходимо. Круто!</p>
+
+<p>Сетки CSS являются <strong>двумерными</strong>, так как макет растет и сжимается, элементы остаются выровненными по горизонтали и по вертикали.</p>
+
+<p>Вы можете проверить это, заменив последние 4 col <code>&lt;div&gt;</code> s следующим:</p>
+
+<pre class="brush: css notranslate">&lt;div class="col"&gt;13some&lt;br&gt;content&lt;/div&gt;
+&lt;div class="col span6"&gt;14this&lt;br&gt;is&lt;br&gt;more&lt;br&gt;content&lt;/div&gt;
+&lt;div class="col span3"&gt;15this&lt;br&gt;is&lt;br&gt;less&lt;/div&gt;
+&lt;div class="col span2"&gt;16&lt;/div&gt;</pre>
+
+<p>Здесь мы намеренно добавили некоторые фрагменты строки ({{htmlelement ("br")}}), чтобы заставить некоторые из столбцов стать выше других. Если вы попытаетесь сохранить и обновить, вы увидите, что столбцы регулируют их высоту, как самый высокий контейнер, поэтому все остается аккуратным.</p>
+
+<p>Окончательный макет выглядит так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13909/css-grid-finished.png" style="display: block; height: 130px; margin: 0px auto; width: 972px;"></p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Если вам не удается заставить этот пример работать, вы можете проверить свой код на нашу <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid-finished.html">законченную версию</a> (также смотрите, как она <a href="https://mdn.github.io/learning-area/css/css-layout/grids/css-grid-finished.html">работает в прямом эфире</a>).</p>
+</div>
+
+<h3 id="Другие_полезные_функции_сетки_CSS">Другие полезные функции сетки CSS</h3>
+
+<p>С сетками CSS нам не нужно толкать вещи вдоль полей, чтобы их компенсировать. Попробуйте внести эти изменения в свой CSS:</p>
+
+<pre class="brush: css notranslate">.content {
+  grid-column: 2 / 8;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div class="col span2 content"&gt;16&lt;/div&gt;</pre>
+
+<p>Контейнер 16 теперь будет охватывать столбцы с 2 по 8, в следующей доступной строке, где он может поместиться.</p>
+
+<p>Мы можем так же легко группировать строки так же, как и столбцы:</p>
+
+<pre class="brush: css notranslate">.content {
+  grid-column: 2 / 8;
+  grid-row: 3 / 5;
+}</pre>
+
+<p>Контейнер 16 теперь будет охватывать строки с 3 по 5, а также столбцы с 2 по 8.</p>
+
+<p>Нам также не нужно использовать маржу для фальшивых желобов или явно рассчитать их ширину - сетка CSS имеет эту функциональность, встроенную прямо в свойство <code>grid-gap</code>.</p>
+
+<p>Мы просто касаемся поверхности того, что возможно с помощью CSS Grid Layout, но главное, что нужно понять в контексте этой статьи, это то, что вам не нужно создавать сетку с сеткой - она одна. Вы можете написать CSS, который помещает элемент непосредственно в предопределенную сетку. Это первый раз, когда это было возможно с помощью CSS и это улучшится, когда поддержка браузера закрепится.</p>
+
+<h3 id="Активное_обучение_Напишите_свою_собственную_простую_сетку">Активное обучение: Напишите свою собственную простую сетку</h3>
+
+<p>В макете «<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS</a>» мы включили раздел о <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction#CSS_tables">CSS-таблицах</a>, который включал простой пример формы (см. Пример <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html live</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">исходный код</a>). Мы хотели бы, чтобы вы взяли копию этого примера и выполните следующие действия:</p>
+
+<ol>
+ <li>Удалите элементы <code>&lt;div&gt;</code> внутри <code>&lt;form&gt;</code> - вам больше не нужны эти данные, поскольку CSS-сетки могут обрабатывать размещение содержимого по строкам и столбцам для вас.</li>
+ <li>Используйте свойства сетки CSS, чтобы создать макет для вашей формы как можно ближе к оригиналу. Вам нужно будет установить ширину на содержащем элементе и подумать о том, как установить пробелы в столбцах, а также пробелы в строке.</li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание</strong>: Сначала выполните это и если вы действительно застряли, вы можете проверить свой код на примере <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-tables-as-grid.html">css-tables-as-grid.html</a>. Не обманывайте - сначала попробуйте упражнение!</p>
+</div>
+
+<h2 id="Резюме">Резюме</h2>
+
+<p>Прочитав эту статью, вы должны теперь понять, как grid-схемы и grid-структуры работают в CSS. Вы также заглянули в будущее сетки CSS и теперь должны понимать, что используемые нами grid-сетки - это, по сути, стоп-решение, пока у нас не будет широко распространенного способа достижения этого в CSS.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></li>
+</ul>
diff --git a/files/ru/learn/css/css_layout/index.html b/files/ru/learn/css/css_layout/index.html
new file mode 100644
index 0000000000..a4fcfa8ac5
--- /dev/null
+++ b/files/ru/learn/css/css_layout/index.html
@@ -0,0 +1,84 @@
+---
+title: CSS layout
+slug: Learn/CSS/CSS_layout
+tags:
+  - Beginner
+  - CSS
+  - Floating
+  - Grids
+  - Guide
+  - Landing
+  - Layout
+  - Learn
+  - Module
+  - Multiple column
+  - NeedsTranslation
+  - Positioning
+  - TopicStub
+  - flexbox
+  - float
+  - Верстка
+  - Сетка
+  - позиционирование
+  - разметка страницы
+translation_of: Learn/CSS/CSS_layout
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение разметки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как иcпользовать современные методы разметки, такие как Flexbox и CSS grid, и некоторые традиционные методы разметки, которые все ещё применяются.</p>
+
+<h2 id="Необходимые_условия">Необходимые условия</h2>
+
+<p>Перед изучением этого раздела вы должны:</p>
+
+<ol>
+ <li>Иметь общее представление об HTML, как указано в разделе <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступление в HTML</a>.</li>
+ <li>Ориентироваться в основах CSS, как указано в разделе <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a>.</li>
+ <li>Понимать, как <a href="/en-US/docs/Learn/CSS/Styling_boxes">стилизовать блочные элементы</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание</strong>: Если вы работаете на компьютере/планшете/других устройствах, где нет возможности создать ваш собственный файл, вы можете попробовать (большую часть) примеры кода в онлайн-программах для написания кода  <a href="http://jsbin.com/">JSBin</a> и <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Руководство">Руководство</h2>
+
+<p>Эти разделы содержат инструкции по основным инструментам и методам верстки, доступным в CSS. На последнем уроке у Вас будет возможность оценить понимание пройденного материала посредством вёрстки веб-страницы.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS вёрстку</a></dt>
+ <dd>В этом разделе будут описаны некоторые возможности CSS вёрстки, которых мы уже касались в предыдущих модулях - различные значения {{cssxref("display")}}  — и представлены некоторые концепции, которые мы рассмотрим в этом модуле.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></dt>
+ <dd>Элементы на веб-страницах размещаются в соответствии с нормальным потоком - пока мы не сделаем что-либо, чтобы это изменить. Этот раздел объясняет основы нормального потока как фундамент для изучения влияния на него.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
+ <dd><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> - это метод одномерной верстки для размещения элементов в строках или столбцах. Элементы растягиваются, чтобы заполнить дополнительное пространство и сжимаются, чтобы поместиться в меньшее пространство. Данный раздел объясняет фундаментальные принципы.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt>
+ <dd>CSS Grid Layout - это двумерная система верстки для веб. Она позволяет вам размещать контент в строках и столбцах и имеет множество возможностей, которые упрощают построение сложных макетов. Этот раздел даст вам все, что нужно знать для начала работы с макетом страницы.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt>
+ <dd>Изначально созданное для плавающих изображений внутри текстовых блоков, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания мульти-колоночной верстки веб-страниц. С появлением Flexbox и Grid оно вернулось к первоначальному предназначению, как объясняется в этом разделе.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></dt>
+ <dd>Позиционирование позволяет вам брать элементы из нормального потока и изменять их поведение, например, заставляет находиться друг под другом или всегда оставаться в одном и том же месте внутри окна просмотра браузера. В этом разделе объясняются различные значения {{cssxref("position")}} и способы их применения.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Мульти-колоночная верстка</a></dt>
+ <dd>Спецификация мульти-колоночной верстки дает вам способ размещения содержимого  в столбцах по аналогии с версткой газет.  Этот раздел объясняет, как использовать эту возможность.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы верстки</a></dt>
+ <dd>Grid-системы - это очень распространенная возможность, используемая в CSS layouts, и до CSS Grid Layout они, как правило, реализовывались с помощью floats или других возможностей верстки. Вы представляете свою верстку в виде заданного числа столбцов (например, 4 или 6), а затем вы помещаете содержимое в эти воображаемые столбцы. В этом разделе мы рассмотрим, как работают эти старые методы, чтобы вы понимали, как они использовались, если столкнётесь со старыми проектами.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старыми браузерами</a></dt>
+ <dd>
+ <p>В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы верстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появления новых возможностей, для различных браузеров будут приорететны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.</p>
+ </dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Фундаментальное понятие верстки</a></dt>
+ <dd>Оценка ваших знаний различных методов верстки посредством вёрстки веб-страницы.</dd>
+</dl>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Практические примеры позиционирования</a></dt>
+ <dd>Этот раздел показывает, как построить пример из реальной жизни, чтобы проиллюстрировать, что вы можете сделать при помощи позиционирования.</dd>
+</dl>
diff --git a/files/ru/learn/css/css_layout/introduction/index.html b/files/ru/learn/css/css_layout/introduction/index.html
new file mode 100644
index 0000000000..fd443580da
--- /dev/null
+++ b/files/ru/learn/css/css_layout/introduction/index.html
@@ -0,0 +1,705 @@
+---
+title: Введение в CSS вёрстку
+slug: Learn/CSS/CSS_layout/Introduction
+translation_of: Learn/CSS/CSS_layout/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства {{cssxref("display")}}, и разберем некоторые концепции, которые будут рассмотрены в этой статье. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Требования:</th>
+   <td>Базовые знания HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">введение в HTML</a>), и понимание как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">введение в CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Предоставить вам обзор методов компоновки страниц CSS. Каждый метод может быть изучен более подробно в последующих статьях. </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Методы компановки страниц CSS позволяют нам использовать элементы, расположенные на веб-странице, и контролировать где они находятся относительно их позиции по умолчанию, других элементов вокруг них, их родителей или главного окна. Методы компоновки страниц, которые мы подробно рассмотрим в этой статье.</p>
+
+<ul>
+ <li>Нормальный поток</li>
+ <li>Свойство {{cssxref("display")}}</li>
+ <li>Flexbox</li>
+ <li>Grid</li>
+ <li>Floats</li>
+ <li>Позиционирование</li>
+ <li>Макет таблицы</li>
+ <li>Многоколоночный макет</li>
+</ul>
+
+<p>Каждый метод имеет свои преимущества и недостатки и ни одна техника не предназначена для использования в изоляции от других. Разбирая данные методы, вы поймете, какой из них лучший инструмент разметки для каждой задачи.</p>
+
+<h2 id="Normal_flow">Normal flow</h2>
+
+<p>Нормальный поток (Normal flow) это то как ваш браузер отображает по умолчанию, когда вы не меняли расположение элементов на странице. Взглянем на пример:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;I love my cat.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Buy cat food&lt;/li&gt;
+  &lt;li&gt;Exercise&lt;/li&gt;
+  &lt;li&gt;Cheer up friend&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;The end!&lt;/p&gt;</pre>
+
+<p>По умолчанию ваш браузер выведет этот код следующим образом:</p>
+
+<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p>
+
+<p>Заметьте, что HTML элементы здесь отображаются точно в таком порядке, как и в исходном коде — первый параграф, за ним неупорядоченный список, затем второй параграф.</p>
+
+<p>Элементы, выводящеся один <em>под</em> другим, называются <em>блочными</em>, в противоположность <em>строчным</em>, которые выводятся один <em>вслед</em> за другим, как отдельные слова в обычном абзаце текста.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Направление, в котором отображается содержимое блока, называется Block Direction. Block Direction вертикально в языках типа Английского, имеющих горизонтальное направление письма. В языках, типа Японского, имеющих вертикальное направление письма, Block Direction горизонтально. Соответствующее Inline Direction отвечает за  направление отображения строковых элементов (таких как предложение).</p>
+</div>
+
+<p>Когда вы используете CSS для создания разметки, вы двигаете элементы относительно их обычного расположения, но для многих элементов на вашей странице их обычное положение - это именно то, что вам подойдет. Именно поэтому важно начинать верстку с создания правильно организованного HTML документа, для того, чтобы базовое расположение элементов впоследствии работало на вас.</p>
+
+<p>Методы CSS, которыми вы можете управлять разметкой элементов:</p>
+
+<ul>
+ <li><strong>Свойство {{cssxref("display")}} </strong>— Стандартные значениея  <code>block</code>, <code>inline</code> или <code>inline-block </code>могут изменять поведение элементов в обычном потоке (см.подробнее <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Types of CSS boxes</a>). Также можно менять сами методы разметки такими значениями свойства <code>display</code>, как <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> или <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li>
+ <li><strong>Floats</strong> — Применение значения {{cssxref("float")}} типа <code>left</code> может заставить элемент блочного типа "прилепить" содержимое к одной стороне элемента, как иногда изображения обволакиваются текстом на газетных страницах.</li>
+ <li><strong>Свойство {{cssxref("position")}} </strong>— Позволяет точно контролировать положение блоков внутри других блоков. <code>static</code> позиционирование является стандартным, но также можно применять другие значения свойства, например фиксированное в углу экрана.</li>
+ <li><strong>Макет Таблицы</strong> — свойства для разметки таблиц могут быть использованы и для нетабличных элеметов, с помощью <code>display: table</code> и соотвествующих свойств.</li>
+ <li><strong>Multi-column layout</strong> — <a href="/en-US/docs/Web/CSS/CSS_Columns">Многоколоночный макет</a> поможет расположить содержимое столбцами, как в газетах.</li>
+</ul>
+
+<h2 id="Свойство_display">Свойство display </h2>
+
+<p>Значения свойства <code>display</code> являются главными методами верстки разметки страницы в CSS. Это свойство позволяет нам менять то, как что-то отображается по умолчанию. Каждый элемент по умолчанию имеет свойство <code>display</code>, влияющее на то, как этот элемент отображается. Например, параграфы на английском располагаются один под другим только потому что они имеют по умолчанию свойство  <code>display: block</code>. Если же вы создадите ссылку внутри параграфа, эта ссылка будет отображаться в общем потоке с остальным текстом, без переноса на новую строку. Это потому что у элемента {{htmlelement("a")}} по умолчанию установлено свойство <code>display: inline</code>.</p>
+
+<p>Вы можете изменить дефолтное поведение display. К примеру,  {{htmlelement("li")}} отображается как <code>display: block</code> по умолчанию, это означает что элементы списка отображаются один за другим в нашем документе.Если мы изменим значение display на <code>inline</code> они будут отображаться друг за другом, как это делают слова в предложении. Тот факт, что вы можете изменить значение display для любого элемента означает, что вы можете выбирать HTML элементы по их семантическому значению, не беспокоясь о том как они будут выглядеть. То как они выглядят это то, что вы можете поменять.</p>
+
+<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">В дополнение к возможности менять значение с </span></font><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> </span></font>block</code> на <code>inline</code> и обратно, есть и другие возможности вёрстки с другими значениями  <code>display</code>. Однако, в основном все они требуют использования дополнительных свойств. Двумя наиболее важными  для задач вёрстки страниц являются <code>display: flex</code> и <code>display: grid</code>.</p>
+
+<h2 id="Flexbox">Flexbox</h2>
+
+<p>Flexbox (сокращение от <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a>) это модуль, разработанный для облегчения верстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство <code>display: flex</code> для родительского элемента тех элементов, к которым хотите применить этот тип верстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере.</p>
+
+<p>Разметка HTML, представленная ниже, состоит из элемента <code>wrapper</code>, включающего в себя три {{htmlelement("div")}} элемента. По умолчанию все они будут изображаться как блочные, один под другим.</p>
+
+<p>Но если мы добавим свойство <code>display: flex</code> родительскому элементу, три дочерних сгруппируются в колонки. Всё это потому что они сами становятся элементами <em>flex </em>и наследуют некоторые свойства, установленные контейнеру, в котором они находятся. Они выстраиваются в строку, потому что начальное значение  {{cssxref("flex-direction")}} это <code>row</code>. Высота становится равной высоте самого высокого элемента, потому что начальное значение {{cssxref("align-items")}} установлено как <code>stretch</code>. Это значит, элементы вытягиваются по высоте контейнера, который в этом случае сам принимает высоту самого высокого элемента. Все они группируются в начале контейнера, оставляя пустое пространство в конце строки.</p>
+
+<div id="Flex_1">
+<div class="hidden">
+<h6 id="Flexbox_Example_1">Flexbox Example 1</h6>
+
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper &gt; div {
+    border-radius: 5px;
+    background-color: rgb(207,232,220);
+    padding: 1em;
+}
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: flex;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p>
+
+<p>В дополнение к свойствам, применяемым к контейнеру, существуют свойства, применяемые ко вложенным элементам. Эти свойства помимо всего прочего, могут менять размеры элемента, растягивая его и заставляя занимать всё доступное место.</p>
+
+<p>В качестве простого примера, добавим свойство {{cssxref("flex")}}  ко всем дочерним элементам, со значением <code>1</code>. Это заставит все элементы растянуться и заполнить контейнер, не оставляя свободного места в конце строки. Если освободится дополнительное пространство, элементы растянутся; если доступное местро убавится - элементы сожмутся. Также, если вы добавите дополнительный элемент, остальные элементы  станут меньше, для того, чтобы все они были одного размера.</p>
+
+<div id="Flex_2">
+<div class="hidden">
+<h6 id="Flexbox_Example_2">Flexbox Example 2</h6>
+
+<pre class="brush: css notranslate">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: flex;
+}
+
+.wrapper &gt; div {
+    flex: 1;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;One&lt;/div&gt;
+    &lt;div class="box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Это было очень краткое введение в то что возможно во Flexbox, чтобы узнать больше см. нашу статью <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p>
+</div>
+
+<h2 id="Grid_Layout">Grid Layout</h2>
+
+<p>В то время как flexbox предназначен для одномерной разметки, Grid Layout предназначен для двумерной — выстраивая предметы в ряды и столбцы.</p>
+
+<p>Еще раз, вы можете переключиться на Grid Layout при помощи конкретного значения отображения — <code>display: grid</code>. Пример ниже использует разметку подобную примеру flex, а также мы определяем некоторые дорожки рядов и столбцов в родительском элементе, используя свойства {{cssxref("grid-template-rows")}} и {{cssxref("grid-template-columns")}} соответственно. Мы определили три столбца каждый по <code>1fr</code> и два ряда по <code>100px</code>. Мне не надо вводить какие-либо правила для дочерних элементов; <span class="tlid-translation translation" lang="ru"><span title="">они автоматически помещаются в ячейки, созданные нашей сеткой.</span></span></p>
+
+<div id="Grid_1">
+<div class="hidden">
+<h6 id="Grid_example_1">Grid example 1</h6>
+
+<pre class="brush: css notranslate">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;One&lt;/div&gt;
+    &lt;div class="box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box3"&gt;Three&lt;/div&gt;
+    &lt;div class="box4"&gt;Four&lt;/div&gt;
+    &lt;div class="box5"&gt;Five&lt;/div&gt;
+    &lt;div class="box6"&gt;Six&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p>
+
+<p>Когда у вас есть сетка (grid), мы можете точно размещать на ней свои элементы, а не полагаться на поведение авто-размещения, отмеченного выше. Ниже во втором примере мы задали ту же сетку, но в этот раз с тремя дочерними элементами. Мы задали начало и конец линии каждого элемента используя свойства {{cssxref("grid-column")}} и {{cssxref("grid-row")}}. Это заставляет элементы охватывать несколько дорожек.</p>
+
+<div id="Grid_2">
+<div class="hidden">
+<h6 id="Grid_example_2">Grid example 2</h6>
+
+<pre class="brush: css notranslate">    * {box-sizing: border-box;}
+
+    .wrapper &gt; div {
+        border-radius: 5px;
+        background-color: rgb(207,232,220);
+        padding: 1em;
+    }
+    </pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+    &lt;div class="box1"&gt;One&lt;/div&gt;
+    &lt;div class="box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box3"&gt;Three&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Эти два примера всего лишь малая часть мощности Grid layout; чтобы узнать больше см. нашу статью <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid Layout</a>.</p>
+</div>
+
+<p>Остальная часть этого руководства освещает другие методы разметок, которые менее важны для основной структуры разметки вашей страницы, но все равно могут помочь вам в достижении определенных задач. Понимая природу задачи каждой разметки, вы вскоре обнаружите, что, глядя на конкретный компонент вашего дизайна, часто будет ясно какой тип разметки подходит лучше всего.</p>
+
+<h2 id="Floats">Floats</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Делая элемент плавающим (float) мы меняем поведение этого элемента и элементов блочного уровня, следующих за ним в нормальном потоке.</span> <span title="">Элемент перемещается влево или вправо и удаляется из нормального потока (</span></span>normal flow<span class="tlid-translation translation" lang="ru"><span title="">), а окружающий контент обтекает плавающий элемент.</span></span></p>
+
+<p>Свойство {{cssxref("float")}} имеет четыре возможных значения:</p>
+
+<ul>
+ <li><code>left</code> — Элемент выравнивается слева и другие элементы обтекают его справа.</li>
+ <li><code>right</code> — Элемент выравнивается справа и другие элементы обтекают его слева.</li>
+ <li><code>none</code> — Не задает float совсем. Это значение по умолчанию.</li>
+ <li><code>inherit</code> — Определяет, что значение свойства <code>float</code> должно быть унаследовано от родительского элемента.</li>
+</ul>
+
+<p>В примере ниже мы задаем элементу <code>&lt;div&gt;</code> float - left и даем {{cssxref("margin")}} с правой стороны чтобы отталкивать текст от этого элемента. Это дает нам эффект того, что текст оборачивает этот блок <span class="tlid-translation translation" lang="ru"><span title="">и является большей частью того, что вам нужно знать о float, используемых в современном веб-дизайне.</span></span></p>
+
+<div id="Float_1">
+<div class="hidden">
+<h6 id="Floats_example">Floats example</h6>
+
+<pre class="brush: css notranslate">body {
+    width: 90%;
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+p {
+    line-height: 2;
+    word-spacing: 0.1rem;
+}
+
+.box {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Simple float example&lt;/h1&gt;
+
+&lt;div class="box"&gt;Float&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+</pre>
+
+<pre class="brush: css notranslate">
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Float полностью объяснен в нашем уроке по свойствам <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float и clear</a>. До таких методов как Flexbox и Grid Layout, float использовался как метод создания макетов колонок. Вы все еще можете встретить эти методы в интернете; мы рассмотрим их в уроке по <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">устаревшим методам разметки</a>.</p>
+</div>
+
+<h2 id="Методы_позиционирования">Методы позиционирования</h2>
+
+<p>Позиционирование позволяет вам перемещать элементы с места, где бы они располагались при нормальном потоке в другую локацию. Позиционирование не является методом создания основной разметки страницы, <span class="tlid-translation translation" lang="ru"><span title="">это больше об управлении и точной настройке положения определенных элементов на странице.</span></span></p>
+
+<p>Однако, существуют полезные методы точной разметки шаблонов, которые полагаются на свойство {{cssxref("position")}}. Понимание позиционирования также способствует пониманию нормального потока <span class="tlid-translation translation" lang="ru"><span title=""> и того, что значит вывести элемент из нормального потока.</span></span></p>
+
+<p>Существует пять типов позиционирования о которых вам следует знать:</p>
+
+<ul>
+ <li><strong>Static positioning (статическое позиционирование)</strong> — умолчание, которое получают все элементы — это все лишь значит "поместить элемент в его нормальную позицию в разметке документа — тут нет ничего особенного на что посмотреть".</li>
+ <li><strong>Relative positioning (относительное позиционирование) </strong>позволяет вам менять положение элемента на странице, перемещая его относительно его положения в нормальном потоке — в том числе заставляя его перекрывать другие элементы на странице.</li>
+ <li><strong>Absolute positioning (абсолютное позиционирование) </strong>полностью перемещает элемент из нормального потока разметки страницы так будто он находится на своем собственном отдельном слое. Оттуда вы можете исправлять его положение относительно краев <code>&lt;html&gt;</code> элемента страницы (или его ближайшего позиционированного элемента предка). Это является полезным при создании сложных эффектов разметки такие как вкладки, <span class="tlid-translation translation" lang="ru"><span title=""> в которых различные панели содержимого располагаются друг над другом</span></span> и отображаются и/или скрываются по желанию или информационные панели, которые располагаются на экране по умолчанию, но могут скользить по экрану используя кнопки управления.</li>
+ <li><strong>Fixed positioning (фиксированное позиционирование) </strong>очень похоже на абсолютное за исключением того, что он изменяет положение относительно окна просмотра браузера, а не другого элемента. Это полезно при создании эффектов таких как постоянное меню навигации, которое всегда остается в одном и том же месте на экране, в то время как другой контент прокручивается.</li>
+ <li><strong>Sticky positioning (липкое позиционирование) </strong>это новый метод позиционирования, который заставляет элемент вести себя как <code>position: static</code> пока не достигнет определенной линии окна просмотра и с этого момента будет вести себя как <code>position: fixed</code>.</li>
+</ul>
+
+<h3 id="Пример_простого_позиционирования">Пример простого позиционирования</h3>
+
+<p>Для ознакомления с этими методами верстки, мы покажем вам пару быстрых примеров. Наши примеры будут иметь одинаковый HTML, который выглядит следующим образом:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p class="positioned"&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;</pre>
+
+<p>Этот HTML по умолчанию будет стилизован, используя следующий CSS:</p>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+
+<p>Результат выглядит следующим образом:</p>
+
+<p>{{ EmbedLiveSample('Пример_простого_позиционирования', '100%', 300) }}</p>
+
+<h3 id="Relative_positioning">Relative positioning</h3>
+
+<p>Относительное (Relative) позиционирование позволяет вам смещать элемент относительно положения, которое он бы имел по умолчанию в нормальном потоке. Это значит, что вы можете выполнить такую задачу как перемещение иконки немного вниз, так чтобы он был на одной линии с текстовой меткой. Чтобы сделать это, мы можем добавить следующее правило для добавления относительного позиционирования.</p>
+
+<pre class="brush: css notranslate">.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>Здесь мы даем нашему среднему параграфу {{cssxref("position")}} со значением <code>relative</code> — сам по себе он ничего не делает, поэтому мы также добавляем свойства {{cssxref("top")}} и {{cssxref("left")}}. Они служат для перемещения задействованного элемента вниз и вправо — что может выглядеть как противоположность тому, чего вы ожидаете, но вам надо думать об этом так будто элемент отталкивается от левого или верхнего края, и в результате он перемещается вправо и вниз.</p>
+
+<p>Добавление этого кода даст следующий результат:</p>
+
+<div id="Relative_1">
+<div class="hidden">
+<h6 id="Relative_positioning_example">Relative positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Relative positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p class="positioned"&gt;This is my relatively positioned element.&lt;/p&gt;
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p>
+
+<h3 id="Absolute_positioning">Absolute positioning</h3>
+
+<p>Абсолютное (Absolute) позиционирование используется чтобы полностью удалить элемент из нормального потока и разместить его, используя смещение от краев содержащего блока.</p>
+
+<p>Возвращаясь к нашему примеру без позиционирования, мы можем добавить следующее CSS правило, чтобы реализовать абсолютное позиционирование:</p>
+
+<pre class="brush: css notranslate">.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<p>Здесь мы даем нашему среднему параграфу {{cssxref("position")}} со значением <code>absolute</code>, и все те же свойства {{cssxref("top")}} и {{cssxref("left")}} как ранее. Однако, добавление этого кода даст следующий результат:</p>
+
+<div id="Absolute_1">
+<div class="hidden">
+<h6 id="Absolute_positioning_example">Absolute positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Absolute positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;
+&lt;p class="positioned"&gt;This is my absolutely positioned element.&lt;/p&gt;
+&lt;p&gt;I am a basic block level element.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+    position: absolute;
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p>
+
+<p>Это совсем другое! Позиционированный элемент теперь совершенно отделен от разметки остальной страницы и располагется поверх него. Другие два параграфа теперь располагаются вместе так будто бы их позиционированный брат не существует. Свойства {{cssxref("top")}} и {{cssxref("left")}} имеют иной эффект на абсолютно позиционированные элементы, чем на относительно позиционированные элементы. В данном случае смещения были рассчитаны сверху и слева от страницы. Возможно изменить родительский элемент так что он становится контейнером, но мы рассмотрим это в уроке по <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">позиционированию</a>.</p>
+
+<h3 id="Fixed_positioning">Fixed positioning</h3>
+
+<p>Фиксированное (Fixed) позиционирование удаляет наш элемент из потока документа так же, как и абсолютное позиционирование. Однако, вместо смещения применяемого относительно контейнера, оно применяется относительно окна просмотра. Поскольку элемент остается зафиксированным относительно окна просмотра, мы можем создавать такие эффекты как меню, которое остается зафиксированным пока страница прокручивается под ним.</p>
+
+<p>Для этого примера наш HTML это три параграфа текста для того, чтобы мы могли прокручивать страницу и блок, которому мы дадим <code>position: fixed</code>.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fixed&lt;/div&gt;
+
+&lt;p&gt;Paragraph 1.&lt;/p&gt;
+&lt;p&gt;Paragraph 2.&lt;/p&gt;
+&lt;p&gt;Paragraph 3.&lt;/p&gt;
+</pre>
+
+<div id="Fixed_1">
+<div class="hidden">
+<h6 id="Fixed_positioning_example">Fixed positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+
+&lt;div class="positioned"&gt;Fixed&lt;/div&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+</pre>
+
+<pre class="brush: css notranslate">body {
+    width: 500px;
+    margin: 0 auto;
+}
+
+.positioned {
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p>
+
+<h3 id="Sticky_positioning">Sticky positioning</h3>
+
+<p>Липкое (Sticky) позиционирование — это последний тип позиционирования которой мы имеем в нашем распоряжении. Это микс дефолтного статического позиционирования с фиксированным позиционированием. когда элемент имеет <code>position: sticky</code> он будет прокручиваться в нормальном потоке пока не достигнет границы окна просмотра которую мы задали. С этого момента он (элемент) "прилипает", как если бы был применен <code>position: fixed</code>.</p>
+
+<div id="Sticky_1">
+<div class="hidden">
+<h6 id="Sticky_positioning_example">Sticky positioning example</h6>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;div class="positioned"&gt;Sticky&lt;/div&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+.positioned {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: чтобы узнать больше о позиционировании, см. нашу статью <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование.</a></p>
+</div>
+
+<h2 id="Макет_таблицы">Макет таблицы</h2>
+
+<p>HTML таблицы хороши для отображения табличных данных, но много лет назад — до того, как даже <span class="tlid-translation translation" lang="ru"><span title="">базовый CSS</span></span> <span class="tlid-translation translation" lang="ru"><span title="">надежно</span></span> поддерживался <span class="tlid-translation translation" lang="ru"><span title="">в браузерах </span></span>— веб-разработчики также использовали таблицы для разметки всей веб-страницы — размещая свои заголовки, нижние колонтитулы, различные колонки и т.д. в разных строках и столбцах таблиц. Это работало в то время, но оно имеет много проблем — разметка таблиц не гибкая, очень тяжелая в верстке, сложна в отладке, и семантически не верная. (например, пользователи скринридеров имеют проблемы с навигацией в табличном макете).</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">То, как таблица выглядит на веб-странице при использовании разметки таблицы, обусловлено набором свойств CSS, которые определяют макет таблицы</span></span>. <span class="tlid-translation translation" lang="ru"><span title="">Эти свойства могут использоваться для размещения элементов, которые не являются таблицами, использование, которое иногда описывается как «использование CSS таблиц».</span></span></p>
+
+<p>Пример ниже показывает одно такое использование; использование CSS таблиц для верстки должно считаться устаревшим методом на данный момент, для тех ситуаций, когда у вас старые браузеры без поддержки Flexbox или Grid.</p>
+
+<p>Давайте взглянем на пример. Во-первых, немного простой разметки, которая создает HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обернута в {{htmlelement("div")}}, для целей верстки.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;First of all, tell us your name and age.&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="fname"&gt;First name:&lt;/label&gt;
+    &lt;input type="text" id="fname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="lname"&gt;Last name:&lt;/label&gt;
+    &lt;input type="text" id="lname"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="age"&gt;Age:&lt;/label&gt;
+    &lt;input type="text" id="age"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>А теперь CSS для нашего примера. Большая часть CSS довольно обычна, за исключением использования свойства {{cssxref("display")}}. {{htmlelement("form")}}-е, {{htmlelement("div")}}-ам, а также {{htmlelement("label")}}-ам и {{htmlelement("input")}}-ам было сказано отображать как таблица, табличные строки и табличные ячейки соответственно — в принципе, они будут вести себя как разметка HTML таблицы, заставляя label-ы and input-ы красиво выравниваться по умолчанию. Все что мы должны будем сделать это добавить немного размеров, margin и т.д., чтобы все выглядело красивей, и на этом мы закончили.</p>
+
+<p>Вы заметите, что параграфу с описанием дано <code>display: table-caption;</code> — что заставляет его вести себя как табличный {{htmlelement("caption")}} — а <code>caption-side: bottom;</code> для того чтобы указать описанию располагаться снизу таблицы в целях дизайна, не смотря на то что разметка находится до <code>&lt;input&gt;</code> элементов в источнике. Это обеспечивает гибкостью.</p>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}</pre>
+
+<p>Это дает нам следующий результат:</p>
+
+<p>{{ EmbedLiveSample('Макет_таблицы', '100%', '170') }}</p>
+
+<p>Также вы можете посмотреть этот живой пример на <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (смотрите также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">исходный код</a>.)</p>
+
+<h2 id="Многоколоночный_макет">Многоколоночный макет</h2>
+
+<p>Модуль многоколоночного макета (multi-column layout) дает нам способ располагать контент в столбцах, подобно тому, как текст располагается в газете. Хоть и чтение <span class="tlid-translation translation" lang="ru"><span title="">столбцов вверх и вниз менее полезно в контексте веба, так как вы не хотите заставлять пользователей прокручивать вверх и вниз, размещение контента по столбцам может быть полезной техникой.</span></span></p>
+
+<p>Чтобы превратить блок в многоколоночный контейнер мы используем свойство {{cssxref("column-count")}}, которое говорит браузеру сколько колонок мы хотим иметь, либо свойство {{cssxref("column-width")}}, которое говорит браузеру заполнить контейнер <span class="tlid-translation translation" lang="ru"><span title="">как можно большим количеством столбцов, по крайней мере, такой ширины.</span></span></p>
+
+<p>В примере ниже мы начинаем с HTML блоком, который содержится в элементе <code>&lt;div&gt;</code> с классом <code>container</code>.</p>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+    &lt;h1&gt;Multi-column layout&lt;/h1&gt;
+
+    &lt;p&gt;Paragraph 1.&lt;/p&gt;
+    &lt;p&gt;Paragraph 2.&lt;/p&gt;
+
+&lt;/div&gt;
+</pre>
+
+<p>Мы используем <code>column-width</code> 200 px для этого контейнера, заставляя браузер создавать столько 200 пиксельных столбцов, сколько уместится в этом контейнере и затем разделить оставшееся пространство между созданными столбцами.</p>
+
+<div id="Multicol_1">
+<div class="hidden">
+<h6 id="Multicol_example">Multicol example</h6>
+
+<pre class="brush: html notranslate">    &lt;div class="container"&gt;
+        &lt;h1&gt;Multi-column Layout&lt;/h1&gt;
+
+        &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+
+        &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+    &lt;/div&gt;
+        </pre>
+
+<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre>
+</div>
+
+<pre class="brush: css notranslate">    .container {
+        column-width: 200px;
+    }</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Эта статья предоставила короткое обобщение всех методов макетов о которых вам следует знать. Читайте далее для получения дополнительной информации по каждому методу!</p>
+
+<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS верстку</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Многоколоночный макет</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы верстки</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Оценка понимания базовых макетов</a></li>
+</ul>
diff --git a/files/ru/learn/css/css_layout/positioning/index.html b/files/ru/learn/css/css_layout/positioning/index.html
new file mode 100644
index 0000000000..3fe1be6b00
--- /dev/null
+++ b/files/ru/learn/css/css_layout/positioning/index.html
@@ -0,0 +1,581 @@
+---
+title: Позиционирование
+slug: Learn/CSS/CSS_layout/Positioning
+translation_of: Learn/CSS/CSS_layout/Positioning
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">Позиционирование позволяет вам изымать элементы из нормального потока макета документа и заставить их вести себя по-другому; например, располагаться друг на друге или всегда оставаться на одном и том же месте внутри окна просмотра браузера. Эта статья объясняет разные значения {{cssxref("position")}} и как их использовать.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>
+    <p>Основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), идея о том как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>.)</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Изучить как работает CSS позиционирование.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> из нашего GitHub репозитория (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">исходный код здесь</a>) и используйте его как отправную точку.</p>
+
+<h2 id="Введение_в_позиционирование">Введение в позиционирование</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вся идея позиционирования заключается в том, чтобы позволить нам переопределять поведение базового потока документа, описанного выше, для того чтобы производить интересные эффекты. Что если вам захочется слегка изменить позицию каких-либо блоков внутри макета относительно их позиции в потоке макета по умолчанию? Ваш инструмент - позиционирование. Или </span></span><span class="tlid-translation translation" lang="ru"><span title="">если вы хотите создать элемент пользовательского интерфейса, который плавает над другими частями страницы и/или всегда располагается на одном и том же месте в окне браузера не зависимо от того сколько прокручивалась страница? Позиционирование делает возможным работу таких макетов.</span></span></p>
+
+<p>Существует несколько разных типов позиционирования<span class="tlid-translation translation" lang="ru"><span title="">, которые вы можете применить к элементам HTML. Для активации специфического типа позиционирования у элемента, мы используем свойство </span></span>{{cssxref("position")}}.</p>
+
+<h3 id="Статическое_позиционирование">Статическое позиционирование</h3>
+
+<p>Статическое позиционирование — это умолчание, которое получает каждый элемент, что всего лишь значит "поставить элемент в его нормальное положение в потоке макета документа — ничего особенного для рассмотрения".</p>
+
+<p>Чтобы продемонстрировать это и настроить ваш образец для будущих разделов, сначала добавьте <code>class</code> <code>positioned</code> ко второму {{htmlelement("p")}} в HTML:</p>
+
+<pre class="brush: html   notranslate">&lt;p class="positioned"&gt; ... &lt;/p&gt;</pre>
+
+<p>А теперь добавьте следующее правило в конец вашего CSS:</p>
+
+<pre class="brush: css   notranslate">.positioned {
+  position: static;
+  background: yellow;
+}</pre>
+
+<p>И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновленного цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете посмотреть живой пример на данном этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">см. исходный код</a>).</p>
+</div>
+
+<h3 id="Относительное_позиционирование">Относительное позиционирование</h3>
+
+<p>Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего свое место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление <code>position</code> в вашем коде:</p>
+
+<pre class="brush: css   notranslate">position: relative;</pre>
+
+<p>Если вы сохраните и обновите на данном этапе, в результате вы совсем не увидите изменений. Так как же вам модифицировать положение? Вам необходимо использовать свойства {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} которые мы объясним в следующем разделе.</p>
+
+<h3 id="Введение_в_top_bottom_left_и_right">Введение в top, bottom, left, и right</h3>
+
+<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} используются вместе с {{cssxref("position")}} чтобы указать куда именно перемещать позиционируемый элемент. Для того чтобы попробовать, добавьте следующее объявление к правилу <code>.positioned</code> в вашем CSS:</p>
+
+<pre class="brush: css   notranslate">top: 30px;
+left: 30px;</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: значения этих свойств могут принимать любые <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">единицы</a> которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д.</p>
+</div>
+
+<p>Если вы сейчас сохраните и обновите, вы получите примерно такой результат:</p>
+
+<div class="hidden">
+<pre class="brush: html   notranslate">&lt;h1&gt;Relative positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css   notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: relative;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Введение_в_top_bottom_left_и_right', '100%', 500) }}</p>
+
+<p>Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? <span class="tlid-translation translation" lang="ru"><span title="">Как бы нелогично это ни звучало</span></span> это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали <code>top: 30px;</code>, сила толкает блок, заставляя его перемещаться вниз на 30px.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: вы можете посмотреть пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">см. исходный код</a>).</p>
+</div>
+
+<h3 id="Абсолютное_позиционирование">Абсолютное позиционирование</h3>
+
+<p>Абсолютное позиционирование дает совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:</p>
+
+<pre class="brush: css   notranslate">position: absolute;</pre>
+
+<p>Если вы сохраните и обновновите, то вы должны увидеть нечто подобное:</p>
+
+<div class="hidden">
+<pre class="brush: html   notranslate">&lt;h1&gt;Absolute positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css   notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Абсолютное_позиционирование', '100%', 420) }}</p>
+
+<p>В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своем собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; <span class="tlid-translation translation" lang="ru"><span title="">опрокидывающиеся панели; ф</span></span><span class="tlid-translation translation" lang="ru"><span title="">ункции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы;</span> <span title="">и так далее...</span></span></p>
+
+<p>Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} ведут себя по-другому с абсолютным позиционированием. <span class="tlid-translation translation" lang="ru"><span title="">Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха "содержащего элемента" и 30px от левого края (В этом случае "содержащий элемент" является </span></span><strong><span class="tlid-translation translation" lang="ru"><span title="">исходным содержащим блоком</span></span></strong>. См. раздел ниже для дополнительной информации<span class="tlid-translation translation" lang="ru"><span title="">).</span></span></p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить <code>top: 0; bottom: 0; left: 0; right: 0;</code> и <code>margin: 0;</code> для вашего позиционируемого элемента и посмотрите, что произойдет! <span class="tlid-translation translation" lang="ru"><span title="">Потом снова все верните...</span></span></p>
+</div>
+
+<div class="note">
+<p><strong>Примечание</strong>: Да, margin-ы все еще влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.</p>
+</div>
+
+<div class="note">
+<p><strong>Примечание</strong>: вы можете посмотреть пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">см. исходный код</a>).</p>
+</div>
+
+<h3 id="Контекст_позиционирования">Контекст позиционирования</h3>
+
+<p>Какой элемент является "содержащим" относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block">Определение содержащего блока</a>).</p>
+
+<p>Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в <strong><span class="tlid-translation translation" lang="ru"><span title="">исходным </span></span>содержащем блоке</strong>. <span class="tlid-translation translation" lang="ru"><span title="">Исходный </span></span>содержащий блок <span class="tlid-translation translation" lang="ru"><span title="">имеет размеры области просмотра</span></span>, а также является блоком, содержащим элемент {{htmlelement("html")}}. <span class="tlid-translation translation" lang="ru"><span title="">Проще говоря</span></span>, абсолютно позиционируемый элемент будет отображаться за пределами элемента {{htmlelement("html")}} и будет расположен относительно исходного окна просмотра.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Позиционируемый элемент вложен в {{htmlelement ("body")}} в исходном HTML, но в конечном макете он расположен на </span></span>30px от верхнего и левого края страницы. Мы можем изменить <strong>контекст </strong> <strong>позиционирования </strong>— относительно какого элемента позиционируется позиционируемый элемент. <span class="tlid-translation translation" lang="ru"><span title="">Это делается путем установки позиционирования на одном из предков элемента </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен).</span> <span title="">Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего </span></span><code>body</code><span class="tlid-translation translation" lang="ru"><span title="">:</span></span></p>
+
+<pre class="brush: css   notranslate">position: relative;</pre>
+
+<p>Это должно дать следующий результат:</p>
+
+<div class="hidden">
+<pre class="brush: html   notranslate">&lt;h1&gt;Positioning context&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css   notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Контекст_позиционирования', '100%', 420) }}</p>
+
+<p>Позиционируемый элемент теперь располагается относительно элемента {{htmlelement("body")}}.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: вы можете посмотреть живой пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">см. исходный код</a>).</p>
+</div>
+
+<h3 id="Введение_в_z-index">Введение в z-index</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Все это абсолютное позиционирование </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">хорошее развлечение</span></span>, но кое-что чего мы еще не рассмотрели — когда элементы начинают перекрываться, что определяет который из элементов будет появляться поверх другого элемента? В примере, который мы видели все это время, у нас имеется только один позиционируемый элемент в контексте позиционирования, и он появляется сверху поскольку позиционируемые элементы "побеждают" не позиционированные элементы. Что же насчет того, когда мы имеем более одного?</p>
+
+<p>Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:</p>
+
+<pre class="brush: css   notranslate">p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}</pre>
+
+<p>На этом этапе вы увидите, что первый параграф окрашенный в лаймовый изъят из потока документа и помещен чуточку выше того места, где он был исходно. А <span class="tlid-translation translation" lang="ru"><span title="">также он расположен под оригинальным параграфом </span></span><code>.positioned</code>, где они оба перекрываются. Это потому что параграф <code>.positioned</code> является вторым параграфом по порядку в источнике и позже позиционируемые элементы в порядке источника выигрывают над ранее позиционируемыми элементами в порядке источника.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Можете ли вы изменить порядок наложения?</span></span> Да, можете, используя свойство {{cssxref("z-index")}}. "z-index" это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для <span class="tlid-translation translation" lang="ru"><span title="">определения позиции для таких вещей, как фоновые изображения</span></span> и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (<span class="tlid-translation translation" lang="ru"><span title="">во всяком случае,</span></span> для языков, направленных слева на право).</p>
+
+<p>У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (<span class="tlid-translation translation" lang="ru"><span title="">или что еще вам нравится иметь перед экраном). </span></span>Значения {{cssxref("z-index")}} влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют <code>z-index</code> <code>auto</code>, что фактически равно 0.</p>
+
+<p>Для того чтобы изменить порядок наложения, попробуйте объявить для вашего <code>p:nth-of-type(1)</code> правила:</p>
+
+<pre class="brush: css   notranslate">z-index: 1;</pre>
+
+<p>Теперь вы должны видеть законченный пример, с параграфом лаймового цвета сверху:</p>
+
+<div class="hidden">
+<pre class="brush: html   notranslate">&lt;h1&gt;z-index&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css   notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+  position: relative;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+
+p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+  z-index: 1;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Введение_в_z-index', '100%', 400) }}</p>
+
+<p>Обратите внимание что <code>z-index</code> принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: вы можете посмотреть живой пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">см. исходный код</a>).</p>
+</div>
+
+<h3 id="Фиксированное_позиционированиее">Фиксированное позиционированиее</h3>
+
+<p>А теперь давайте посмотрим на фиксированное позиционирование. Оно работает точно также как и абсолютное позиционирование, одним ключевым отличием: в то время как абсолютное позиционирование фиксирует элемент в месте относительно его ближайшего позиционированного предка (исходный содержащий блок если нет иного), <strong>фиксированное позиционирование </strong><em>обычно </em>фиксирует элемент в месте относительно <span class="tlid-translation translation" lang="ru"><span title="">видимой части области просмотра</span></span>, <span class="tlid-translation translation" lang="ru"><span title="">кроме случаев, когда один из его потомков</span></span> является фиксированным блоком <span class="tlid-translation translation" lang="ru"><span title="">из-за того, что его</span></span> <a href="/en-US/docs/Web/CSS/transform">свойству transform </a><span class="tlid-translation translation" lang="ru"><span title="">отличается от none. </span></span>Это значит, что вы можете создать <span class="tlid-translation translation" lang="ru"><span title="">элементы пользовательского интерфейса, которые зафиксированы на месте, </span></span> <span class="tlid-translation translation" lang="ru"><span title="">как постоянные меню навигации,</span></span> которые всегда видимы вне зависимости от того сколько прокручивается страница.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Давайте составим простой пример, чтобы показать, что мы имеем в виду. Во-первых, удалите существующие правила </span></span><code>p:nth-of-type(1)</code> и <code>.positioned</code> из вашего CSS.</p>
+
+<p>А теперь, обновите правило <code>body</code> удалив объявление <code>position: relative;</code> и добавьте фиксированную высоту как тут:</p>
+
+<pre class="brush: css   notranslate">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}</pre>
+
+<p>Теперь мы собираемся дать элементу {{htmlelement("h1")}} <code>position: fixed;</code>, а также заставить его располагаться на верху окна просмотра. Добавьте следующее правило в ваш CSS:</p>
+
+<pre class="brush: css   notranslate">h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin-top: 0;
+  background: white;
+  padding: 10px;
+}</pre>
+
+<p><code>top: 0;</code> необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даем ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.</p>
+
+<p>Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, <span class="tlid-translation translation" lang="ru"><span title="">при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним.</span></span> Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:</p>
+
+<pre class="brush: css   notranslate">p:nth-of-type(1) {
+  margin-top: 60px;
+}</pre>
+
+<p>Теверь вы должны видеть законченный пример:</p>
+
+<div class="hidden">
+<pre class="brush: html   notranslate">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+
+&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+
+&lt;p class="positioned"&gt;I'm not positioned any more...&lt;/p&gt;
+
+&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+
+&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css   notranslate">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+h1 {
+  position: fixed;
+  top: 0px;
+  width: 500px;
+  background: white;
+  padding: 10px;
+}
+
+p:nth-of-type(1) {
+  margin-top: 60px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Фиксированное_позиционированиее', '100%', 400) }}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: вы можете посмотреть живой пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">см. исходный код</a>).</p>
+</div>
+
+<h3 id="position_sticky">position: sticky</h3>
+
+<p>Доступно другое значение позиции называемое <code>position: sticky</code>, которое несколько новее чем другие. <span class="tlid-translation translation" lang="ru"><span title="">По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определенной пороговой точки (напрмер, 10px от вершины окна просмотра), после чего он становится фиксированным. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определенной точки, а затем задерживать в верхней части страницы.</span></span></p>
+
+<div id="Sticky_1">
+<div class="hidden">
+<h6 id="Sticky_positioning_example">Sticky positioning example</h6>
+
+<pre class="brush: html   notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+&lt;div class="positioned"&gt;Sticky&lt;/div&gt;
+
+&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+
+&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>
+
+<pre class="brush: css   notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+.positioned {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+}</pre>
+</div>
+
+<pre class="brush: css   notranslate">.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>
+
+<p>Интересное и общее использование <code>position: sticky</code> <span class="tlid-translation translation" lang="ru"><span title="">заключается </span></span>в создании индексных страниц <span class="tlid-translation translation" lang="ru"><span title="">с прокруткой, где разные заголовки липнут к верху страницы</span></span>, когда они достигают его. Разметка такого примера может выглядеть так:</p>
+
+<pre class="brush: html   notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+
+&lt;dl&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Apple&lt;/dd&gt;
+    &lt;dd&gt;Ant&lt;/dd&gt;
+    &lt;dd&gt;Altimeter&lt;/dd&gt;
+    &lt;dd&gt;Airplane&lt;/dd&gt;
+    &lt;dt&gt;B&lt;/dt&gt;
+    &lt;dd&gt;Bird&lt;/dd&gt;
+    &lt;dd&gt;Buzzard&lt;/dd&gt;
+    &lt;dd&gt;Bee&lt;/dd&gt;
+    &lt;dd&gt;Banana&lt;/dd&gt;
+    &lt;dd&gt;Beanstalk&lt;/dd&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Calculator&lt;/dd&gt;
+    &lt;dd&gt;Cane&lt;/dd&gt;
+    &lt;dd&gt;Camera&lt;/dd&gt;
+    &lt;dd&gt;Camel&lt;/dd&gt;
+    &lt;dt&gt;D&lt;/dt&gt;
+    &lt;dd&gt;Duck&lt;/dd&gt;
+    &lt;dd&gt;Dime&lt;/dd&gt;
+    &lt;dd&gt;Dipstick&lt;/dd&gt;
+    &lt;dd&gt;Drone&lt;/dd&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Egg&lt;/dd&gt;
+    &lt;dd&gt;Elephant&lt;/dd&gt;
+    &lt;dd&gt;Egret&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<p>CSS может выглядеть как показано ниже. В нормальном потоке элементы {{htmlelement("dt")}} будут прокручиваться вместе с контентом. Когда мы добавляем <code>position: sticky</code> к элементу {{htmlelement("dt")}}, вместе со значением {{cssxref("top")}} 0, поддерживающие браузеры будут приклеивать заголовки к вершине окна просмотра когда они будут достигать той позиции. каждый последующий заголовок будет затем заменять предыдущий при его прокрутке вверх к той позиции.</p>
+
+<pre class="brush: css   notranslate">dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+</pre>
+
+<div id="Sticky_2">
+<div class="hidden">
+<pre class="brush: css   notranslate">body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+
+dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+</pre>
+
+<pre class="brush: html   notranslate">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+
+&lt;dl&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Apple&lt;/dd&gt;
+    &lt;dd&gt;Ant&lt;/dd&gt;
+    &lt;dd&gt;Altimeter&lt;/dd&gt;
+    &lt;dd&gt;Airplane&lt;/dd&gt;
+    &lt;dt&gt;B&lt;/dt&gt;
+    &lt;dd&gt;Bird&lt;/dd&gt;
+    &lt;dd&gt;Buzzard&lt;/dd&gt;
+    &lt;dd&gt;Bee&lt;/dd&gt;
+    &lt;dd&gt;Banana&lt;/dd&gt;
+    &lt;dd&gt;Beanstalk&lt;/dd&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Calculator&lt;/dd&gt;
+    &lt;dd&gt;Cane&lt;/dd&gt;
+    &lt;dd&gt;Camera&lt;/dd&gt;
+    &lt;dd&gt;Camel&lt;/dd&gt;
+    &lt;dt&gt;D&lt;/dt&gt;
+    &lt;dd&gt;Duck&lt;/dd&gt;
+    &lt;dd&gt;Dime&lt;/dd&gt;
+    &lt;dd&gt;Dipstick&lt;/dd&gt;
+    &lt;dd&gt;Drone&lt;/dd&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Egg&lt;/dd&gt;
+    &lt;dd&gt;Elephant&lt;/dd&gt;
+    &lt;dd&gt;Egret&lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Sticky_2', '100%', 200) }}</p>
+
+<p>Липкие элементы являются "липкими" относительно ближайшего предка с "прокручивающимся механизмом", который определяется свойством <a href="/en-US/docs/Web/CSS/position">позиции</a> его предка.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: вы можете посмотреть живой пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">см. исходный код</a>).</p>
+</div>
+
+<h2 id="Проверь_свои_навыки!">Проверь свои навыки!</h2>
+
+<p>Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшую проверку что вы усвоили эту информацию прежде чем, отправитесь дальше — см. <a href="/en-US/docs/Learn/CSS/CSS_layout/Position_skills">Проверьте свои навыки: Позиционирование</a>.</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Я уверен, что вы повеселились с основами позиционирования; хотя это не является методом, который вы бы использовали для целого макета, все же как вы видите, существует много задач, подходящих для него.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Справка свойства {{cssxref("position")}}.</li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Примеры практического позиционирования</a>, для дополнительных полезных идей</li>
+</ul>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS макет</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Отзывчивый дизайн</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Руководство новичка в media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы макетов</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Базовая оценка понимания макета</a></li>
+</ul>
diff --git a/files/ru/learn/css/css_layout/practical_positioning_examples/index.html b/files/ru/learn/css/css_layout/practical_positioning_examples/index.html
new file mode 100644
index 0000000000..1dbbc6012b
--- /dev/null
+++ b/files/ru/learn/css/css_layout/practical_positioning_examples/index.html
@@ -0,0 +1,408 @@
+---
+title: Practical positioning examples
+slug: Learn/CSS/CSS_layout/Practical_positioning_examples
+translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">Основы позиционирования, приведенные в последней статье, мы теперь рассмотрим, как создать некоторые примеры реального мира, чтобы проиллюстрировать, какие вещи вы можете сделать с позиционированием.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Предпосылки:</th>
+   <td>Основы HTML (уроки <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), и идея о том, как работает CSS (уроки <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Чтобы получить представление о практичности позиционирования</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Информационный_блок_с_вкладками">Информационный блок с вкладками</h2>
+
+<p>Первый пример, который мы рассмотрим, - это классический информационный блок с вкладками - очень распространенная функция, используемая, когда вы хотите упаковать много информации в небольшую область. Сюда входят информационные приложения, такие как стратегии / военные игры, мобильные версии веб-сайтов, где экран и пространство ограничены и необходимы компактные информационные окна, где вы можете сделать много информации, не заполняя весь пользовательский интерфейс. Наш простой пример будет выглядеть так, как только мы закончим:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p>
+
+<div class="note">
+<p><strong>Примечание: </strong>Вы можете увидеть, что готовый пример работает в прямом эфире <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>). Проверьте его, чтобы понять, что вы будете строить в этом разделе статьи.</p>
+</div>
+
+<p>Возможно, вы думаете: «Почему бы просто не создавать отдельные вкладки в виде отдельных веб-страниц и просто иметь вкладки, переходящие на отдельные страницы, чтобы создать эффект?» Этот код был бы проще, да, но тогда каждый отдельный «просмотр страницы» на самом деле был бы вновь загруженной веб-страницей, что затрудняло бы сохранение информации между представлениями и интеграцию этой функции в более крупный дизайн пользовательского интерфейса. Кроме того, так называемые «одностраничные приложения» становятся очень популярными - особенно для мобильных веб-интерфейсов - потому что все, что обслуживается как один файл, сокращает количество HTTP-запросов, необходимых для просмотра всего содержимого, тем самым повышая производительность.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Некоторые веб-разработчики занимаются еще более быстрыми темпами, имея только одну страницу информации, загружаемую сразу и динамическое изменение информации, отображаемой с помощью функции JavaScript, такой как <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. На этом этапе вашего обучения мы хотим сохранить все как можно проще. Впоследствии есть JavaScript, но только немного.</p>
+</div>
+
+<p>Для начала мы хотели бы, чтобы вы создали локальную копию исходного HTML-файла — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. Сохраните это где вам удобно на локальном компьютере и откройте его в текстовом редакторе. Давайте посмотрим на HTML, содержащийся в теле:</p>
+
+<pre class="brush: html">&lt;section class="info-box"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#" class="active"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+  &lt;div class="panels"&gt;
+    &lt;article class="active-panel"&gt;
+      &lt;h2&gt;The first tab&lt;/h2&gt;
+
+      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.&lt;/p&gt;
+    &lt;/article&gt;
+    &lt;article&gt;
+      &lt;h2&gt;The second tab&lt;/h2&gt;
+
+      &lt;p&gt;This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.&lt;/p&gt;
+    &lt;/article&gt;
+    &lt;article&gt;
+      &lt;h2&gt;The third tab&lt;/h2&gt;
+
+      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!&lt;/p&gt;
+
+      &lt;ol&gt;
+        &lt;li&gt;dui neque eleifend lorem, a auctor libero turpis at sem.&lt;/li&gt;
+        &lt;li&gt;Aliquam ut porttitor urna.&lt;/li&gt;
+        &lt;li&gt;Nulla facilisi&lt;/li&gt;
+      &lt;/ol&gt;
+    &lt;/article&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</pre>
+
+<p>Итак, у нас есть элемент {{htmlelement ("section")}} с <code>классом</code> <code>info-box</code>, который содержит {{htmlelement ("ul")}} и {{htmlelement ("div")}}. Неупорядоченный список содержит три элемента списка со ссылками внутри, которые станут фактическими вкладками для отображения наших панелей контента. <code>div</code> содержит три элемента {{htmlelement ("article")}}, которые будут составлять панели содержимого, соответствующие каждой вкладке. Каждая панель содержит некоторый образец контента.</p>
+
+<p>Идея здесь заключается в том, что мы будем стилизовать вкладки, чтобы они выглядели как стандартное меню горизонтальной навигации и нарисуем панели, чтобы они сидели друг над другом, используя абсолютное позиционирование. Мы также предоставим вам немного JavaScript для включения на вашу страницу, чтобы отобразить соответствующую панель при нажатии вкладки и вы создатите саму вкладку. Вам не нужно будет понимать сам JavaScript на данном этапе, но вы должны подумать об изучении базового  <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> как можно скорее - чем сложнее ваши функции пользовательского интерфейса, тем больше вероятность того, что вам понадобится JavaScript для реализации желаемую функциональность.</p>
+
+<h3 id="Общая_настройка">Общая настройка</h3>
+
+<p>Для начала добавьте следующее между вашим открытием и закрытием {{HTMLElement ("style")}} tags:</p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}</pre>
+
+<p>Это всего лишь общая настройка для установки шрифта sans-serif на нашей странице, используйте поле <code>border-box </code>{{cssxref ("box-sizing")}} и избавьтесь от стандартного {{htmlelement ("body") }} поля.</p>
+
+<p>Затем добавьте следующее ниже вашего предыдущего CSS:</p>
+
+<pre class="brush: css">.info-box {
+  width: 450px;
+  height: 400px;
+  margin: 0 auto;
+}</pre>
+
+<p>Это задает конкретную ширину и высоту содержимого и центрирует его на экране с использованием старого <code>margin: 0 auto </code>трюкa. Раньше в курсе мы советовали не устанавливать фиксированную высоту на контейнеры содержимого, если это вообще возможно; это нормально в этом случае, потому что у нас есть фиксированный контент на наших вкладках. Это также выглядит немного раздражающим, чтобы иметь разные вкладки на разных высотах.</p>
+
+<h3 id="Укладка_наших_вкладок">Укладка наших вкладок</h3>
+
+<p>Теперь мы хотим, чтобы стиль вкладок выглядел как вкладки - в основном это горизонтальное меню навигации, но вместо того, чтобы загружать разные веб-страницы, когда они нажимаются, как мы видели ранее в курсе, они вызывают отображение разных панелей на той же странице. Сначала добавьте следующее правило внизу CSS, чтобы удалить по умолчанию {{cssxref ("padding-left")}} и {{cssxref ("margin-top")}} из неупорядоченного списка:</p>
+
+<pre class="brush: css">.info-box ul {
+  padding-left: 0;
+  margin-top: 0;
+}</pre>
+
+<div class="note">
+<p><strong>Заметка</strong>: Мы используем селектор-потомки с полем <code>.info-box</code> в начале цепочки в этом примере - это значит, что мы можем вставить эту функцию на страницу с другим содержимым, уже на ней, не опасаясь вмешиваться в стили, применяемые к другим частям страницы.</p>
+</div>
+
+<p>Затем мы нарисуем горизонтальные вкладки - все элементы списка будут перемещены влево, чтобы заставить их сидеть в одной строке вместе, их {{cssxref ("list-style-type")}} имеет значение <code>none</code>, чтобы избавиться от пули и их {{cssxref ("width")}} установлены на <code>150px</code>, чтобы они удобно располагались в информационном окне. Элементы {{htmlelement ("a")}} имеют {{cssxref ("display")}} встроенный блок, поэтому они будут сидеть в строке, но все же быть стильными и  соответствующим образом оформлены для кнопок вкладок, используя множество других свойств.</p>
+
+<p>Добавьте следующий CSS:</p>
+
+<pre class="brush: css">.info-box li {
+  float: left;
+  list-style-type: none;
+  width: 150px;
+}
+
+.info-box li a {
+  display: inline-block;
+  text-decoration: none;
+  width: 100%;
+  line-height: 3;
+  background-color: red;
+  color: black;
+  text-align: center;
+}</pre>
+
+<p>Наконец, для этого раздела мы установим некоторые стили в состояниях ссылок. Во-первых, мы настроим <code>:focus</code> и <code>:hover</code> состояния вкладок, чтобы выглядеть по-другому, когда они сфокусированы / зависают, предоставляя пользователям некоторую визуальную обратную связь. Во-вторых, мы установим правило, которое ставит один и тот же стиль на одной из вкладок, когда на нем присутствует <code>class</code> of <code>active</code>. Мы установим это с помощью JavaScript при нажатии на вкладку. Поместите следующий CSS ниже других стилей:</p>
+
+<pre class="brush: css">.info-box li a:focus, .info-box li a:hover {
+  background-color: #a60000;
+  color: white;
+}
+
+.info-box li a.active {
+  background-color: #a60000;
+  color: white;
+}</pre>
+
+<h3 id="Styling_the_panels">Styling the panels</h3>
+
+<p>The next job is to style our panels. Let's get going!</p>
+
+<p>First, of all, add the following rule to style the <code>.panels</code> {{htmlelement("div")}} container. Here we simply set a fixed {{cssxref("height")}} to make sure the panels fit snugly inside the info-box, {{cssxref("position")}} <code>relative</code> to set the {{htmlelement("div")}} as the positioning context, so you can then place positioned child elements relative to it and not the {{htmlelement("html")}} element, and finally we {{cssxref("clear")}} the float set in the CSS above so that it doesn't interfere with the remainder of the layout.</p>
+
+<pre class="brush: css">.info-box .panels {
+  height: 352px;
+  position: relative;
+  clear: both;
+}</pre>
+
+<p>Finally for this section, we will style the individual {{htmlelement("article")}} elements that comprise our panels. The first rule we'll add will absolutely {{cssxref("position")}} the panels, and make them all sit flush to the {{cssxref("top")}} and {{cssxref("left")}} of their {{htmlelement("div")}} container — this part is absolutely key to this whole layout feature, as it makes the panels sit on top of one another. The rule also gives the panels the same set height as the container, and gives the content some padding, a text {{cssxref("color")}}, and a {{cssxref("background-color")}}.</p>
+
+<p>The second rule we'll add here makes it so that a panel with a <code>class</code> of <code>active-panel</code> set on it will have a {{cssxref("z-index")}} of 1 applied to it, which will make it sit above the other panels (positioned elements have a <code>z-index</code> of 0 by default, which would put them below). Again, we'll add this class using JavaScript at the appropriate time.</p>
+
+<pre class="brush: css">.info-box article {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 352px;
+  padding: 10px;
+  color: white;
+  background-color: #a60000;
+}
+
+.info-box .active-panel {
+  z-index: 1;
+}</pre>
+
+<h3 id="Adding_our_JavaScript">Adding our JavaScript</h3>
+
+<p>The final step to getting this feature working is to add some JavaScript. Put the following block of code, exactly as written in between your opening and closing {{htmlelement("script")}} tags (you'll find these below the HTML content):</p>
+
+<pre>var tabs = document.querySelectorAll('.info-box li a');
+var panels = document.querySelectorAll('.info-box article');
+
+for(i = 0; i &lt; tabs.length; i++) {
+  var tab = tabs[i];
+  setTabHandler(tab, i);
+}
+
+function setTabHandler(tab, tabPos) {
+  tab.onclick = function() {
+    for(i = 0; i &lt; tabs.length; i++) {
+      tabs[i].className = '';
+    }
+
+    tab.className = 'active';
+
+    for(i = 0; i &lt; panels.length; i++) {
+      panels[i].className = '';
+    }
+
+    panels[tabPos].className = 'active-panel';
+  }
+}</pre>
+
+<p>This code does the following:</p>
+
+<ul>
+ <li>First we save a reference to all the tabs and all the panels in two variables called <code>tabs</code> and <code>panels</code>, so we can easily do things to them later on.</li>
+ <li>Then we use a <code>for</code> loop to cycle through all the tabs and run a function called <code>setTabHandler()</code> on each one, which sets up the functionality that should occur when each one is clicked on. When run, the function is passed a reference to the particular tab it is being run for, and an index number <code>i</code> that indentifies the tab's position in the <code>tabs</code> array.</li>
+ <li>In the <code>setTabHandler()</code> function, the tab has an <code>onclick</code> event handler set on it, so that when the tab is clicked, the following occurs:
+  <ul>
+   <li>A <code>for</code> loop is used to cycle through all the tabs and remove any classes that are present on them.</li>
+   <li>A <code>class</code> of <code>active</code> is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets the same {{cssxref("color")}} and {{cssxref("background-color")}} on the tab as the panels are styled with.</li>
+   <li>A <code>for</code> loop is used to cycle through all the panels and remove any classes that are present on them.</li>
+   <li>A class of <code>active-panel</code> is set on the panel that corresponds to the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets its {{cssxref("z-index")}} to 1, making it appear over the top of the other panels.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>That's it for the first example. Keep your code open, as we'll be adding to it in the second one.</p>
+
+<h2 id="A_fixed_position_tabbed_info-box">A fixed position tabbed info-box</h2>
+
+<p>In our second example, we will take our first example — our info-box — and add it into the context of a full web page. But not only that — we'll give it fixed position so that it stays in the same position in the browser window. When the main content scrolls, the info-box will stay in the same position on the screen. Our finished example will look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13364/fixed-info-box.png" style="border-style: solid; border-width: 1px; display: block; height: 585px; margin: 0px auto; width: 1118px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the finished example running live at <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">fixed-info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html">source code</a>). Check it out to get an idea of what you will be building in this section of the article.</p>
+</div>
+
+<p>As a starting point, you can use your completed example from the first section of the article, or make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> from our Github repo.</p>
+
+<h3 id="HTML_additions">HTML additions</h3>
+
+<p>First of all, we need some additional HTML to represent the web site main content. Add the following {{htmlelement("section")}} just below your opening {{htmlelement("body")}} tag, just before the existing section:</p>
+
+<pre class="brush: html">&lt;section class="fake-content"&gt;
+  &lt;h1&gt;Fake content&lt;/h1&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
+&lt;/section&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can feel free to change the fake content for some real content if you like.</p>
+</div>
+
+<h3 id="Changes_to_the_existing_CSS">Changes to the existing CSS</h3>
+
+<p>Next we need to make some small changes to the existing CSS, to get the info-box placed and positioned. Change your <code>.info-box</code> rule to get rid of <code>margin: 0 auto;</code> (we no longer want the info-box centered), add {{cssxref("position")}}<code>: fixed;</code>, and stick it to the {{cssxref("top")}} of the browser viewport.</p>
+
+<p>It should now look like this:</p>
+
+<pre class="brush: css">.info-box {
+  width: 450px;
+  height: 400px;
+  position: fixed;
+  top: 0;
+}</pre>
+
+<h3 id="Styling_the_main_content">Styling the main content</h3>
+
+<p>The only thing left for this example is to provide the main content with some styling. Add the following rule underneath the rest of your CSS:</p>
+
+<pre class="brush: css">.fake-content {
+  background-color: #a60000;
+  color: white;
+  padding: 10px;
+  height: 2000px;
+  margin-left: 470px;
+}</pre>
+
+<p>To start with, we give the content the same {{cssxref("background-color")}}, {{cssxref("color")}}, and {{cssxref("padding")}} as the info-box panels. We then give it a large {{cssxref("margin-left")}} to move it over to the right, making space for the info-box to sit in, so it is not overlapping anything else.</p>
+
+<p>This marks the end of the second example; we hope you'll find the third just as interesting.</p>
+
+<h2 id="A_sliding_hidden_panel">A sliding hidden panel</h2>
+
+<p>The final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen spaces is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content.</p>
+
+<p>Our finished example will look like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13366/hidden-sliding-panel.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 950px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the finished example running live at <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hidden-info-panel.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">source code</a>). Check it out to get an idea of what you will be building in this section of the article.</p>
+</div>
+
+<p>As a starting point, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html">hidden-info-panel-start.html</a> from our Github repo. This doesn't follow on from the previous example, so a fresh start file is required. Let's have a look at the HTML in the file:</p>
+
+<pre class="brush: css">&lt;label for="toggle"&gt;❔&lt;/label&gt;
+&lt;input type="checkbox" id="toggle"&gt;
+&lt;aside&gt;
+
+  ...
+
+&lt;/aside&gt;</pre>
+
+<p>To start with here we've got a {{htmlelement("label")}} element and an {{htmlelement("input")}} element — <code>&lt;label&gt;</code> elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see what description goes with what form element). Here it is associated with the <code>&lt;input&gt;</code> checkbox using the <code>for</code> and <code>id</code> attributes.</p>
+
+<div class="note">
+<p><strong>Note</strong>: We've put a special question mark character into our HTML to act as our info icon — this represents the button that will be pressed to show/hide the panel.</p>
+</div>
+
+<p>Here we are going to use these elements for a slightly different purpose — another useful side effect of <code>&lt;label&gt;</code> elements is that you can click a checkbox's label to check the checkbox, as well as just the checkbox itself. This has led to the well-known <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, which provides a JavaScript-free way of controlling an element by toggling a button. The element we'll be controlling is the {{htmlelement("aside")}} element that follows the other two (we've left its contents out of the above code listing for brevity).</p>
+
+<p>In the below sections we'll explain how this all works.</p>
+
+<h3 id="Styling_the_form_elements">Styling the form elements</h3>
+
+<p>First let's deal with the form elements — add the following CSS in between your {{htmlelement("style")}} tags:</p>
+
+<pre class="brush: css">label[for="toggle"] {
+  font-size: 3rem;
+  position: absolute;
+  top: 4px;
+  right: 5px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  position: absolute;
+  top: -100px;
+}</pre>
+
+<p>The first rule styles the <code>&lt;label&gt;</code>; here we've:</p>
+
+<ul>
+ <li>Set a large {{cssxref("font-size")}} to make the icon nice and big.</li>
+ <li>Set {{cssxref("position")}} <code>absolute</code> on it, and used {{cssxref("top")}} and {{cssxref("right")}} to position it nicely in the top-right corner.</li>
+ <li>Set a {{cssxref("z-index")}} of 1 on it — this is so that when the info panel is styled and shown, it doesn't cover up the icon; instead the icon will sit on top of it so it can be pressed again to hide the info pane.</li>
+ <li>Used the {{cssxref("cursor")}} property to change the mouse cursor when it is hovering over the icon to a hand pointer (like the one you see when links are hovered over), as an extra visual clue to users that the icon does something interesting.</li>
+</ul>
+
+<p>The second rule sets {{cssxref("position")}} <code>absolute</code> on the actual checkbox <code>&lt;input&gt;</code> element, and hides it off the top of the screen. We don't actually want to see this on our UI.</p>
+
+<h3 id="Styling_the_panel">Styling the panel</h3>
+
+<p>Now it's time to style the actual sliding panel itself. Add the following rule to the bottom of your CSS:</p>
+
+<pre class="brush: css">aside {
+  background-color: #a60000;
+  color: white;
+
+  width: 340px;
+  height: 100%;
+  padding: 0 20px;
+
+  position: fixed;
+  top: 0;
+  right: -370px;
+
+  transition: 0.6s all;
+}</pre>
+
+<p>There's a lot going on here — let's discuss it bit by bit:</p>
+
+<ul>
+ <li>First, we set some simple {{cssxref("background-color")}} and {{cssxref("color")}} on the info box.</li>
+ <li>Next, we set a fixed {{cssxref("width")}} on the panel, and make its {{cssxref("height")}} the entire height of the browser viewport.</li>
+ <li>We also include some horizontal {{cssxref("padding")}} to space it out a bit.</li>
+ <li>Next we set {{cssxref("position")}}<code>: fixed;</code> on the panel so it will always appear in the same place, even if the page has content to scroll. We glue it to the {{cssxref("top")}} of the viewport, and set it so that by default it is offscreen to the {{cssxref("right")}}.</li>
+ <li>Finally, we set a {{cssxref("transition")}} on the element. Transitions are an interesting feature that allow you to make changes between states happen smoothly, rather than just going "on", "off" abruptly. In this case we are intending to make the panel slide smoothly onscreen when the checkbox is checked. (Or to put it another way, when the question mark icon is clicked — remember, clicking the <code>&lt;label&gt;</code> will check the associated checkbox! We told you it was a hack.) You will learn a lot more about...</li>
+</ul>
+
+<h3 id="Setting_the_checked_state">Setting the checked state</h3>
+
+<p>There is one final bit of CSS to add — put the following at the bottom of your CSS:</p>
+
+<pre class="brush: css">input[type=checkbox]:checked + aside {
+  right: 0px;
+}</pre>
+
+<p>The selector is pretty complex here — we are selecting the <code>&lt;aside&gt;</code> element adjacent to the <code>&lt;input&gt;</code> element, but only when it is checked (note the use of the {{cssxref(":checked")}} pseudo-class to achieve this). When this is the case, we are setting the {{cssxref("right")}} property of the <code>&lt;aside&gt;</code> to <code>0px</code>, which causes the panel to appear on the screen again (smoothly due to the transition). Clicking the label again unchecks the checkbox, which hides the panel again.</p>
+
+<p>So there you have it — a rather clever JavaScript-free way to create a toggling button effect. This will work in IE9 and above (the smooth transition will work in IE10 and above.) This effect does have some concerns — this is a bit of an abuse of form elements, as they weren't intended for this purpose. In addition, the effect is not great in terms of accessibility; the label is not focusable by default, and the non-semantic use of the form elements could cause issues with screen readers. JavaScript and a link or button might be more appropriate, but it is still fun to experiment with.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>So that rounds off our look at positioning — by now, you should have an idea of how the basic mechanics work, as well as understanding how to start applying these to building some interesting UI features. Don't worry if you didn't get this all immediately — positioning is a fairly advanced topic, and you can always work through the articles again to aid your understanding. The next subject we'll turn to is Flexbox.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/ru/learn/css/css_layout/макет_с_несколькими_столбцами/index.html b/files/ru/learn/css/css_layout/макет_с_несколькими_столбцами/index.html
new file mode 100644
index 0000000000..9ba48bbbef
--- /dev/null
+++ b/files/ru/learn/css/css_layout/макет_с_несколькими_столбцами/index.html
@@ -0,0 +1,468 @@
+---
+title: Макет с несколькими столбцами
+slug: Learn/CSS/CSS_layout/Макет_с_несколькими_столбцами
+translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</div>
+
+<p class="summary">Спецификация макет с несколькими столбцами дает вам метод верстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>
+    <p>Основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), идея о том как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>.)</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>
+    <p>Изучить как создавать макет с неколькими столбцами на веб-страницах, такой как вы модете найти в газете.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Базовый_пример">Базовый пример</h2>
+
+<p>Сейчас мы будем изучать как использовать макет с несколькими столбцами, часто называемый <em>multicol. </em>Вы можете следовать за нами <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">скачав файл отправной точки multicol</a> и добавлять CSS в соответствующие места. В конце раздела вы можете посмотреть живой пример того, как конечный код должен выглядеть.</p>
+
+<p>Наша отправная точка содержит немного очень простого HTML; обертака с классом <code>container</code> внутри которого имеется заголовок и несколько параграфов.</p>
+
+<p>{{htmlelement("div")}} с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств {{cssxref("column-count")}} или {{cssxref("column-width")}}. Какое значение вы дадите свойству <code>column-count</code> столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:</p>
+
+<pre class="brush: css notranslate">.container {
+  column-count: 3;
+}
+</pre>
+
+<p>Колонки, которые вы создаете имеют гибкую ширину — браузер решает какое пространство назначить каждому столбцу.</p>
+
+<div id="Multicol_1">
+<div class="hidden">
+<h6 id="column-count_example">column-count example</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+    </pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;h1&gt;Simple multicol example&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.container {
+  column-count: 3;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_1', '100%', 400) }}</p>
+
+<p>Измените ваш CSS чтобы использовать следующий <code>column-width</code>:</p>
+
+<pre class="brush: css notranslate">.container {
+  column-width: 200px;
+}
+</pre>
+
+<p>Теперь браузер будет давать столько столбцов размером, который вы определили, сколько он сможет; любое оставшееся пространство далее делится между существующими столбцами. Это значит, что вы не получите точную ширину, которую вы задали, только если ваш контейнер <span class="tlid-translation translation" lang="ru"><span title="">не делится точно на эту ширину.</span></span></p>
+
+<div id="Multicol_2">
+<div class="hidden">
+<h6 id="column-width_example">column-width example</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;h1&gt;Simple multicol example&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<pre class="brush: css notranslate">.container {
+  column-width: 200px;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_2', '100%', 400) }}</p>
+
+<h2 id="Стилизация_столбцов">Стилизация столбцов</h2>
+
+<p>Столбцы, созданные при помощи multicol не могут быть стилизованы по одному. Нет способа сделать один столбец больше, чем другие, или изменить фон или цвет текста одного столбца. У вас есть две возможности изменить способ отображения столбцов:</p>
+
+<ul>
+ <li>Изменение размера отступов между столбцами используя {{cssxref("column-gap")}}.</li>
+ <li>Добавление линейки между столбцами при помощи {{cssxref("column-rule")}}.</li>
+</ul>
+
+<p>Используя ваш пример выше, измените размер отступа добавлением свойства <code>column-gap</code>:</p>
+
+<pre class="brush: css notranslate">.container {
+  column-width: 200px;
+  column-gap: 20px;
+}</pre>
+
+<p>Вы можете поиграть с разными значениями — свойство принимает любые единицы измерения длины. Теперь добавьте линейку между столбцами при помощи <code>column-rule</code>. Таким же способом как и свойство {{cssxref("border")}} с которым вы сталкивались в предыдущих уроках, <code>column-rule</code> — это короткая запись {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} и {{cssxref("column-rule-width")}} и принимает те же значения что и <code>border</code>.</p>
+
+<pre class="brush: css notranslate">.container {
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 4px dotted rgb(79, 185, 227);
+}</pre>
+
+<p>Попробуйте добавить линейки других стилей и цветов.</p>
+
+<div id="Multicol_3">
+<div class="hidden">
+<h6 id="Styling_the_columns">Styling the columns</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+.container {
+ column-count: 3;
+ column-gap: 20px;
+ column-rule: 4px dotted rgb(79, 185, 227);
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;h1&gt;Simple multicol example&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_3', '100%', 400) }}</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Следует обратить внимание на то, что линейка не занимает никакой ширины.</span></span> Она располагается в промежутках, которые вы создали при помощи <code>column-gap</code>. Чтобы придать больше пространства <span class="tlid-translation translation" lang="ru"><span title="">по обе стороны от линейки, вам нужно увеличить размер </span></span><code>column-gap</code><span class="tlid-translation translation" lang="ru"><span title="">.</span></span></p>
+
+<h2 id="Свойств_column-span">Свойств column-span</h2>
+
+<p>Вы можете заставить элемент растянуться через все столбцы. В этом случае контент разрывается, когда сталкивается со spanning элементом и продолжается ниже, создавая новый набор блоков столбцов. Чтобы растянуть элемент через все столбцы используйте свойство {{cssxref("column-span")}} установленное на значение <code>all</code>.</p>
+
+<div class="blockIndicator note">
+<p>Обратите внимание что невозможно растянуть элемент через несколько столбцов. Это свойство может иметь либо значение <code>none</code> (по умолчанию) либо <code>all</code>.</p>
+</div>
+
+<div id="Multicol_Span">
+<div class="hidden">
+<h6 id="Spanning_the_columns">Spanning the columns</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}
+.container {
+ column-count: 3;
+ column-gap: 20px;
+ column-rule: 4px dotted rgb(79, 185, 227);
+}
+h2 {
+ column-span: all;
+ background-color: rgb(79, 185, 227);
+ color: white;
+ padding: .5em;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;h1&gt;Simple multicol example&lt;/h1&gt;
+
+  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
+
+  &lt;h2&gt;Spanning subhead&lt;/h2&gt;
+  Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
+  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+
+  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+&lt;/div&gt;</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_Span', '100%', 400) }}</p>
+
+<h2 id="Столбцы_и_фрагментация">Столбцы и фрагментация</h2>
+
+<p>Содержимое макета нескольких столбцов является фрагментированным. <span class="tlid-translation translation" lang="ru"><span title="">По сути, он ведет себя так же, как контент в постраничных медиа </span></span>— так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.</p>
+
+<p>Порой это разрывание происходит в местах, мешающих чтению. В живом примере ниже, я использовал multicol чтобы разместить несколько блоков, каждый из которых имеет заголовок и немного текста внутри. <span class="tlid-translation translation" lang="ru"><span title="">Заголовок отделяется от текста, если столбцы разделяются между ними.</span></span></p>
+
+<div id="Multicol_4">
+<div class="hidden">
+<h6 id="Cards_example">Cards example</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}            </pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_4', '100%', 600) }}</p>
+
+<p>Для того чтобы управлять этим поведением мы можем использовать свойства из спецификации <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Фрагментации</a>. Эта спецификация дает нам свойства для управления разрывами контента в multicol и постраничных медиа. Например, добавьте свойство {{cssxref("break-inside")}} со значением <code>avoid</code> к правилам <code>.card</code>. Это контейнер заголовка и текста и поэтому мы не хотим фрагментировать этот блок.</p>
+
+<p>В настоящее время также стоит добавлять старое свойство <code>page-break-inside: avoid</code> для лучшей поддержки старых браузеров.</p>
+
+<pre class="brush: css notranslate">.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+</pre>
+
+<p>Перезагрузите страницу и ваши блоки должны остаться в целости.</p>
+
+<div id="Multicol_5">
+<div class="hidden">
+<h6 id="Multicol_Fragmentation">Multicol Fragmentation</h6>
+
+<pre class="brush: css notranslate">body {
+  width: 90%;
+  max-width: 900px;
+  margin: 2em auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif;
+}              </pre>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="card"&gt;
+      &lt;h2&gt;I am the heading&lt;/h2&gt;
+      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
+                tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
+                vel, viverra egestas ligula.&lt;/p&gt;
+    &lt;/div&gt;
+
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Multicol_5', '100%', 600) }}</p>
+
+<h2 id="Проверь_свои_навыки!">Проверь свои навыки!</h2>
+
+<p>Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшие тесты для проверки того, что вы усвоили эту информацию прежде чем, отправитесь дальше — см. <a href="/en-US/docs/Learn/CSS/CSS_layout/Multicol_skills">Поверьте свои навыки: Макет с несколькими столбцами</a>.</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Вы теперь знаете, как использовать базовые функции макета с несколькими столбцами, еще один инструмент в вашем распоряжении при выборе метода макета для дизайна который вы строите.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Фрагментация</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Применение макета с несколькими столбцами</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS макет</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Отзывчивый дизайн</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Руководство новичка в media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы макетов</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Базовая оценка понимания макета</a></li>
+</ul>
diff --git a/files/ru/learn/css/css_layout/навыки_multicol/index.html b/files/ru/learn/css/css_layout/навыки_multicol/index.html
new file mode 100644
index 0000000000..c549f1210b
--- /dev/null
+++ b/files/ru/learn/css/css_layout/навыки_multicol/index.html
@@ -0,0 +1,78 @@
+---
+title: 'Проверь свои навыки: Multicol'
+slug: Learn/CSS/CSS_layout/Навыки_Multicol
+translation_of: Learn/CSS/CSS_layout/Multicol_skills
+---
+<div>{{LearnSidebar}}</div>
+
+<div></div>
+
+<p>Цель этого задания — чтобы вы поработали с CSS свойствами {{CSSxRef("column-count")}}, {{CSSxRef("column-width")}}, {{CSSxRef("column-gap")}}, {{CSSxRef("column-span")}} и {{CSSxRef("column-rule")}} и со значениями которые описаны в нашем уроке <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a>. <span class="tlid-translation translation" lang="ru"><span title="">Вы будете работать над тремя небольшими задачами,</span></span> использующими различные элементы из пройденного материала.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Вы можете опробовать решения в интерактивных редакторах ниже</span></span>, однако может быть полезным загрузить код и использовать онлайн инструменты такие как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> чтобы проработать задания.</p>
+
+<p>Если вы застрянете, попросите нас о помощи — см. раздел {{anch("Оценка и дальнейшая помощь")}} в конце страницы.</p>
+</div>
+
+<h2 id="Multicol_Раз">Multicol Раз</h2>
+
+<p>В этом задании вам необходимо создать три столбца с отступом 50px между каждый столбцом.</p>
+
+<p><img alt="Three columns of text" src="https://mdn.mozillademos.org/files/17081/multicol-task1.png" style="height: 722px; width: 1226px;"></p>
+
+<p>Попробуйте обновить живой пример ниже для воссоздания законченного примера:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol1.html", '100%', 1000)}}</p>
+
+<div class="blockIndicator note">
+<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol1-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
+</div>
+
+<h2 id="Multicol_Два">Multicol Два</h2>
+
+<p>Создайте столбцы с минимальной шириной 200px.</p>
+
+<p>Затем добавьте серую линейку 5px между каждым столбцом, убедитесь, что между краями линейки и содержимым столбцов есть пространство 10px.</p>
+
+<p><img alt="Three columns of text with a grey rule between them." src="https://mdn.mozillademos.org/files/17082/multicol-task2.png" style="height: 668px; width: 1222px;"></p>
+
+<p>Попробуйте обновить живой код ниже для воссоздания законченного примера:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol2.html", '100%', 1000)}}</p>
+
+<div class="blockIndicator note">
+<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol2-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
+</div>
+
+<h2 id="Multicol_Три">Multicol Три</h2>
+
+<p>Заставьте элемент содержащий заголовок и подзаголовок растянуться через все столбцы так чтоб это выглядело как на картинке</p>
+
+<p><img alt="Three columns of text with a heading and subheading spanning all three in the middle." src="https://mdn.mozillademos.org/files/17083/multicol-task3.png" style="height: 871px; width: 1222px;"></p>
+
+<p>Попробуйте обновить живой код ниже для воссоздания законченного примера:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol3.html", '100%', 1000)}}</p>
+
+<div class="blockIndicator note">
+<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol3-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
+</div>
+
+<h2 id="Оценка_и_дальнейшая_помощь">Оценка и дальнейшая помощь</h2>
+
+<p>Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.</p>
+
+<p>Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:</p>
+
+<ol>
+ <li>Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как  <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, или <a href="https://glitch.com/">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.</li>
+ <li>Напишите пост с просьбой оценки и/или помощи на <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваш пост должен включать:
+  <ul>
+   <li>Описательный заголовок такой как "Требуется оценка проверки навыков по Multicol задание 1".</li>
+   <li>Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.</li>
+   <li>Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.</li>
+   <li>Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/ru/learn/css/css_layout/навыки_позиционирования/index.html b/files/ru/learn/css/css_layout/навыки_позиционирования/index.html
new file mode 100644
index 0000000000..f63a3a3a94
--- /dev/null
+++ b/files/ru/learn/css/css_layout/навыки_позиционирования/index.html
@@ -0,0 +1,64 @@
+---
+title: 'Проверьте свои навыки: позиционирование'
+slug: Learn/CSS/CSS_layout/Навыки_позиционирования
+translation_of: Learn/CSS/CSS_layout/Position_skills
+---
+<div>{{LearnSidebar}}</div>
+
+<div></div>
+
+<p>Цель этого задания - чтобы вы поработали с CSS свойством {{CSSxRef("position")}} и его значениями которые описаны в нашем уроке <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a>. <span class="tlid-translation translation" lang="ru"><span title="">Вы будете работать над двумя небольшими задачами,</span></span> использующими различные элементы из пройденного материала.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Вы можете опробовать решения в интерактивных редакторах ниже</span></span>, однако может быть полезным загрузить код и использовать онлайн инструменты такие как<a href="https://codepen.io/"> CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, или <a href="https://glitch.com/">Glitch</a> чтобы проработать задания.</p>
+
+<p>Если вы застрянете, попросите нас о помощи — см. раздел {{anch("Оценка и дальнейшая помощь")}} в конце страницы</p>
+</div>
+
+<h2 id="Позиционирование_Раз">Позиционирование Раз</h2>
+
+<p>В этом задании вам необходимо расположить элементы с классом target в верхнем правом углу контейнера, который имеет серую границу 5px.</p>
+
+<p><img alt="The green box is at the top right of a container with a grey border." src="https://mdn.mozillademos.org/files/17077/position-task1.png" style="height: 661px; width: 1033px;"></p>
+
+<p>Попробуйте обновить живой код ниже для воссоздания законченного примера:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}}</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В качестве дополнительной задачи</span></span>, сможете ли вы изменить цель так чтоб она отображалась под текстом?</p>
+
+<div class="blockIndicator note">
+<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе</p>
+</div>
+
+<h2 id="Позиционирование_Два">Позиционирование Два</h2>
+
+<p>В примере ниже если вы прокрутите блок <span class="tlid-translation translation" lang="ru"><span title="">боковая панель прокручивается вместе с контентом. Измените его так чтобы боковая панель оставалась на месте и прокручивался только контент.</span></span></p>
+
+<p><img alt="The content is scrolled but the sidebar has stayed in place." src="https://mdn.mozillademos.org/files/17078/position-task2.png" style="height: 827px; width: 1123px;"></p>
+
+<p>Попробуйте обновить живой код ниже для воссоздания законченного примера:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1000)}}</p>
+
+<div class="blockIndicator note">
+<p>ля оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редактор</p>
+</div>
+
+<h2 id="Оценка_и_дальнейшая_помощь">Оценка и дальнейшая помощь</h2>
+
+<p>Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.</p>
+
+<p>Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:</p>
+
+<ol>
+ <li>Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, или <a href="https://glitch.com/">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.</li>
+ <li>Напишите пост с просьбой оценки и/или помощи на <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваш пост должен включать:
+  <ul>
+   <li>Описательный заголовок такой как "Требуется оценка проверки навыков по Позиционированияю".</li>
+   <li>Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.</li>
+   <li>Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.</li>
+   <li>Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/ru/learn/css/css_layout/нормальный_поток/index.html b/files/ru/learn/css/css_layout/нормальный_поток/index.html
new file mode 100644
index 0000000000..d936c240c5
--- /dev/null
+++ b/files/ru/learn/css/css_layout/нормальный_поток/index.html
@@ -0,0 +1,96 @@
+---
+title: Базовый поток
+slug: Learn/CSS/CSS_layout/Нормальный_поток
+tags:
+  - float
+  - grid
+translation_of: Learn/CSS/CSS_layout/Normal_Flow
+---
+<div>{{LearnSidebar}}</div>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<p class="summary">Эта статья объясняет нормальный/базовый поток (normal flow) или способ, которым элементы страницы располагаются на веб-странице по умолчанию.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Что нужно знать прежде чем изучать:</th>
+   <td>Основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), и понимания как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнем вносить какие-либо изменения.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путем изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним.</p>
+
+<p>Прежде чем углубиться в разные способы компоновки, стоит пересмотреть некоторые из вещей, которые вы изучили в предыдущих модулях в отношении нормального потока документов. </p>
+
+<h2 id="Как_элементы_располагаются_по_умолчанию">Как элементы располагаются по умолчанию?</h2>
+
+<p>Прежде всего, индивидуальные боксы элементов располагаются в зависимости от содержимого элементов, затем добавляя какой-нибудь padding, border и margin вокруг них - это опять-таки боксовая модель, которую мы рассмотрели ранее.</p>
+
+<p>По умолчанию содержимое элемента уровня блока составляет 100% от ширины его родительского элемента и столь же высок, как и его содержимое. Встроенные элементы высоки и широки, как их содержимое. Вы не можете установить ширину или высоту на встроенные элементы — они просто находятся внутри содержимого элементов блочного уровня. Если вы хотите контролировать размер встроенного элемента вам нужно настроить его так, чтобы он себя вёл как элемент блочного уровня при помощи <code>display: block;</code> (или даже,  <code>display: inline-block;</code>, который смешивает характеристики обоих.).</p>
+
+<p>Это объясняет отдельные элементы, но как насчет того, как элементы взаимодействуют друг с другом? Нормальный поток макета (упомянутый в статье введения макета) - это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа - каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.</p>
+
+<p>Встроенные элементы ведут себя по-другому — они не появляются на новых строках; они распологаются на той же строке, что и другие и любой смежной или завернутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).</p>
+
+<p>Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остается, а меньшее исчезает — это звётся схлопывание полей (margin collapsing), и мы рассматривали это ранее.</p>
+
+<p>Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:</p>
+
+<div id="Normal_Flow">
+<pre class="brush: html notranslate">&lt;h1&gt;Базовый поток документа&lt;/h1&gt;
+
+&lt;p&gt;Я базовый элемент уровня блока. Мои соседние блочные элементы находятся на новой строке подо мной.&lt;/p&gt;
+
+&lt;p&gt;По умолчанию мы охватываем 100% ширины нашего родительского элемента, и мы так же высоки, как и наш child-контент. Наша общая ширина и высота - это наш контент + внутренний отступ (padding) + ширина / высота границы.&lt;/p&gt;
+
+&lt;p&gt;Мы отделены нашими полями. Из-за схлопывания полей мы отделены шириной одного из наших полей, а не обоих&lt;/p&gt;
+
+&lt;p&gt;Встроенные элементы &lt;span&gt;такие как этот&lt;/span&gt; и &lt;span&gt;этот&lt;/span&gt; находятся на одной линии с другими, и смежным текстом, если есть пространство. Встроенные элементы, что не влезают &lt;span&gt;переходять на новую строку если это возможно (как этот текст)&lt;/span&gt;если же это невозможно, они переходят на новую строку, как это изображение: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Теперь, когда вы поняли нормальный поток и как браузер выкладывает содержимое по умолчанию, двигаемся дальше, чтобы понять как это изменить для создания макета согласно вашему дизайну.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Базовый поток</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Сетка(Grid)</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Потоки (Floats)">Поплавки</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование(Positioning)</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Методы устаревших макетов</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Фундаментальная оценка понимания макета</a></li>
+</ul>
diff --git a/files/ru/learn/css/css_layout/отзывчивый_дизайн/index.html b/files/ru/learn/css/css_layout/отзывчивый_дизайн/index.html
new file mode 100644
index 0000000000..978b4e43dc
--- /dev/null
+++ b/files/ru/learn/css/css_layout/отзывчивый_дизайн/index.html
@@ -0,0 +1,328 @@
+---
+title: Отзывчивый дизайн
+slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
+translation_of: Learn/CSS/CSS_layout/Responsive_Design
+---
+<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">На заре веб-дизайна страницы создавались для экрана определенного размера.</span></span> Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до<span class="tlid-translation translation" lang="ru"><span title=""> слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция <em>отзывчивого (адаптивого) веб-дизайна</em> </span></span><em>(responsive web design</em> (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>
+    <p>Основы HTML (изучите <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), идея о том как работает CSS (изучите <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a> и <a href="/en-US/docs/Learn/CSS/Building_blocks">Устройство CSS</a>.)</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>
+    <p>Понять базовые концепции и историю отзывчивого дизайна.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Исторические_макеты_сайтов">Исторические макеты сайтов</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В какой-то момент истории при разработке веб-сайта у вас было два варианта:</span></span></p>
+
+<ul>
+ <li>Вы могли создать <em>жидкий </em>сайт, который будет растягиваться чтобы заполнить окно браузера</li>
+ <li>или сайт с <em>фиксированной шириной</em>, который будет иметь фиксированный размер в пикселях.</li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт!</span></span> <span class="tlid-translation translation" lang="ru"><span title="">Жидкий сайт приводил к раздавленному дизайну на маленьких экранах (как видно ниже)</span></span> и не читаемо длинным строкам на больших.</p>
+
+<figure><img alt="A layout with two columns squashed into a mobile size viewport." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Посмотрите этот простой жидкий макет: <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">исходный код</a>. При просмотре примера, растягивайте и сжимайте окно браузера чтобы увидеть, как это выглядит при разных размерах.</p>
+</div>
+
+<p>Сайт с фиксированной шириной рисковал иметь горизонтальную полосу прокрутки на экранах меньших чем ширина сайта (как видно ниже) и много белого пространства на краях дизайна на больших экранах.</p>
+
+<figure><img alt="A layout with a horizontal scrollbar in a mobile viewport." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Посмотрите этот простой макет с фиксированной шириной: <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">исходный код</a>. Снова изучите результат по мере изменения размера окна браузера.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Скриншоты выше сделаны используя <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> в Firefox DevTools.</p>
+</div>
+
+<p>Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие <em>m.example.com</em> или <em>example.mobi</em>). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Кроме того, эти мобильные сайты часто предлагали очень урезанный вариант.</span></span> Поскольку мобильные гаджеты стали мощнее и способными отображать целые веб-сайты, пользователей мобильных устройств раздражало, что они обнаруживали себя запертыми в мобильной версии сайта, неспособные получить доступ к информации, которая, как они знали, есть в полнофункциональной версии сайта.</p>
+
+<h2 id="Гибкий_макет_до_отзывчивого_дизайна">Гибкий макет до отзывчивого дизайна</h2>
+
+<p>Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Resolution dependent layout</a>, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.</p>
+
+<p>Зои Миккели Гилленвотер сыграла важную роль в свой работе описав и формализовав различные способы посредствам которых могут быть созданы гибкие сайты, пытаясь найти золотую середину между заполнением экрана или <span class="tlid-translation translation" lang="ru"><span title="">полностью фиксированным размером.</span></span></p>
+
+<h2 id="Отзывчивый_дизайн">Отзывчивый дизайн</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Термин адаптивный дизайн был </span></span><a href="https://alistapart.com/article/responsive-web-design/">Придуман Итаном Маркоттом в 2010 году</a><span class="tlid-translation translation" lang="ru"><span title=""> и описывал использование трех методов в сочетании.</span></span></p>
+
+<ol>
+ <li>Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a> (опубликовано в 2009 в A List Apart).</li>
+ <li>Вторым методом была идея <a href="http://unstoppablerobotninja.com/entry/fluid-images">жидких изображений</a>. Используя очень простой метод настройки свойства <code>max-width</code> на <code>100%</code>, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.</li>
+ <li>Третьим ключевым компонентом был <a href="/en-US/docs/Web/CSS/Media_Queries">media query</a>. Media Query позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.</li>
+</ol>
+
+<p>Очень важно понять, что <strong>адаптивный веб-дизайн </strong>— <strong>это не отдельная технология</strong>, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. <span class="tlid-translation translation" lang="ru"><span title="">В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и </span></span>media query<span class="tlid-translation translation" lang="ru"><span title="">, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и </span></span>у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.</span></span></p>
+
+<h2 id="Media_Queries_Медиа-запросы">Media Queries (Медиа-запросы)</h2>
+
+<p>Отзывчивый дизайн был способен появится только благодаря media query. Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, <span class="tlid-translation translation" lang="ru"><span title="">что она была признана готовой к реализации в браузерах. Медиа запросы позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определенная ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.</span></span></p>
+
+<p>Например, следующий медиа запрос проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору <code>.container</code> только если эти две вещи истины.</p>
+
+<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} </code>
+</pre>
+
+<p>Вы можете добавлять несколько медиа запросов в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так чтоб соответствовать наилучшим образом разным размерам экрана. Точки, в которых применяется media query и меняется макет, известны как <em>контрольные точки.</em></p>
+
+<p>Общим подходом при использовании Media Queriy является создание простого одно колоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для бо'льших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана чтобы уместить все. Это часто называют дизайном <strong>сначала мобильный</strong> (<strong>mobile first</strong>).</p>
+
+<p>Узнать больше о <a href="/en-US/docs/Web/CSS/Media_Queries">Media Query</a> можно в документации MDN.</p>
+
+<h2 id="Гибкие_сетки">Гибкие сетки</h2>
+
+<p>Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развернутым до максимума окном.</p>
+
+<p>Используя гибкую сетку, вам всего лишь надо добавить контрольную точку и изменить дизайн в точке, когда ваш контент начинает выглядеть плохо. Например, если длина строки становится нечитаемо длинной при увеличении размера экрана, или блок становится сдавленным с двумя словами в каждой строке при сужении экрана.</p>
+
+<p>В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>. Гибкий обтекаемый макет достигался путем присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. <span class="tlid-translation translation" lang="ru"><span title="">В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.</span></span></p>
+
+<pre class="notranslate"><code>target / context = result </code>
+</pre>
+
+<p>Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.</p>
+
+<pre class="brush: css notranslate"><code>.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} </code>
+</pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревших методов макетов</a>. В вашей работе вероятно, что вы столкнетесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.</p>
+
+<p>Следующий пример демонстрирует простой отзывчивый дизайн используя Media Query и гибкие сетки. На узких экранах макет отображает блоки, сложенные друг на друга:</p>
+
+<figure><img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<p>На более широких экранах они премещаются в два столбца:</p>
+
+<figure><img alt="A desktop view of a layout with two columns." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Вы можете найти <a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">живой пример</a> и <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">исходный код</a> этого примера на GitHub.</p>
+</div>
+
+<h2 id="Современные_технологии_макетов">Современные технологии макетов</h2>
+
+<p>Современные методы макетов такие как <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, и <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a> являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более легкий способ сделать так.</p>
+
+<h3 id="Multicol">Multicol</h3>
+
+<p>Самый старый из этих методов — это multicol, когда вы задаете <code>column-count</code>, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  column-count: 3;
+} </code>
+</pre>
+
+<p>Если вместо этого вы зададите <code>column-width</code>, то вы определите <em>минимальную </em>ширину. Браузер создаст столько столбцов той ширины, сколько будет комфортно умещаться в контейнер, а затем поделит оставшееся пространство между всеми столбцами. Поэтому число столбцов будет меняться согласно тому сколько имеется места.</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  column-width: 10em;
+} </code>
+</pre>
+
+<h3 id="Flexbox">Flexbox</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения </span></span><code>flex-grow</code> и <code>flex-shrink</code> <span class="tlid-translation translation" lang="ru"><span title="">вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с бо'льшим или меньшим пространством вокруг себя.</span></span></p>
+
+<p>В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись <code>flex: 1</code> как описано в главе <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Flexible_sizing_of_flex_items">Flexbox: Гибкое изменение размеров flex элементов</a>.</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчета размера столбцов: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">исходный код</a>.</p>
+</div>
+
+<h3 id="CSS_grid">CSS grid</h3>
+
+<p>В макете CSS Grid единицы измерения <code>fr</code> позволяют распределять доступное пространство между дорожками сетки. Следующий пример создает grid контейнер с тремя дорожками размером <code>1fr</code>. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Гибкие grids с единицами fr</a>.</p>
+
+<pre class="brush: css notranslate"><code>.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} </code>
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: версия grid макета еще проще, поскольку мы можем определить столбцы в .wrapper: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">исходный код</a>.</p>
+</div>
+
+<h2 id="Отзывчивые_изображения">Отзывчивые изображения</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой подход к отзывчивым изображениям был описан</span></span> в ранних статьях Маркотта по отзывчивому дизайну. <span class="tlid-translation translation" lang="ru"><span title="">По сути, вы берете изображение максимального размера, которое могло понадобиться, и уменьшаете его.</span></span> Этот подход до сих пор используется и в большинстве таблиц стилей вы найдете следующий CSS:</p>
+
+<pre class="brush: css notranslate"><code>img {
+  max-width: 100%;
+} </code>
+</pre>
+
+<p>Существуют очевидные недостатки к этому подходу. Изображение может быть изображено намного меньше своего исходного размера, что является пустой тратой пропускной способности — <span class="tlid-translation translation" lang="ru"><span title="">пользователь мобильных может загружать изображение, в несколько раз превышающее размер того, что он фактически видит в окне браузера. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Кроме того, вам может не понадобиться такое же соотношение сторон изображения на мобильном устройстве, как на компьютере.</span></span> Либо<span class="tlid-translation translation" lang="ru"><span title="">, учитывая меньший размер изображения на мобильном телефоне, вы можете захотеть показать совсем другое изображение, которое легче понять на маленьком экране. Такие вещи можно достичь, просто уменьшая изображение.</span></span></p>
+
+<p>Отзывчивые изображения, используя элемент {{htmlelement("picture")}} и атрибуты <code>srcset</code> и <code>sizes</code> элемента {{htmlelement("img")}} оба решают эти проблемы. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера</span> <span title="">для устройства, которое они используют.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вы также можете напрямую использовать изображения разных размеров, обеспечивая разное кадрирование или совершенно другое изображение для разных размеров экрана.</span></span></p>
+
+<p>Вы можете найти подробное <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">руководство по отзывчивым изображениям в разделе ищучения HTML </a>на MDN.</p>
+
+<h2 id="Отзывчивая_типография">Отзывчивая типография</h2>
+
+<p>Элементом отзывчивого дизайна, не освещенного ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать бо'льшую или меньшую площадь экрана.</p>
+
+<p>В этом примере, мы хотим задать нашему заголовку первого уровня <code>4rem</code>, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаем меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум <code>1200px</code>.</p>
+
+<pre class="brush: css notranslate"><code>html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} </code>
+</pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Мы отредактировали наш приведенный выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод.</span> <span title="">Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.</span></span></p>
+
+<p>В мобильных версиях заголовок меньше:</p>
+
+<figure><img alt="A stacked layout with a small heading size." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;">
+<figcaption></figcaption>
+</figure>
+
+<p>На компьютерах, однако, мы видим больший размер заголовка:</p>
+
+<figure><img alt="A two column layout with a large heading." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;">
+<figcaption></figcaption>
+</figure>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: смотрите этот пример в действии: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">исходный код</a>.</p>
+</div>
+
+<p>Такой подход к типографии показывает, что вам не надо ограничивать media queries <span class="tlid-translation translation" lang="ru"><span title="">только изменением макета страницы.</span></span> Они могут быть использоваться для <span class="tlid-translation translation" lang="ru"><span title="">настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.</span></span></p>
+
+<h3 id="Using_viewport_units_for_responsive_typography">Using viewport units for responsive typography</h3>
+
+<p>An interesting approach is to use the viewport unit <code>vw</code> to enable responsive typography. <code>1vw</code> is equal to one percent of the viewport width, meaning that if you set your font size using <code>vw</code>, it will always relate to the size of the viewport.</p>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: 6vw;
+}</pre>
+
+<p>The problem with doing the above is that the user loses the ability to zoom any text set using the <code>vw</code> unit, as that text is always related to the size of the viewport. <strong>Therefore you should never set text using viewport units alone</strong>.</p>
+
+<p>There is a solution, and it involves using <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>. If you add the <code>vw</code> unit to a value set using a fixed size such as <code>em</code>s or <code>rem</code>s then the text will still be zoomable. Essentially, the <code>vw</code> unit adds on top of that zoomed value:</p>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: calc(1.5rem + 3vw);
+}</pre>
+
+<p>This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.</p>
+
+<div class="blockIndicator note">
+<p>See an example of this in action: <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">example</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">source code</a>.</p>
+</div>
+
+<h2 id="The_viewport_meta_tag">The viewport meta tag</h2>
+
+<p>If you look at the HTML source of a responsive page, you will usually see the following {{htmlelement("meta")}} tag in the <code>&lt;head&gt;</code> of the document.</p>
+
+<pre class="brush: html notranslate"><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;</code>
+</pre>
+
+<p>This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.</p>
+
+<p>Why is this needed? Because mobile browsers tend to lie about their viewport width.</p>
+
+<p>This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.</p>
+
+<p>The trouble is that your responsive design with breakpoints and media queries won't work as intended on mobile browsers. If you've got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you'll never see your narrow screen layout on mobile. By setting <code>width=device-width</code> you are overriding Apple's default <code>width=960px</code> with the actual width of the device, so your media queries will work as intended.</p>
+
+<p><strong>So you should <em>always</em> include the above line of HTML in the head of your documents.</strong></p>
+
+<p>There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.</p>
+
+<ul>
+ <li><code>initial-scale</code>: Sets the initial zoom of the page, which we set to 1.</li>
+ <li><code>height</code>: Sets a specific height for the viewport.</li>
+ <li><code>minimum-scale</code>: Sets the minimum zoom level.</li>
+ <li><code>maximum-scale</code>: Sets the maximum zoom level.</li>
+ <li><code>user-scalable</code>: Prevents zooming if set to <code>no</code>.</li>
+</ul>
+
+<p>You should avoid using <code>minimum-scale</code>, <code>maximum-scale</code>, and in particular setting <code>user-scalable</code> to <code>no</code>. Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: There is a CSS @ rule designed to replace the viewport meta tag — <a href="/en-US/docs/Web/CSS/@viewport">@viewport</a> — however, it has poor browser support. When both are used the meta tag overrides @viewport.</p>
+</div>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.</p>
+
+<p>It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li>
+</ul>
diff --git a/files/ru/learn/css/css_properties/index.html b/files/ru/learn/css/css_properties/index.html
new file mode 100644
index 0000000000..7b0f37346d
--- /dev/null
+++ b/files/ru/learn/css/css_properties/index.html
@@ -0,0 +1,132 @@
+---
+title: 'CSS properties: what they are and how to use them'
+slug: Learn/CSS/CSS_properties
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<div class="summary">
+<p>{{Glossary("CSS")}} определяет как должна выглядеть вебстраница. Он использует предопределенные правила вместе с селекторами и свойствами для применения стилей к элементам HTML или группам элементов.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basics of {{Glossary("HTML")}}, <a href="https://developer.mozilla.org/en-US/Learn/HTML/HTML_tags">HTML elements</a>, and <a href="https://developer.mozilla.org/en-US/Learn/CSS/Using_CSS_in_a_web_page#The_link_tag">how to link HTML documents to CSS stylesheets</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>Learn about different CSS selectors and properties enough to style a simple webpage.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Разделение содержимого и стиля делает Веб разработку намного быстрее и проще. Когда вы определяете только стуктуру документа в вашем HTML файле и храните всю информацию о стиле в отдельном файле (называемом stylesheet), вы можете обновлять стили нескольких документов одновременно (а так же экономить ресурсы компьютера).</p>
+
+<p>CSS syntax consists of easy-to-use, intuitive keywords.</p>
+
+<pre class="brush: css">p {
+   font-family: "Times New Roman", georgia, sans-serif;
+   font-size: 24px;
+}</pre>
+
+<p>In the example above, <code>p</code> is a selector that applies styles to all the <code>{{HTMLElement("p")}}</code> elements at once. The CSS properties <code>font-family</code> and <code>font-size</code> are enclosed within curly braces and the corresponding values, right after the colon, determine the styles.</p>
+
+<p>There are more than <a href="/en-US/docs/Web/CSS/Reference">250 properties</a> you can apply to your document. From text to layout, (almost) anything is possible.</p>
+
+<h2 id="Active_Learning">Active Learning</h2>
+
+<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<h2 id="Deeper_dive">Deeper dive</h2>
+
+<p>If properties are fairly simple to use, selectors are another story. Okay, they aren't that hard, and mastering them unleashes the full potential of CSS. In the next examples, we will introduce the most common selectors.</p>
+
+<p>A CSS rule consists of selectors associated with properties. Selectors specify which elements will receive the properties laid down in the rule. Multiple rules can apply to the same element; the CSS cascade (which we'll discuss later on) determines which rule ends up taking effect in the case of conflicts. For now, just remember that the rule with the most <a href="/en-US/docs/Web/CSS/Specificity">specific selector</a> overrides the rules with more generic selectors.</p>
+
+<h3 id="The_element_selector">The element selector</h3>
+
+<p>Element selectors select HTML elements by element names only. Moreover, like all CSS selectors, you can apply a common set of properties to several elements at once.</p>
+
+<p>For our first example, let's assume the following HTML code fragment:</p>
+
+<pre class="brush: html">&lt;h1&gt;I'm an example&lt;/h1&gt;
+&lt;p&gt;In this example, I'm a paragraph&lt;/p&gt;
+&lt;p&gt;And I'm another paragraph&lt;/p&gt;
+</pre>
+
+<p>In the following CSS rule, the element selector <code>p</code> applies the given styles simultaneously to all the <code>{{HTMLElement("p")}}</code> elements of our HTML document, preventing extensive rewriting. We are using the {{cssxref("font-family")}} property (which defines the font in which text appears) and the {{cssxref("font-size")}} (which defines text size).</p>
+
+<pre class="brush: css">p {
+  font-family: "Helvetica", Arial, sans-serif;
+  font-size  : 12px;
+}</pre>
+
+<p>The next CSS rule only applies to <code>{{HTMLElement("h1")}}</code> elements. We are using the {{cssxref("font-size")}} property to make our title twice the size of the body text, and the {{cssxref("font-weight")}} property to make the title bold.</p>
+
+<pre class="brush: css">h1 {
+  font-size  : 24px;
+  font-weight: bold;
+}</pre>
+
+<p>The following CSS rule applies the requisite styles to both <code>{{HTMLElement("h1")}}</code> and <code>{{HTMLElement("p")}}</code> elements, potentially removing even more duplication. (This use is called "group selector" or "chain selector". Notice the comma separating the selectors). Here we are using the {{cssxref("color")}} property to specify the same text color for both headings and paragraphs.</p>
+
+<pre class="brush: css">h1, p {
+  color: darkmagenta;
+}</pre>
+
+<p>Here is the result of all this code:</p>
+
+<p>{{ EmbedLiveSample('The_element_selector') }}</p>
+
+<h3 id="The_id_selector">The id selector</h3>
+
+<p>The <code>id</code><strong> </strong>attribute of a particular HTML element uniquely identifies that element. Hence, an id selector is used only when a set of style rules applies to a single element.</p>
+
+<p>For our next example, let's assume the following HTML code fragment:</p>
+
+<pre class="brush: html">&lt;p id="hello"&gt;Hello world!&lt;/p&gt; </pre>
+
+<p>The following CSS rule applies only to that unique identified element. To make a selector into an id selector, you must put a hash character (#) in front of the id name. We are using three properties: {{cssxref("text-align")}} to center the text within the paragraph {{cssxref("border")}} to add a thin line around the paragraph, and {{cssxref("padding")}} to add some extra inner-margin between the text and the border.</p>
+
+<pre class="brush: css">#hello {
+  text-align: center;
+  border    : 1px solid black;
+  padding   : 8px;
+}</pre>
+
+<p>And the result is the following:</p>
+
+<p>{{ EmbedLiveSample('The_id_selector') }}</p>
+
+<h3 id="The_class_selector">The class selector</h3>
+
+<p>Within HTML, the <code>class</code><strong> </strong>attribute lets you apply multiple identifiers to HTML elements. Those identifiers can be used with CSS to match groups of elements regardless of element name.</p>
+
+<p>For our next example, let's assume the following HTML code fragment:</p>
+
+<pre class="brush: html">&lt;h1 class="hello"&gt;Hey there!&lt;/h1&gt;
+&lt;p class="hello bye"&gt;Let's hang out together!&lt;/p&gt;
+&lt;p class="bye"&gt;And walk over the mountain&lt;/p&gt;
+</pre>
+
+<p>Let's apply a CSS rule for all elements with the class <code>hello</code>. To make the selector into a class selector, put a period/full stop before the class name. We use the {{cssxref("font-style")}} property to italicize the text.</p>
+
+<pre class="brush: css">.hello {
+  font-style: italic;
+}</pre>
+
+<p>And another one for all elements with the class <code>bye</code>. Here we are using the {{cssxref("text-decoration")}} property to draw a line through the text.</p>
+
+<pre class="brush: css">.bye {
+  text-decoration: line-through;
+}</pre>
+
+<p>Here's what happened:</p>
+
+<p>{{ EmbedLiveSample('The_class_selector') }}</p>
+
+<h2 id="Next_step">Next step</h2>
+
+<p>So we've gone over the basics to get started with CSS. You can <a href="/en-US/docs/Learn/CSS/Basic_text_styling_in_CSS">learn more about text styling</a> or start exploring<a href="/en-US/docs/Web/CSS/Tutorials"> our CSS Tutorials</a> right away.</p>
diff --git a/files/ru/learn/css/first_steps/getting_started/index.html b/files/ru/learn/css/first_steps/getting_started/index.html
new file mode 100644
index 0000000000..30d495ad25
--- /dev/null
+++ b/files/ru/learn/css/first_steps/getting_started/index.html
@@ -0,0 +1,262 @@
+---
+title: Начало работы с CSS
+slug: Learn/CSS/First_steps/Getting_started
+tags:
+  - Beginner
+  - CSS
+  - Learn
+  - Классы
+  - Обучение
+  - Селекторы
+  - Синтаксис
+translation_of: Learn/CSS/First_steps/Getting_started
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary">В этой статье мы возьмем простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Базовое програмное обеспечение</a>, базовые знания <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работа с файлами</a>, и базовые знания HTML (смотрите <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Понять основы связывания CSS-документа с HTML-файлом и уметь выполнять простое форматирование текста с помощью CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Начнём_с_HTML">Начнём с HTML</h2>
+
+<p>Нашей отправной точкой является HTML-документ. Вы можете скопировать код снизу, если вы хотите работать на своем компьютере. Сохраните приведенный ниже код как <code>index.html</code> в папке на вашем компьютере.</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html lang="ru"&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Начало работы с CSS&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+    &lt;h1&gt;Я заголовок первого уровня&lt;/h1&gt;
+
+    &lt;p&gt;Это абзац. В нём есть &lt;span&gt;элемент span&lt;/span&gt;,
+а также &lt;a href="http://example.com"&gt;ссылка&lt;/a&gt;.&lt;/p&gt;
+
+    &lt;p&gt;Это второй абзац. Он содержит &lt;em&gt;акцентирующий&lt;/em&gt; текст.&lt;/p&gt;
+
+    &lt;ul&gt;
+        &lt;li&gt;Элемент один&lt;/li&gt;
+        &lt;li&gt;Элемент два&lt;/li&gt;
+        &lt;li&gt;Элемент &lt;em&gt;три&lt;/em&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Если Вы читаете это на устройстве или в среде, где Вы не можете легко создавать файлы, не беспокойтесь — ниже представлены редакторы кода, чтобы вы могли написать код прямо здесь, на странице.</p>
+</div>
+
+<h2 id="Добавление_CSS_в_наш_документ">Добавление CSS в наш документ</h2>
+
+<p>Самое первое, что нам нужно сделать, — это сообщить HTML-документу, что у нас есть некоторые правила CSS, которые мы хотим использовать. Существует три различных способа применения CSS к документу HTML, с которым Вы обычно сталкиваетесь, однако сейчас мы рассмотрим наиболее обычный и полезный способ сделать это — связать CSS с заголовком вашего документа.</p>
+
+<p>Создайте файл в той же папке, что и документ HTML, и сохраните его как <code>styles.css</code>. Расширение .css показывает, что это файл CSS.</p>
+
+<p>Чтобы связать styles.css с index.html, добавьте следующую строку где-то внутри{{htmlelement("head")}} HTML документа:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" href="styles.css"&gt;</pre>
+
+<p>Элемент {{htmlelement("link")}} сообщает браузеру, что у нас есть таблица стилей, используя атрибут <em>rel</em>, и местоположение этой таблицы стилей в качестве значения атрибута <em>href.</em> Вы можете проверить, работает ли CSS, добавив правило в <em>styles.css</em>. Используя Ваш редактор кода, добавьте следующее в ваш файл CSS:</p>
+
+<pre class="brush: css">h1 {
+  color: red;
+}</pre>
+
+<p>Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдет, поздравляю — Вы успешно применили CSS к документу HTML. Если этого не произойдет, внимательно проверьте, правильно ли Вы ввели всё.</p>
+
+<p>Вы можете продолжить работу в <code>styles.css</code> локально, или Вы можете использовать наш интерактивный редактор ниже, чтобы продолжить этот урок. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с документом HTML, как это было в нашем документе выше.</p>
+
+<h2 id="Стилизация_HTML-элементов">Стилизация HTML-элементов</h2>
+
+<p>Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путем нацеливания на элемент<em> selector</em> — это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, Вы должны использовать селектор <code>p</code>. Чтобы сделать все абзацы зелёными, Вы должны использовать:</p>
+
+<pre class="brush: css">p {
+  color: green;
+}</pre>
+
+<p>Вы можете выбрать несколько селекторов одновременно, разделив их запятыми. Если я хочу, чтобы все параграфы и все элементы списка были зелёными, моё правило выглядит так:</p>
+
+<pre class="brush: css">p, li {
+    color: green;
+}</pre>
+
+<p>Попробуйте это в интерактивном редакторе ниже (отредактируйте поля кода) или в своём локальном документе CSS.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p>
+
+<h2 id="Изменение_поведения_элементов_по_умолчанию">Изменение поведения элементов по умолчанию</h2>
+
+<p>Когда мы смотрим на хорошо размеченный HTML-документ, даже такой простой, как наш пример, мы можем увидеть, как браузер делает HTML читаемым, добавив некоторые стили по умолчанию. Заголовки большие и жирные, в нашем списке есть маркеры. Это происходит потому, что в браузерах есть внутренние таблицы стилей, содержащие стили по умолчанию, которые по умолчанию применяются ко всем страницам; без них весь текст работал бы вместе, и мы должны были бы стилизовать всё с нуля. Все современные браузеры по умолчанию отображают HTML-контент практически одинаково.</p>
+
+<p>Однако Вам часто захочется что-то другое, кроме выбора, сделанного браузером. Это можно сделать, просто выбрав элемент HTML, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является наш <code>&lt;ul&gt;</code> — неупорядоченный список. Он добавляет маркеры, и если я решу, что я не хочу эти маркеры, я могу удалить их вот так:</p>
+
+<pre class="brush: css">li {
+  list-style-type: none;
+}</pre>
+
+<p>Попробуйте добавить это в свой CSS сейчас.</p>
+
+<p>Свойство <code>list-style-type</code> — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> и Вы найдете интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.</p>
+
+<p>Глядя на эту страницу, вы обнаружите, что помимо удаления маркеров списка Вы можете изменить их — попробуйте изменить их на квадратные маркеры, используя значение <code>square</code>.</p>
+
+<h2 id="Добавление_класса">Добавление класса</h2>
+
+<p>Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока Вы хотите, чтобы все элементы этого типа в Вашем документе выглядели одинаково. В большинстве случаев это не так, и Вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространенный способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.</p>
+
+<p>В своем HTML-документе добавьте Атрибут <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">class</a> ко второму пункту списка. Ваш список теперь будет выглядеть так:</p>
+
+<pre class="brush: html; highlight[3]">&lt;ul&gt;
+  &lt;li&gt;Элемент один&lt;/li&gt;
+  &lt;li <strong>class="special"</strong>&gt;Элемент два&lt;/li&gt;
+  &lt;li&gt;Элемент &lt;em&gt;три&lt;/em&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>В Вашем CSS Вы можете выбрать класс <code>special</code> к любому элементу на странице, чтобы он выгядел так же, как и этот элемент списка. Добавьте следующее в ваш файл CSS:</p>
+
+<pre class="brush: css">.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>Сохраните и обновите, чтобы увидеть результат.</p>
+
+<p>Вы можете захотеть, чтобы &lt;span&gt; в абзаце также был оранжевым и жирным. Попробуйте добавить класс "<code>special"</code>, затем перезагрузите страницу и посмотрите, что получится.</p>
+
+<p>Иногда Вы увидите правила с селектором, который перечисляет селектор HTML-элемента вместе с классом:</p>
+
+<pre class="brush: css">li.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>Этот синтаксис означает «предназначаться для любого элемента li, который имеет класс special». Если бы Вы сделали это, Вы бы больше не смогли применить класс к <code>&lt;span&gt;</code> или другому элементу, просто добавив к нему класс; Вы должны добавить этот элемент в список селекторов:</p>
+
+<pre class="brush: css">li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}</pre>
+
+<p>Как Вы можете себе представить, некоторые классы могут быть применены ко многим элементам, и Вам не нужно постоянно редактировать свой CSS каждый раз, когда что-то новое должно принять этот стиль. Поэтому иногда лучше обойти элемент и просто обратиться к классу, если только Вы не знаете, что хотите создать некоторые специальные правила для одного элемента и, возможно, хотите убедиться, что они не применяются к другим элементам.</p>
+
+<h2 id="Стилизация_элементов_на_основе_их_расположения_в_документе">Стилизация элементов на основе их расположения в документе</h2>
+
+<p>Есть моменты, когда Вы хотите, чтобы что-то выглядело иначе, в зависимости от того, где оно находится в документе. Здесь есть несколько селекторов, которые могут Вам помочь, но сейчас мы рассмотрим только пару. В нашем документе два элемента <code>&lt;em&gt;</code> — один внутри абзаца, а другой внутри элемента списка. Чтобы выбрать только <code>&lt;em&gt;</code> который вложен в элемент <code>&lt;li&gt;</code>, я могу использовать селектор под названием <strong>descendant combinator (комбинатор-потомок)</strong>, который просто принимает форму пробела между двумя другими селекторами.</p>
+
+<p>Добавьте следующее правило в таблицу стилей.</p>
+
+<pre class="brush: css">li em {
+  color: rebeccapurple;
+}</pre>
+
+<p>Этот селектор выберет любой элемент <code>&lt;em&gt;</code>, который находится внутри (потомка) <code>&lt;li&gt;</code>. Итак, в Вашем примере документа Вы должны найти, что <code>&lt;em&gt;</code> в третьем элементе списка теперь фиолетовый, но тот, который находится внутри абзаца, не изменился.</p>
+
+<p>Ещё можно попробовать стилизовать абзац, когда он идет сразу после заголовка на том же уровне иерархии в HTML. Для этого поместите <code>+</code>  (<strong>соседний братский комбинатор</strong>) между селекторами.</p>
+
+<p>Попробуйте также добавить это правило в таблицу стилей:</p>
+
+<pre class="brush: css">h1 + p {
+  font-size: 200%;
+}</pre>
+
+<p>Пример ниже включает в себя два правила выше. Попробуйте добавить правило, чтобы сделать элемент span красный, если он внутри абзаца. Вы узнаете, правильно ли Вы это сделали, так как промежуток в первом абзаце будет красным, но цвет в первом элементе списка не изменит цвет.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Как Вы можете видеть, CSS даёт нам несколько способов нацеливания на элементы, и мы пока только слегка изучили его! Мы будем внимательно смотреть на все эти селекторы и многое другое в нашей статье <a href="https://developer.cdn.mozilla.net/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы</a> позже в нашем курсе.</p>
+</div>
+
+<h2 id="Стилизация_элементов_на_основе_состояния">Стилизация элементов на основе состояния</h2>
+
+<p>Последний тип стилей, который мы рассмотрим в этом уроке, — это возможность стилизовать элементы в зависимости от их состояния. Прямым примером этого является стиль ссылок. Когда мы создаём ссылку, мы должны нацелить элемент <code><a href="/en-US/docs/Web/HTML/Element/a">&lt;a&gt;</a></code> (якорь). Он имеет различные состояния в зависимости от того, посещается ли он, посещается, находится над ним, фокусируется с помощью клавиатуры или в процессе нажатия (активации). Вы можете использовать CSS для нацеливания на эти разные состояния — CSS-код ниже отображает невидимые ссылки розового цвета и посещенные ссылки зелёного цвета.</p>
+
+<pre class="brush: css">a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}</pre>
+
+<p>Вы можете изменить внешний вид ссылки, когда пользователь наводит на неё курсор, например, удалив подчеркивание, что достигается с помощью следующего правила:</p>
+
+<pre class="brush: css">a:hover {
+  text-decoration: none;
+}</pre>
+
+<p>В приведённом ниже примере Вы можете поиграть с разными значениями для разных состояний ссылки. Я добавил к нему правила, приведенные выше, и теперь понимаю, что розовый цвет довольно легкий и трудно читаемый — почему бы не изменить его на лучший цвет? Можете ли Вы сделать ссылки жирным шрифтом?</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p>
+
+<p>Мы удалили подчеркивание на нашей ссылке при наведении курсора. Вы можете удалить подчеркивание из всех состояний ссылки. Однако стоит помнить, что на реальном сайте Вы хотите, чтобы посетители знали, что ссылка является ссылкой. Оставив подчеркивание на месте, люди могут понять, что на какой-то текст внутри абзаца можно нажимать — к такому поведению они привыкли. Как и всё в CSS, существует возможность сделать документ менее доступным с Вашими изменениями — мы постараемся выделить потенциальные подводные камни в соответствующих местах.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>:  Вы часто будете видеть упоминание о <a href="https://developer.mozilla.org/ru/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C">доступности</a> в этих уроках и по всей MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятными и доступными для всех.</p>
+
+<p>Ваш посетитель вполне может быть на компьютере с мышью или сенсорной панелью или на телефоне с сенсорным экраном. Либо они могут использовать программу чтения с экрана, которая считывает содержимое документа, либо им может потребоваться использовать текст значительно большего размера, либо перемещаться по сайту только с помощью клавиатуры.</p>
+
+<p>Простой HTML-документ, как правило, доступен каждому — когда Вы начинаете оформлять этот документ, важно, чтобы Вы не сделали его менее доступным.</p>
+</div>
+
+<h2 id="Сочетание_селекторов_и_комбинаторов">Сочетание селекторов и комбинаторов</h2>
+
+<p>Стоит отметить, что Вы можете комбинировать несколько селекторов и комбинаторов вместе. Вот пример:</p>
+
+<pre class="brush: css">/* выбирает любой &lt;span&gt; внутри &lt;p&gt;, который находится внутри &lt;article&gt;  */
+article p span { ... }
+
+/* выбирает любой &lt;p&gt;, который идет сразу после &lt;ul&gt;, который идет сразу после &lt;h1&gt;  */
+h1 + ul + p { ... }</pre>
+
+<p>Вы также можете комбинировать несколько типов вместе. Попробуйте добавить следующее в ваш код:</p>
+
+<pre class="brush: css">body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}</pre>
+
+<p>Это будет стиль любого элемента с классом <code>special</code>, который находится внутри <code>&lt;p&gt;</code>, который приходит сразу после <code>&lt;h1&gt;</code>, который находится внутри <code>&lt;body&gt;</code>. Уф!</p>
+
+<p>В оригинальном HTML, который мы предоставили, единственный элемент в стиле <code>&lt;span class="special"&gt;</code>.</p>
+
+<p>Не беспокойтесь, если это покажется сложным — Вы скоро начнете понимать это, когда будете писать больше на CSS.</p>
+
+<h2 id="Завершение">Завершение</h2>
+
+<p>В этом уроке мы рассмотрели несколько способов стилизации документа с использованием CSS. Мы будем развивать эти знания по мере прохождения остальных уроков. Однако Вы уже знаете достаточно, чтобы стилизовать текст, применять CSS на основе различных способов нацеливания на элементы в документе и искать свойства и значения в документации MDN.</p>
+
+<p>На следующем уроке мы рассмотрим структуру CSS.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS">Что такое CSS?</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Как структурирован CSS</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Используя ваши новые знания</a></li>
+</ol>
diff --git a/files/ru/learn/css/first_steps/how_css_works/index.html b/files/ru/learn/css/first_steps/how_css_works/index.html
new file mode 100644
index 0000000000..a0ff236f45
--- /dev/null
+++ b/files/ru/learn/css/first_steps/how_css_works/index.html
@@ -0,0 +1,163 @@
+---
+title: Как работает CSS
+slug: Learn/CSS/First_steps/How_CSS_works
+tags:
+  - Beginner
+  - CSS
+  - DOM
+  - DOM дерево
+  - Learn
+  - Начинающий
+  - Обучение
+  - дерево
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>{{LearnSidebar}}<br>
+ {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
+
+<p class="summary">Мы уже изучили основы CSS, для чего он нужен и как создавать простые таблицы стилей. В этом уроке мы посмотрим, как браузер обрабатывает CSS и HTML и выводит содержимое на веб-страницу.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>Основы компьютерной грамотности, <a href="/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения">базовое программное обеспечение</a>, умение <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">умение работать с файлами</a> и начальные знания HTML (рекомендуется изучить <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Понимать основы того, как браузер анализирует CSS и HTML и что происходит когда браузер встречает неизвестные CSS стили</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Как_работает_CSS">Как работает CSS?</h2>
+
+<p>Когда браузер отображает документ, он должен совместить его содержимое с его стилями. Этот процесс идет в несколько этапов, о которых мы сейчас поговорим. Держите в уме, что это очень упрощенная версия того как браузер действительно загружает веб-страницу, а также то, что разные браузеры делают это по разному. Но, происходит, грубо говоря, следующее:</p>
+
+<ol>
+ <li>Браузер получает HTML-страницу (например, из Интернета)</li>
+ <li>Преобразует {{Glossary("HTML")}} в {{Glossary("DOM")}} (<em>Document Object Model</em>). DOM (или DOM-дерево) - это представление страницы в памяти компьютера. Подробнее на DOM мы остановимся чуть позже.</li>
+ <li>Затем браузер забирает все ресурсы и описания, связанные с HTML-документом, например: встроенные картинки, видео ... и  стили CSS! JavaScript присоединяется чуть позже и мы пока не будем говорить об этом, чтобы все не усложнять.</li>
+ <li>После этого браузер анализирует полученный CSS код, сортирует описанные там правила в зависимости от их селекторов и раскладывает их в различные «корзины»: элементы, классы, идентификаторы(ID) и т.п. Основываясь на найденных селекторах браузер понимает какие правила относятся к определенным «узлам» в DOM-дереве и применяет их по мере необходимости (этот промежуточный шаг называют «формированием дерева представления» или «формированием дерева рендеринга»)</li>
+ <li>Дерево представления (<em>render tree</em>) формируется в том порядке, в каком оно затем должно будет отображаться, когда все правила будут применены.</li>
+ <li>Затем происходит визуальное отображение контента на странице (этот этап называется «отрисовкой»)</li>
+</ol>
+
+<p>Диаграмма демонстрирует этот процесс.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17080/Browser_simple_rendering_pipeline__ru.png" style="height: 655px; max-width: 635px; width: 1366px;"></p>
+
+<h2 id="DOM-дерево">DOM-дерево</h2>
+
+<p>DOM напоминает дерево. Каждый элемент, атрибут, отрывок текста становится {{Glossary("Node/DOM","DOM node")}} в разметке. DOM-узлы определяются их отношением с другими узлами. Некоторые родительские элементы имеют дочерние, а у дочерних элементов есть братские.</p>
+
+<p>Понимание DOM позволит вам разрабатывать, отлаживать и поддерживать ваш CSS, потому что именно в DOM-дереве Ваши таблицы стилей и код встречаются. Когда вы начнете работать с браузерным DevTools(инструменты для разработки) вы будете перемещаться по DOM при выборе элементов чтобы увидеть какие правила применяются.</p>
+
+<h2 id="Как_представлено_DOM-дерево">Как представлено DOM-дерево</h2>
+
+<p>Вместо длинного, нудного объяснения взглянем лучше на пример, чтобы понять, как HTML-код преобразуется в DOM.</p>
+
+<p>Возьмём следующий пример:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Let's use:
+  &lt;span&gt;Cascading&lt;/span&gt;
+  &lt;span&gt;Style&lt;/span&gt;
+  &lt;span&gt;Sheets&lt;/span&gt;
+&lt;/p&gt;
+</pre>
+
+<p>В DOM-дереве узел, соответствующий элементу <code>&lt;p&gt;</code>, — это родительский элемент. Его дочерние элементы — текст и три элемента <code>&lt;span&gt;</code>. Узлы <code>SPAN</code> также будут родителями — с текстом в качестве дочерних элементов:</p>
+
+<pre class="notranslate">P
+├─ "Let's use:"
+├─ SPAN
+|  └─ "Cascading"
+├─ SPAN
+|  └─ "Style"
+└─ SPAN
+   └─ "Sheets"
+</pre>
+
+<p>Вот как браузер преобразует HTML-код — он загружает DOM-дерево, и в результате мы получим это:</p>
+
+<p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">p {margin:0;}</pre>
+</div>
+
+<h2 id="Добавление_CSS_в_DOM">Добавление CSS в DOM</h2>
+
+<p>Допустим, мы добавили таблицу стилей к нашему примеру:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Let's use:
+  &lt;span&gt;Cascading&lt;/span&gt;
+  &lt;span&gt;Style&lt;/span&gt;
+  &lt;span&gt;Sheets&lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<p>А вот CSS-код:</p>
+
+<pre class="brush: css notranslate">span {
+  border: 1px solid black;
+  background-color: lime;
+}</pre>
+
+<p>Браузер загрузит HTML-код, преобразует его в DOM и только потом загрузит CSS. Так как у нас всего одно правило,  браузер загрузит CSS очень быстро! Это правило будет добавлено к каждому из трёх элементов <code>&lt;span&gt;</code>. После этого информация будет отображена на экране.</p>
+
+<p>Новый результат:</p>
+
+<p>{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}</p>
+
+<p>В статье <a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a> мы будем использовать браузер DevTools для отладки CSS.</p>
+
+<h2 id="Что_происходит_когда_браузер_не_понимает_CSS">Что происходит, когда браузер не понимает CSS?</h2>
+
+<p><a href="/ru/docs/Learn/CSS/First_steps/Что_такое_CSS#Поддержка_браузера">В предыдущем уроке</a> я упомянул, что некоторые браузеры могут не поддерживать новые функции CSS. Вдобавок не все используют новейшие версии браузеров. Зная, что CSS разрабатывается всё время, Вы можете поразиться и крайне ужаснуться тому, что происходит, если браузер не распознаёт объявление или селектор. Что же произойдёт?</p>
+
+<p>— Да ничего: браузер просто пропустит это!</p>
+
+<p>Если браузер встретит свойство, которое он не понимает, он просто-напросто проигнорирует его и двинется дальше. Он сделает так, если Вы допустите опечатку или ошибку в свойстве или значении или если он не поддерживает какое-либо свойство или значение.</p>
+
+<p>Если же браузер встретит селектор, который он не распознаёт, то он просто пропустит данное правило и двинется дальше.</p>
+
+<p>Ниже я использовал британское написание слова <em>color</em>, что делает свойство некорректным. Поэтому текст не будет синим. Однако всё остальное будет работать; пропущено только недействительное свойство.</p>
+
+<div id="Skipping_example">
+<pre class="brush: html notranslate">&lt;p&gt; I want this text to be large, bold and blue.&lt;/p&gt;</pre>
+
+<pre class="brush: css notranslate">p {
+  font-weight: bold;
+  colour: blue; /* некорректное написание свойства цвета */
+  font-size: 200%;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p>
+
+<p>Такое поведение можно использовать, например, при добавлении новых функций CSS в качестве дополнения, причём Вы будете уверены, что ничего не сломается, если браузер не распознает элемент. Вы можете использовать два правила с одинаковыми уровнями спецификации: одно — в качестве альтернативы для случая, если браузер не поддерживает нововведение.</p>
+
+<p>Это хорошо применяется, если Вы хотиете использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают <code>calc()</code> как значение. Я добавлю резерв — знаение в px, затем задам ширину с помощью функции <code>calc()</code>, равной <code>100% - 50px</code>. Старые браузеры используют пиксельное значение, потому что не распознают <code>calc()</code>. Новые браузеры используют <code>calc()</code> так как эта строка появляется позже в каскаде.</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 500px;
+  width: calc(100% - 50px);
+}</pre>
+
+<h2 id="Завершение">Завершение</h2>
+
+<p>Вы почти закончили модуль; осталось только одно. В следующей статье Вы попрактикуетесь в <a href="/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge">использовании ваших новых знаний</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="/ru/docs/Learn/CSS/First_steps/Что_такое_CSS">Что такое CSS?</a></li>
+ <li><a href="/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS">Как структурирован CSS </a></li>
+ <li><a href="/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Использование ваших новых знаний</a></li>
+</ol>
diff --git a/files/ru/learn/css/first_steps/index.html b/files/ru/learn/css/first_steps/index.html
new file mode 100644
index 0000000000..2e0ed35d7e
--- /dev/null
+++ b/files/ru/learn/css/first_steps/index.html
@@ -0,0 +1,54 @@
+---
+title: Введение в CSS
+slug: Learn/CSS/First_steps
+tags:
+  - Beginner
+  - CSS
+  - Landing
+  - Learn
+  - first steps
+  - Введение
+  - Начинающий
+translation_of: Learn/CSS/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц - например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML.</p>
+
+<h2 id="Необходимые_условия">Необходимые условия</h2>
+
+<p>Перед запуском этого модуля вы должны иметь:</p>
+
+<ol>
+ <li>Базовое знакомство с использованием компьютеров и пассивным использованием Интернета (то есть, просматривая его, потребляя контент).</li>
+ <li>Базовая рабочая среда, описанная в разделе <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a>, и понимание того, как создавать файлы и управлять ими, подробно описано в разделе <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>.</li>
+ <li>Основное знакомство с HTML, как описано в модуле <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Примечание:</strong> Если вы работаете на компьютере / планшете / другом устройстве, на котором у вас нет возможности создавать свои собственные файлы, вы можете опробовать (большую часть) примеры кода в онлайн-программах кодирования, таких как JSBin или Thimble.</p>
+</div>
+
+<h2 id="Руководства">Руководства</h2>
+
+<p>Этот модуль содержит следующие статьи, в которых вы ознакомитесь со всеми основными теориями CSS и сможете проверить некоторые навыки.</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS">Что такое CSS?</a></dt>
+ <dd><strong>{{Glossary("CSS")}}</strong> (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a></dt>
+ <dd>В этой статье мы возьмем простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.</dd>
+ <dt><a href="https://developer.cdn.mozilla.net/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS">Как структурирован CSS</a></dt>
+ <dd>Теперь, когда у вас есть представление о том, что такое CSS и как его использовать, пришло время немного углубиться в структуру самого языка. Мы уже встречали множество концепций, обсуждаемых здесь; Вы можете вернуться к этому, чтобы повторить, если вы находите какие-либо более поздние концепции запутанными.</dd>
+ <dt><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></dt>
+ <dd>Мы изучили основы CSS — для чего он нужен и как писать простые таблицы стилей. В этом уроке мы рассмотрим, как браузер берет CSS и HTML и превращает их в веб-страницу.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Использование ваших новых знаний</a></dt>
+ <dd>С учетом того, что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья дает вам шанс сделать это.</dd>
+</dl>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt>
+ <dd>Отличный базовый курс от Mozilla, в котором рассматриваются и тестируются многие навыки, о которых говорилось в модуле <em>Введение в CSS</em>. Узнайте о стилях элементов HTML на веб-странице, селекторах CSS, атрибутах и значениях.</dd>
+</dl>
diff --git a/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html
new file mode 100644
index 0000000000..015846a9ff
--- /dev/null
+++ b/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html
@@ -0,0 +1,104 @@
+---
+title: Использование ваших новых знаний
+slug: Learn/CSS/First_steps/Using_your_new_knowledge
+tags:
+  - Beginner
+  - CSS
+  - Learn
+  - Playground
+  - Начинающий
+  - Обучение
+translation_of: Learn/CSS/First_steps/Using_your_new_knowledge
+---
+<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<dl>
+ <dd>С учетом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья дает вам возможность сделать это.</dd>
+</dl>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>Перед тем как начать, вы должны разобраться в основах CSS и HTML (смотрите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Попрактиковать использование CSS с вашими новыми знаниями.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Перед_началом">Перед началом</h2>
+
+<p>Вы можете писать код в редакторе ниже или <a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">скачать исходный код</a>, чтобы работать в вашем собственном редакторе. Это страница с кодом HTML и CSS внутри него. Если вам так удобнее, вы можете переместить CSS в отдельный файл на вашем компьютере. Или вы можете использовать онлайн-редакторы, такие как <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> или <a href="https://glitch.com/" rel="noopener">Glitch</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Если у вас не получается, попросите о помощи — читайте раздел {{anch("Помощь")}} с кодом ниже.</p>
+</div>
+
+<h2 id="Работа_с_CSS">Работа с CSS</h2>
+
+<p>В следующем примере демонстрируется биография, стилизованная с помощью CSS. Каждое использованное мной свойство CSS — ссылка на соответствующую страницу MDN.</p>
+
+<ul>
+ <li>{{cssxref("font-family")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("text-decoration")}}</li>
+</ul>
+
+<p>Я использовал разные селекторы, такие как h1 и h2, а также создал класс для названия профессии для его стилизации.</p>
+
+<p>Измените значения свойств CSS, чтобы поменять внешний вид биографии.</p>
+
+<ol>
+ <li>Сделайте заголовок розовым, используя CSS-цвет <code>hotpink</code>.</li>
+ <li>Значение свойства заголовка {{cssxref("border-bottom")}} сделайте пунктирным (10px dotted) и добавьте цвет <code>purple</code>.</li>
+ <li>Примените к подзаголовку <code>&lt;h2&gt;</code> курсив.</li>
+ <li>Установите цвет <code>#eeeeee</code> для фона {{cssxref("background-color")}} маркированного списка с контактными данными и значение 5px solid purple для {{cssxref("border")}}. Используйте {{cssxref("padding")}}, чтобы отделить содержимое блока от границы.</li>
+ <li>Сделайте ссылки <code>зелёными</code> при наведении.</li>
+</ol>
+
+<p>У Вас должно получиться примерно как-то так:</p>
+
+<p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p>
+
+<p>После этого попробуйте использовать селекторы, не указанные здесь, но описанные в <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Reference">Руководстве по CSS</a>. Не бойтесь ошибок — практикуйтесь!</p>
+
+<p>Помните: тут нет неверного решения — сейчас вы предоставлены сами себе; развлекайтесь!</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p>
+
+<h2 id="Помощь">Помощь</h2>
+
+<p>Если Вы хотите, чтобы вашу работу оценили, или вы не справляетесь, и вам нужна помощь:</p>
+
+<ol>
+ <li>Загрузите Ваш код на <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> или <a href="https://glitch.com/" rel="noopener">Glitch</a>.</li>
+ <li>Напишите пост с просьбой о помощи и / или оценке на <a href="https://discourse.mozilla.org/c/mdn">форуме MDN</a>. Добавьте тег "learning" к вашему посту, чтобы нам легче было его найти. В Вашем посте должны быть:
+  <ul>
+   <li>Заголовок с описанием наподобие "Assessment wanted for CSS First Steps".</li>
+   <li>Описание того, что Вам нужно, — к примеру, что Вы уже пробовали, что у Вас не получается и Вам нужна помощь.</li>
+   <li>Ссылка на ваш код в онлайн-редакторе.</li>
+   <li>Ссылка на страницу о помощи, чтобы мы смогли помочь Вам с вашим вопросом.</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>Поздравляем Вас с завершением первого модуля! Теперь Вы неплохо разбираетесь в CSS и можете разобраться в таблицах стилей. В следующем модуле, <a href="/ru/docs/Learn/CSS/Building_blocks">Как устроен CSS</a>, мы глубже разберёмся в некоторых аспектах языка.</p>
+
+<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Что такое CSS?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Как струтурирован CSS</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li>
+</ol>
diff --git a/files/ru/learn/css/first_steps/как_структурирован_css/index.html b/files/ru/learn/css/first_steps/как_структурирован_css/index.html
new file mode 100644
index 0000000000..d2c60edcfb
--- /dev/null
+++ b/files/ru/learn/css/first_steps/как_структурирован_css/index.html
@@ -0,0 +1,528 @@
+---
+title: Как структурирован CSS
+slug: Learn/CSS/First_steps/Как_структурирован_CSS
+tags:
+  - Beginner
+  - CSS
+  - HTML
+  - Learn
+  - Комментарии
+  - Обучение
+  - Свойство
+  - Структура
+  - значения
+  - отступ
+  - селектор
+  - сокращение
+translation_of: Learn/CSS/First_steps/How_CSS_is_structured
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary">Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Базовое програмное обеспечение</a>, базовые знания <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работа с файлами</a>, и базовые знания HTML (статья <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>), и знание о том <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Подробно узнать основные синтаксические структуры CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Применение_CSS_к_вашему_HTML">Применение CSS к вашему HTML</h2>
+
+<p>Первое, что мы рассмотрим, это три метода применения CSS к документу.</p>
+
+<h3 id="Внешняя_таблица_стилей">Внешняя таблица стилей</h3>
+
+<p>В статье ​<a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a> мы связывали внешнюю таблицу стилей с нашей страницей. Это самый распространенный и полезный способ крепления CSS к документу, так вы можете привязать CSS сразу к нескольким страницам, что позволяет стилизовать их всё с той же таблицей стилей. В большинстве случаев различные страницы сайта будут выглядеть почти так же, поэтому вы можете использовать один и тот же набор правил для основного вида.</p>
+
+<p>Внешняя таблица стилей - это когда у вас есть CSS отдельным файлом с расширением <code>.css</code>, и ссылка на него из HTML-элемента <code>&lt;link&gt;</code>:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Я пробую писать CSS&lt;/title&gt;
+    &lt;link rel="stylesheet" href="styles.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Привет!&lt;/h1&gt;
+    &lt;p&gt;Это мой первый опыт в CSS&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Файл CSS может выглядеть следующим образом:</p>
+
+<pre class="brush: css notranslate">h1 {
+  color: blue;
+  background-color: yellow;
+  border: 1px solid black;
+}
+
+p {
+  color: red;
+}</pre>
+
+<p>Атрибут <code>href</code> элемента {{htmlelement("link")}} должен ссылаться на файл в файловой системе.</p>
+
+<p>В приведенном выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:</p>
+
+<pre class="brush: html notranslate">&lt;!-- Файл находится внутри под-директории <em>styles</em>, находящейся в текущей директории --&gt;
+&lt;link rel="stylesheet" href="styles/style.css"&gt;
+
+&lt;!-- Файл — внутри под-директории <em>styles</em> внутри под-под-директории <em>general</em> и так далее --&gt;
+&lt;link rel="stylesheet" href="styles/general/style.css"&gt;
+
+&lt;!-- Вверх на один уровень в директории, затем направиться в под-директорию <em>styles</em> --&gt;
+&lt;link rel="stylesheet" href="../styles/style.css"&gt;</pre>
+
+<h3 id="Внутренняя_таблица_стилей">Внутренняя таблица стилей</h3>
+
+<p>Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента {{htmlelement("style")}}, содержащейся внутри HTML {{htmlelement("head")}}.</p>
+
+<p>Таким образом, HTML будет выглядеть вот так:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Я пробую писать CSS&lt;/title&gt;
+    &lt;style&gt;
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Привет!&lt;/h1&gt;
+    &lt;p&gt;Это мой первый опыт в CSS&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Это может быть полезно в некоторых обстоятельствах (возможно, вы работаете с системой управления контентом, где вы не можете изменить CSS-файлы непосредственно), но это менее эффективно, чем внешние таблицы стилей: CSS будет необходимо прописывать отдельно для каждой страницы и изменять, если требуются изменения.</p>
+
+<h3 id="Встроенные_стили">Встроенные стили</h3>
+
+<p>Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте <code>style</code>:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Я пробую писать CSS&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1 style="color: blue;background-color: yellow;border: 1px solid black;"&gt;Привет!&lt;/h1&gt;
+    &lt;p style="color:red;"&gt;Это мой первый опыт в CSS&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>Пожалуйста, не делайте этого! </strong>Это очень плохо для технического обслуживания (вам, возможно, придётся обновить одну и ту же информацию несколько раз в одном документе), а также смешивает ваши презентационные данные CSS с структурной информацией HTML, что делает код трудным для чтения и понимания. Хранение различных типов кода отделено делает работу гораздо более лёгкой для всех, кто работает над кодом.</p>
+
+<p>Есть несколько мест, где встроенные стили являются более распространенными или даже желательными. Вам, возможно, придется прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.</p>
+
+<h2 id="Игра_с_CSS_в_этой_статье">Игра с CSS в этой статье</h2>
+
+<p>Существует много возможностей, чтобы поиграть с CSS в этой статье. Для этого мы рекомендуем создать новый каталог / папку на вашем компьютере и внутри него создать копии следующих двух файлов:</p>
+
+<p>index.html:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang="ru"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Я пробую писать CSS&lt;/title&gt;
+    &lt;link rel="stylesheet" href="styles.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    &lt;p&gt;Пишите сюда свой код&lt;/p&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>styles.css:</p>
+
+<pre class="brush: css notranslate">/* Пишите сюда свой код */
+
+p {
+  color: red;
+}</pre>
+
+<p>Затем, когда вы столкнетесь с CSS и захотите поэкспериментировать со стилями, измените содержимое <code>&lt;body&gt;</code> HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.</p>
+
+<p>Если вы не используете систему, в которой вы можете легко создавать файлы, вы можете вместо этого использовать интерактивный редактор ниже чтобы экспериментировать.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} </p>
+
+<p>Читайте дальше и получайте удовольствие!</p>
+
+<h2 id="Селекторы">Селекторы</h2>
+
+<p>Говоря о CSS, нельзя не упомянуть о селекторах, о некоторых типах которых мы уже говорили в руководстве <a href="/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a>. Селектор — это то, как мы обозначаем что-либо в нашем HTML-документе, чтобы стилизовать его. Если стиль не применился, то это, скорее всего, потому, что селектор в таблицах стилей не совпал с тем, что в HTML-документе.</p>
+
+<p>Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:</p>
+
+<pre class="brush: css notranslate">h1  /* это селектор тегов */
+a:link  /* это селектор ссылок */
+.manythings  /* это селектор классов (классы применяются тогда, когда необходимо применить правило к нескольким элементам) */
+#onething  /* это селектор идентификаторов (они применяются, когда правило относится к одному элементу) */
+*  /* уневерсальный селектор */
+.box p  /* селектор потомков */
+.box p:first-child  /* селектор потомков + селектор псевдоклассов */
+h1, h2, .intro  /* пречисление селекторов */
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Вы узнаете больше о селекторах в руководстве <a href="/ru/docs/Web/CSS/CSS_%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">CSS-селекторы</a> в следующем модуле.</p>
+</div>
+
+<h3 id="Спецификация">Спецификация</h3>
+
+<p>Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента <code>p</code> — он будет синим; также я задал класс, который сделает элемент красным:</p>
+
+<pre class="brush: css notranslate">.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}</pre>
+
+<p>А теперь допустим, что в нашем HTML-коде у нас есть абзац <code>p</code> с классом <code>special</code>. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?</p>
+
+<pre class="brush: html notranslate">&lt;p class="special"&gt;Какого же я цвета?&lt;/p&gt;</pre>
+
+<p>В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются <strong>каскадами</strong>, или <strong>спецификациями</strong>. В примере ниже мы задали два правила для селектора <code>p</code>, но в итоге текст будет синим: объвление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}
+
+p {
+  color: blue;
+}</pre>
+
+<p>А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.</p>
+
+<p><strong>Попрактикуйтесь сами — добавьте два правила для параграфа <code>p { ... }</code> в вашу таблицу стилей. Затем добавьте класс к одному элементу <code>p</code> и попробуйте применить к нему какой-нибудь стиль.</strong></p>
+
+<p>Понимание каскадов, или правил, улучшается с практикой. В статье <a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a> я хорошенько объясню, как определить уровень спецификации. А пока что запомните, что иногда CSS не применяется так, как вы того хотели бы, так как у чего-то в таблице стилей больший уровень спецификации.</p>
+
+<h2 id="Свойства_и_значения">Свойства и значения</h2>
+
+<p>Если говорить в общем, CSS строится на двух его составляющих:</p>
+
+<dl>
+ <dt><strong>Свойства</strong> </dt>
+ <dd>Определяют, какую характеристику вы желаете изменить (например, <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>).</dd>
+</dl>
+
+<dl>
+ <dt>Значения </dt>
+ <dd>Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.</dd>
+</dl>
+
+<p>На изображении внизу выделены свойство и его значение. Здесь свойство — <code>color</code>, а его значение — <code>blue</code>.</p>
+
+<p><img alt="A declaration highlighted in the CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>Свойство вкупе со значением называется <em>CSS-объявлением</em>. CSS-объявления помещаются внутри <em>блока объявлений CSS</em>. Ниже показан наш CSS-код с выделенным блоком объявлений.</p>
+
+<p><img alt="A highlighted declaration block" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>Наконец блок объявлений воссоединяется с <em>селекторами</em>, образуя <em>CSS-правила</em>. Наше изображение содержит два правила — одно для селектора <code>h1</code>, другое для селектора <code>p</code>. Правило для <code>h1</code> выделено.</p>
+
+<p><img alt="The rule for h1 highlighted" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием (<code>:</code>).</p>
+
+<p><strong>Попробуйте подобрать нужные значения к следующим свойствам, а свойства добавить в ваш код: </strong></p>
+
+<ul>
+ <li><strong>{{cssxref("font-size")}}</strong></li>
+ <li><strong>{{cssxref("width")}}</strong></li>
+ <li><strong>{{cssxref("background-color")}}</strong></li>
+ <li><strong>{{cssxref("color")}}</strong></li>
+ <li><strong>{{cssxref("border")}}</strong></li>
+</ul>
+
+<div class="warning">
+<p><strong>Важно</strong>: Если свойство или значение не определено, то объявление считается <em>недействительным</em> — и будет попросту проигнорировано.</p>
+</div>
+
+<div class="warning">
+<p><strong>Важно</strong>: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, <code>color</code> надо <em>всегда</em> писать <code>color</code>; британский вариант <code>colour</code> не будет работать.</p>
+</div>
+
+<h3 id="Функции">Функции</h3>
+
+<p>Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию <code>calc()</code>. Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:</p>
+
+<div id="calc_example">
+<pre class="brush: html notranslate">&lt;div class="outer"&gt;&lt;div class="box"&gt;The inner box is 90% - 30px.&lt;/div&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}</pre>
+</div>
+
+<p>В результате получим это:</p>
+
+<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p>
+
+<p>Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!</p>
+
+<p>В следующем примере будут различные значения для свойства {{cssxref("&lt;transform&gt;")}} <code>rotate()</code>.</p>
+
+<div id="transform_example">
+<pre class="brush: html notranslate">&lt;div class="box"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn)
+}</pre>
+</div>
+
+<p>Результат этого кода будет:</p>
+
+<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p>
+
+<p><strong>Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл: </strong></p>
+
+<ul>
+ <li><strong>{{cssxref("transform")}}</strong></li>
+ <li><strong>{{cssxref("background-image")}}, в частности со значениями градиента</strong></li>
+ <li><strong>{{cssxref("color")}},в частности со значениями rgb/rgba/hsl/hsla</strong></li>
+</ul>
+
+<h2 id="правила">@правила</h2>
+
+<p>До сих пор не сталкивались мы с правилами <code><a href="/en-US/docs/Web/CSS/At-rule">@rules</a></code> (произносится как <em>эт-рулс</em>, от английского "at-rules"). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил <code>@rules</code> простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать <code>@import</code>:</p>
+
+<pre class="brush: css notranslate">@import 'styles2.css';</pre>
+
+<p>Чаще других встречается <code>@rules</code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> под названием </span></font><code>@media</code>: оно позволяет вам использовать <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиа-запросы</a>, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).</p>
+
+<p>Ниже у нас CSS-файл, в котором значение заднего фона элемента <code>&lt;body&gt;</code> равно <code>pink</code>. Однако после мы добавили правило <code>@media</code>, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.</p>
+
+<pre class="brush: css notranslate">body {
+  background-color: pink;
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}</pre>
+
+<p>Вы столкнётесь и с другими правилами <code>@rules</code> в продолжение следующих уроков.</p>
+
+<p><strong>Добавьте правило, которое изменяет стиль элемента, основываясь на ширине окна. Измените ширину окна, чтобы увидеть результат.</strong></p>
+
+<h2 id="Стенография">Стенография</h2>
+
+<p>Некоторые свойства вроде {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} и {{cssxref("margin")}} называются <em>стенографическими свойствами</em>, — они позволяют установать несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.</p>
+
+<p>К примеру, это строка (комментарий не в счёт):</p>
+
+<pre class="brush: css notranslate">/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются
+   в порядке верх–право–низ–лево (по часовой стрелке сверху). В трёхзначных стенограммах
+   значения добавляются в порядке верх(низ)–право–лево.
+   В двузначных стенограммах значения добавляются
+   от верхнего/нижнего края к левому/правому краю */
+padding: 10px 15px 15px 5px;</pre>
+
+<p>делает то же самое, что и эти четыре, вместе взятые:</p>
+
+<pre class="brush: css notranslate">padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;
+</pre>
+
+<p>или эти:</p>
+
+<pre class="brush: cpp notranslate">padding-block-start: 10px
+padding-inline-end: 15px;
+padding-block-end: 15px;
+padding-inline-start: 5px;</pre>
+
+<p>в то время как строка:</p>
+
+<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre>
+
+<p>делает то же, что и эти строки:</p>
+
+<pre class="brush: css notranslate">background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-scroll: fixed;</pre>
+
+<p>Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в <a href="/ru/docs/Web/CSS/Reference">Руководстве по CSS</a>.</p>
+
+<p><strong>Добавьте вышеупоминутые объвления в ваш код. Попробуйте изменить значения и посмотреть на результат.</strong></p>
+
+<div class="blockIndicator warning">
+<p><strong>Осторожно</strong>: Стенографии позволяют пропускать некоторые величины, и это может отразиться на результате недолжным образом.</p>
+</div>
+
+<h2 id="Комментарии">Комментарии</h2>
+
+<p>Как и в HTML, вы можете делать комментарии, чтобы прояснить тот или иной отрывок кода.</p>
+
+<p>Комментарии в CSS начинаются с <code>/*</code> и окачиваются с <code>*/</code>. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.</p>
+
+<pre class="brush: css notranslate">/* Работаю над основными элементами */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* Позволяет определить размер шрифта. На широких экранах
+     больше размер шрифта для удобства чтения */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* Работаю над элементами, вложенными в DOM  */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  background-style: none
+}
+
+div p{
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}</pre>
+
+<p>Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора <code>.special</code>.</p>
+
+<pre class="brush: css notranslate">/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}</pre>
+
+<p><strong>Добавьте комментарии в ваш CSS-код, чтобы приноровиться к ним.</strong></p>
+
+<h2 id="Отступы">Отступы</h2>
+
+<p>Под отступами подразумеваются пробелы, табуляция и перенос на новую строку. Как и в HTML, браузер будет стараться игнорировать большие отступы в CSS-коде; к тому же большие отступы пагубны для читаемости кода.</p>
+
+<p>В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:</p>
+
+<pre class="brush: css notranslate">body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+div p,
+#id:first-line {
+  background-color: red;
+  background-style: none
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+</pre>
+
+<p id="Very_compact">То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:</p>
+
+<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+@media (min-width: 70em) { body {font-size: 130%;} }
+
+h1 {font-size: 1.5em;}
+
+div p, #id:first-line {background-color: red; background-style: none}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+</pre>
+
+<p>Как вы будете оформлять код — решать вам; хотя, работая в команде, вы обнаружите, что она придерживается тех правил форматирования, которые в ней утверждены.</p>
+
+<p>Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:</p>
+
+<pre class="brush: css notranslate">margin: 0 auto;
+padding-left: 10px;</pre>
+
+<p>А такие объявления не действительны:</p>
+
+<pre class="brush: css notranslate">margin: <strong>0auto</strong>;
+<strong>padding- left</strong>: 10px;</pre>
+
+<p>Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.</p>
+
+<p><strong>Добавьте отступы в ваш код и посмотрите, что повлияет на код, а что нет.</strong></p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>Полезно знать, как браузер делает из HTML и CSS готовую страницу, поэтом следующая ваша статья — <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a> — мы рассмотрим этот процесс.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS">Что такое CSS?</a></li>
+ <li><a href="/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS">Как структурирован CSS</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Использование ваших новых знаний</a></li>
+</ol>
diff --git a/files/ru/learn/css/first_steps/что_такое_css/index.html b/files/ru/learn/css/first_steps/что_такое_css/index.html
new file mode 100644
index 0000000000..6b5bdf8924
--- /dev/null
+++ b/files/ru/learn/css/first_steps/что_такое_css/index.html
@@ -0,0 +1,130 @@
+---
+title: Что такое CSS?
+slug: Learn/CSS/First_steps/Что_такое_CSS
+tags:
+  - Beginner
+  - CSS
+  - Learn
+  - Введение в CSS
+  - Начинающий
+  - Обучение
+  - Синтаксис
+  - Спецификации
+translation_of: Learn/CSS/First_steps/What_is_CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First steps")}}</div>
+
+<p class="summary"><strong>{{Glossary("CSS")}}</strong> (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS, с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Требуемые знания:</th>
+   <td>Базовые компьютерные знания, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового програмного обеспечения</a>, базовые знания <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работа с файлами</a> и базовые знания HTML  (<a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Узнать, что такое CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>В модуле <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Основы HTML</a> мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше, чем обычный текст, абзацы разбиваются на новую строку и будут иметь пространство между друг другом. Ссылки выделены цветом и подчеркнуты, чтобы отличить их от остального текста. То, что Вы видите, — это стили браузера по умолчанию — самые основные стили, которые браузер применяет к HTML, чтобы гарантировать, что он будет в основном читабельным, даже если автор страницы не указал явный стиль.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17072/Basic_styling__ru.png" style="border: 1px solid #cccccc; height: 678px; width: 1385px;"></p>
+
+<p>Тем не менее, интернет был бы скучным, если бы все сайты выглядели так. Используя CSS, Вы можете до мелочей контролировать, как элементы HTML выглядят в браузере, представляя вашу разметку, используя любой понравившийся Вам дизайн.</p>
+
+<h2 id="Для_чего_нужен_CSS">Для чего нужен CSS?</h2>
+
+<p>Как мы уже упоминали ранее, CSS — это язык для определения того, как документы представляются пользователям — как они оформляются, размещаются и т. д.</p>
+
+<p><strong>Документ</strong> обычно представляет собой текстовый файл, структурированный с использованием языка разметки: {{Glossary("HTML")}} — самый распространенный язык разметки, но Вы также можете встретить другие языки разметки, такие как {{Glossary("SVG")}} или {{Glossary("XML")}}.</p>
+
+<p><strong>Представление</strong> документа пользователю означает преобразование его в форму, используемую Вашей аудиторией<strong>.</strong> {{Glossary("browser","Browsers")}}, такие как {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} или {{Glossary("Microsoft Edge","Edge")}} , предназначены для визуального представления документов, например, на экране компьютера, проектора или принтера.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Браузер иногда называют {{Glossary("User agent","user agent")}}, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, но он не единственный. Доступны и другие пользовательские агенты, например, те, которые преобразуют документы HTML и CSS в файлы PDF для печати.</p>
+</div>
+
+<p>CSS может использоваться для очень простой стилизации текста документа, например, изменение <a href="https://developer.mozilla.org/ru/docs/Web/CSS/color_value">цвета</a> и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-size">размера</a> заголовков и ссылок. Он может быть использован для создания макета, например, <a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">превращение одного столбца текста в макет</a> с основной областью контента и боковой панелью для соответствующей информации. Это может даже использоваться для эффектов, таких как <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Animations">анимация</a>. Посмотрите на ссылки в этом параграфе для конкретных примеров.</p>
+
+<h2 id="Синтаксис_CSS">Синтаксис CSS</h2>
+
+<p>CSS — это язык на основе правил: Вы задаёте правила, определяющие группы стилей, которые должны применяться к определённым элементам или группам элементов на Вашей веб-странице. Например:</p>
+
+<p>«Я хочу, чтобы основной заголовок на моей странице отображался крупным красным текстом».</p>
+
+<p>В следующем коде показано очень простое правило CSS, которое будет соответствовать стилю, описанному выше:</p>
+
+<pre class="brush: css">h1 {
+    color: red;
+    font-size: 5em;
+}</pre>
+
+<p>Правило открывается с помощью {{Glossary("CSS Selector", "селектора")}} . Этот селектор выбирает HTML-элемент, который мы собираемся стилизовать. В этом случае мы используем заголовки первого уровня — ({{htmlelement("h1")}}).</p>
+
+<p>Затем у нас есть набор фигурных скобок <code>{ }</code>. Внутри них будет один или несколько <strong>объявлений</strong>, которые принимают форму пары <strong>свойства</strong> и его <strong>значения</strong>. Каждая пара указывает свойство элемента(-ов), который(-е) мы выбираем, а затем значение, которое мы хотели бы присвоить свойству.</p>
+
+<p>Перед двоеточием у нас есть свойство, а после двоеточия — значение. CSS-{{Glossary("property/CSS","свойства")}} имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство <code>color</code>, которое может принимать различные <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Color">цветовые значения</a>. У нас также есть свойство <code>font-size</code>. Это свойство может принимать различные <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">значения размера</a>, как и свойства.</p>
+
+<p>Таблица стилей CSS будет содержать много таких правил, написанных одно за другим.</p>
+
+<pre class="brush: css">h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}</pre>
+
+<p>Вы обнаружите, что Вы быстро изучаете некоторые значения, тогда как другие Вам нужно искать. Страницы отдельных свойств в MDN дают Вам быстрый способ поиска свойств и их значений, когда Вы забыли или хотите узнать, что ещё Вы можете использовать в качестве значения.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN <a href="/en-US/docs/Web/CSS/Reference">Руководстве по CSS</a>. Кроме того, Вы должны привыкнуть к поиску "MDN <em>css-feature-name</em>" в Вашем бразере, когда Вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!</p>
+</div>
+
+<h2 id="CSS-модули">CSS-модули</h2>
+
+<p>Поскольку существует множество вещей, которые можно стилизовать с помощью CSS, язык разбит на модули. По мере изучения MDN Вы увидите ссылки на эти модули, а многие страницы документации организованы вокруг определенного модуля. Например, вы можете взглянуть на ссылку MDN в модуле <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders">Свойства фона и границ</a>, чтобы узнать, какова его цель и какие различные свойства и другие функции он содержит. Вы также найдёте ссылки на спецификацию CSS, которая определяет технологию (см. ниже).</p>
+
+<p>На этом этапе вам не нужно слишком беспокоиться о том, как структурирован CSS, однако это может упростить поиск информации, если, например, вы знаете, что определённое свойство может быть найдено среди других похожих вещей, и поэтому, вероятно, в той же спецификации.</p>
+
+<p>Для конкретного примера давайте вернемся к модулю Свойства фона и границ — Вы можете подумать, что это логично для свойств <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> и <code><a href="/en-US/docs/Web/CSS/border-color">border-color</a></code>, которые будут определены в этом модуле. И Вы правы.</p>
+
+<h3 id="Технические_характеристики_CSS">Технические характеристики CSS</h3>
+
+<p>Все технологии веб-стандартов (HTML, CSS, JavaScript и т. д.) определены в гигантских документах, называемых спецификациями, которые публикуются организациями по стандартизации (такие как {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} или {{glossary("Khronos")}}) и определяют, как эти технологии должны вести себя.</p>
+
+<p>CSS ничем не отличается — он разработан группой в W3C, которая называется <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. Эта группа состоит из представителей производителей браузеров и других компаний, которые заинтересованы в CSS. Есть также другие люди, известные как приглашенные эксперты, которые выступают как независимые голоса; они не связаны с членами организации.</p>
+
+<p>Новые функции CSS разрабатываются или определяются рабочей группой CSS. Иногда потому, что конкретный браузер заинтересован в том, чтобы иметь какие-то возможности, иногда потому, что веб-дизайнеры и разработчики запрашивают функцию, а иногда потому, что сама рабочая группа определила требование. CSS постоянно развивается, появляются новые функции. Тем не менее, ключевым моментом в CSS является то, что все работают очень усердно, чтобы никогда не менять вещи таким образом, чтобы это сломало старые сайты. Веб-сайт, созданный в 2000 году, с использованием ограниченного CSS, доступного в то время, должен всё ещё использоваться в браузере сегодня!</p>
+
+<p>Как новичок в CSS, вполне вероятно, что Вы найдете CSS-спецификации ошеломляющими — они предназначены для инженеров, чтобы использовать их для реализации поддержки функций в пользовательских агентах, а не для веб-разработчиков, чтобы читать, чтобы понимать CSS. Многие опытные разработчики предпочитают обращаться к документации MDN или другим учебникам. Однако стоит знать, что они существуют, понимать взаимосвязь между используемым CSS, поддержкой браузера (см. ниже) и спецификациями.</p>
+
+<h2 id="Поддержка_браузера">Поддержка браузера</h2>
+
+<p>После того как CSS был указан, он будет полезен для разработки веб-страниц, только если один или несколько браузеров его реализовали. Это означает, что код был написан для превращения инструкции в нашем CSS-файле во что-то, что может быть выведено на экран. Мы рассмотрим этот процесс подробнее на уроке <a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a><a href="/ru/docs/">.</a> Это необычно для всех браузеров, чтобы реализовать функцию одновременно, и поэтому обычно есть пробел, где вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине полезно проверять состояние реализации. На каждой странице свойств в MDN Вы можете видеть статус интересующего Вас свойства, чтобы Вы могли определить, сможете ли Вы использовать её на веб-сайте.</p>
+
+<p>Ниже приведена диаграмма данных для CSS свойства <code><a href="/en-US/docs/Web/CSS/font-family">font-family</a></code>:</p>
+
+<p>{{Compat("css.properties.font-family")}}</p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдем к <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Началу работы с CSS</a>, где Вы можете начать писать CSS самостоятельно.</p>
+
+<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS">Что такое CSS?</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps">Начало работы с CSS</a></li>
+ <li><a href="https://developer.cdn.mozilla.net/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS">Как структурирован CSS</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Использование ваших новых знаний</a></li>
+</ol>
diff --git a/files/ru/learn/css/index.html b/files/ru/learn/css/index.html
new file mode 100644
index 0000000000..1e4d325d61
--- /dev/null
+++ b/files/ru/learn/css/index.html
@@ -0,0 +1,65 @@
+---
+title: CSS
+slug: Learn/CSS
+tags:
+  - Beginner
+  - CSS
+  - Debugging
+  - Landing
+  - NeedsContent
+  - Topic
+  - TopicStub
+  - length
+translation_of: Learn/CSS
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">Каскадные таблицы стилей, или CSS, — это технология, которую следует изучать непосредственно после HTML. В отличие от HTML, который служит для определения структуры и семантики содержимого, CSS отвечает за его внешний вид и отображение. К примеру, с помощью CSS можно изменять шрифт, цвет, размер, межстрочный интервал, разделять содержимое на колонки, а также добавлять анимацию и другие декоративные элементы.</p>
+
+<h2 id="План_обучения">План обучения </h2>
+
+<p>Прежде чем браться за CSS, Вам стоит разобраться с основами HTML. Мы рекомендуем изучить модуль <a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>. После его прохождения переходите к:</p>
+
+<ul>
+ <li>изучению CSS, начиная с модуля <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>;</li>
+ <li>далее — к более продвинутой теме <a href="/ru/docs/Learn/HTML#Модули">HTML-модули</a></li>
+ <li>после этого — к модулю <a href="/ru/docs/Learn/JavaScript">JavaScript</a> и тому, как его использовать, чтобы добавить Вашим веб-страницам динамического функционала.</li>
+</ul>
+
+<p>Мы рекомендуем изучать HTML и CSS одновременно. HTML гораздо интереснее в сочетании с CSS и изучать эти языки раздельно было бы ошибочно.</p>
+
+<p>В данном разделе содержится информация, которая требует самой базовой ознакомленности с компьютером и интернетом. В статье <a href="/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Установка рабочего пространства</a> подробно описано необходимое ПО и способы его установки, необходимо также будет уметь создавать и управлять файлами, в чём поможет статья <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>, которая включена в полное руководство для новичка <a href="/ru/docs/Learn/Getting_started_with_the_web">Основы веб</a>.</p>
+
+<p>Перед тем как начинать данный раздел, мы рекомендуем пройти руководство <a href="/ru/docs/Learn/Getting_started_with_the_web">Основы веб</a>, хотя это вовсе не обязательно; большая часть того, что Вы найдёте в статье об основах CSS также встречается в разделе<a href="/ru/docs/Learn/CSS/First_steps"> Введение в CSS</a>, хотя и более детально.</p>
+
+<h2 id="Модули">Модули</h2>
+
+<p>Этот раздел содержит модули в порядке, наиболее подходящем для работы с ними. Лучше всего начать с самого первого.</p>
+
+<dl>
+ <dt><a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a></dt>
+ <dd>CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц, — например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало Вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как Вы можете начать использовать его для добавления стилей в HTML.</dd>
+ <dt><a href="/ru/docs/Learn/CSS/Styling_text">Дизайн текста</a></dt>
+ <dd>Здесь мы рассмотрим основы стилизации текста, в том числе изменение шрифта, жирности, курсивного написания, межстрочного и межбуквенного интервалов, теней и других особенностей текста. Завершается модуль демонстрацией применения пользовательских шрифтов на вашей странице, оформлением списков и ссылок.</dd>
+ <dt><a href="/ru/docs/Learn/CSS/Styling_boxes">Стилизация блоков</a></dt>
+ <dd>Далее мы рассмотрим дизайн блоков, один из основных шагов к разметке веб-страницы. В этом модуле мы кратко рассмотрим работу с блочными элементами, а затем ознакомимся с приемами управления блоками, установив такие свойства, как поля, оступы и границы, настроим фоновые цвет и изображение, а также рассмотрим более сложные функции, такие как тени и фильтры.</dd>
+ <dt><a href="/ru/docs/Learn/CSS/CSS_layout">Размещение элементов с помощью CSS</a></dt>
+ <dd>К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение разметки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как иcпользовать современные методы разметки, такие как Flexbox и CSS grid, и некоторые традиционные методы разметки, которые все ещё применяются.</dd>
+ <dt>Адаптивный дизайн (TBD)</dt>
+ <dd><span id="result_box" lang="ru"><span>В настоящее время существоет множество устройств, способных осуществлять просмотр веб-страниц, адаптивный веб-дизайн (RWD - Responsive Web Design) стал основным навыком веб-разработки.</span> <span>В этом модуле рассказывается об основных принципах и инструментах RWD, объясняется, как применять различные CSS к документу в зависимости от таких функций устройства, как ширина экрана, ориентация и разрешение, а также изучить имеющиеся возможности отображения различных видео и изображений в зависимости от характеристик используемого пользователем устройства.</span></span></dd>
+</dl>
+
+<h2 id="Решаем_часто_встречающиеся_проблемы_в_CSS">Решаем часто встречающиеся проблемы  в CSS</h2>
+
+<p>В разделе <strong><a href="/ru/docs/Learn/CSS/Как">Использование CSS для решения общих проблем</a></strong> даны ссылки на разделы, объясняющие, как следует использовать CSS для решения самых распространенных проблем при создании веб-страницы.</p>
+
+<p>В самом начале Вы будете применять цвет к тексту и фону HTML-элементов, изменять их размер, форму, местоположение, добавлять и стилизовать границы. Однако с уверенным знанием даже основ CSS Вы сможете сделать практически что угодно. Одним из плюсов изучения CSS является то, что Вы быстро начнёте понимать, можно или нельзя что-то сделать средствами CSS, даже если Вы еще не уверены, как это сделать.   </p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<dl>
+ <dt><a href="/ru/docs/Web/CSS">CSS на MDN</a></dt>
+ <dd>Основная точка входа для CSS документации на MDN с подробными ссылками на дополнительные учебники.</dd>
+ <dt><a href="/ru/docs/Web/CSS/Reference">CSS-справочник</a></dt>
+ <dd><span id="result_box" lang="ru"><span>Комплексный</span> <span>справочник по</span> <span>всем многочисленным</span> <span>особенностям</span> <span>языка</span> <span>CSS,</span></span> — если Вы, к примеру, хотите знать, какие значения может иметь свойство, то Вам сюда.</dd>
+</dl>
diff --git a/files/ru/learn/css/introduction_to_css/ponimanie_osnov_css/index.html b/files/ru/learn/css/introduction_to_css/ponimanie_osnov_css/index.html
new file mode 100644
index 0000000000..9009c684d8
--- /dev/null
+++ b/files/ru/learn/css/introduction_to_css/ponimanie_osnov_css/index.html
@@ -0,0 +1,123 @@
+---
+title: Понимание основ CSS
+slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
+translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</div>
+
+<p class="summary">Вы многое прошли в этом модуле, и должно быть вас посетило это прекрасное чувство, что дошли до конца! Последний шаг перед тем, как двигаться дальше, это попытка пройти проверку по материалам модуля — это включает в себя ряд соответствующих упражнений, которые должны быть выполнены для того, чтобы создать заключительный проект — визитка, карточка игрока, профиль в социльной сети.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Предварительно:</th>
+   <td>Перед попыткой пройти проверку вы должны проработать все статьи в этом модуля.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Проверка понимания основной теории, синтаксиса и техник CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Отправной_пункт">Отправной пункт</h2>
+
+<p>Чтобы начать проверку, вы должны:</p>
+
+<ul>
+ <li>Перейти и скачать <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">HTML файл для упражнения</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">связанный файл изображения</a>, сохранить их в новую директорию на локальном компьютере. Если вы хотите использовать свой собственный файл изображения и вписать свое имя, то пожалуйста — только убедитесь, что изображение квадратное.</li>
+ <li>Скачайте <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">текстовый файл с исходным CSS</a> —  в нем содержится набор исходных селекторов и наборов правил, которые вы должны изучить и объединить, чтобы пройти часть этой проверки.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вместо этого вы можете использовать для проверки такие сайты как  <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">этот URL</a> чтобы указать элементу <code>&lt;img&gt;</code> файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент <code>&lt;style&gt;</code> в заголовке документа.</p>
+</div>
+
+<h2 id="Краткое_описание_проекта">Краткое описание проекта</h2>
+
+<p>Вам предоставили некоторый исходный HTML и изображение, и нужно написать необходимые CSS-правила, чтобы стилизовать это в маленькую онлайн-визитку, которая может, возможно, стать картой игрока или профилем в социальных сетях. Следующие разделы описывают, что вам нужно сделать.</p>
+
+<p>Первоначальные настройки:</p>
+
+<ul>
+ <li>Прежде всего, создайте новый файл в той же директории, что и ваши HTML и файл изображения. Назовите его как-нибудь образно, например <code>style.css</code>.</li>
+ <li>Подключите ваш CSS к вашему файлу HTML с помощью элемента <code>&lt;link&gt;</code>.</li>
+ <li>Первые два набора правил в исходном файле CSS ваши бесплатно! После того, как вы закончите радоваться своей удаче, скопируйте и вставьте их в верхнюю часть вашего нового файла CSS. Используйте их в качестве теста, чтобы убедиться, что ваш CSS правильно применяется к HTML.</li>
+ <li>Над этими двумя правилами добавьте CSS-комментарий, что это набор общих стилей для всей страницы. "Общие стили страницы" подойдут. Также добавьте еще три комментария в нижней части CSS-файла, чтобы отметить стили, соответствующие для настройки контейнера карты, стили, соответствующие для верхнего и нижнего колонтитулов, а также стили, соответствующие для основного содержимого визитной карточки. Отныне новые стили, добавленные в таблицу стилей, должны быть размещены в соответствующем месте.</li>
+</ul>
+
+<p>Позаботимся о селекторах и наборах правил, предоставленных в файле CSS:</p>
+
+<ul>
+ <li>Далее мы хотели бы, чтобы вы посмотрели на четыре селектора и рассчитали специфичность для каждого из них. Запишите их где-нибудь, где они могут быть найдены позже, например, в комментарии в верхней части CSS.</li>
+ <li>Теперь пришло время сопоставить правильный селектор и правильный набор правил! У вас есть четыре пары селекторов и набора правил для сопоставления в ваших ресурсах CSS. Сделайте это сейчас и добавьте их в файл CSS. Вам нужно сделать:
+  <ul>
+   <li>Задайте основному контейнеру карты фиксированную ширину/высоту, сплошной цвет фона, границу и радиус границы (закругленные углы!), помимо прочего.</li>
+   <li>Задайте заголовку градиент фона, который идет от темного к светлому, плюс закругленные углы, которые вписываются в закругленные углы, заданные для главного контейнера карты.</li>
+   <li>Задайте для футера градиент фона, переходящий от светлого к темному, а также скругленные углы, которые вписываются в скругленные углы контейнера основной карты.</li>
+   <li>Сместите изображение вправо, чтобы оно прилипло к правой стороне основного содержимого визитной карточки, и придайте ему максимальную высоту 100% (хитрый трюк, который гарантирует, что он будет растягиваться/сжиматься, чтобы оставаться на той же высоте, что и его родительский контейнер, независимо от того, какой высоты он становится).</li>
+  </ul>
+ </li>
+ <li>Осторожно! В предоставленных наборах правил есть две ошибки. Используя любую технику, которую вы знаете, отследите их и исправьте, прежде чем двигаться дальше.</li>
+</ul>
+
+<p>Какие новые наборы правил надо написать:</p>
+
+<ul>
+ <li>Напишите набор правил, предназначенный как для заголовка, так и для футера карты, задавая им вычисленную общую высоту 50 пикселей (включая высоту содержимого 30 пикселей и внутренние отступы (padding) 10 пикселей со всех сторон.) Но выразите это в <code>em</code>s.</li>
+ <li><code>margin</code> по умолчанию, применяемый браузером к элементам <code>&lt;h2&gt;</code> и <code>&lt;p&gt;</code>, будет мешать нашему дизайну, поэтому напишите правило, которое устанавливает этот параметр для указанных элементов равным 0.</li>
+ <li>Чтобы изображение не вылезало за пределы основного содержимого визитки (элемент <code>&lt;article&gt;</code>), нужно задать ему определенную высоту. Установите высоту <code>&lt;article&gt;</code> в 120px, но выраженную в <code>em</code>s. Также задайте ему полупрозрачный черный цвет фона, в результате получится чуть более темный оттенок, который позволяет цвету фона немного просвечивать красным цветом.</li>
+ <li>Напишите набор правил, который задает тегу <code>&lt;h2&gt;</code> удобный размер шрифта 20px (но выраженный в <code>em</code>s) и соответствующую высоту строки, чтобы поместить ее в центр поля содержимого заголовка. Напомним, что высота окна содержимого (content box) должна быть 30px — это дает вам все числа, необходимые для вычисления высоты строки.</li>
+ <li>Напишите набор правил, который задает тегу <code>&lt;p&gt;</code> внутри нижнего колонтитула удобный размер шрифта 15px (но выраженный в <code>em</code>s) и соответствующую высоту строки, чтобы поместить его в центр окна содержимого нижнего колонтитула. Напомним, что высота окна содержимого должна быть 30px — это дает вам все числа, необходимые для вычисления высоты строки.</li>
+ <li>В качестве последнего штриха задайте параграфу внутри <code>&lt;article&gt;</code> соответствующее значение отступа (padding), чтобы его левый край выровнялся с тегом <code>&lt;h2&gt;</code> и нижним параграфом, и установите его цвет достаточно светлым, чтобы его было легко читать.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: Имейте в виду, что второй набор правил устанавливает <code>font-size: 10px;</code> для элемента<code>&lt;html&gt;</code> — это означает, что для любых потомков <code>&lt;html&gt;</code> <code>em</code> будет равен 10px, а не 16px, как это задано по умолчанию. (Это, конечно, при условии, что у потомков, о которых идет речь, нет предков, находящихся в иерархии между ними и <code>&lt;html&gt;</code>, на которых установлен другой размер шрифта. Это может повлиять на необходимые значения, хотя в этом простом примере это не проблема).</p>
+</div>
+
+<p>Другие вещи для размышления:</p>
+
+<ul>
+ <li>Вы получите бонусные баллы, если напишите объявления своего CSS в отдельных строках, чтобы обеспечить максимальную читаемость.</li>
+ <li>Вы должны включить <code>.card</code> в начале цепочки селекторов во всех ваших правилах, чтобы эти правила не мешали стилизации каких-либо других элементов, в случае если визитная карточка должна быть помещена на страницу с загрузкой другого контента.</li>
+</ul>
+
+<h2 id="Советы_и_подсказки">Советы и подсказки</h2>
+
+<ul>
+ <li>Вам не нужно каким-либо образом редактировать HTML, за исключением подключения к нему CSS.</li>
+ <li>При попытке определить значение em вам нужно представить определенную величину в пикселях. Подумайте о том, какой размер базового шрифта имеет корневой элемент (<code>&lt;html&gt;</code>), и на сколько его нужно умножить, чтобы получить желаемое значение. Это даст вам значение <code>em</code>, по крайней мере, в таком простом случае как этот.</li>
+</ul>
+
+<h2 id="Образец">Образец</h2>
+
+<p>На следующем снимке экрана показан образец того, как должен выглядеть готовый дизайн:</p>
+
+<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Проверка">Проверка</h2>
+
+<p>Если вы проходите эту проверку в рамках организованного курса, у вас должна быть возможность отдать свою работу своему учителю/наставнику для оценки. Если вы самообучаетесь, то вы можете получить руководство по оценке достаточно простым путем: спросив в <a href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682">теме обсуждения об этом упражнении</a>, или в канале <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC на <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Но сначала попробуйте выполнить упражнение — вы ничего не выиграете путем обмана!</p>
+
+<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">Как работает CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Syntax">Синтаксис CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Selectors">Введение в селекторы</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors">Простые селекторы</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Селекторы по атрибутам</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors">Комбинаторы и множественные селекторы</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS значения и единицы</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Каскадность и наследование</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Box_model">Блочная модель</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Отладка CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Задание: Основы понимания CSS</a></li>
+</ul>
diff --git a/files/ru/learn/css/styling_text/fundamentals/index.html b/files/ru/learn/css/styling_text/fundamentals/index.html
new file mode 100644
index 0000000000..5d80571f6f
--- /dev/null
+++ b/files/ru/learn/css/styling_text/fundamentals/index.html
@@ -0,0 +1,735 @@
+---
+title: Основы стилизирования текста и шрифта
+slug: Learn/CSS/Styling_text/Fundamentals
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary"><span class="seoSummary">В данной статье мы начнем путь к овладению стилизацией текста при помощи {{glossary("CSS")}}.</span> Мы подробно изучим основы стилизации текста и шрифта, такие как толщина, начертание, семейство, стенография, выравнивание текста и другие эффекты, а также рассмотрим междустрочный и межбуквенный интервалы.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>Базовые компьютерные знания, Основы HTML (раздел <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>), основы  CSS (раздел <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Изучить основные свойства и техники, необходимые для стилизации текста на веб-страницах.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Что_участвует_в_стилизации_текста_в_CSS">Что участвует в стилизации текста в CSS?</h2>
+
+<p>Как вы уже проверили в своей работе с HTML и CSS, текст внутри элемента выкладывается в поле содержимого элемента. Он начинается в левом верхнем углу области содержимого (или в правом верхнем углу, в случае содержимого языка RTL) и течет к концу строки. Как только он достигает конца, он переходит к следующей строке и продолжает, затем к следующей строке, пока все содержимое не будет помещено в коробку. Текстовое содержимое эффективно ведет себя как ряд встроенных элементов, размещенных на соседних строках и не создающих разрывы строк до тех пор, пока не будет достигнут конец строки, или если вы не принудите разрыв строки вручную с помощью элемента {{htmlelement("br")}}.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> если приведенный выше абзац оставляет вас в замешательстве, то не имеет значения — вернитесь и просмотрите нашу статью о модели коробки, чтобы освежить теорию модели коробки, прежде чем продолжить.</p>
+</div>
+
+<p>Свойства CSS, используемые для стилизации текста, обычно делятся на две категории, которые мы рассмотрим отдельно в этой статье:</p>
+
+<ul>
+ <li><strong>Font styles</strong>: Свойства, влияющие на шрифт, применяемый к тексту, влияющие на то, какой шрифт применяется, насколько он велик, является ли он полужирным, курсивным и т. д.</li>
+ <li><strong>Text layout styles</strong>: Свойства, влияющие на интервал и другие особенности компоновки текста, позволяющие манипулировать, например, пространством между строками и буквами, а также тем, как текст выравнивается в поле содержимого.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание:</strong> имейте в виду, что текст внутри элемента все затронуты как одна единая сущность. Вы не можете выбирать и стилизовать подразделы текста, если вы не обернете их в соответствующий элемент (например, {{htmlelement ("span")}} или {{htmlelement ("strong")}}), или использовать текстовый псевдоэлемент, такой как ::first-letter (выделяет первую букву текста элемента),:: first-line (выделяет первую строку текста элемента) или ::selection (выделяет текст, выделенный в данный момент курсором.)</p>
+</div>
+
+<h2 id="Шрифты">Шрифты</h2>
+
+<p>Давайте сразу перейдем к рассмотрению свойств для стилизации шрифтов. В этом примере мы применим некоторые различные свойства CSS к одному и тому же образцу HTML, который выглядит следующим образом:</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;</pre>
+
+<p>You can find the <a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">finished example on GitHub</a> (see also <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">the source code</a>.)</p>
+
+<h3 id="Color">Color</h3>
+
+<p>The {{cssxref("color")}} property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the {{cssxref("text-decoration")}} property).</p>
+
+<p><code>color</code> can accept any <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS color unit</a>, for example:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}</pre>
+
+<p>This will cause the paragraphs to become red, rather than the standard browser default black, like so:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Color', '100%', 230) }}</p>
+
+<h3 id="Font_families">Font families</h3>
+
+<p>To set a different font on your text, you use the {{cssxref("font-family")}} property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser {{anch("Default fonts", "default font")}}. A simple example looks like so:</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: arial;
+}</pre>
+
+<p>This would make all paragraphs on a page adopt the arial font, which is found on any computer.</p>
+
+<h4 id="Web_safe_fonts">Web safe fonts</h4>
+
+<p>Speaking of font availability, there are only a certain number of fonts that are generally available across all systems and can therefore be used without much worry. These are the so-called <strong>web safe fonts</strong>.</p>
+
+<p>Most of the time, as web developers we want to have more specific control over the fonts used to display our text content. The problem is to find a way to know which font is available on the computer used to see our web pages. There is no way to know this in every case, but the web safe fonts are known to be available on nearly all instances of the most used operating systems (Windows, macOS, the most common Linux distributions, Android, and iOS).</p>
+
+<p>The list of actual web safe fonts will change as operating systems evolve, but it's reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the Microsoft <em><a href="https://en.wikipedia.org/wiki/Core_fonts_for_the_Web">Core fonts for the Web</a></em> initiative in the late 90s and early 2000s):</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col" style="white-space: nowrap;">Generic type</th>
+   <th scope="col">Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Arial</td>
+   <td>sans-serif</td>
+   <td>It's often considered best practice to also add <em>Helvetica</em> as a preferred alternative to <em>Arial</em> as, although their font faces are almost identical, <em>Helvetica</em> is considered to have a nicer shape, even if <em>Arial</em> is more broadly available.</td>
+  </tr>
+  <tr>
+   <td>Courier New</td>
+   <td>monospace</td>
+   <td>Some OSes have an alternative (possibly older) version of the <em>Courier New</em> font called <em>Courier</em>. It's considered best practice to use both with <em>Courier New</em> as the preferred alternative.</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">Georgia</td>
+   <td>serif</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">Times New Roman</td>
+   <td>serif</td>
+   <td>Some OSes have an alternative (possibly older) version of the <em>Times New Roman</em> font called <em>Times</em>. It's considered best practice to use both with <em>Times New Roman</em> as the preferred alternative.</td>
+  </tr>
+  <tr>
+   <td>Trebuchet MS</td>
+   <td>sans-serif</td>
+   <td>You should be careful with using this font — it isn't widely available on mobile OSes.</td>
+  </tr>
+  <tr>
+   <td>Verdana</td>
+   <td>sans-serif</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Among various resources, the <a href="http://www.cssfontstack.com/">cssfontstack.com</a> website maintains a list of web safe fonts available on Windows and macOS operating systems, which can help you make your decision about what you consider safe for your usage.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: There is a way to download a custom font along with a webpage, to allow you to customize your font usage in any way you want: <strong>web fonts</strong>. This is a little bit more complex, and we will be discussing this in a <a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">separate article</a> later on in the module.</p>
+</div>
+
+<h4 id="Default_fonts">Default fonts</h4>
+
+<p>CSS defines five generic names for fonts:  <code>serif</code><font face="Open Sans, Arial, sans-serif">, </font><code>sans-serif</code>,<font face="Open Sans, Arial, sans-serif"> </font><code>monospace</code>, <code>cursive</code> and <code>fantasy</code>. Those are very generic and the exact font face used when using those generic names is up to each browser and can vary for each operating system they are running on. It represents a <em>worst case scenario</em> where the browser will try to do its best to provide at least a font that looks appropriate. <code>serif</code>, <code>sans-serif</code> and <code>monospace</code> are quite predictable and should provide something reasonable. On the other hand, <code>cursive</code> and <code>fantasy</code> are less predictable and we recommend using them very carefully, testing as you go.</p>
+
+<p>The five names are defined as follows:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Term</th>
+   <th scope="col">Definition</th>
+   <th scope="col">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>serif</code></td>
+   <td>Fonts that have serifs (the flourishes and other small details you see at the ends of the strokes in some typefaces)</td>
+   <td><span style="font-family: serif;">My big red elephant</span></td>
+  </tr>
+  <tr>
+   <td><code>sans-serif</code></td>
+   <td>Fonts that don't have serifs.</td>
+   <td><span style="font-family: sans-serif;">My big red elephant</span></td>
+  </tr>
+  <tr>
+   <td><code>monospace</code></td>
+   <td>Fonts where every character has the same width, typically used in code listings.</td>
+   <td><span style="font-family: monospace;">My big red elephant</span></td>
+  </tr>
+  <tr>
+   <td><code>cursive</code></td>
+   <td>Fonts that are intended to emulate handwriting, with flowing, connected strokes.</td>
+   <td><span style="font-family: cursive;">My big red elephant</span></td>
+  </tr>
+  <tr>
+   <td><code>fantasy</code></td>
+   <td>Fonts that are intended to be decorative.</td>
+   <td><span style="font-family: fantasy;">My big red elephant</span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Font_stacks">Font stacks</h4>
+
+<p>Since you can't guarantee the availability of the fonts you want to use on your webpages (even a web font <em>could</em> fail for some reason), you can supply a <strong>font stack</strong> so that the browser has multiple fonts it can choose from. This simply involves a <code>font-family</code> value consisting of multiple font names separated by commas, e.g.</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}</pre>
+
+<p>In such a case, the browser starts at the beginning of the list and looks to see if that font is available on the machine. If it is, it applies that font to the selected elements. If not, it moves on to the next font, and so on.</p>
+
+<p>It is a good idea to provide a suitable generic font name at the end of the stack so that if none of the listed fonts are available, the browser can at least provide something approximately suitable. To emphasise this point, paragraphs are given the browser's default serif font if no other option is available — which is usually Times New Roman — this is no good for a sans-serif font!</p>
+
+<div class="note">
+<p><strong>Note</strong>: Font names that have more than one word — like <code>Trebuchet MS</code> — need to be surrounded by quotes, for example <code>"Trebuchet MS"</code>.</p>
+</div>
+
+<h4 id="A_font-family_example">A font-family example</h4>
+
+<p>Let's add to our previous example, giving the paragraphs a sans-serif font:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+
+<p>This gives us the following result:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('A_font-family_example', '100%', 220) }}</p>
+
+<h3 id="Font_size">Font size</h3>
+
+<p>In our previous module's <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS values and units</a> article, we reviewed length and size units. Font size (set with the {{cssxref("font-size")}} property) can take values measured in most of these units (and others, such as <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Percentages">percentages</a>), however the most common units you'll use to size text are:</p>
+
+<ul>
+ <li><code>px</code> (pixels): The number of pixels high you want the text to be. This is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation.</li>
+ <li><code>em</code>s: 1 <code>em</code> is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter M contained inside the parent element.) This can become tricky to work out if you have a lot of nested elements with different font sizes set, but it is doable, as you'll see below. Why bother? It is quite natural once you get used to it, and you can use <code>em</code> to size everything, not just text. You can have an entire website sized using <code>em</code>, which makes maintenance easy.</li>
+ <li><code>rem</code>s: These work just like <code>em</code>, except that 1 <code>rem</code> is equal to the font size set on the root element of the document (i.e. {{htmlelement("html")}}), not the parent element. This makes doing the maths to work out your font sizes much easier, although if you want to support really old browsers, you might struggle — <code>rem</code> is not supported in Internet Explorer 8 and below.</li>
+</ul>
+
+<p>The <code>font-size</code> of an element is inherited from that element's parent element. This all starts with the root element of the entire document — {{htmlelement("html")}} — the <code>font-size</code> of which is set to 16<code>px</code> as standard across browsers. Any paragraph (or another element that doesn't have a different size set by the browser) inside the root element will have a final size of 16 <code>px</code>. Other elements may have different default sizes, for example an {{htmlelement("h1")}} element has a size of 2 <code>em</code> set by default, so it will have a final size of 32 <code>px</code>.</p>
+
+<p>Things become more tricky when you start altering the font size of nested elements. For example, if you had an {{htmlelement("article")}} element in your page, and set its <code>font-size</code> to 1.5 <code>em</code> (which would compute to 24 <code>px</code> final size), and then wanted the paragraphs inside the <code>&lt;article&gt;</code> elements to have a computed font size of 20 <code>px</code>, what <code>em</code> value would you use?</p>
+
+<pre class="brush: html notranslate">&lt;!-- document base font-size is 16px --&gt;
+&lt;article&gt; &lt;!-- If my font-size is 1.5em --&gt;
+  &lt;p&gt;My paragraph&lt;/p&gt; &lt;!-- How do I compute to 20px font-size? --&gt;
+&lt;/article&gt;</pre>
+
+<p>You would need to set its <code>em</code> value to 20/24, or 0.83333333 <code>em</code>. The maths can be complicated, so you need to be careful about how you style things. It is best to use <code>rem</code> where you can, to keep things simple, and avoid setting the <code>font-size</code> of container elements where possible.</p>
+
+<h4 id="A_simple_sizing_example">A simple sizing example</h4>
+
+<p>When sizing your text, it is usually a good idea to set the base <code>font-size</code> of the document to 10 <code>px</code>, so that then the maths is a lot easier to work out — required <code>(r)em</code> values are then the pixel font size divided by 10, not 16. After doing that, you can easily size the different types of text in your document to what you want. It is a good idea to list all your <code>font-size</code> rulesets in a designated area in your stylesheet, so they are easy to find.</p>
+
+<p>Our new result is like so:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 5rem;
+}
+
+p {
+  font-size: 1.5rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+
+<p>{{ EmbedLiveSample('A_simple_sizing_example', '100%', 260) }}</p>
+
+<h3 id="Font_style_font_weight_text_transform_and_text_decoration">Font style, font weight, text transform, and text decoration</h3>
+
+<p>CSS provides four common properties to alter the visual weight/emphasis of text:</p>
+
+<ul>
+ <li>{{cssxref("font-style")}}: Used to turn italic text on and off. Possible values are as follows (you'll rarely use this, unless you want to turn some italic styling off for some reason):
+  <ul>
+   <li><code>normal</code>: Sets the text to the normal font (turns existing italics off.)</li>
+   <li><code>italic</code>: Sets the text to use the <em>italic version of the font</em> if available; if not available, it will simulate italics with oblique instead.</li>
+   <li><code>oblique</code>: Sets the text to use a simulated version of an italic font, created by <span style="font-style: oblique;">slanting the normal version</span>.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("font-weight")}}: Sets how bold the text is. This has many values available in case you have many font variants available (such as <em>-light</em>, <em>-normal</em>, <em>-bold</em>, <em>-extrabold</em>, <em>-black</em>, etc.), but realistically you'll rarely use any of them except for <code>normal</code> and <code>bold</code>:
+  <ul>
+   <li><code>normal</code>, <code>bold</code>: Normal and <strong style="font-weight: bold;">bold</strong> font weight</li>
+   <li><code>lighter</code>, <code>bolder</code>: Sets the current element's boldness to be one step lighter or heavier than its parent element's boldness.</li>
+   <li><code>100</code>–<code>900</code>: Numeric boldness values that provide finer grained control than the above keywords, if needed. </li>
+  </ul>
+ </li>
+ <li>{{cssxref("text-transform")}}: Allows you to set your font to be transformed. Values include:
+  <ul>
+   <li><code>none</code>: Prevents any transformation.</li>
+   <li><code>uppercase</code>: Transforms <span style="text-transform: uppercase;">all text to capitals</span>.</li>
+   <li><code>lowercase</code>: Transforms all text to lower case.</li>
+   <li><code>capitalize</code>: Transforms all words to <span style="text-transform: capitalize;">have the first letter capitalized</span>.</li>
+   <li><code>full-width</code>: Transforms all glyphs to be <span style="text-transform: full-width;">written inside a fixed-width square</span>, similar to a monospace font, allowing aligning of e.g. Latin characters along with Asian language glyphs (like Chinese, Japanese, Korean).</li>
+  </ul>
+ </li>
+ <li>{{cssxref("text-decoration")}}: Sets/unsets text decorations on fonts (you'll mainly use this to unset the default underline on links when styling them.) Available values are:
+  <ul>
+   <li><code>none</code>: Unsets any text decorations already present.</li>
+   <li><code>underline</code>: <u>Underlines the text</u>.</li>
+   <li><code>overline</code>: <span style="text-decoration: overline;">Gives the text an overline</span>.</li>
+   <li><code>line-through</code>: Puts a <s style="text-decoration: line-through;">strikethrough over the text</s>.</li>
+  </ul>
+  You should note that {{cssxref("text-decoration")}} can accept multiple values at once, if you want to add multiple decorations simultaneously, for example <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>. Also note that {{cssxref("text-decoration")}} is a shorthand property for {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, and {{cssxref("text-decoration-color")}}. You can use combinations of these property values to create interesting effects, for example <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code>.</span></li>
+</ul>
+
+<p>Let's look at adding a couple of these properties to our example:</p>
+
+<p>Our new result is like so:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 5rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.5rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+
+<p>{{ EmbedLiveSample('Font_style_font_weight_text_transform_and_text_decoration', '100%', 260) }}</p>
+
+<h3 id="Text_drop_shadows">Text drop shadows</h3>
+
+<p>You can apply drop shadows to your text using the {{cssxref("text-shadow")}} property. This takes up to four values, as shown in the example below:</p>
+
+<pre class="brush: css notranslate">text-shadow: 4px 4px 5px red;</pre>
+
+<p>The four properties are as follows:</p>
+
+<ol>
+ <li>The horizontal offset of the shadow from the original text — this can take most available CSS <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>, but you'll most commonly use <code>px</code>; positive values move the shadow right, and negative values left. This value has to be included.</li>
+ <li>The vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included.</li>
+ <li>The blur radius — a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>.</li>
+ <li>The base color of the shadow, which can take any <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS color unit</a>. If not included, it defaults to <code>black</code>.</li>
+</ol>
+
+<h4 id="Multiple_shadows">Multiple shadows</h4>
+
+<p>You can apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:</p>
+
+<pre class="brush: css notranslate">text-shadow: 1px 1px 1px red,
+             2px 2px 1px red;</pre>
+
+<p>If we applied this to the {{htmlelement("h1")}} element in our Tommy the cat example, we'd end up with this:</p>
+
+<div class="hidden">
+<h5 id="Hidden_example1">Hidden example1</h5>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 5rem;
+  text-transform: capitalize;
+  text-shadow: 1px 1px 1px red,
+               2px 2px 1px red;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.5rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_example1', '100%', 260) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see more interesting examples of <code>text-shadow</code> usage in the Sitepoint article <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a>.</p>
+</div>
+
+<h2 id="Text_layout">Text layout</h2>
+
+<p>With basic font properties out the way, let's now have a look at properties we can use to affect text layout.</p>
+
+<h3 id="Text_alignment">Text alignment</h3>
+
+<p>The {{cssxref("text-align")}} property is used to control how text is aligned within its containing content box. The available values are as follows, and work in pretty much the same way as they do in a regular word processor application:</p>
+
+<ul>
+ <li><code>left</code>: Left-justifies the text.</li>
+ <li><code>right</code>: Right-justifies the text.</li>
+ <li><code>center</code>: Centers the text.</li>
+ <li><code>justify</code>: Makes the text spread out, varying the gaps in between the words so that all lines of text are the same width. You need to use this carefully — it can look terrible, especially when applied to a paragraph with lots of long words in it. If you are going to use this, you should also think about using something else along with it, such as {{cssxref("hyphens")}}, to break some of the longer words across lines.</li>
+</ul>
+
+<p>If we applied <code>text-align: center;</code> to the {{htmlelement("h1")}} in our example, we'd end up with this:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 5rem;
+  text-transform: capitalize;
+  text-shadow: 1px 1px 1px red,
+               2px 2px 1px red;
+  text-align: center;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.5rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Text_alignment', '100%', 260) }}</p>
+
+<h3 id="Line_height">Line height</h3>
+
+<p>The {{cssxref("line-height")}} property sets the height of each line of text — this can take most <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the {{cssxref("font-size")}} is multiplied to get the <code>line-height</code>. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) So to set our lines of text to 1.6 times the height of the font, you'd use this:</p>
+
+<pre class="brush: css notranslate">line-height: 1.6;</pre>
+
+<p>Applying this to the {{htmlelement("p")}} elements in our example would give us this result:</p>
+
+<div class="hidden">
+<h5 id="Hidden_example2">Hidden example2</h5>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 5rem;
+  text-transform: capitalize;
+  text-shadow: 1px 1px 1px red,
+               2px 2px 1px red;
+  text-align: center;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.5rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_example2', '100%', 300) }}</p>
+
+<h3 id="Letter_and_word_spacing">Letter and word spacing</h3>
+
+<p>The {{cssxref("letter-spacing")}} and {{cssxref("word-spacing")}} properties allow you to set the spacing between letters and words in your text. You won't use these very often, but might find a use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>.</p>
+
+<p>So as an example, we could apply some word- and letter-spacing to the first line of each  {{htmlelement("p")}} element in our example:</p>
+
+<pre class="brush: css notranslate">p::first-line {
+  letter-spacing: 4px;
+  word-spacing: 4px;
+}</pre>
+
+<p>Let's add some to our example, like so:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+
+&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+
+&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.&lt;/p&gt;
+</pre>
+
+<pre class="brush: css notranslate">html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 5rem;
+  text-transform: capitalize;
+  text-shadow: 1px 1px 1px red,
+               2px 2px 1px red;
+  text-align: center;
+  letter-spacing: 2px;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p::first-line {
+  letter-spacing: 4px;
+  word-spacing: 4px;
+}
+
+p {
+  font-size: 1.5rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  letter-spacing: 1px;
+}</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 330) }}</p>
+
+<h3 id="Other_properties_worth_looking_at">Other properties worth looking at</h3>
+
+<p>The above properties give you an idea of how to start styling text on a webpage, but there are many more properties you could use. We just wanted to cover the most important ones here. Once you've become used to using the above, you should also explore the following:</p>
+
+<p>Font styles:</p>
+
+<ul>
+ <li>{{cssxref("font-variant")}}: Switch between small caps and normal font alternatives.</li>
+ <li>{{cssxref("font-kerning")}}: Switch font kerning options on and off.</li>
+ <li>{{cssxref("font-feature-settings")}}: Switch various <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a> font features on and off.</li>
+ <li>{{cssxref("font-variant-alternates")}}: Control the use of alternate glyphs for a given font-face.</li>
+ <li>{{cssxref("font-variant-caps")}}: Control the use of alternate capital glyphs.</li>
+ <li>{{cssxref("font-variant-east-asian")}}: Control the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.</li>
+ <li>{{cssxref("font-variant-ligatures")}}: Control which ligatures and contextual forms are used in text.</li>
+ <li>{{cssxref("font-variant-numeric")}}: Control the usage of alternate glyphs for numbers, fractions, and ordinal markers.</li>
+ <li>{{cssxref("font-variant-position")}}: Control the usage of alternate glyphs of smaller sizes positioned as superscript or subscript.</li>
+ <li>{{cssxref("font-size-adjust")}}: Adjust the visual size of the font independently of its actual font size.</li>
+ <li>{{cssxref("font-stretch")}}: Switch between possible alternative stretched versions of a given font.</li>
+ <li>{{cssxref("text-underline-position")}}: Specify the position of underlines set using the <code>text-decoration-line</code> property <code>underline</code> value.</li>
+ <li>{{cssxref("text-rendering")}}: Try to perform some text rendering optimization.</li>
+</ul>
+
+<p>Text layout styles:</p>
+
+<ul>
+ <li>{{cssxref("text-indent")}}: Specify how much horizontal space should be left before the beginning of the first line of the text content.</li>
+ <li>{{cssxref("text-overflow")}}: Define how overflowed content that is not displayed is signaled to users.</li>
+ <li>{{cssxref("white-space")}}: Define how whitespace and associated line breaks inside the element are handled.</li>
+ <li>{{cssxref("word-break")}}: Specify whether to break lines within words.</li>
+ <li>{{cssxref("direction")}}: Define the text direction (This depends on the language and usually it's better to let HTML handle that part as it is tied to the text content.)</li>
+ <li>{{cssxref("hyphens")}}: Switch on and off hyphenation for supported languages.</li>
+ <li>{{cssxref("line-break")}}: Relax or strengthen line breaking for Asian languages.</li>
+ <li>{{cssxref("text-align-last")}}: Define how the last line of a block or a line, right before a forced line break, is aligned.</li>
+ <li>{{cssxref("text-orientation")}}: Define the orientation of the text in a line.</li>
+ <li>{{cssxref("overflow-wrap")}}: Specify whether or not the browser may break lines within words in order to prevent overflow.</li>
+ <li>{{cssxref("writing-mode")}}: Define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow.</li>
+</ul>
+
+<h2 id="Font_shorthand">Font shorthand</h2>
+
+<p>Many font properties can also be set through the shorthand property {{cssxref("font")}}. These are written in the following order:  {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.</p>
+
+<p>Among all those properties, only <code>font-size</code> and <code>font-family</code> are required when using the <code>font</code> shorthand property.</p>
+
+<p>A forward slash has to be put in between the {{cssxref("font-size")}} and {{cssxref("line-height")}} properties.</p>
+
+<p>A full example would look like this:</p>
+
+<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre>
+
+<h2 id="Active_learning_Playing_with_styling_text">Active learning: Playing with styling text</h2>
+
+<p>In this active learning session, we don't have any specific exercises for you to do: we'd just like you to have a good play with some font/text layout properties, and see what you can produce! You can either do this using offline HTML/CSS files, or enter your code into the live editable example below.</p>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;HTML Input&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;
+&lt;p&gt;Some sample text for your delight&lt;/p&gt;
+  &lt;/textarea&gt;
+
+  &lt;h2&gt;CSS Input&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;
+p {
+
+}
+&lt;/textarea&gt;
+
+  &lt;h2&gt;Output&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js notranslate">const htmlInput = document.querySelector(".html-input");
+const cssInput = document.querySelector(".css-input");
+const reset = document.getElementById("reset");
+let htmlCode = htmlInput.value;
+let cssCode = cssInput.value;
+const output = document.querySelector(".output");
+
+const styleElem = document.createElement('style');
+const headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="Test_your_skills!">Test your skills!</h2>
+
+<p>You've reached the end of this article, and already did some skill testing in our Active Learning section, but can you remember the most important information going forward? You can find an assessment to verify that you've retained this information at the end of the module — see <a href="/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a>.</p>
+
+<p>This assessment tests all the knowledge discussed in this module, so you might want to read the other articles before moving on to it.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>We hoped you enjoyed playing with text in this article! The next article will give you all you need to know about styling HTML lists.</p>
+
+<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li>
+</ul>
diff --git a/files/ru/learn/css/styling_text/index.html b/files/ru/learn/css/styling_text/index.html
new file mode 100644
index 0000000000..8a696e55df
--- /dev/null
+++ b/files/ru/learn/css/styling_text/index.html
@@ -0,0 +1,60 @@
+---
+title: Стилизирование текста
+slug: Learn/CSS/Styling_text
+tags:
+  - CSS
+  - CodingScripting
+  - Module
+  - NeedsTranslation
+  - Text
+  - TopicStub
+  - letter
+  - line
+  - Начинающий
+  - Ссылки
+  - Текст
+  - Шрифты
+  - веб шрифты
+  - лендинг
+  - примеры кода
+  - списки
+  - тени
+  - шрифт
+translation_of: Learn/CSS/Styling_text
+---
+<p id="Перед_стартом"> {{LearnSidebar}}</p>
+
+<p>Разобравшись с основами синтаксиса CSS, следующей темой над которой вам следует сосредоточиться, это стилизация текста — одна из наиболее распространенных вещей, которые вы будете делать с помощью CSS. В этой теме мы рассмотрим основные принципы оформления, включая выбор и определение шрифтов, использование курсива и жирного шрифта, отступов, теней и других средств придания уникальности вашему тексту. В завершение темы мы рассмотрим использование на вашей странице пользовательских шрифтов, а также оформление списков и ссылок</p>
+
+<h2 id="Необходимые_условия">Необходимые условия</h2>
+
+<p>Перед началом работы с этим модулем, вы должны уже иметь базовые знания HTML, как это описано во <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>, и с основами CSS, как описано в <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: В случае, если вы работаете на компьютере, планшете или ином устройстве, на котором у вас нет возможности создавать свои собственные файлы,  вы можете попробовать выполнить примеры кода (по крайней мере, большинство из них) в специальных онлайн-программах, таких как <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Руководство">Руководство</h2>
+
+<p>Данный модуль состоит из следующих далее статей, которые дадут вам всё необходимое для оформления текстового HTML-контента.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Основы стилизирования текcта и шрифта</a></dt>
+ <dd>В этой статье мы детально изучим стилизирование текста и шрифта, включая параметры weight, family, style, font shorthand, text alignment и прочие эффекты, а так же line и letter spacing.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизирование списков</a></dt>
+ <dd>Списки, по большей части, ведут себе так же, как и любой другой текст, но они имеют некоторые особые CSS свойства о которых нужно знать, и<br>
+ некоторые методы которые стоит принять во внимание. Эта статья все разъясняет.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизирование ссылок</a></dt>
+ <dd>При стилизации ссылок важно понимать, как эффективно использовать псевдоклассы для стилизации состояний ссылок, и как стилизовать ссылки для использования в общих разнообразных функциях интерфейса, таких как навигационные меню и вкладки. Мы рассмотрим все эти темы в этой статье.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></dt>
+ <dd>Здесь мы подробно рассмотрим веб-шрифты — они позволяют загружать пользовательские шрифты вместе с вашей веб-страницей, чтобы обеспечить более разнообразный, индивидуальный стиль текста.</dd>
+</dl>
+
+<h2 id="Проверка">Проверка</h2>
+
+<p>Следующие задания проверят ваше понимание методов стилизации текста, описанных в вышеприведенных руководствах.</p>
+
+<dl>
+ <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Вёрстка домашней страницы муниципальной школы</a></dt>
+ <dd>В этом задании мы проверим ваше понимание стилизации текста, <span class="samTranslation"><span class="sourceSample">заставив</span> вас</span> оформить текст для домашней страницы общеобразовательной школы.</dd>
+</dl>
diff --git a/files/ru/learn/css/styling_text/styling_links/index.html b/files/ru/learn/css/styling_text/styling_links/index.html
new file mode 100644
index 0000000000..29ecf37729
--- /dev/null
+++ b/files/ru/learn/css/styling_text/styling_links/index.html
@@ -0,0 +1,420 @@
+---
+title: Стилизация ссылок
+slug: Learn/CSS/Styling_text/Styling_links
+translation_of: Learn/CSS/Styling_text/Styling_links
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary">При стилизации ссылок, важно понимать как использовать псевдо-классы, чтобы стилизировать состояния ссылок эфективно, и как стилизировать ссылки для использования в общих разнообразных функциях интерфейса: таких как например навигационное меню и вкладки. Мы расмотрим все эти темы в этой статье.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Для изучения вам потребуется:</th>
+   <td>Основы компьютерной грамотности, базовые знания HTML (изучите <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>), <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals">базовые знания о текстах и шрифтах CSS</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Вы узнаете:</th>
+   <td>Изучите как стилизуются ссылки и как использовать ссылки эффективно в общих задачах UI (пользовательских интерфейсах), например, в меню навигации.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Давайте_посмотрим_на_некоторые_ссылки">Давайте посмотрим на некоторые ссылки</h2>
+
+<p>Мы рассматривали как реализуются ссылки в вашем HTML в соответствии с лучшими практиками в <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создании гиперссылок</a>. <span class="tlid-translation translation" lang="ru"><span title="">В этой статье мы будем опираться на эти знания, показывая вам лучшие практики по оформлению ссылок.</span></span></p>
+
+<h3 id="Состояния_ссылок">Состояния ссылок</h3>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Первое, что нужно понять, это концепция состояний ссылок </span></span>— разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">псевдоклассы</a>:</p>
+
+<ul>
+ <li><strong>Link (не посещенная)</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Состояние по умолчанию, в котором находится ссылка</span></span>, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс {{cssxref(":link")}}.</li>
+ <li><strong>Visited</strong>: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс {{cssxref(":visited")}}.</li>
+ <li><strong>Hover</strong>: Ссылка, когда на нее наведен курсор мыши, стилизуется используя псевдокласс {{cssxref(":hover")}}</li>
+ <li><strong>Focus</strong>: Ссылка, когда она была сфокусирована (например когда пользователь переместился на нее используя клавишу <kbd>Tab</kbd> или наподобие или программно сфокусирована используя {{domxref("HTMLElement.focus()")}}) — стилизуется используя псевдокласс {{cssxref(":focus")}}.</li>
+ <li><strong>Active</strong>: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс {{cssxref(":active")}}</li>
+</ul>
+
+<h3 id="Стили_по_умолчанию">Стили по умолчанию</h3>
+
+<p>Следующий пример показывает, как будет вести себя ссылка по умолчанию (CSS просто увеличивает и центрирует текст чтоб больше выделить его).</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="https://mozilla.org"&gt;A link to the Mozilla homepage&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">p {
+  font-size: 2rem;
+  text-align: center;
+}</pre>
+
+<p>{{ EmbedLiveSample('Стили_по_умолчанию', '100%', 120) }}</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вы заметите несколько вещей при изучении стилей по умолчанию</span></span>:</p>
+
+<ul>
+ <li>Ссылки подчеркнуты.</li>
+ <li>Не посещенные ссылки синие.</li>
+ <li>Посещенные ссылки фиолетовые</li>
+ <li>Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.</li>
+ <li>Сфокусированные ссылки имеют контур вокруг себя — <span class="tlid-translation translation" lang="ru"><span title="">вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на </span></span>Mac, вам может понадобиться включить опцию <em>Full Keyboard Access: All controls </em>нажав <kbd>Ctrl</kbd> + <kbd>F7</kbd><span style='font-family: "Times New Roman",serif; font-size: 12.0pt; line-height: 200%;'>,</span> прежде чем это будет работать<span class="tlid-translation translation" lang="ru"><span title="">).</span></span></li>
+ <li>Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).</li>
+</ul>
+
+<p>Довольно интересно, что эти стили по умолчанию приблизительно такие же какими они были в первые дни браузеров в середине 1990-ых. Это потому, что пользователи знают и привыкли ожидать такого поведения — если бы ссылки были стилизованы по-разному, это бы путало много людей. Это не значит, что вы недолжны стилизовать ссылки совсем, просто вы не должны уходить слишком далеко от ожидаемого поведения. По крайней мере вы должны:</p>
+
+<ul>
+ <li>Использовать нижнее подчеркивание для ссылок, но не для других вещей. Если вы не хотите подчеркивать ссылки, то хотя бы выделите их каким-либо другим путем.</li>
+ <li>Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.</li>
+</ul>
+
+<p>Стили по умолчанию могут быть выключены/изменены, используя следующие свойства CSS:</p>
+
+<ul>
+ <li>{{cssxref("color")}} для цвета текста.</li>
+ <li>{{cssxref("cursor")}} для стиля курсора мыши — вы не должны отключать эту опцию только если у вас нет на это веской причины.</li>
+ <li>{{cssxref("outline")}} для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур <span class="tlid-translation translation" lang="ru"><span title="">является полезным вспомогательным средством</span></span>, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния hover, а также состояния фокусировки.</li>
+</ul>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Вы не ограничены только перечисленными выше свойствами чтобы стилизовать ссылки — <span class="tlid-translation translation" lang="ru"><span title="">вы можете использовать любые свойства, которые вам нравятся. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Просто постарайтесь не сходить с ума слишком сильно!</span></span></p>
+</div>
+
+<h3 id="Стилизация_некоторых_ссылок">Стилизация некоторых ссылок</h3>
+
+<p>Мы уже рассмотрели состояния по умолчанию в некоторых деталях, давайте взглянем на типичный набор стилей ссылок.</p>
+
+<p>Чтобы начать, мы выпишем наши пустые наборы правил:</p>
+
+<pre class="brush: css">a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}</pre>
+
+<p>Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под "наведением" (hover). Если вы введете их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа <strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te.</p>
+
+<p>А теперь давайте добавим еще немного информации <span class="tlid-translation translation" lang="ru"><span title="">чтобы правильно оформить этот стиль:</span></span></p>
+
+<pre class="brush: css">body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}</pre>
+
+<p>Также мы дадим некий пример HTML к которому применяется CSS:</p>
+
+<pre class="brush: html">&lt;p&gt;There are several browsers available, such as &lt;a href="https://www.mozilla.org/en-US/firefox/"&gt;Mozilla
+Firefox&lt;/a&gt;, &lt;a href="https://www.google.com/chrome/index.html"&gt;Google Chrome&lt;/a&gt;, and
+&lt;a href="https://www.microsoft.com/en-us/windows/microsoft-edge"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Объединение этих двух дает нам такой результат:</p>
+
+<p>{{ EmbedLiveSample('Стилизация_некоторых_ссылок', '100%', 150) }}</p>
+
+<p>Итак, что мы сделали тут? Это определенно выглядит иначе чем стилизация по умолчанию, но <span class="tlid-translation translation" lang="ru"><span title="">все еще дает достаточно знакомый опыт для пользователей, чтобы знать, что происходит:</span></span></p>
+
+<ul>
+ <li>Первые два правила не так интересны в этом обсуждении.</li>
+ <li>Третье правило использует селектор <code>a</code> чтобы избавиться от подчеркивания текста и контура фокуса по умолчанию (которые все равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.</li>
+ <li>Далее, мы используем селекторы <code>a:link</code> и <code>a:visited</code> чтобы настроить пару цветовых вариаций не посещенных и посещенных ссылок, так чтоб они отличались.</li>
+ <li>Следующие два правила используют <code>a:focus</code> и <code>a:hover</code> настраивают сфокусированные и наведенные (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчеркивание чтобы ссылка выделялась еще больше. Два пункта на которые надо обратить внимание:
+  <ul>
+   <li>Нижнее подчеркивание создано используя {{cssxref("border-bottom")}}, а не {{cssxref("text-decoration")}} — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчеркнутыми (например хвосты у букв как "р" и "у").</li>
+   <li>Значение {{cssxref("border-bottom")}} установлено на <code>1px solid</code>, без определенного цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.</li>
+  </ul>
+ </li>
+ <li>Наконец, <code>a:active</code> используется чтобы дать ссылкам инвертированную цветовую схему в то время когда они активированы, чтобы было ясно что происходит что то важное!</li>
+</ul>
+
+<h3 id="Активное_изучение_Стилизуйте_ссылки_самостояельно">Активное изучение: Стилизуйте ссылки самостояельно</h3>
+
+<p>В этой секции активного изучения, мы бы хотели, чтобы взяли наш набор пустых правил и добавили ваши собственные объявления так чтобы ссылки выглядели действительно круто. Используйте свое воображение, не сковывайтесь. Мы уверены, что вы можете придумать что-то более крутое и все еще так же функциональное, как и наш пример выше.</p>
+
+<p>Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку <em>Reset</em>. Если вы действительно застряли нажмите кнопку <em>Show solution</em> чтобы вставить пример, который мы показали выше.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;HTML Input&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;p&gt;There are several browsers available, such as &lt;a href="https://www.mozilla.org/en-US/firefox/"&gt;Mozilla
+ Firefox&lt;/a&gt;, &lt;a href="https://www.google.com/chrome/index.html"&gt;Google Chrome&lt;/a&gt;, and
+&lt;a href="https://www.microsoft.com/en-us/windows/microsoft-edge"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;CSS Input&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;a {
+
+}
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}&lt;/textarea&gt;
+
+  &lt;h2&gt;Output&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
+    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var htmlInput = document.querySelector(".html-input");
+var cssInput = document.querySelector(".css-input");
+var reset = document.getElementById("reset");
+var htmlCode = htmlInput.value;
+var cssCode = cssInput.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+var styleElem = document.createElement('style');
+var headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = 'p {\n  font-size: 1.2rem;\n  font-family: sans-serif;\n  line-height: 1.4;\n}\n\na {\n  outline: none;\n  text-decoration: none;\n  padding: 2px 1px 0;\n}\n\na:link {\n  color: #265301;\n}\n\na:visited {\n  color: #437A16;\n}\n\na:focus {\n  border-bottom: 1px solid;\n  background: #BAE498;\n}\n\na:hover {\n  border-bottom: 1px solid;\n  background: #CDFEAA;\n}\n\na:active {\n  background: #265301;\n  color: #CDFEAA;\n}';
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="Добавление_иконок_в_ссылки">Добавление иконок в ссылки</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки </span></span>— например, мы будем использовать <a href="https://icons8.com/web-app/741/external-link">этот отличный образец с сайта icons8.com</a>.</p>
+
+<p>Давайте взглянем на HTML и CSS которые дадут нам эффект, который мы хотим. Во-первых, немного простого HTML который будет стилизован:</p>
+
+<pre class="brush: html">&lt;p&gt;For more information on the weather, visit our &lt;a href="weather.html"&gt;weather page&lt;/a&gt;,
+look at &lt;a href="https://en.wikipedia.org/wiki/Weather"&gt;weather on Wikipedia&lt;/a&gt;, or check
+out &lt;a href="http://www.extremescience.com/weather.htm"&gt;weather on Extreme Science&lt;/a&gt;.&lt;/p&gt;</pre>
+
+<p>Далее, CSS:</p>
+
+<pre class="brush: css">body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}</pre>
+
+<p>{{ EmbedLiveSample('Добавление_иконок_в_ссылки', '100%', 150) }}</p>
+
+<p>Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали <a href="/en-US/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">пользовательские маркеры для пунктов списка</a> в последней статье — в этот раз, однако, мы используем короткую запись {{cssxref("background")}} вместо индивидуальных свойств. Мы задаем путь к изображению, которое хотим вставить, устанавливаем <code>no-repeat</code> чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.</p>
+
+<p>Также мы используем {{cssxref("background-size")}} для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придется менять размер изображения и вставлять его как есть.</p>
+
+<p>Наконец, мы задаем некоторый {{cssxref("padding-right")}} для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.</p>
+
+<p>И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML ссылки</a> правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">селектора атрибутов</a>: <code>a[href*="http"]</code> выбирает элементы {{htmlelement("a")}}, но только если они имеют атрибут {{htmlattrxref("href","a")}} со значением содержащим "http" где-то внутри него.</p>
+
+<p>Ну вот и все — попробуте посетить секцию активного изучения выше и испытайте этот новый метод!</p>
+
+<div class="note">
+<p><strong>Обратите вниманиеe</strong>: Не переживайте если вы еще не знакомы с <a href="/en-US/docs/Learn/CSS/Styling_boxes">фоном </a>и <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">адаптивным (отзывчивым) веб-дизайном</a>; это объяснено в других местах</p>
+</div>
+
+<h2 id="Стилизация_ссылок_в_виде_кнопок">Стилизация ссылок в виде кнопок</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Инструменты, которые вы исследовали в этой статье</span></span> также могут быть использованы другим способом. Например, такие состояния как hover могут быть использованы для стилизации множества различных элементов, не только ссылок — вы можете захотеть стилизовать состояние hover параграфов, элементов списка или других вещей.</p>
+
+<p>Дополнительно, ссылки очень часто стилизуют так, чтоб они выглядели и вели себя как кнопки при определенных обстоятельствах — навигационное меню веб-сайтов обычно размечено как список, содержащий ссылки, который легко может быть стилизован так чтоб выглядел как набор кнопок управления или вкладок которые обеспечивают пользователя доступом к другим частям сайта. Давайте изучим как.</p>
+
+<p>Для начала HTML:</p>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Pizza&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Music&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Wombats&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Finland&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>А теперь наш CSS:</p>
+
+<pre class="brush: css">body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}</pre>
+
+<p>Что дает нам следующий результат:</p>
+
+<p>{{ EmbedLiveSample('Стилизация_ссылок_в_виде_кнопок', '100%', 100) }}</p>
+
+<p>Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:</p>
+
+<ul>
+ <li>Наше второе правило удаляет заданный по умолчанию {{cssxref("padding")}} у элемента {{htmlelement("ul")}} и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае {{htmlelement("body")}}).</li>
+ <li>Элементы {{htmlelement("li")}} по умолчанию в норме являются блочными (см. <a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">типы блоков CSS</a> чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаем горизонтальный список ссылок, поэтому в третьем правиле задаем свойству {{cssxref("display")}} значение inline, <span class="tlid-translation translation" lang="ru"><span title="">что приводит к тому, что элементы списка располагаются в одной строке друг с другом </span></span>— теперь они ведут себя как строчные элементы.</li>
+ <li>четвертое правило — которое стилизует элемент {{htmlelement("a")}} — самое сложное; давайте пройдемся по нему шаг за шагом:
+  <ul>
+   <li>как в предыдущем примере, мы начинаем отключать настройки по умолчанию для {{cssxref("text-decoration")}} и {{cssxref("outline")}} — мы не хотим, чтоб они портили нам вид.</li>
+   <li>Далее мы устанавливаем {{cssxref("display")}} на <code>inline-block</code> — элементы {{htmlelement("a")}} являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением <code>block</code>, мы хотим иметь возможность менять их размер. <code>inline-block</code> позволяет нам делать это.</li>
+   <li>Теперь только изменение размера! Мы хотим заполнить всю ширину элемента {{htmlelement("ul")}}, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаем {{cssxref("width")}} на 19.5%, а {{cssxref("margin-right")}} на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <code>&lt;ul&gt;</code> и выпадет вниз на следующую строку. <span class="tlid-translation translation" lang="ru"><span title="">Тем не менее, мы возвращаемся к 100%, используя следующее правило</span></span>, которое выбирает только последний <code>&lt;a&gt;</code> в списке и удаляет его margin. Сделано!</li>
+   <li>Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаем {{cssxref("line-height")}} на 3 чтобы кнопки имели некую высоту (что также имеет приемущество в центрировании текста по вертикали) и задаем для текста черный цвет.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что <span class="tlid-translation translation" lang="ru"><span title="">это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на </span></span><a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p>
+</div>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Мы надеемся эта статья снабдила вас всем что вам надо знать о ссылках — на данный момент! Последняя статья в нашем модуле стилизации текста детализирует как использовать пользовательские шрифты на вашем веб-сайте или как они больше известны веб-шрифты.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p>
diff --git a/files/ru/learn/css/styling_text/веб_шрифты/index.html b/files/ru/learn/css/styling_text/веб_шрифты/index.html
new file mode 100644
index 0000000000..f6ca27747f
--- /dev/null
+++ b/files/ru/learn/css/styling_text/веб_шрифты/index.html
@@ -0,0 +1,203 @@
+---
+title: Веб-шрифты
+slug: Learn/CSS/Styling_text/Веб_шрифты
+translation_of: Learn/CSS/Styling_text/Web_fonts
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary">В первой статье модуля, мы изучали основные функции CSS доступные для стилизации шрифтов и текста. В этой статье мы продвинемся дальше изучая веб-шрифты в деталях — они позволяют вам загружать пользовательские шрифты вместе с вашей веб-страницей, <span class="tlid-translation translation" lang="ru"><span title="">чтобы обеспечить более разнообразный, индивидуальный стиль текста.</span></span></p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Предварительные требования:</th>
+   <td>Основная компьютерная грамотность, основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Основы CSS текста и шрифта</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>
+    <p>Изучить как применять веб-шрифты к веб-странице, использовать сторонний сервис или писать код самостоятельно.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Краткое_повторение_семейств_шрифтов">Краткое повторение семейств шрифтов</h2>
+
+<p>Как мы рассматривали в <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Фундаментальной стилизации текста и шрифта</a>, шрифты примененные к вашему HTML могут контролироваться при помощи свойства {{cssxref("font-family")}}. Оно принимает одно и более имен семейств шрифтов и браузер следует по списку пока не найдет тот шрифт, который является доступным в системе, под управлением которой он работает:</p>
+
+<pre class="brush: css notranslate">p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}</pre>
+
+<p>Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространенных системах — так называемые <a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts">Безопасные веб-шрифты</a>. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете использовать стек шрифта для указания предпочтительных шрифтов</span></span>, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, <span class="tlid-translation translation" lang="ru"><span title="">но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д.</span></span></p>
+
+<h2 id="Веб-шрифты">Веб-шрифты</h2>
+
+<p>Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, <span class="tlid-translation translation" lang="ru"><span title="">это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своем распоряжении именно те шрифты, которые вы укажете.</span></span> Замечательно! Требуемый синтаксис выглядит примерно так:</p>
+
+<p>Во-первых, у вас есть блок {{cssxref("@font-face")}} в начале CSS, который указывает файл(-ы) шрифтов для загрузки:</p>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: "myFont";
+  src: url("myFont.woff");
+}</pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:</span></span></p>
+
+<pre class="brush: css notranslate">html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}</pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Синтаксис становится немного сложнее, чем этот;</span> <span title="">мы вдадимся в подробности ниже.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Есть две важные вещи, которые нужно иметь в виду о веб-шрифтах:</span></span></p>
+
+<ol>
+ <li>Браузеры поддерживают разные форматы шрифтов, поэтому вам будут нужны несколько форматов шрифтов для приличной кросс-браузерной поддержки. Например, большинство современных браузеров поддерживают WOFF/WOFF2 (Web Open Font Format versions 1 and 2), наиболее эффективный формат, но старые версии IE поддерживают только шрифты EOT (Embedded Open Type) и вам возможно понадобиться включать версию SVG шрифта для поддержки старых версий браузеров iPhone и Android. Ниже мы покажем вам как генерировать требуемый код.</li>
+ <li>В основном шрифты не бесплатны для использования. Вы должны платить за них и/или соблюдать другие условия лицензии такие <span class="tlid-translation translation" lang="ru"><span title="">как указание создателя шрифта в коде (или на вашем сайте). Вы не должны красть шрифты и использовать их без должного указания авторства.</span></span></li>
+</ol>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Веб-шрифты как технология поддерживается в Internet Explorer начиная с 4 версии!</p>
+</div>
+
+<h2 id="Активное_изучение_пример_веб-шрифта">Активное изучение: пример веб-шрифта</h2>
+
+<p>Имея это в виду, давайте создадим базовый пример веб-шрифта из первых принципов. <span class="tlid-translation translation" lang="ru"><span title="">Сложно продемонстрировать это на встроенном живом примере</span></span>, поэтому вместо, мы бы хотели, чтобы следовали детальным шагам в секциях ниже, чтобы понять идею процесса</p>
+
+<p>Вы должны использовать файлы <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> как отправную точку добавляя в них ваш код (см. <a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">живой пример</a>). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле <code>web-font-start.css</code> вы найдете некоторый минимальный CSS для работы с базовым макетом и версткой примера.</p>
+
+<h3 id="Поиск_шрифтов">Поиск шрифтов</h3>
+
+<p>В этом примере мы будем использовать два веб-шрифта, один для заголовков, и другой для основного текста. Для того чтобы начать нам необходимо найти файлы шрифтов, которые содержат эти шрифты. Шрифты созданы шрифтовыми "цехами" и хранятся в разных форматах фалов. Как правило существует три типа сайтов, где вы можете получить шрифты:</p>
+
+<ul>
+ <li>Бесплатный дистрибьютер шрифтов: <span class="tlid-translation translation" lang="ru"><span title="">это сайт, который предоставляет бесплатные шрифты для скачивания</span></span> (<span class="tlid-translation translation" lang="ru"><span title="">могут существовать некоторые условия лицензии, например, указание создателя шрифта)</span></span>. Примеры включают <a href="https://www.fontsquirrel.com/">Font Squirrel</a>, <a href="http://www.dafont.com/">dafont</a>, и <a href="https://everythingfonts.com/">Everything Fonts</a>.</li>
+ <li>Платный дистрибьютер шрифтов: это сайт, который предоставляет шрифты за плату, например <a href="http://www.fonts.com/">fonts.com</a> или <a href="http://www.myfonts.com/">myfonts.com</a>. Также вы можете купить шрифты напрямую у производителя шрифтов, например <a href="https://www.linotype.com/">Linotype</a>, <a href="http://www.monotype.com">Monotype</a>, или <a href="http://www.exljbris.com/">Exljbris</a>.</li>
+ <li>Сервис онлайн шрифтов: это сайт, который предоставляет вам шрифты, делая весь процесс проще. Смотрите раздел {{anch("Использование онлайн-сервиса шрифтов")}} для более подробной информации.</li>
+</ul>
+
+<p>Давайте найдем какие-нибудь шрифты! Отправляйтесь на <a href="https://www.fontsquirrel.com/">Font Squirrel</a> и выберите два шрифта — симпатичный интересный шрифт для заголовков (может быть симпатично выглядящий или шрифт с засечками) и немного менее кричащий и более читабельный шрифт для параграфов. Когда вы найдете каждый шрифт, нажмите на кнопку загрузки и сохраните файлы в той же директории, где ранее вы сохранили файлы HTML и CSS. Не имеет значения являются ли они TTF (True Type Fonts) или OTF (Open Type Fonts).</p>
+
+<p>В любом случае распакуйте архив со шрифтом (веб-шрифты обычно распространяются в ZIP файлах, содержащих файл(-ы) шрифта и лицензионную информацию). Вы можете обнаружить несколько файлов шрифтов в упаковке (архиве) — некоторые шрифты распространяются как семейство с различными доступными вариантами, например тонкий, средний, жирный, курсив, тонкий курсив и т.д. <span class="tlid-translation translation" lang="ru"><span title="">В этом примере мы просто хотим, чтобы вы позаботились о едином файле шрифта для каждого варианта.</span></span></p>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: В разделе "Find fonts" в колонке справа, вы можете кликать по различным тегам и классификациям чтобы отфильтровать отображаемые варианты для выбора.</p>
+</div>
+
+<h3 id="Генерация_требуемого_кода">Генерация требуемого кода</h3>
+
+<p>Теперь вам надо будет сгенерировать требуемый код (и форматы шрифтов). Для каждого шрифта проделайте следующие шаги.</p>
+
+<ol>
+ <li><span class="tlid-translation translation" lang="ru"><span title="">Убедитесь, что вы выполнили все лицензионные требования если вы собираетесь использовать это в коммерческих и/или веб проектах.</span></span></li>
+ <li>Перейдите на Fontsquirrel <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a>.</li>
+ <li>Выгрузите два ваших файла шрифтов используя кнопку <em>Upload Fonts.</em></li>
+ <li>Поставьте галочку отмеченную "Yes, the fonts I'm uploading are legally eligible for web embedding".</li>
+ <li>Кликните по <em>Download your kit</em>.</li>
+</ol>
+
+<p>После того как генератор закончит обработку, вы должны получить ZIP файл к загрузке — сохраните его в той же директории что и ваши HTML и CSS.</p>
+
+<h3 id="Реализация_кода_в_вашем_демо">Реализация кода в вашем демо</h3>
+
+<p>Теперь распакуйте набор веб-шрифта, который вы только что сгенерировали. Внутри распакованной папки вы увидите три полезных элемента:</p>
+
+<ul>
+ <li>несколько версий каждого шрифта (например <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code> и т.д.; <span class="tlid-translation translation" lang="ru"><span title="">предоставленные шрифты будут обновляться со временем по мере изменения требований поддержки браузера</span></span>). Как упомянуто выше, несколько шрифтов нужны для кросс-браузерной поддержки — это метод Fontsquirrel быть уверенными что вы получили все что вам надо.</li>
+ <li>Демо файл HTML для каждого шрифта — загрузите их в ваш браузер чтобы посмотреть, как будет выглядеть шрифт в разных контекстах использования.</li>
+ <li>Файл <code>stylesheet.css</code>, который содержит сгенерированный @font-face код который вам нужен.</li>
+</ul>
+
+<p>Для внедрения их в ваше демо следуйте следующим шагам:</p>
+
+<ol>
+ <li>Переименуйте распакованную папку на что-нибудь легкое и простое, например <code>fonts</code>.</li>
+ <li>Откройте файл <code>stylesheet.css</code> и скопируйте содержимое обоих <code>@font-face</code> блоков в ваш файл <code>web-font-start.css</code> — вам надо вставить их в самый верх, до любого вашего CSS, так как шрифты должны быть импортированы до того, как вы сможете использовать их на вашем сайте.</li>
+ <li>Каждый из функций <code>url()</code> указывает на файл шрифта который мы хотим импортировать в наш CSS — мы должны убедиться в том, что пути к файлам верные, поэтому добавьте <code>fonts/</code> в начало каждого пути (настройте так как необходимо).</li>
+ <li>Теперь вы можете использовать эти шрифты в ваших стеках шрифтов, как и любой веб-безопасный или по умолчанию системный шрифт. Например:</li>
+</ol>
+
+<pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вы должны получить демо-страницу с какими-то реализованными симпатичными шрифтами. Поскольку различные шрифты создаются в разных размерах, вам может понадобиться настроить размер, интервалы и т.д., чтобы отладить внешний вид.</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Если у вас возникли какие-либо проблемы с тем что что-то не работает, смело сравнивайте файлы вашей версии с нашей законченной — см. <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">run the finished example live</a>).</p>
+</div>
+
+<h2 id="Использование_онлайн-сервиса_шрифтов">Использование онлайн-сервиса шрифтов</h2>
+
+<p>Онлайн-сервисы шрифтов обычно хранят и обслуживают шрифты для вас, поэтому вам не надо переживать о написании <code>@font-face</code> кода и обычно необходимо просто вставить строчку или две простого кода в ваш сайт для того чтобы все работало. Примеры включают <a href="https://fonts.adobe.com/">Adobe Fonts</a> и <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a>. Большинство из этих услуг на основе подписки, за исключением <a href="https://www.google.com/fonts">Google Fonts</a>, полезный бесплатный сервис, особенно для быстрого тестирования работы и написания демо.</p>
+
+<p>Большинство из этих сервисов легки в использовании, поэтому мы не будем освещать их в деталях. Давайте кратко рассмотрим Google fonts, чтобы вы понимали идею. И снова, используйте копии <code>web-font-start.html</code> и <code>web-font-start.css</code> в качестве отправной точки.</p>
+
+<ol>
+ <li>Отправляйтесь на <a href="https://www.google.com/fonts">Google Fonts</a>.</li>
+ <li>Используйте фильтры с правой стороны чтобы отобразить типы шрифтов, которые вы хотите выбрать и выберите пару шрифтов, которые вам понравятся.</li>
+ <li>Для выбора семейства шрифтов нажмите на кнопку ⊕ рядом с ним.</li>
+ <li>Когда вы выбрали семейства шрифтов, нажмите на панель <em>[Number] Families Selected</em> в низу страницы.</li>
+ <li>На полученном экране, сначала вам надо скопировать строку показанного HTML кода и вставить ее в head вашего HTML файла. Вставьте его выше существующего {{htmlelement("link")}} элемента для того, чтоб шрифт импортировался до того, как вы начнете пользоваться им в вашем CSS.</li>
+ <li>Далее вам надо скопировать CSS-объявления<span class="tlid-translation translation" lang="ru"><span title="">, перечисленные в вашем CSS, чтобы применить пользовательские шрифты к вашему HTML.</span></span></li>
+</ol>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Вы можете найти законченные версии <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, если вам необходимо сверить вашу работу с нашей (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">см. live</a>).</p>
+</div>
+
+<h2 id="font-face_более_детально">@font-face более детально</h2>
+
+<p>Давайте исследуем тот <code>@font-face</code> синтаксис, который fontsquirrel сгенерировал для вас. Это то, как выглядит один из этих блоков:</p>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}</pre>
+
+<p>Это называется "пуленепробиваемым @font-face синтаксисом", после публикации Пола Айриша (Paul Irish), с самого начала, когда <code>@font-face</code> начал получать популярность (<a href="https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>). Давайте пройдемся по нему, чтобы посмотреть, что он делает:</p>
+
+<ul>
+ <li><code>font-family</code>: В этой строке указывается имя, которое вы хотите использовать для обозначения шрифта. Вы можете указать его как угодно, если вы используете его последовательно в вашем CSS.</li>
+ <li><code>src</code>: В этой строке указывается путь к файлам шрифтов которые будут импортированы в ваш CSS (<code>url</code> путь) и формат каждого файла шрифта (<code>format</code> часть). Последняя часть в каждом случае опциональна, но полезно объявлять его, потому что это позволяет браузерам быстрее находить шрифт, который они могут использовать. Могут быть перечислены несколько объявлений, разделенных запятыми — браузер будет искать среди них и использовать первый который найдет и тот который он понимает — поэтому лучше всего ставить новые, лучшие форматы такие как WOFF2 в начало, а старые, не такие хорошие форматы как TTF в конец. Единственное исключение это EOT шрифты — они размещены первыми чтобы исправить пару багов в старых версиях IE который постарается использовать первую вещь, которую найдет, даже если он не умеет использовать этот шрифт.</li>
+ <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}}: В этих строках указывается какую толщину имеет шрифт и является ли он курсивом или нет. Если вы импортируете несколько значений толщины одного и того же шрифта вы можете указать какая у них толщина/стиль и затем использовать разные значения {{cssxref("font-weight")}}/{{cssxref("font-style")}} для выбора между ними, <span class="tlid-translation translation" lang="ru"><span title="">вместо того, чтобы называть всех разных членов семейства шрифтов разными именами. </span></span><a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face совет: установите font-weight и font-style так чтобы ваш CSS был простым</a> от Роджера Джонсона (Roger Johansson) покажет, что делать более детально.</li>
+</ul>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Вы также можете указать определенные значения {{cssxref("font-variant")}} и {{cssxref("font-stretch")}} для ваших веб-шрифтов. В новых браузерах вы также можете указать значение {{cssxref("unicode-range")}}, <span class="tlid-translation translation" lang="ru"><span title="">который является конкретным диапазоном символов</span></span>, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> от Drew McLellan предоставляет некоторые полезные идеи того как это использовать</p>
+</div>
+
+<h2 id="Переменные_шрифты">Переменные шрифты</h2>
+
+<p>В браузерах доступна новая технология, называемая переменными шрифтами — это шрифты, которые позволяют включить в единственный файл много разных вариантов дизайнов шрифтов, вместо того чтобы иметь отдельные файлы шрифтов для каждой ширины, толщины или стиля. <span class="tlid-translation translation" lang="ru"><span title="">Они несколько продвинуты для нашего курса для начинающих</span></span>, <span class="tlid-translation translation" lang="ru"><span title="">но если вы хотите расширить свои знания и посмотреть на них, прочитайте наше </span></span><a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Руководство по переменным шрифтам</a>.</p>
+
+<h2 id="Испытайте_свои_навыки!">Испытайте свои навыки!</h2>
+
+<p>Вы достигли конца этой статьи и уже испытали некоторые навыки в наших разделах активного изучения, но сможете ли вы вспомнить самую важную информацию продвигаясь дальше? Вы можете найти задание для проверки того что вы усвоили информацию к конце модуля — см. <a href="/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Задание: стилизация школьного сайта</a>.</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Теперь, когда вы ознакомились с нашими статьями об основах стилизации текста, пришло время проверить ваше понимание нашей оценкой модуля «Задание: стилизация школьного сайта».</span></span></p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Фундаментальная стилизация текста и шрифта</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Задание: Стилизация школьного сайта</a></li>
+</ul>
diff --git a/files/ru/learn/css/styling_text/задание_colon__стилизирование_школьного_сайта/index.html b/files/ru/learn/css/styling_text/задание_colon__стилизирование_школьного_сайта/index.html
new file mode 100644
index 0000000000..4f77ee31bc
--- /dev/null
+++ b/files/ru/learn/css/styling_text/задание_colon__стилизирование_школьного_сайта/index.html
@@ -0,0 +1,126 @@
+---
+title: 'Задание: Стилизирование школьного сайта'
+slug: 'Learn/CSS/Styling_text/Задание:_Стилизирование_школьного_сайта'
+translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary">В этой оценке мы проверим ваше понимание всех методов стилизации текста, которые мы рассмотрели в этом модуле дав вам задание стилизовать текст домашней страницы общественной школы. Вы можете просто развлечься, выполняя задание.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Предварительные требования:</th>
+   <td>Вы должны были изучить все статьи в этом модуле, прежде чем приступать к оценке.</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Проверить понимание методов CSS по стилизации текста.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Отправная_точка">Отправная точка</h2>
+
+<p>Чтобы начать эту оценку, вам необходимо:</p>
+
+<ul>
+ <li>Перейти и взять файлы <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html">HTML</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css">CSS</a> для упражнения, а также предоставленную <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png">иконку внешней ссылки</a>.</li>
+ <li>Сделайте их копии на вашем компьютере.</li>
+</ul>
+
+<p>В качестве альтернативы, вы можете пользоваться сайтами как  <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a href="https://glitch.com/">Glitch</a> чтобы выполнить оценку. Вы можете вставить HTML и заполнить CSS в одном из этих онлайн-редакторов и использовать <a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">этот URL</a> чтобы указать фоновое изображение. Если же онлайн-редактор, которым вы пользуетесь, не имеет отдельной CSS панели, тогда вводите его в элемент <code>&lt;style&gt;</code> в head документа.</p>
+
+<div class="blockIndicator note">
+<p><strong>Обратите внимание</strong>: Если вы застрянете, то попросите помощи — см. секцию {{anch("Оценка или дальнейшая помощь")}} в конце этой страницы.</p>
+</div>
+
+<h2 id="Краткое_описание_проекта">Краткое описание проекта</h2>
+
+<p>Вам предоставлен некоторый "сырой" HTML для домашней страницы воображаемого общественного колледжа, плюс немного CSS который стилизует страницу в макет с тремя колонками и обеспечивает еще каким-то другим элементарным стилем. Вы должны писать ваш дополнительный CSS после комментария в низу CSS файла, чтобы убедиться, что вы с легкостью заметите части проделанные вами. Не переживайте если некоторые селекторы повторяются; мы отпустим вас с этим случаем.</p>
+
+<p>Шрифты:</p>
+
+<ul>
+ <li>Во-первых, загрузите парочку бесплатных для использования шрифтов. Так как это колледж, шрифты должны быть выбраны так чтоб они придавали достаточной серьезности, формальности и чувства заслуживающего доверия — может подойти шрифт с засечками (serif) для всего основного текста, в сочетании с шрифтами sans-serif или serif для заголовков.</li>
+ <li>Используйте подходящий сервис для генерации пуленепробиваемого <code>@font-face</code> кода для этих двух шрифтов.</li>
+ <li>Примените ваш основной шрифт для всей страницы и шрифт заголовка для заголовков.</li>
+</ul>
+
+<p>Общая стилизация текста:</p>
+
+<ul>
+ <li>Дайте всей странице <code>font-size</code> <code>10px</code>.</li>
+ <li>Дайте вашему заголовку и другим типам элементов подходящие размеры шрифта задаваемые используя соответсвующие относительные единицы.</li>
+ <li>Дайте основному тексту подходящую <code>line-height</code>.</li>
+ <li>Отцентрируйте ваш заголовок верхнего уровня на странице.</li>
+ <li>Дайте вашим заголовкам немного <code>letter-spacing</code> чтобы они не были слишком сжатыми, позвольте буквам немного дышать.</li>
+ <li>Дайте основному тексту немного <code>letter-spacing</code> и <code>word-spacing</code>, при необходимости.</li>
+ <li>Дайте первым параграфам после каждого заголовка в <code>&lt;section&gt;</code> немного отступа, скажем 20px.</li>
+</ul>
+
+<p>Ссылки:</p>
+
+<ul>
+ <li>Дайте состояниям link, visited, focus, и hover какой-нибудь цвет, который будет сочетается с цветом горизонтальных линий на верху и в низу страницы.</li>
+ <li>Сделайте так чтобы ссылки были подчеркнутыми по умолчанию, но, чтобы подчеркивание исчезало, когда вы фокусируетесь или наводите мышь на них.</li>
+ <li>Удалите установленный по умолчанию контурный фокус со ВСЕХ ссылок на странице.</li>
+ <li>Дайте состоянию active заметно отличимый стиль так чтоб он красиво выделялся, но чтоб он все еще вписывался в общий дизайн страницы.</li>
+ <li>Сделайте так чтоб внешние ссылки имели иконку внешней ссылки, вставленную рядом с ними.</li>
+</ul>
+
+<p>Списки:</p>
+
+<ul>
+ <li>Убедитесь, что интервалы ваших списков и пунктов списка совпадают со стилизацией всей страницы. Все элементы списка должны иметь ту же <code>line-height</code> что и строки параграфов, и каждый список должен иметь те же интервалы сверху и снизу которые имеются между параграфами.</li>
+ <li>Дайте элементам списка симпатичные маркеры, соответствующие дизайну страницы. Выберете ли вы пользовательские изображения для маркеров или что-то другое — зависит от вас.</li>
+</ul>
+
+<p>Меню навигации:</p>
+
+<ul>
+ <li>Стилизуйте ваше меню навигации так чтоб оно соответствовало внешнему виду страницы.</li>
+</ul>
+
+<h2 id="Советы_и_подсказки">Советы и подсказки</h2>
+
+<ul>
+ <li>Вам не надо как-либо редактировать HTML в этом упражнении.</li>
+ <li>Вам не надо обязательно делать меню навигации в виде кнопок, но надо чтоб они были более-менее высокими, чтобы они не выглядели глупо на краю страницы; также помните, что вам надо сделать его вертикальным меню навигации.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Следующий скриншот показывает пример того, как может выглядеть законченный дизайн.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p>
+
+<h2 id="Оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</h2>
+
+<p>Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:</p>
+
+<ol>
+ <li>Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, или <a href="https://glitch.com/">Glitch</a>.</li>
+ <li>Напишите пост с просьбой оценки и/или помощи на <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Ваш пост должен включать:
+  <ul>
+   <li>Описательный заголовок такой как "Требуется оценка верстки домашней страницы общественный школы".</li>
+   <li>Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.</li>
+   <li>Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.</li>
+   <li>Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Фундаментальная стилизация текста и шрифта</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Задании: Стилизация школьного сайта</a></li>
+</ul>
diff --git a/files/ru/learn/css/styling_text/стилизация_списков/index.html b/files/ru/learn/css/styling_text/стилизация_списков/index.html
new file mode 100644
index 0000000000..b749acb5cc
--- /dev/null
+++ b/files/ru/learn/css/styling_text/стилизация_списков/index.html
@@ -0,0 +1,389 @@
+---
+title: Стилизация списков
+slug: Learn/CSS/Styling_text/Стилизация_списков
+translation_of: Learn/CSS/Styling_text/Styling_lists
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary"><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Списки</a>, по-большому счету, ведут себя также как любой другой текст, но существуют некоторые специфичные натройки CSS, о которых вы должны знать. В этой статье они все описываются.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Требования:</th>
+   <td>
+    <p>Базовая компьютерная грамотность, основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">CSS основы по тексту и шрифтам.</a></p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Познакомиться с лучшими практиками и свойствами по стилизации списков.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Пример_простого_списка">Пример простого списка</h2>
+
+<p>Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки  — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">доступен на Github</a> (проверьте также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">источник кода</a>.)</p>
+
+<p>HTML для нашего примера списка представлен ниже:</p>
+
+<pre class="brush: html">&lt;h2&gt;Shopping (unordered) list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Hummus&lt;/li&gt;
+  &lt;li&gt;Pita&lt;/li&gt;
+  &lt;li&gt;Green salad&lt;/li&gt;
+  &lt;li&gt;Halloumi&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;h2&gt;Recipe (ordered) list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;ol&gt;
+  &lt;li&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h2&gt;Ingredient description list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;dl&gt;
+  &lt;dt&gt;Hummus&lt;/dt&gt;
+  &lt;dd&gt;A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.&lt;/dd&gt;
+  &lt;dt&gt;Pita&lt;/dt&gt;
+  &lt;dd&gt;A soft, slightly leavened flatbread.&lt;/dd&gt;
+  &lt;dt&gt;Halloumi&lt;/dt&gt;
+  &lt;dd&gt;A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.&lt;/dd&gt;
+  &lt;dt&gt;Green salad&lt;/dt&gt;
+  &lt;dd&gt;That green healthy stuff that many of us just use to garnish kebabs.&lt;/dd&gt;
+&lt;/dl&gt;</pre>
+
+<p>Если вы перейдете к живому примеру прямо сейчас и изучите элемент списка используя <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">инструменты разработчика браузера</a>, то вы заметите несколько стилей установленных по умолчанию:</p>
+
+<ul>
+ <li>Элементы {{htmlelement("ul")}} и {{htmlelement("ol")}} имеют верхний и нижний {{cssxref("margin")}} по <code>16px</code> (<code>1em</code>) и {{cssxref("padding-left")}} <code>40px</code> (<code>2.5em</code>.)</li>
+ <li>Объекты списка (элементы {{htmlelement("li")}}) не имеют заданных значений по умолчанию для интервалов.</li>
+ <li>Элемент {{htmlelement("dl")}} имеет верхний и нижний {{cssxref("margin")}} по <code>16px</code> (<code>1em</code>), но padding не задан.</li>
+ <li>Элементы {{htmlelement("dd")}} имеют {{cssxref("margin-left")}} <code>40px</code> (<code>2.5em</code>.)</li>
+ <li>Элементы {{htmlelement("p")}} которые мы включили для ссылок (сноски) имеют верхний и нижний {{cssxref("margin")}} по <code>16px</code> (<code>1em</code>), точно так же, как и различные типы списков.</li>
+</ul>
+
+<h2 id="Управление_интервалами_списков">Управление интервалами списков</h2>
+
+<p>При оформлении списков, вам необходимо настроить их стили так, чтоб они сохраняли то же вертикальное расстояние, что и окружающие их элементы (такие как параграфы и изображения; иногда называемые вертикальным ритмом) и то же расстояние по горизонтали как и между собой (посмотреть <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">законченный стилизированный пример</a> на Github, а также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">найти исходный код</a>.)</p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">CSS, используемый для оформления текста и интервалов, выглядит следующим образом:</span></span></p>
+
+<pre class="brush: css">/* General styles */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Description list styles */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}</pre>
+
+<ul>
+ <li>Первое правило устанавливает шрифт сайта и основной размер шрифта 10px. Они наследуются всеми на этой странице.</li>
+ <li>Правила 2 и 3 задают относительные размеры шрифтов заголовков, различных типов списков (их наследуют дочерние элементы списков) и параграфов. Это значит, что каждый параграф и список будут иметь одинаковый размер шрифта, а также верхний и нижний интервалы, помогая сохранить согласованность вертикального ритма.</li>
+ <li>Правило 4 задает одинаковую высоту {{cssxref("line-height")}} в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.</li>
+ <li>Правила 5 и 6 применяются к списку описаний — мы задаем одинаковую высоту <code>line-height</code> между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! <span class="tlid-translation translation" lang="ru"><span title="">Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.</span></span> <span id="cke_bm_126E" style="display: none;"> </span></li>
+</ul>
+
+<h2 id="Стили_специфичные_для_списков">Стили специфичные для списков</h2>
+
+<p>Теперь, рассмотрев общие методы интервалов для списков, давайте изучим некоторые специфичные спискам свойства. Существует три свойства, с которых вам надо начать знакомство, которые могут быть установлены для элементов {{htmlelement("ul")}} или {{htmlelement("ol")}}:</p>
+
+<ul>
+ <li>{{cssxref("list-style-type")}}: задает тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка, или цифры, буквы или римские цифры для упорядоченного списка.</li>
+ <li>{{cssxref("list-style-position")}}: управляет будет ли маркер появляется внутри пунктов списка или <span class="tlid-translation translation" lang="ru"><span title="">вне их перед началом каждого элемента.</span></span></li>
+ <li>{{cssxref("list-style-image")}}: позволяет вам использовать пользовательские изображения в качестве маркеров, а не просто квадрат или круг.</li>
+</ul>
+
+<h3 id="Стили_маркеров">Стили маркеров</h3>
+
+<p>Как указано выше, свойство {{cssxref("list-style-type")}} позволяет вам устанавливать какой тип маркера использовать в качестве точек маркера. В нашем примере мы установили использование заглавных римских цифр в упорядоченном списке:</p>
+
+<pre class="brush: css">ol {
+  list-style-type: upper-roman;
+}</pre>
+
+<p>Это дает нам следующий вид:</p>
+
+<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете найти гораздо больше опций, заглянув на справочную страницу {{cssxref ("list-style-type")}}.</span></span></p>
+
+<h3 id="Позиция_маркера">Позиция маркера</h3>
+
+<p>Свойство {{cssxref("list-style-position")}} устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — <code>outside</code>, которое заставляет маркеры находится снаружи пунктов списка, как видно выше.</p>
+
+<p>Если вы установите значение на <code>inside</code>, то маркеры будут находиться внутри строк:</p>
+
+<pre class="brush: css">ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}</pre>
+
+<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p>
+
+<h3 id="Использование_пользовательского_изображения_как_маркер">Использование пользовательского изображения как маркер</h3>
+
+<p>Свойство {{cssxref("list-style-image")}} позволяет вам использовать пользовательское изображение в качестве вашего маркера. Синтаксис довольно прост:</p>
+
+<pre class="brush: css">ul {
+  list-style-image: url(star.svg);
+}</pre>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Однако это свойство немного ограничено с точки зрения управления позициями</span></span>, размерами (и т.д.) маркеров. <span class="tlid-translation translation" lang="ru"><span title="">Вам лучше использовать семейство свойств {{cssxref ("background")}}, о которых вы узнаете намного больше в модуле </span></span><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">А пока вот вам образец для дегустации!</span></span></p>
+
+<p>В нашем законченном примере мы оформили неупорядоченный список следующим образом (<span class="tlid-translation translation" lang="ru"><span title="">поверх того, что вы уже видели выше</span></span>):</p>
+
+<pre class="brush: css">ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}</pre>
+
+<p>Мы сделали следующее:</p>
+
+<ul>
+ <li>Установили {{cssxref("padding-left")}} элемента {{htmlelement("ul")}} с <code>40px</code> по умолчанию на <code>20px</code>, затем установили то же самое количество в пунктах списка. Это для того, чтобы все пункты списка продолжали выравниваться с порядком пунктов списка и описаний списка описаний, но пункты списка имеют некоторый padding для фоновых изображений чтобы сидеть внутри. Если бы мы не сделали этого, то фоновые изображения накладывались бы с текстом пунктов списка, что выглядело бы неряшливо.</li>
+ <li>Установили {{cssxref("list-style-type")}} на <code>none</code>, для того чтобы маркеры не появлялись по умолчанию. Мы собираемся использовать свойства {{cssxref("background")}} для управления маркерами.</li>
+ <li>Вставили маркер в каждый пункт неупорядоченного списка. <span class="tlid-translation translation" lang="ru"><span title="">Соответствующие свойства, следующие:</span></span>
+  <ul>
+   <li>{{cssxref("background-image")}}: <span class="tlid-translation translation" lang="ru"><span title="">Указывает путь к файлу изображения, который вы хотите использовать в качестве маркера.</span></span></li>
+   <li>{{cssxref("background-position")}}: Определяет где в фоне выбранного элемента появится изображение — в данном случае мы говорим <code>0 0</code>, что значит что маркер будет появляться в самом верху слева каждого пункта списка.</li>
+   <li>{{cssxref("background-size")}}: Задает размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер <code>1.6rem</code> (<code>16px</code>), <span class="tlid-translation translation" lang="ru"><span title="">что очень хорошо сочетается с отступом (padding) </span></span><code>20px</code><span class="tlid-translation translation" lang="ru"><span title="">, </span></span><span class="tlid-translation translation" lang="ru"><span title="">который мы позволили разместить внутри маркера </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо.</span></span></li>
+   <li>{{cssxref("background-repeat")}}: По умолчанию, фоновые изображения повторяются пока не заполнят доступное фоновое пространство. Мы хотим всего лишь одну копию вставленного изображения в каждом случае, поэтому мы установили значение <code>no-repeat</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Это дает нам следующий результат:</p>
+
+<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/16226/list_formatting.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p>
+
+<h3 id="короткая_запись_list-style">короткая запись list-style</h3>
+
+<p>Эти три свойства упомянутые выше могут все быть заданы, используя лишь одну короткую запись свойства, {{cssxref("list-style")}}. Например, следующий CSS:</p>
+
+<pre class="brush: css">ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}</pre>
+
+<p>Может быть заменен этим:</p>
+
+<pre class="brush: css">ul {
+  list-style: square url(example.png) inside;
+}</pre>
+
+<p>Значения могут быть перечислены в любом порядке, и вы можете использовать одно, два и все три (значения по умолчанию, использованные для свойств, которые не включены — <code>disc</code>, <code>none</code>, и <code>outside</code>). Если указаны и <code>type</code> и <code>image</code>, <span class="tlid-translation translation" lang="ru"><span title="">тип используется в качестве запасного варианта, если изображение по какой-либо причине не может быть загружено.</span></span></p>
+
+<h2 id="Контроль_счета_списка">Контроль счета списка</h2>
+
+<p>Иногда вам может понадобиться вести счет в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счет с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.</p>
+
+<h3 id="start">start</h3>
+
+<p>Атрибут {{htmlattrxref("start","ol")}} позволит вам начать счет списка с цифры отличной от 1. Например:</p>
+
+<pre class="brush: html">&lt;ol start="4"&gt;
+  &lt;li&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>что даст вам такой результат:</p>
+
+<p>{{ EmbedLiveSample('start', '100%', 150) }}</p>
+
+<h3 id="reversed">reversed</h3>
+
+<p>Атрибут {{htmlattrxref("reversed","ol")}} начнет отсчет по убыванию вместо возрастания. Например:</p>
+
+<pre class="brush: html">&lt;ol start="4" reversed&gt;
+  &lt;li&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>что даст вам такой результат:</p>
+
+<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Если пунктов в списке в обратном списке больше, чем значение атрибута <code>start</code>, счет продолжится до нуля и далее отрицательные значения.</p>
+</div>
+
+<h3 id="value">value</h3>
+
+<p>Атрибут {{htmlattrxref("value","ol")}} позволит вам установить специфичные цифровые значения к пунктам списка. Например:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li value="2"&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li value="4"&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li value="6"&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li value="8"&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>что даст вам такой результат:</p>
+
+<p>{{ EmbedLiveSample('value', '100%', 150) }}</p>
+
+<div class="note">
+<p><strong>Обратите внимание</strong>: Даже если вы используете нечисловой {{cssxref("list-style-type")}}, вам все равно надо использовать эквивалентное цифровое значение в атрибуте <code>value</code>.</p>
+</div>
+
+<h2 id="Активное_изучение_Стилизация_вложенного_списка">Активное изучение: <span class="tlid-translation translation" lang="ru"><span title="">Стилизация вложенного списка</span></span></h2>
+
+<p>В этой сессии активного изучения, мы хотим, чтобы вы взяли все что вы выучили выше и попробовали стилизовать вложенный список. Мы предоставили вам HTML и хотим, чтобы вы:</p>
+
+<ol>
+ <li>Задали неупорядоченному списку квадратные маркеры.</li>
+ <li>Задали пунктам неупорядоченного и упорядоченного списка 1,5 межстрочный интервал их размера шрифта.</li>
+ <li>Задали упорядоченному списку маркеры в виде строчных букв.</li>
+ <li>Не стесняйтесь играться с примерами списков столько сколько вам нравится, экспериментируя с типами маркеров, интервалами или со всем что вы найдете.</li>
+</ol>
+
+<p>Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку <em>Reset</em>. Если вы застрянете, нажмите кнопку <em>Show solution </em>чтобы посмотреть возможный ответ.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;HTML Input&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;ul&gt;
+  &lt;li&gt;First, light the candle.&lt;/li&gt;
+  &lt;li&gt;Next, open the box.&lt;/li&gt;
+  &lt;li&gt;Finally, place the three magic items in the box, in this exact order, to complete the spell:
+    &lt;ol&gt;
+      &lt;li&gt;The book of spells&lt;/li&gt;
+      &lt;li&gt;The shiny rod&lt;/li&gt;
+      &lt;li&gt;The goblin statue&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;CSS Input&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;Output&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
+    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var htmlInput = document.querySelector(".html-input");
+var cssInput = document.querySelector(".css-input");
+var reset = document.getElementById("reset");
+var htmlCode = htmlInput.value;
+var cssCode = cssInput.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+var styleElem = document.createElement('style');
+var headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = 'ul {\n  list-style-type: square;\n}\n\nul li, ol li {\n  line-height: 1.5;\n}\n\nol {\n  list-style-type: lower-alpha\n}';
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">Счетчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные.</span></span> <span class="tlid-translation translation" lang="ru"><span title="">Мы рекомендуем изучить это, если вы захотите размяться. Смотрите</span></span>:</p>
+
+<ul>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+</ul>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p><span class="tlid-translation translation" lang="ru"><span title="">В плане стилизации списки сравнительно легко освоить, как только вы освоите несколько связанных базовых принципов и специфичные свойства. В следующей статье мы перейдем к методам стилизации ссылок.</span></span></p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Основы стилизации текста и шрифта</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Верстка домашней страницы общественной школы</a></li>
+</ul>
diff --git a/files/ru/learn/css/как/index.html b/files/ru/learn/css/как/index.html
new file mode 100644
index 0000000000..105c7f0a97
--- /dev/null
+++ b/files/ru/learn/css/как/index.html
@@ -0,0 +1,86 @@
+---
+title: Использование CSS для решения общих проблем
+slug: Learn/CSS/Как
+translation_of: Learn/CSS/Howto
+---
+<p class="summary">Следующие ссылки указывают на решения общих повседневных проблем, вам придется решать их с помощью CSS.</p>
+
+<h2 id="Примеры_и_использование">Примеры и использование</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Основы">Основы</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Как применить CSS к HTML</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">Как использовать пробелы в CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">Как писать комментарии в CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">Как выбрать элементы через имя элемента, класс или ID</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">Как выбрать элементы через имя атрибута и содержания</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">Как использовать псевдо-классы</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">Как использовать псевдо-элементы</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">Как применить несколько селекторов к тому же правилу</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">Как определить цвета в CSS</a></li>
+ <li>
+  <p><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">Как отлаживать CSS в браузере</a></p>
+ </li>
+</ul>
+
+<h3 id="CSS_и_текст">CSS и текст</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Как стилизовать текст</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">How to customize a list of elements</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">Как стилизовать ссылки</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">How to add shadows to text</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Блоки_и_разметка">Блоки и разметка</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">How to control overflowing content</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to control the part of a CSS box that the background is drawn under</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Необычное_или_передовые_технологии"><span class="short_text" id="result_box" lang="ru"><span>Необычное</span> <span>или</span> <span>передовые технологии</span></span></h2>
+
+<p>Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.</p>
+
+<h3 id="Общие">Общие</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li>
+</ul>
+
+<h3 id="Дополнительные_эффекты"><span class="short_text" id="result_box" lang="ru"><span>Дополнительные</span> <span>эффекты</span></span></h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li>
+</ul>
+
+<h3 id="Разметка">Разметка</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li>
+</ul>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/Howto/CSS_FAQ">CSS FAQ</a> — A collection of smaller bits of information, covering a variety of topics from debugging to selector usage.</p>