initial commit

20 files changed, 4533 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>