initial commit

18 files changed, 3223 insertions, 0 deletions

diff --git a/files/ru/web/guide/css/block_formatting_context/index.html b/files/ru/web/guide/css/block_formatting_context/index.html
new file mode 100644
index 0000000000..599d22764b
--- /dev/null
+++ b/files/ru/web/guide/css/block_formatting_context/index.html
@@ -0,0 +1,142 @@
+---
+title: Блочный контекст форматирования
+slug: Web/Guide/CSS/Block_formatting_context
+tags:
+  - CSS
+  - CSS Basic Concepts
+  - Для начинающих
+  - Основы
+translation_of: Web/Guide/CSS/Block_formatting_context
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="Summary" name="Summary">Описание</h2>
+
+<p><strong>Блочный контекст форматирования </strong>— часть механизма отображения веб-страницы в CSS. Это та область, в которой происходит расположение блочных элементов, и в котором плавающие элементы взаимодействуют с другими элементами.</p>
+
+<p>Блочный контекст форматирования создаёт один из следующих способов (методов):</p>
+
+<ul>
+ <li>корневой элемент документа (<code>&lt;html&gt;</code>).</li>
+ <li>плавающие элементы (элементы, у которых {{ cssxref("float") }} не равно <code>none</code>)</li>
+ <li>абсолютно позиционированные элементы (элементы, значение  {{ cssxref("position") }} которых либо <code>absolute</code>, либо <code>fixed</code>)</li>
+ <li>«строчные блоки» (элементы с {{cssxref("display")}}<code>: inline-block</code>)</li>
+ <li>ячейки таблицы (элементы с {{ cssxref("display")}}<code>: table-cell</code>, являющимся значением по умолчанию для ячеек таблицы в HTML)</li>
+ <li>заголовки таблицы (элементы с {{ cssxref("display")}}<code>: table-caption</code>, являющимся значением по умолчанию для заголовков таблицы в HTML)</li>
+ <li>анонимные ячейки таблицы, неявно создаваемые элементами с {{ cssxref("display") }}<code>: table</code>, <code>table-row</code>, <code>table-row-group</code>, <code>table-header-group</code>, <code>table-footer-group</code> (значения по умолчанию для таблиц, строк таблиц, «шапок», «подвалов» и тел таблиц в HTML соответственно) либо <code>inline-table</code></li>
+ <li>элементы, у которых значение свойства {{ cssxref("overflow") }} отличается от <code>visible</code></li>
+ <li>{{ cssxref("display") }}<code>: <a href="https://drafts.csswg.org/css-display/#valdef-display-flow-root">flow-root</a></code></li>
+ <li>элементы с {{ cssxref("contain") }}<code>: layout</code>, <code>content</code> или <code>strict</code></li>
+ <li>флекс-элементы (непосредственные потомки элемента с {{ cssxref("display") }}<code>: flex</code> или <code>inline-flex</code>)</li>
+ <li>грид-элементы (непосредственные потомки элемента с {{ cssxref("display") }}<code>: grid</code> или <code>inline-grid</code>)</li>
+ <li>многоколоночные контейнеры (элементы, у которых {{ cssxref("column-count") }} или {{ cssxref("column-width") }}  не равно <code>auto</code>, включая элементы с <code>column-count: 1</code>)</li>
+ <li>{{ cssxref("column-span") }}<code>: all</code> должно всегда создавать новый блочный контекст форматирования, даже если элемент с <code>column-span: all</code> не находится в многоголоночном контейнере (<a href="https://github.com/w3c/csswg-drafts/commit/a8634b96900279916bd6c505fda88dda71d8ec51">изменение в спецификации</a>, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=709362">баг Chrome</a>).</li>
+</ul>
+
+<p>Блочный контекст форматирования применяется ко всему содержимому того элемента, который его создал.</p>
+
+<p>Блочные контексты форматирования важны для размещения плавающих элементов (см. {{ cssxref("float") }}) и отмены их обтекания (см.{{ cssxref("clear") }}) . Правила размещения плавающих элементов и сброса обтекания применяются только к элементам внутри одного и того же блочного контекста форматирования. Плавающие элементы не влияют на размещение содержимого внутри других блочных контекстов форматирования, и отмена обтекания распространяется только на плавающие элементы из того же самого контекста форматирования. <a href="/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Схлопывание внешних отступов</a> тоже происходит только между блоками из одного и того же блочного контекста форматирования.</p>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Как_сделать_плавающему_контенту_и_соседнему_с_ним_контенту_одинаковую_высоту">Как сделать плавающему контенту и соседнему с ним контенту одинаковую высоту</h3>
+
+<p>Давайте рассмотрим пару примеров, чтобы рассмотреть эффект от создания нового блочного контекста форматирования.</p>
+
+<p>В примере ниже мы имеем плавающий элемент внутри <code>&lt;</code><code>div&gt;</code> с заданным <code>border</code>. Содержимое этого <code>&lt;div&gt;</code> обтекает плавающий элемент. Так как содержимое <code>float</code> выше, чем остальное содержимое, обтекающее его, <code>border</code> элемента <code>div</code> теперь проходит сквозь <code>float</code>. Как объясняется в руководстве <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a>, плавающий элемент был исключен из потока элементов, так что фон и граница <code>div</code> включает только его содержимое, но не элемент <code>float</code>. </p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+
+<h3 id="Использование_overflow_auto">Использование <code>overflow: auto;</code></h3>
+
+<p>Создадим новый блочный контекст форматирования, который будет содержать в себе плавающий элемент. Раньше обычным способом сделать это было установить <code>overflow: auto</code> или другое значение, отличное от значения по умолчанию <code>overflow: visible</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p>
+
+<p>Задание <code>overflow: auto</code> создало новый блочный контекст форматирования, включающий <code>float</code>. Теперь <code>div</code> стал мини-слоем внутри нашего слоя. Любые дочерние элементы войдут в него.</p>
+
+<p>Проблема использования <code>overflow</code> для создания нового блочного контекста форматирования в том, что свойство <code>overflow</code> предназначено для сообщения браузеру как обращаться с переполнением содержимого. Существуют случаи, в которых оно вызовет появление нежелательных скролл-баров или обрезание теней, когда вы используете это свойство только для того, чтобы создать блочный контекст форматирования. Кроме того, оно потенциально делает код менее понятным для следующего разработчика, так как не всегда очевидно, почему использовано <code>overflow</code> в данном случае. Если вы используете этот подход, хорошей идеей будет прокомментировать код, чтобы объяснить это.</p>
+
+<h3 id="Использование_display_flow-root">Использование <code>display: flow-root</code></h3>
+
+<div id="flowroot">
+<p>Одно из новых значений свойства <code>display</code>  позволяет нам создавать новый блочный контекст форматирования без всяких потенциально проблемных побочных эффектов. Использование <code>display: flow-root</code> как свойство содержащего блока, создаёт новый блочный контекст форматирования.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>float<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>I am a floated box!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>I am content inside the container.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+</div>
+</div>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.box</span></span> <span class="punctuation token">{</span>
+    <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="function token">rgb</span><span class="punctuation token">(</span><span class="number token">224</span><span class="punctuation token">,</span> <span class="number token">206</span><span class="punctuation token">,</span> <span class="number token">247</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">5</span><span class="token unit">px</span> solid rebeccapurple<span class="punctuation token">;</span>
+    <span class="property token">display</span><span class="punctuation token">:</span> flow-root
+<span class="punctuation token">}</span>
+<span class="selector token"><span class="class token">.float</span></span> <span class="punctuation token">{</span>
+    <span class="property token">float</span><span class="punctuation token">:</span> left<span class="punctuation token">;</span>
+    <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">200</span><span class="token unit">px</span><span class="punctuation token">;</span>
+    <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">150</span><span class="token unit">px</span><span class="punctuation token">;</span>
+    <span class="property token">background-color</span><span class="punctuation token">:</span> white<span class="punctuation token">;</span>
+    <span class="property token">border</span><span class="punctuation token">:</span><span class="number token">1</span><span class="token unit">px</span> solid black<span class="punctuation token">;</span>
+    <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div id="flowroot">
+<p>{{EmbedLiveSample("flowroot", 200, 200)}}</p>
+</div>
+
+<p>С помощью <code>display: flow-root;</code> применённом на элементе <code>&lt;div&gt;</code>, всё внутри этого контейнера будет учавствовать в едином блочном контексте форматирования этого контейнера, и плавающие элементы не будут торчать из нижней части контейнера.</p>
+
+<p>Задание значения <code>flow-root</code> имеет смысл тогда, когда Вы понимаете, что Вы создаёте что-то, что будет действовать так же, как действует корневой <code>root</code> элемент (<code>&lt;html&gt;</code> в браузерах) в том плане, что он создаёт новый контекст для компоновки потока внутри него.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание:</strong>  <code>display: flow-root;</code> <a href="https://caniuse.com/#search=flow-root">не поддерживается</a> в Safari.</p>
+</div>
+
+<h3 id="Схлопывание_границ_margin">Схлопывание границ margin</h3>
+
+<p>Создание нового блочного контекста форматирования предотвращает эффект <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">схлопывания границ</a> между двумя соседними div:</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blue<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red-outer<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red-inner<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>red inner<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.blue</span>, <span class="class token">.red-inner</span></span> <span class="punctuation token">{</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">50</span><span class="token unit">px</span><span class="punctuation token">;</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span><span class="token unit">px</span> <span class="number token">0</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.blue</span></span> <span class="punctuation token">{</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> blue<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.red-outer</span></span> <span class="punctuation token">{</span>
+  <span class="property token">overflow</span><span class="punctuation token">:</span> hidden<span class="punctuation token">;</span>
+  <span class="property token">background</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>{{EmbedLiveSample("Margin_collapsing", 120, 120)}}</p>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#q15">CSS 2.1</a></li>
+ <li><a class="external" href="https://drafts.csswg.org/css-display/#block-formatting-context">CSS Display Level 3</a></li>
+</ul>
+
+<h2 id="See_Also" name="See_Also">Статьи по теме</h2>
+
+<ul>
+ <li>{{ cssxref("float") }}, {{ cssxref("clear") }}</li>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/ru/web/guide/css/getting_started/cascading_and_inheritance/index.html b/files/ru/web/guide/css/getting_started/cascading_and_inheritance/index.html
new file mode 100644
index 0000000000..248c935d52
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/cascading_and_inheritance/index.html
@@ -0,0 +1,151 @@
+---
+title: Каскадность и наследование
+slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance
+tags:
+  - Beginner
+  - CSS
+  - 'CSS:Getting_Started'
+  - Guide
+  - Web
+  - Веб
+  - Новичку
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Как работает CSS")}} Это четвертый раздел руководства <a href="/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a>. Он описывает, как таблицы стилей взаимодействуют в каскаде, и как дочерние элементы наследуют стиль от родительских. Используя наследование, в приведённой ниже задаче вы измените стиль некоторых элементов за один шаг.</p>
+
+<h2 id="Информация_Каскадность_и_наследование">Информация: Каскадность и наследование</h2>
+
+<p>Окончательный стиль элемента можно указать во многих местах, которые комплексно взаимодействуют между собой. Эти комплексные взаимодействия делают CSS мощным, но в то же время, иногда сбивают с толку и порождают сложности при отладке. </p>
+
+<p>Три основных источника информации о стилях образовывают <em>каскад</em>. К ним относятся следующие:</p>
+
+<ul>
+ <li>Стили разметки браузера по умолчанию.</li>
+ <li>Стили, указанные пользователем при чтении документа.</li>
+ <li>Стили, связанные с документом их автором. Их можно указывать в трех местах:</li>
+</ul>
+
+<ol>
+ <li>Во внешнем файле: в этом учебном руководстве обсуждается преимущественно этот метод указания стилей.</li>
+ <li>В начале документа (раздел заголовок документа): используйте этот метод только для стилей в пределах этой страницы.</li>
+ <li>Для конкретного элемента в теле документа: это наименее поддерживаемый метод, но может быть использован для тестирования.</li>
+</ol>
+
+<p>Стиль пользователя модифицирует стиль браузера по умолчанию. Стиль документа, указанный его автором, изменяет стиль ещё в некоторой мере. В этом обучающем руководстве, вы являетесь автором шаблонного документа, и только вы работаете с авторскими таблицами стилей.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Когда вы читаете этот документ в браузере, часть стилей происходит от стилей для HTML по умолчанию вашего браузера.</p>
+
+<p>Часть стиля может происходить от измененных настроек браузера или измененного файла определения стиля. В Firefox настройки можно изменить в диалоге Предпочтения или же указать стили в файле <code>userContent.css</code> в профиле браузера.</p>
+
+<p>Часть стиля приходит из таблиц стилей, связываемых с документом вики-сервером.</p>
+</div>
+
+<p>Когда вы открываете шаблон документа в браузере, элементы {{ HTMLElement("strong") }} имеют более жирный шрифт по сравнению с остальным текстом. Это следует из настроек HTML стилей браузера по умолчанию.</p>
+
+<p>Элемент {{ HTMLElement("strong") }} красного цвета. Это следует из настроек вашего шаблона таблиц стилей.</p>
+
+<p>Элементы {{ HTMLElement("strong") }} также наследуют большую часть стилей элемента {{ HTMLElement("p") }} поскольку они являются дочерними. Таким же образом элемент {{ HTMLElement("p") }} наследует большую часть стиля элемента {{ HTMLElement("body") }}.</p>
+
+<p>Для стилей в каскаде, авторские таблицы стилей имеют приоритет перед стилями для режимов чтения браузера. Последние, в свою очередь, имеют приоритет перед настройками браузера по умолчанию.</p>
+
+<p>Для наследуемых стилей, собственный стиль дочернего узла имеет приоритет над стилем, унаследованным от родительского узла.</p>
+
+<p>These are not the only priorities that apply. A later page in this tutorial will explain more.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробнее</div>
+
+<p>CSS также предоставляет способ переопределения стиля в авторском документе для читателя с помощью ключевого слова <code>!important</code>.</p>
+
+<p>Это означает, что как автор документа, вы не всегда можете точно предсказать, что ваши читатели будут видеть в своём браузере.</p>
+
+<p>Если вы хотите знать все детали каскадирования и наследования, ознакомьтесь с документом <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> в спецификации CSS.</p>
+</div>
+
+<h2 id="К_действию_Использование_наследования">К действию: Использование наследования</h2>
+
+<ol>
+ <li>Откройте CSS-файл примера.</li>
+ <li>Добавьте в файл строку кода, представленную ниже. Не имеет особого значения, в какой части CSS-документа вы расположите эту строку. Тем не менее, добавить его в самом верху будет логично, поскольку в документе элемент {{ HTMLElement("p") }} является родительским по отношению к элементу {{ HTMLElement("strong") }} :
+  <pre>p {color: blue; text-decoration: underline;}
+</pre>
+ </li>
+ <li>Теперь сохраните документ и обновите страницу в браузере, чтобы увидеть изменения. Весь текст в абзаце будет подчеркнут, в том числе и начальные буквы. Элемент {{ HTMLElement("strong") }} унаследовал подчеркнутый стиль от родительского элемента {{ HTMLElement("p") }} .<br>
+
+  <p>Обратите внимание, что элементы {{ HTMLElement("strong") }} всё ещё красные. Красный цвет является их собственным стилем, поэтому имеет приоритет перед синим цветом, заданным для родительского элемента {{ HTMLElement("p") }} . </p>
+ </li>
+</ol>
+
+<h2 id="Before" name="Before">До</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+&lt;strong&gt;C&lt;/strong&gt;ascading
+&lt;strong&gt;S&lt;/strong&gt;tyle
+&lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">strong {color:red}
+</pre>
+
+<p>{{ EmbedLiveSample('Before') }}</p>
+
+<h2 id="After" name="After">После</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+&lt;strong&gt;C&lt;/strong&gt;ascading
+&lt;strong&gt;S&lt;/strong&gt;tyle
+&lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush:css" dir="rtl">p {color:blue; text-decoration:underline}
+strong {color:red}</pre>
+
+<p>{{ EmbedLiveSample('After') }}</p>
+
+<p> </p>
+
+<div class="tuto_example">
+<div class="tuto_type">Задание</div>
+Измените таблицу стилей таким образом, чтобы были подчеркнуты только красные буквы:
+
+<table style="border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Возможное решение</div>
+
+<p>Переместите объявление подчеркивания из правила для {{ HTMLElement("p") }} в правило для {{ HTMLElement("strong") }}. В результате файл будет выглядеть следующим образом:</p>
+
+<pre class="brush: css">p {color: blue; }
+strong {color: red; text-decoration: underline;}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть вариант решения.</a></div>
+
+<p> </p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{ nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Selectors", "Селекторы")}}Ваш пример таблицы стилей определяет стили для тегов &lt;p&gt; и &lt;STRONG&gt;, изменяя стиль соответствующих элементов по всему документу. В следующем разделе описывается, как задать стиль более <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors" title="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors">избирательными методами</a>.</p>
diff --git a/files/ru/web/guide/css/getting_started/color/index.html b/files/ru/web/guide/css/getting_started/color/index.html
new file mode 100644
index 0000000000..1da796858f
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/color/index.html
@@ -0,0 +1,344 @@
+---
+title: Color
+slug: Web/Guide/CSS/Getting_started/Color
+translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles")}}<span class="seoSummary">This is the 8th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> tutorial; it explains how you can specify color in CSS. In your sample stylesheet, you introduce background colors.</span></p>
+
+<h2 class="clearLeft" id="Information_Color">Information: Color</h2>
+
+<p>In this tutorial so far, you have used a limited number of named colors. CSS2 supports 17 named colors in all. Some of the names might not be what you expect:</p>
+
+<table style="border: 0px; margin-left: 2em; text-align: right;">
+ <tbody>
+  <tr>
+   <td> </td>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: black;"> </td>
+   <td>gray</td>
+   <td style="width: 2em; height: 2em; background-color: gray;"> </td>
+   <td>silver</td>
+   <td style="width: 2em; height: 2em; background-color: silver;"> </td>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td>
+  </tr>
+  <tr>
+   <td>primaries</td>
+   <td>red</td>
+   <td style="width: 2em; height: 2em; background-color: red;"> </td>
+   <td>lime</td>
+   <td style="width: 2em; height: 2em; background-color: lime;"> </td>
+   <td>blue</td>
+   <td style="width: 2em; height: 2em; background-color: blue;"> </td>
+  </tr>
+  <tr>
+   <td>secondaries</td>
+   <td>yellow</td>
+   <td style="width: 2em; height: 2em; background-color: yellow;"> </td>
+   <td>aqua</td>
+   <td style="width: 2em; height: 2em; background-color: aqua;"> </td>
+   <td>fuchsia</td>
+   <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>maroon</td>
+   <td style="width: 2em; height: 2em; background-color: maroon;"> </td>
+   <td>orange</td>
+   <td style="width: 2em; height: 2em; background-color: orange;"> </td>
+   <td>olive</td>
+   <td style="width: 2em; height: 2em; background-color: olive;"> </td>
+   <td>purple</td>
+   <td style="width: 2em; height: 2em; background-color: purple;"> </td>
+   <td>green</td>
+   <td style="width: 2em; height: 2em; background-color: green;"> </td>
+   <td>navy</td>
+   <td style="width: 2em; height: 2em; background-color: navy;"> </td>
+   <td>teal</td>
+   <td style="width: 2em; height: 2em; background-color: teal;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<div class="tuto_details">
+<div class="tuto_type">Details</div>
+
+<p>Your browser might support many more named colors, like:</p>
+
+<table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;">
+ <tbody>
+  <tr>
+   <td>dodgerblue</td>
+   <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td>
+   <td>peachpuff</td>
+   <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td>
+   <td>tan</td>
+   <td style="width: 2em; height: 2em; background-color: tan;"> </td>
+   <td>firebrick</td>
+   <td style="width: 2em; height: 2em; background-color: firebrick;"> </td>
+   <td>aquamarine</td>
+   <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>For details of this extended list, see: <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> in the CSS 3 Color Module. Beware of using color names that your reader's browsers might not support.</p>
+</div>
+
+<p>For a larger palette, specify the red, green and blue components of the color you want by using a number sign (hash) and three <em>hexadecimal</em> digits in the range 0 – 9, a – f. The letters a – f represent the values 10 – 15:</p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000</code></td>
+  </tr>
+  <tr>
+   <td>pure red</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#f00</code></td>
+  </tr>
+  <tr>
+   <td>pure green</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#0f0</code></td>
+  </tr>
+  <tr>
+   <td>pure blue</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#00f</code></td>
+  </tr>
+  <tr>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#fff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><br>
+ For the full palette, specify two hexadecimal digits for each component:</p>
+
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000000</code></td>
+  </tr>
+  <tr>
+   <td>pure red</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#ff0000</code></td>
+  </tr>
+  <tr>
+   <td>pure green</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#00ff00</code></td>
+  </tr>
+  <tr>
+   <td>pure blue</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#0000ff</code></td>
+  </tr>
+  <tr>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#ffffff</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>You can usually get these six-digit hexadecimal codes from your graphics program or some other tool.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Example</div>
+
+<p>With a little practice, you can adjust the three-digit colors manually for most purposes:</p>
+
+<table style="background-color: #fffff4; border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>Start with pure red:</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#f00</code></td>
+  </tr>
+  <tr>
+   <td>To make it paler, add some green and blue:</td>
+   <td style="width: 2em; height: 2em; background-color: #f77;"> </td>
+   <td><code>#f77</code></td>
+  </tr>
+  <tr>
+   <td>To make it more orange, add a little extra green:</td>
+   <td style="width: 2em; height: 2em; background-color: #fa7;"> </td>
+   <td><code>#fa7</code></td>
+  </tr>
+  <tr>
+   <td>To darken it, reduce all its components:</td>
+   <td style="width: 2em; height: 2em; background-color: #c74;"> </td>
+   <td><code>#c74</code></td>
+  </tr>
+  <tr>
+   <td>To reduce its saturation, make its components more equal:</td>
+   <td style="width: 2em; height: 2em; background-color: #c98;"> </td>
+   <td><code>#c98</code></td>
+  </tr>
+  <tr>
+   <td>If you make them exactly equal, you get gray:</td>
+   <td style="width: 2em; height: 2em; background-color: #ccc;"> </td>
+   <td><code>#ccc</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>For a pastel shade like pale blue:</p>
+
+<table style="background-color: #fffff4; border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>Start with pure white:</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#fff</code></td>
+  </tr>
+  <tr>
+   <td>Reduce the other components a little:</td>
+   <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td>
+   <td><code>#eef</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">More details</div>
+
+<p>You can also specify a color using decimal RGB values in the range 0 – 255, or percentages.</p>
+
+<p>For example, this is maroon (dark red):</p>
+
+<pre class="brush:css">rgb(128, 0, 0)
+</pre>
+
+<p>For full details of how to specify colors, see: <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> in the CSS Specification.</p>
+
+<p>For information on matching system colors like Menu and ThreeDFace, see: <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> in the CSS Specification.</p>
+</div>
+
+<h3 id="Color_properties">Color properties</h3>
+
+<p>You have already used the {{ cssxref("color") }} property on text.</p>
+
+<p>You can also use the {{ cssxref("background-color") }} property to change elements' backgrounds.</p>
+
+<p>Backgrounds can be set to <code>transparent</code> to explicitly remove any color, revealing the parent element's background.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Example</div>
+
+<p>The <strong>Example</strong> boxes in this tutorial use this pale yellow background:</p>
+
+<pre class="brush:css">background-color: #fffff4;
+</pre>
+
+<p>The <strong>More details</strong> boxes use this pale gray:</p>
+
+<pre class="brush:css">background-color: #f4f4f4;
+</pre>
+</div>
+
+<p> </p>
+
+<h2 id="Action_Using_color_codes">Action: Using color codes</h2>
+
+<h2 id="Color_page" name="Color_page">Color page</h2>
+
+<ol>
+ <li>Edit your CSS file.</li>
+ <li>Make the change shown down here, to give the initial letters a pale blue background. (The layout and comments in your file probably differ from the file shown here. Keep the layout and comments the way you prefer them.)</li>
+ <li>
+  <h3 id="HTML_Content">HTML Content</h3>
+
+  <pre class="brush: html">&lt;p id = "first"&gt; &lt;strong&gt;C&lt;/strong&gt;ascading &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets&lt;/p&gt;
+&lt;p&gt; &lt;strong&gt;C&lt;/strong&gt;ascading &lt;strong&gt;S&lt;/strong&gt;tyle &lt;strong&gt;S&lt;/strong&gt;heets&lt;/p&gt;
+</pre>
+
+  <h3 id="CSS_Content">CSS Content</h3>
+
+  <pre class="brush: css">/*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {
+  font: 16px "Comic Sans MS", cursive;
+}
+
+/* paragraphs */
+p {
+  color: blue;
+}
+#first {
+  font-style: italic;
+}
+
+/* initial letters */
+strong {
+  background-color: #ddf;
+  color: red;
+  font: 200% serif;
+}
+
+.spinach {
+  color: green;
+  background-color: #ddf;
+}
+
+</pre>
+ </li>
+ <li>Save the file and refresh your browser to see the result.</li>
+ <li>The result should be like this:</li>
+</ol>
+
+<p>{{ EmbedLiveSample('Color_page', '', '', '', 'Web/Guide/CSS/Getting_started/Color') }}</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Challenge</div>
+
+<p>In your CSS file, change all the color names to 3-digit color codes without affecting the result.</p>
+
+<p>(This cannot be done exactly, but you can get close. To do it exactly you need 6-digit codes, and you need to look up the CSS Specification or use a graphics tool to match the colors.)</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>The following values are reasonable approximations of the named colors:</p>
+
+<pre class="brush: css">strong {
+  color: #f00; /* red */
+  background-color: #ddf; /* pale blue */
+  font: 200% serif;
+}
+
+.carrot {
+  color: #fa0; /* orange */
+}
+
+.spinach {
+  color: #080; /* dark green */
+}
+
+p {
+  color: #00f; /* blue */
+}
+</pre>
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
+
+<h2 id="What_next">What next?</h2>
+
+<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}Your sample document and your sample stylesheet strictly separate content from style. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">next section</a> explains how you can make exceptions to this strict separation.</p>
diff --git a/files/ru/web/guide/css/getting_started/how_css_works/index.html b/files/ru/web/guide/css/getting_started/how_css_works/index.html
new file mode 100644
index 0000000000..067a4a8fe0
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/how_css_works/index.html
@@ -0,0 +1,121 @@
+---
+title: Как работает CSS
+slug: Web/Guide/CSS/Getting_started/How_CSS_works
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Зачем нужен CSS?") }} Это третья статья руководства по <span class="seoSummary"><a href="/ru/docs/Web/Guide/CSS/Getting_started" title="ru/docs/Web/Guide/CSS/Getting_started">CSS для начинающих</a>, объясняет, как работает CSS в вашем браузере, а также назначение Объектной Модели Документа (</span>Document Object Model или DOM). Вы также узнаете, как сделать анализ документа.</p>
+
+<h2 class="clearLeft" id="Информация_Как_работает_CSS">Информация: Как работает CSS</h2>
+
+<p>Когда браузер отображает документ, он должен совместить содержимое документа с информацией о стилях для него. Браузер обрабатывает документ в два этапа:</p>
+
+<ol>
+ <li>Браузер преобразует язык разметки и CSS в DOM (Document Object Model). DOM представляет собой документ в памяти компьютера. Он сочетает в себе содержание документа с его стилем.</li>
+ <li>Браузер отображает содержимое DOM.</li>
+</ol>
+
+<p>Язык разметки использует <em>элементы</em> для определения структуры документа. Элемент обозначается с использованием тегов, которые представляют собой строки, начинающиеся с символа '&lt;' и заканчивающиеся '&gt;'. Большинство элементов имеет парные теги: открывающий тег и закрывающий тег. Для открывающего тега, поместите имя элемента между '&lt;' и '&gt;'. Для закрывающего тега, поместите '<code>/</code>'  между '<code>&lt;</code>', и именем элемента.</p>
+
+<p>В зависимости от языка разметки, некоторые элементы имеют только начальный тег, или тег, где '/' располагается после имени элемента. Элемент так же может быть контейнером, включающим в себя другие элементы. В этом случае они располагаются между открывающим и закрывающим тегами. Не забывайте всегда закрывать теги внутри контейнера.</p>
+
+<p>DOM имеет древовидную структуру. Каждый элемент, атрибут и запуск текста на языке разметки становится <em>узлом</em> в древовидной структуре. Узлы определяются их взаимодействием с другими узлами DOM. Некоторые элементы становятся родительскими по отношению к другим, дочерним узлам (или узлам-потомкам). В свою очередь, дочерние узлы имеют "братьев" (siblings).</p>
+
+<p>Понимание DOM поможет вам при разработке, отладке и поддержке CSS, поскольку DOM это место, где встречаются CSS и содержимое документа.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<div class="tuto_type"> </div>
+В данном примере, тег <code>&lt;p&gt;</code> и его закрывающий тег <code>&lt;/p&gt;</code> создают контейнер:
+
+<pre class="brush:html">&lt;p&gt;
+  &lt;strong&gt;C&lt;/strong&gt;ascading
+  &lt;strong&gt;S&lt;/strong&gt;tyle
+  &lt;strong&gt;S&lt;/strong&gt;heets
+&lt;/p&gt;
+</pre>
+
+<p><strong>Живой пример</strong></p>
+
+<p>{{ EmbedLiveSample('Информация_Как_работает_CSS', '', '', '', 'Web/Guide/CSS/Getting_started/How_CSS_works') }}</p>
+
+<p>В DOM соответствующий узел P является родительским. Его дочерние узлы - это теги <small>STRONG</small>  и узлы текста. Теги <small>STRONG, </small> в свою очередь, являются родительскими по отношению к текстовым узлам, которые являются их дочерними узлами:</p>
+
+<pre><span style="color: black;">P</span>
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">C</span>"
+├─"<span style="color: black;">ascading</span>"
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">S</span>"
+├─"<span style="color: black;">tyle</span>"
+├─<span style="color: black;">STRONG</span>
+│ └─"<span style="color: black;">S</span>"
+└─"<span style="color: black;">heets</span>"</pre>
+</div>
+
+<h2 id="К_действию_Анализ_DOM">К действию: Анализ DOM</h2>
+
+<h3 id="Использование_DOM_Inspector">Использование DOM Inspector</h3>
+
+<p>Для анализа DOM, вам потребуется специальная программа. Вы можете использовать расширение <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) от Mozilla для анализа DOM. Вам просто нужно установить это расширение в браузере (подробнее см. ниже).</p>
+
+<ol>
+ <li>Используйте браузер Mozilla, чтобы открыть свой HTML-документ.</li>
+ <li>Из строки меню браузера выберите <strong>Инструменты &gt; DOM инспектор</strong>, или <strong>Инструменты &gt; Веб-разработка &gt; Инспектор</strong>.
+  <div class="tuto_details">
+  <div class="tuto_type">Подробнее</div>
+
+  <p>Если в вашем браузере Mozilla не установлен DOMi, вы можете <a class="link-https" href="https://addons.mozilla.org/ru/firefox/addon/6622/" title="https://addons.mozilla.org/ru/firefox/addon/6622/">установить его с сайта дополнений</a> и перезапустить браузер. Затем возвращайтесь к этому руководству.</p>
+
+  <p>Если вы не хотите устанавливать DOMi (или вы используете браузер не от Mozilla), то можете воспользоваться Рентген-очками, как описано в секции ниже. Или вы можете пропустить эту секцию и перейти к прямо к следующей странице. Если вы пропустите данный раздел, это не помешает вам в дальнейшем освоении руководства.</p>
+  </div>
+ </li>
+ <li>В DOMi разверните узлы вашего документа, нажав на их стрелки.
+  <p><strong>Замечание: </strong> Пустые места в вашем HTML файле DOMi может отображать как пустые текстовые узлы, которые можно игнорировать.</p>
+
+  <p>Часть результата может выглядеть следующим образом, в зависимости от того, какие узлы вы развернули:</p>
+
+  <pre>│ ▼╴<span style="color: black;">P</span>
+│ │ │ ▼╴<span style="color: black;">STRONG</span>
+│ │ └<span style="color: darkblue;">#text</span>
+│ ├╴<span style="color: darkblue;">#text</span>
+│ ►╴<span style="color: black;">STRONG</span>
+│ │</pre>
+
+  <p>При выборе любого узла, вы можете использовать правую панель DOMi's для поиска информации об узле. Например, когда вы выбираете текстовый узел, DOMi показывает вам текст в соответствующей панели.</p>
+
+  <p>При выборе узла элемента, DOMi анализирует его и предоставляет огромное количество информации, которая содержится в правой панели. Информация о стилях - лишь часть информации, которую там можно просмотреть.</p>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Задача</div>
+
+<p>В DOMi, кликните на узле <small>STRONG</small>.</p>
+
+<p>Используйте правую панель ДОМи, чтобы выяснить, где цвет для этого узла установлен на красный, и где его внешний вид сделан толще, чем обычный текст.</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задачи.</a></div>
+
+<h3 id="Использование_Рентген-очков">Использование Рентген-очков</h3>
+
+<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Рентген-очки </a>показывают меньше информации, чем DOM Инспектор, но проще в установке и использовании.</p>
+
+<ol>
+ <li>Перейдите на домашнюю страницу <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">X-Ray Goggles</a>.</li>
+ <li>Перетащите ссылку X-Ray Googles с этой страницы на панель закладок.</li>
+ <li>Откройте HTML-документ.</li>
+ <li>Запустите Рентген-очки, кликнув по появившейся закладке.</li>
+ <li>Передвигайте курсор мыши по документу для просмотра элементов в документе.</li>
+</ol>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{ nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Каскадность и наследование") }}Если вы решили задачу, то увидели, что информация о стиле из более чем одного места взаимодействует для создания окончательного стиля для элемента. На <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">следующей странице</a> объясняется больше об этих взаимодействиях.</p>
diff --git a/files/ru/web/guide/css/getting_started/index.html b/files/ru/web/guide/css/getting_started/index.html
new file mode 100644
index 0000000000..047fa6ea8f
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/index.html
@@ -0,0 +1,59 @@
+---
+title: CSS для начинающих
+slug: Web/Guide/CSS/Getting_started
+tags:
+  - Beginner
+  - CSS
+  - 'CSS:Getting_Started'
+  - Guide
+  - Needs
+  - NeedsBeginnerUpdate
+  - NeedsTranslation
+  - NeedsUpdate
+  - TopicStub
+  - Web
+  - Новичку
+  - Руководство
+translation_of: Learn/CSS/First_steps
+---
+<p><span class="seoSummary">Это руководство (самоучитель) познакомит вас с базовыми возможностями и языком (синтаксом) <a href="/ru/docs/Web/Guide/CSS" title="/ru/docs/Web/Guide/CSS"><strong>Каскадных таблиц стилей</strong></a> (CSS). CSS используется для изменения внешнего вида структурированного документа, такого как веб-страница. Руководство также включает простые упражнения, которые вы сможете выполнить на своем компьютере и увидеть, как работает CSS, а также его возможности в современных браузерах. </span></p>
+
+<p>Данное руководство создано для новичков и всех, кто хотел бы освежить свои знания основ CSS. Если у вас уже есть опыт работы с CSS, на главной странице вы можете найти <a href="/ru/docs/Web/Guide/CSS" title="/ru/docs/Web/Guide/CSS">список</a> обучающих ресурсов, подходящих для вашего уровня.</p>
+
+<nav class="fancyTOC"><a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Глава «Что такое CSS» руководства по CSS">Что такое CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Глава «Зачем нужен CSS» руководства по CSS">Зачем нужен CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Глава «Как работает CSS» руководства по CSS">Как работает CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Глава «Каскадирование и наследование» руководства по CSS">Каскадность и наследование</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Глава «Селекторы» руководства по CSS">Селекторы</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Глава «Читаемость CSS» руководства по CSS">Читаемость CSS</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">стили текста</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Color" title="Глава «Цвета» руководства по CSS">Цвета</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">контент</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Lists" title="Глава «Списки» руководства по CSS">Списки</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">блок</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">макет</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Tables" title="Глава «Таблицы» руководства по CSS">Таблицы</a> <a class="button" href="/ru/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">медиа</a></nav>
+
+<h2 id="Что_вам_нужно_для_того_чтобы_начать">Что вам нужно для того, чтобы начать</h2>
+
+<ul>
+ <li>Текстовый редактор</li>
+ <li>Современный браузер</li>
+ <li>Опыт работы с текстовым редактором и браузером</li>
+</ul>
+
+<p>В данном руководстве вам будут встречаться упражнения, которые вам предлагается выполнить для лучшего понимания материала. Их выполнение не является обязательным: вы можете просто читать материал и смотреть на иллюстрации.</p>
+
+<p><strong>Важно:</strong> Руководство включает в себя материалы по работе с цветом в CSS. Эти материалы будет легче пройти, если у вас цветной монитор и нормальное цветовое зрение.</p>
+
+<h2 id="Как_пользоваться_руководством">Как пользоваться руководством</h2>
+
+<p>Наилучшим вариантом будет внимательное и постепенное чтение разделов в строгой последовательности. Если вы пропустите какой-то раздел, вам может оказаться что-то непонятно в следующих главах.</p>
+
+<h3 id="Часть_I_Основы_CSS">Часть I: Основы CSS</h3>
+
+<p>На каждой странице, используйте секцию <em>Информация</em>, чтобы понять, как работает CSS. Используйте секцию <em>К действию</em>, чтобы попробовать использовать CSS на вашем компьютере.</p>
+
+<p>Чтобы проверить усвоенные знания, вам будет полезно решить задачу в конце каждой страницы. Верные решения задач вы всегда можете найти под их описанием в виде ссылки - таким образом, вы не сможете увидеть их случайно.</p>
+
+<p>Чтобы добиться более глубокого понимания CSS, читайте информацию в блоках с заголовком <em>Подробнее</em>. А также не забудьте посетить приведенные там ссылки.</p>
+
+<h3 id="Часть_II_Возможности_CSS">Часть II: Возможности CSS</h3>
+
+<p>Вторая часть руководства содержит примеры, которые продемонстрируют вам возможности CSS применительно к другим web-технологиям и технологиям Mozilla. </p>
+
+<ol>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="ru/CSS/Getting_Started/JavaScript">JavaScript</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="ru/CSS/Getting_Started/SVG_graphics">SVG графика</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/XML_data" title="ru/CSS/Getting_Started/XML_data">XML данные</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="ru/CSS/Getting_Started/XBL_bindings">XBL байдинг bindings</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Пользовательские интерфейсы XUL</a></li>
+</ol>
diff --git a/files/ru/web/guide/css/getting_started/readable_css/index.html b/files/ru/web/guide/css/getting_started/readable_css/index.html
new file mode 100644
index 0000000000..1720f6261d
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/readable_css/index.html
@@ -0,0 +1,165 @@
+---
+title: Чистый СSS код
+slug: Web/Guide/CSS/Getting_started/Readable_CSS
+translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">Это 6-я статья руководства <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS для начинающих</a>; здесь </span>обсуждается стиль и грамматика самого языка CSS. Вы можете изменить пусть к вашему файлу CSS на более удобный для чтения.</p>
+
+<h2 class="clearLeft" id="Информация_Чистый_код_CSS">Информация: Чистый код CSS</h2>
+
+<p>Вы можете добавлять пустое пространство и комментарии к вашим стилям, чтобы сделать их более читабельными. Также вы можете группировать селекторы вместе, в случае если те же самые правила стиля применяются к разным элементам.</p>
+
+<h3 id="Пустое_пространство">Пустое пространство</h3>
+
+<p>Пустое пространство означает фактические пробелы, табуляцию, а также новые строки. Вы можете использовать их, чтобы сделать ваш код более читабельным.</p>
+
+<p>В макете страницы, данное пространство — это та часть, которая остается без опознавательных знаков: отступы от других элементов (margin) и пространство между колонками и строками.</p>
+
+<p>Ваш пример файла CSS в настоящее время имеет правила в одной строке, и почти минимум пробелов. В комплексе стилей эта схема будет усложнять читаемость, а значит в нее будет трудно вносить изменения.</p>
+
+<p>Стиль написания который вы выбираете, как правило, зависит от личных предпочтений, но если ваши css являются частью общих проектов, могут возникнуть трудности с понимаем вашего написания кода.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Примеры</div>
+
+<p>Некоторые люди пытаются написать код максимально компактно и пишут код в одну строку, даже если он достаточно долгий:</p>
+
+<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;}
+</pre>
+
+<p>Некоторые люди предпочитают писать каждое свойство-значение в отдельной строке:</p>
+
+<pre class="brush: css">.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+</pre>
+
+<p>Некоторые используют отступы — 2 или 4 пробела или табы:</p>
+
+<pre class="brush: css">.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+</pre>
+
+<p>Некоторые люди все выстраивают вертикально (но такое расположение не лучший вариант для поддержки):</p>
+
+<pre class="brush: css">.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+</pre>
+
+<p>Некоторые люди используют смешанный пробелы для повышения читаемости.</p>
+
+<pre class="brush: css">.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+</pre>
+</div>
+
+<p>Некоторые используют вкладки для компоновки элементов, а другие только пробелы.</p>
+
+<h3 id="Комментарии">Комментарии</h3>
+
+<p>Комментарии в CSS имеют следующий вид: <code>/*</code> комментарий <code>*/</code>.</p>
+
+<p>Вы можете использовать комментарии, чтобы сделать фактические комментарии в css, а также чтобы закомментировать временно часть кода с целью тестирования.</p>
+
+<p>Часть стилей, которая будет закомментирована, не будет отображатся браузером. Будьте осторожны при комментировании кода, поскольку важно сохранить правильный синтаксис остального кода.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<pre class="brush: css">/* стиль для начальной буквой C в первом пункте*/
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+</pre>
+</div>
+
+<h3 id="Группировка_селекторов">Группировка селекторов</h3>
+
+<p>Когда многие элементы имеют один и тот же стиль, вы можете указывать группу селекторов, разделяя их запятыми. Декларация применится для всех выбранных элементов.</p>
+
+<p>В другом месте в таблице стилей можно указать те же селекторы уже индивидуально, чтобы применить индивидуальные правила стилей для них.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Это правило делает элементы {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, и {{HTMLElement ("h3")}} одного цвета.</p>
+
+<p>Удобно определить цвет только в одном месте, в случае, если возможны изменения.</p>
+
+<pre class="brush: css">/* цвет для заголовков */
+h1, h2, h3 {color: navy;}
+</pre>
+</div>
+
+<h2 id="Действуем_добавление_комментариев_и_улучшения_формата">Действуем: добавление комментариев и улучшения формата</h2>
+
+<ol>
+ <li>Редактируя ваш CSS-файл убедитесь, что он применяет эти правила (в любом порядке):
+  <pre class="brush: css">strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+</pre>
+ </li>
+ <li>Сделайте его более читабельным, перестраивая его таким образом, какой будете считать более логичным и применяя пробелы и комментарии на свое усмотрение.</li>
+ <li>Сохраните файл и обновите экран браузера, чтобы убедиться, что ваши изменения не повлияли на роботу стилей:
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_details">
+<div class="tuto_type">Задание</div>
+
+<p>Закомментируйте часть стиля не меняя остальное, чтобы сделать первую букву вашего документа красной:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Существует более чем один способ сделать это).</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+One way to do this is to put comment delimiters around the rule for <code>.carrot</code>:
+
+<pre class="brush: css">/*.carrot {
+  color: orange;
+}*/</pre>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задания.</a></div>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Ваш образец таблицы стилей использовал курсивный текст и подчеркнутый текст. На следующей странице описаны несколько способов, чтобы <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">указать внешний вид текста</a> в вашем документе<strong>.</strong></p>
diff --git a/files/ru/web/guide/css/getting_started/selectors/index.html b/files/ru/web/guide/css/getting_started/selectors/index.html
new file mode 100644
index 0000000000..7af11a31e1
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/selectors/index.html
@@ -0,0 +1,433 @@
+---
+title: Selectors
+slug: Web/Guide/CSS/Getting_started/Selectors
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading &amp; inheritance")}}Это пятый раздел руководства <a href="https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a>. В нем объясняется, как можно выборочно применять стили и каким образом различные типы селекторов имеют разные приоритеты. <span class="seoSummary"> </span></p>
+
+<p>Некоторые атрибуты добавляются к тегам в шаблоне документа, и эти атрибуты используются в шаблоне таблицы стилей.</p>
+
+<h2 class="clearLeft" id="Информация_Селекторы">Информация: Селекторы</h2>
+
+<p>Ранее мы уже встречались с селекторами. Мы создали строку в файле стилей следующего вида:</p>
+
+<pre class="brush: css">strong {
+  color: red;
+}
+</pre>
+
+<p>В терминологии CSS эта строка полностью является <em>правилом CSS</em>. Это правило начинается со <code>strong</code>, что и называется <em>селектором</em> <em>CSS</em>. Селектор выбирает, к каким элементам DOM применяется правило.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробности</div>
+
+<p>Часть внутри фигурных скобок называется <em>объявлением</em>.</p>
+
+<p>Ключевое слово <code>color</code> - <em>свойство</em>, а <code>red</code> - <em>значение</em>.</p>
+
+<p>Точка с запятой после пары "свойство-значение" отделяет её от других пар "свойство-значение" в том же объявлении.</p>
+
+<p>Этот учебник ссылается на селектор типа <code>strong</code> как на селектор <em>тега</em>. Спецификация CSS ссылается на него как на селектор <em>типа</em>.</p>
+</div>
+
+<p>На этой странице учебника объясняются дополнительные сведения о селекторах, которые можно использовать в правилах CSS.</p>
+
+<p>В дополнение к именам тегов, вы можете использовать в селекторах значения атрибутов. Это позволит вашим правилам быть более избирательными.</p>
+
+<p>Два атрибута имеют особый статус в CSS. Это <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> и <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p>
+
+<h3 id="Селекторы_классов">Селекторы классов</h3>
+
+<p>Используйте атрибут <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> в элементе, чтобы назначить элемент именованному классу. Выбор имени класса целиком за вами. Множество элементов в документе может иметь одно и то же значение класса.</p>
+
+<p>В вашей таблице стилей используйте точку перед именем класса для использования его в качестве селектора.</p>
+
+<h3 id="Селекторы_ID">Селекторы ID</h3>
+
+<p><code>Используйте атрибут <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id">id</a> в элементе, чтобы назначить идентификатор элементу. Это зависит от вас, какое имя вы выберете для ID. Идентификационное имя должно быть уникальным в документе.</code></p>
+
+<p>В таблице стилей введите знак решетки перед идентификатором, когда вы используете его в селекторе.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+Этот HTML тэг имеет оба элемента, атрибут <code>class</code> и <code>id</code>:
+
+<pre class="brush: html">&lt;p class="key" id="principal"&gt;
+</pre>
+
+<p>Значение идентификатора <strong>id</strong>, <code>principal</code>, должно быть уникально в документе, но разные тэги в документе, могут иметь одинаковое имя <strong>class</strong> со значением <code>key</code>.</p>
+
+<p>Это правило делает все классы(class) со значением<code>key</code> зелёными. (Они даже не должны быть все элементами {{ HTMLElement("p") }}.)</p>
+
+<pre class="brush: css">.key {
+  color: green;
+}
+</pre>
+
+<p>Это правило делает один элемент с идентификатором (<strong>id</strong>) и значением <code>principal</code> полужирным:</p>
+
+<pre class="brush: css">#principal {
+  font-weight: bolder;
+}
+</pre>
+</div>
+
+<h3 id="Селекторы_Атрибутов">Селекторы Атрибутов</h3>
+
+<p>Вы не ограничены двумя специальными атрибутами, <code>class</code> и <code>id</code>. Вы можете определить <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute selectors">другие атрибуты</a> используя квадратные скобки. Внутри скобок вы задаёте имя атрибута, так же можно указать оператор соответствия и значение. Дополнительно, соответствие может быть установлено как чувствительное к регистру если дописать " i" после значения, но пока не все браузеры это поддерживают. Примеры:</p>
+
+<dl>
+ <dt><code>[disabled]</code></dt>
+ <dd>Выбирает все элементы с атрибутом "disabled".</dd>
+ <dt><code>[type='button']</code></dt>
+ <dd>Выбирает элементы с типом "button".</dd>
+ <dt><code>[class~=key]</code></dt>
+ <dd>Выбирает элементы со значением класса(class) "key" (но не такие как например "keyed", "monkey", "buckeye"). По сути эквивалентно <code>.key</code>.</dd>
+ <dt><code>[lang|=es]</code></dt>
+ <dd>Выбирает элементы определённые как Spanish. Это включает "es" и "es-MX" но не включает "eu-ES" (что является языком Basque).</dd>
+ <dt>[title*="example" i]</dt>
+ <dd>Выбирает элементы в состав которых входит "example", игнорируя регистр. В браузерах, которые не поддерживают флаг "i", этот селектор возможно не найдет ни один элемент.</dd>
+ <dt><code>a[href^="https://"]</code></dt>
+ <dd>Выбирает все защищённые ссылки.</dd>
+ <dt><code>img[src$=".png"]</code></dt>
+ <dd>Косвенно выбирает изображения PNG; любые изображения которые являются изображениями PNG но, чей адрес URL не заканчивается на ".png" (такие как в строке запроса) не будут выбраны.</dd>
+</dl>
+
+<h3 id="Селекторы_псевдокласса"><span class="short_text" id="result_box" lang="ru"><span>Селекторы псевдокласса</span></span></h3>
+
+<p><span id="result_box" lang="ru"><span>Псевдокласс класса CSS - это ключевое слово, добавленное в селектор, который задает особое состояние выбранного элемента.</span> <span class="alt-edited">Например {{Cssxref (": hover")}} применит стиль, когда пользователь наводит на элемент, указанный селектором.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span>Псевдо-классы вместе с псевдоэлементами позволяют применять стиль к элементу не только по отношению к содержанию дерева документов, но и по отношению к внешним факторам, таким как история навигатора</span></span> ({{ cssxref(":visited") }}, для примера), <span id="result_box" lang="ru"><span>статус его содержимого</span></span> (наподобии {{ cssxref(":checked") }} <span id="result_box" lang="ru"><span>на некоторых элементах формы) или положение мыши </span></span> (наподобии {{ cssxref(":hover") }} <span id="result_box" lang="ru"><span> который позволяет узнать, находится ли мышь над элементом или нет).</span> <span>Чтобы просмотреть полный список селекторов, посетите</span></span> <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Спецификация работы селекторов</a>.</p>
+
+<div class="tuto_example">
+<div class="tuto_type"><span class="short_text" id="result_box" lang="ru"><span>Синтаксис</span></span></div>
+
+<pre class="brush:css">selector:pseudo-class {
+  property: value;
+}
+</pre>
+</div>
+
+<h4 id="Список_псевдоклассов"><span class="short_text" id="result_box" lang="ru"><span>Список псевдоклассов</span></span></h4>
+
+<ul>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+ <li>{{ Cssxref(":active") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":last-child") }}</li>
+ <li>{{ Cssxref(":nth-child") }}</li>
+ <li>{{ Cssxref(":nth-last-child") }}</li>
+ <li>{{ Cssxref(":nth-of-type") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+</ul>
+
+<h2 id="Информация_Специфичность"><span class="short_text" id="result_box" lang="ru"><span>Информация: Специфичность</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span>Несколько правил могут иметь селектор, каждый из которых соответствует одному и тому же элементу.</span> <span>Если свойство задано только одним правилом, конфликт не возникает, и свойство устанавливается в элементе.</span> <span>Если к элементу применяется более одного правила и устанавливает одно и то же свойство, тогда CSS дает приоритет правилу, которое имеет более</span></span> <a href="/en-US/docs/Web/CSS/Specificity">конкретный</a> <span id="result_box" lang="ru"><span>селектор</span><span>.</span> <span>Селектор ID более специфичен, чем селектор класса, псевдокласса или атрибута, который, в свою очередь, более специфичен, чем селектор тегов или псевдоэлементов.</span></span></p>
+
+<div class="tuto_details">
+<div class="tuto_type"><span class="short_text" id="result_box" lang="ru"><span>Подробнее</span></span></div>
+
+<p><span id="result_box" lang="ru"><span>Вы также можете комбинировать селектор, создавая более конкретный селектор.</span> <span>Например, селектор</span></span> <code>.key</code> <span id="result_box" lang="ru"><span>выбирает все элементы, с ключом имени класса </span></span><code>key</code>. Селектор <code>p.key</code> отбирает только {{ HTMLElement("p") }} элементы, которые имеют имя класса <code>key</code>.</p>
+</div>
+
+<p><span id="result_box" lang="ru"><span>Если таблица стилей имеет противоречивые правила, и они одинаково специфичны, тогда CSS дает приоритет правилу, которое позже находится в таблице стилей.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span class="alt-edited">Если у вас возникла проблема с конфликтующими правилами, попробуйте разрешить это, сделав одно из правил более конкретным, чтобы оно имело приоритет.</span> <span class="alt-edited">Если вы не можете этого сделать, попробуйте переместить одно из правил ближе к концу таблицы стилей, чтобы оно имело приоритет.</span></span></p>
+
+<h2 id="Информация_Селекторы_на_основе_отношений"><span class="short_text" id="result_box" lang="ru"><span>Информация: Селекторы на основе отношений</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span>CSS имеет несколько способов выбора элементов на основе отношений между элементами.</span> <span>Вы можете использовать их, чтобы сделать селектора более конкретными.</span></span></p>
+
+<table id="relselectors">
+ <caption><span class="short_text" id="result_box" lang="ru"><span>Общие селекторы, основанные на отношениях</span></span></caption>
+ <tbody>
+  <tr>
+   <td style="width: 10em;"><strong>Селектор</strong></td>
+   <td><strong>Выбрано</strong></td>
+  </tr>
+  <tr>
+   <td><code>A E</code></td>
+   <td>Любой E элемент, что является <em>потомком</em> одного из A элемента (то есть: дочерний, или один из дочернего, <em>т.д.</em>)</td>
+  </tr>
+  <tr>
+   <td><code>A &gt; E</code></td>
+   <td>Любой E элемент, что явлется  <em>дочерним</em> (т.е. прямой потомок)  A элемента.</td>
+  </tr>
+  <tr>
+   <td><code>E:first-child</code></td>
+   <td>Любой E элемент, что является первым <em>дочерним</em> элементом родительского элемента.</td>
+  </tr>
+  <tr>
+   <td><code>B + E</code></td>
+   <td>Любой E элемент, что является следующим <em>"братом"</em> B элемента (то есть: следующий ребенок того же родителя)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Вы можете комбинировать их для выражения сложных отношений.</p>
+
+<p>Вы можете так же использовать символ <code>*</code> (звездочка), что подразумевает "любой элемент".</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Таблица HTML имеет аттрибут <code>id</code> , но строки и ячейки не имеют отдельных идентификаторов:</p>
+
+<pre class="brush: html">&lt;table id="data-table-1"&gt;
+...
+&lt;tr&gt;
+&lt;td&gt;Prefix&lt;/td&gt;
+&lt;td&gt;0001&lt;/td&gt;
+&lt;td&gt;default&lt;/td&gt;
+&lt;/tr&gt;
+...
+</pre>
+
+<p>Эти правила делают первую ячейку в каждой строке подчеркнутой, а "брат" первой ячейки каждой строки зачеркнутой (в примере 2-я ячейка) . <span id="result_box" lang="ru"><span>Они влияют только на одну конкретную таблицу в документе:</span></span>:</p>
+
+<pre class="brush:css">#data-table-1 td:first-child {text-decoration: underline;}
+#data-table-1 td:first-child + td {text-decoration: line-through;}
+</pre>
+
+<p>Резульат  выглядит  наподобии:</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <table style="margin-right: 2em; width: 18em;">
+     <tbody>
+      <tr>
+       <td><u>Prefix</u></td>
+       <td><s>0001</s></td>
+       <td>default</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробно</div>
+
+<p><span id="result_box" lang="ru"><span>Обычным способом, если вы делаете селектор более конкретным, вы увеличиваете его приоритет.</span></span></p>
+
+<p>Если вы используете эти методы, вы избегаете необходимость указывать в атрибутах <code>class</code> или <code>id</code> на множестве тегов в вашем документе. Вместо этого, CSS выполнит эту работу.</p>
+
+<p><span id="result_box" lang="ru"><span>В больших конструкциях, где скорость важна, вы можете сделать свои таблицы стилей более эффективными, избегая сложных правил, которые зависят от отношений между элементами.</span></span></p>
+
+<p>Дополнительные примеры о таблицах, смотрите <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> на странице ссылок CSS.</p>
+</div>
+
+<h2 id="Действие_Использование_селекторов_class_и_ID">Действие: Использование селекторов class и ID</h2>
+
+<ol>
+ <li><span id="result_box" lang="ru"><span>Измените свой HTML-файл и продублируйте абзац, скопировав его и вставив в него</span></span>.</li>
+ <li>Затем добавьте аттрибуты <strong>id</strong> и <strong>class</strong>  в первую копию, а аттрибут <strong>id</strong> во вторую копию, как показано ниже. Кроме того, скопируйте и вставьте весь файл снова:
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p id="first"&gt;
+      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
+      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+    &lt;p id="second"&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Теперь отредактируйте свой файл CSS.</span> <span>Замените все содержимое на:</span></span>
+  <pre class="brush:css">strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Сохраните файлы и обновите свой браузер, чтобы увидеть результат:</span></span>
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p><span id="result_box" lang="ru"><span>Вы можете попробовать перестроить строки в вашем файле CSS, чтобы показать, что порядок не имеет никакого эффекта.</span></span></p>
+
+  <p>Селекторы классов <code>.carrot</code> и <code>.spinach</code> имеют приоритет над селектором тега <code>strong</code>.</p>
+
+  <p>Селектор ID <code>#first</code> имеет приоритет над селекторами класс и тег.</p>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Вызовы</div>
+
+<ol>
+ <li><span id="result_box" lang="ru"><span>Не изменяя свой HTML-файл, добавьте в свой CSS-файл одно правило, которое сохраняет все начальные буквы того же цвета, что и сейчас, но делает весь текст во втором абзаце синим:</span></span>
+
+  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Теперь измените правило, которое вы только что добавили (не изменяя ничего другого), чтобы сделать первый абзац синим:</span></span>
+  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<ol>
+ <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below:
+
+  <pre class="brush: css">#second { color: blue; }
+</pre>
+  A more specific selector, <code>p#second</code> also works.</li>
+ <li>Change the selector of the new rule to be a tag selector using <code>p</code>:
+  <pre class="brush: css">p { color: blue; }
+</pre>
+ </li>
+</ol>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
+
+<h2 id="Действие_Использование_селекторов_псевдокласса">Действие: Использование селекторов псевдокласса</h2>
+
+<ol>
+ <li><span class="short_text" id="result_box" lang="ru"><span>Создайте HTML-файл со следующим содержимым</span></span>:
+
+  <pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Теперь отредактируйте свой файл CSS.</span> <span>Замените все содержимое на:</span></span>
+  <pre class="brush: css">a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+</pre>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Сохраните файлы и обновите свой браузер, чтобы увидеть результат (наведите указатель мыши на следующую ссылку, чтобы увидеть эффект):</span></span>
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td><span class="short_text" id="result_box" lang="ru"><span>Перейдите к нашей</span></span> <a class="tutospecial" href="https://developer.mozilla.org/ru/docs/Web/Guide/CSS/Getting_started/Selectors#" title="Home page">Домашняя страница</a><span style="display: none;"> </span><span style="display: none;"> </span></td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ol>
+
+<h2 id="Действие_Использование_селекторов_на_основе_отношений_и_псевдоклассов">Действие: Использование селекторов на основе отношений и псевдоклассов</h2>
+
+<p><span id="result_box" lang="ru"><span>С помощью селекторов, основанных на связях и псевдоклассах, вы можете создавать сложные каскадные алгоритмы.</span></span> <span id="result_box" lang="ru"><span>Это обычная техника, используемая, например, для создания</span></span> <strong>чисто-CSS выпадающее меню</strong> ( <span id="result_box" lang="ru"><span>это только CSS, без использования JavaScript).</span> <span>Суть этого метода заключается в создании правила следующего вида:</span></span></p>
+
+<pre class="brush: css">div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}</pre>
+
+<p><span id="result_box" lang="ru"><span>для применения к структуре HTML, наподобии следующей:</span></span></p>
+
+<pre class="brush: html">&lt;div class="menu-bar"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
+      &lt;ul&gt;
+        &lt;li&gt;
+          &lt;a href="example.html"&gt;Link&lt;/a&gt;
+        &lt;/li&gt;
+        &lt;li&gt;
+          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+          &lt;ul&gt;
+            &lt;li&gt;
+              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
+              &lt;ul&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+              &lt;/ul&gt;
+            &lt;/li&gt;
+            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
+          &lt;/ul&gt;
+        &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Смотрите наш полный <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">Пример CSS-основанного выпадающего меню</a> для возможной реплики.</p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>Ваша таблица стилей начинает выглядеть плотной и сложной. Следующая секция описывает пути CSS <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">легкого чтения</a>. {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p>
diff --git a/files/ru/web/guide/css/getting_started/svg_и_css/index.html b/files/ru/web/guide/css/getting_started/svg_и_css/index.html
new file mode 100644
index 0000000000..a69c4281af
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/svg_и_css/index.html
@@ -0,0 +1,213 @@
+---
+title: SVG и CSS
+slug: Web/Guide/CSS/Getting_started/SVG_и_CSS
+translation_of: Web/SVG/Tutorial/SVG_and_CSS
+---
+<div>{{CSSTutorialTOC}}</div>
+
+<p>На этой странице показано, как использовать CSS со специальным языком для создания графики: <a href="/en-US/docs/SVG">SVG</a>.</p>
+
+<p>Вы сделаете небольшой пример, которые можно будет запустить в любом браузере с поддержкой SVG.</p>
+
+<p>Это вторая секция Части II <a href="/en-US/docs/Web/Guide/CSS/Getting_started">Руководство по CSS</a>.<br>
+ Предыдущая секция: <a href="/en-US/docs/Web/JavaScript/Getting_Started">JavaScript</a><br>
+ Следующая секция: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">Данные XML</a></p>
+
+<h3 id="Information_SVG" name="Information:_SVG">Общая информация: SVG</h3>
+
+<p><em>SVG</em> (Scalable Vector Graphics) является подмножеством языка XML и предназначен для создания графики.</p>
+
+<p>SVG можно использовать для статических изображений, а также для анимаций и создания пользовательских интерфейсов.</p>
+
+<p>Как и прочие языки, основанные на XML, SVG поддерживает использование таблиц стилей CSS, что позволяет отделить различные варианты визуального отображения от структуры данных.</p>
+
+<p>Кроме того, таблицы стилей, которые вы используете в других языках разметки документов, могут содержать ссылку на SVG графику, в тех местах, где необходимо изображение. Например, в таблице стилей, для вашего HTML документа, можно указать ссылку (URL) на SVG графику в свойстве background.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;">
+ <caption>Немного подробностей</caption>
+ <tbody>
+  <tr>
+   <td>
+    <p>На момент написания статьи (середина 2011года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определенных браузерах. Для более подробной информации о текущей поддержке SVG, см. <a href="http://caniuse.com/#search=SVG">SVG tables on caniuse.com</a>, либо в таблицах совместимости <a href="/en-US/docs/SVG/Element">SVG element reference</a>, для информации о поддержке отдельных элементов.</p>
+
+    <p>В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией <a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>.</p>
+
+    <p>Более подробная информация о SVG в Mozilla, представлена на станице <a href="/en-US/docs/SVG">SVG</a> в этой wiki.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Action_An_SVG_demonstration" name="Action:_An_SVG_demonstration">За дело: Демонстрация SVG</h3>
+
+<p>Создайте новый документ SVG, как обычный текстовый файл, <code>doc8.svg</code>. Скопируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
+
+&lt;?xml-stylesheet type="text/css" href="style8.css"?&gt;
+
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+
+&lt;svg width="600px" height="600px" viewBox="-300 -300 600 600"
+  xmlns="http://www.w3.org/2000/svg" version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+&lt;title&gt;SVG demonstration&lt;/title&gt;
+&lt;desc&gt;Mozilla CSS Getting Started - SVG demonstration&lt;/desc&gt;
+
+&lt;defs&gt;
+  &lt;g id="segment" class="segment"&gt;
+    &lt;path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/&gt;
+    &lt;path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/&gt;
+    &lt;/g&gt;
+  &lt;g id="quadrant"&gt;
+    &lt;use xlink:href="#segment"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(18)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(36)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(54)"/&gt;
+    &lt;use xlink:href="#segment" transform="rotate(72)"/&gt;
+    &lt;/g&gt;
+  &lt;g id="petals"&gt;
+    &lt;use xlink:href="#quadrant"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(90)"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(180)"/&gt;
+    &lt;use xlink:href="#quadrant" transform="rotate(270)"/&gt;
+    &lt;/g&gt;
+  &lt;radialGradient id="fade" cx="0" cy="0" r="200"
+      gradientUnits="userSpaceOnUse"&gt;
+    &lt;stop id="fade-stop-1" offset="33%"/&gt;
+    &lt;stop id="fade-stop-2" offset="95%"/&gt;
+    &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+&lt;text id="heading" x="-280" y="-270"&gt;
+  SVG demonstration&lt;/text&gt;
+&lt;text  id="caption" x="-280" y="-250"&gt;
+  Move your mouse pointer over the flower.&lt;/text&gt;
+
+&lt;g id="flower"&gt;
+  &lt;circle id="overlay" cx="0" cy="0" r="200"
+    stroke="none" fill="url(#fade)"/&gt;
+  &lt;use id="outer-petals" xlink:href="#petals"/&gt;
+  &lt;use id="inner-petals" xlink:href="#petals"
+    transform="rotate(9) scale(0.33)"/&gt;
+  &lt;/g&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>Создайте новый файл CSS, <code>style8.css</code>. копируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:</p>
+
+<pre class="brush: css">/*** SVG demonstration ***/
+
+/* page */
+svg {
+  background-color: beige;
+  }
+
+#heading {
+  font-size: 24px;
+  font-weight: bold;
+  }
+
+#caption {
+  font-size: 12px;
+  }
+
+/* flower */
+#flower:hover {
+  cursor: crosshair;
+  }
+
+/* gradient */
+#fade-stop-1 {
+  stop-color: blue;
+  }
+
+#fade-stop-2 {
+  stop-color: white;
+  }
+
+/* outer petals */
+#outer-petals {
+  opacity: .75;
+  }
+
+#outer-petals .segment-fill {
+  fill: azure;
+  stroke: lightsteelblue;
+  stroke-width: 1;
+  }
+
+#outer-petals .segment-edge {
+  fill: none;
+  stroke: deepskyblue;
+  stroke-width: 3;
+  }
+
+#outer-petals .segment:hover &gt; .segment-fill {
+  fill: plum;
+  stroke: none;
+  }
+
+#outer-petals .segment:hover &gt; .segment-edge {
+  stroke: slateblue;
+  }
+
+/* inner petals */
+#inner-petals .segment-fill {
+  fill: yellow;
+  stroke: yellowgreen;
+  stroke-width: 1;
+  }
+
+#inner-petals .segment-edge {
+  fill: none;
+  stroke: yellowgreen;
+  stroke-width: 9;
+  }
+
+#inner-petals .segment:hover &gt; .segment-fill {
+  fill: darkseagreen;
+  stroke: none;
+  }
+
+#inner-petals .segment:hover &gt; .segment-edge {
+  stroke: green;
+  }
+</pre>
+
+<p>Откройте документ в вашем браузере с поддержкой SVG. Переместите указатель мыши на изображение.</p>
+
+<p>Эта wiki не поддерживает вставку SVG в страницы, поэтому мы не имеем возможности продемонстрировать это здесь. Изображение будет выглядеть так:</p>
+
+<table style="border: 2px outset #3366bb;">
+ <tbody>
+  <tr>
+   <td><img alt="SVG demonstration" src="https://mdn.mozillademos.org/files/719/SVG-flower.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Примечания к демонстрации:</p>
+
+<ul>
+ <li>Документ SVG привязывается к таблице стилей общепринятым способом.</li>
+ <li>SVG содержит собственные свойства CSS и их значения. Некоторые из них похожи на значения CSS для HTML.</li>
+</ul>
+
+<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
+ <caption>Задание</caption>
+ <tbody>
+  <tr>
+   <td>Измение таблицу стилей так, чтобы все внутренние лепестки становились розовыми, по наведению курсора на одного из них, при этом нельзя менять принцип работы других лепестков.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a href="/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS">Посмотреть решение к этому заданию.</a></p>
+
+<h4 id="What_next.3F" name="What_next.3F">Что дальше?</h4>
+
+<p>В этой демонстрации, ваш браузер с поддержкой SVG уже знает, как отображать элементы  SVG. Таблица стилей всего лишь некоторым образом меняет отображение. То же самое происходит с документами HTML и XUL. Однако CSS можно использовать для любых документов XML, в которых нет предусмотренного по умолчанию способа отображения элементов. Данный пример продемонстрирован на следующей странице: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">Данные XML</a></p>
diff --git a/files/ru/web/guide/css/getting_started/text_styles/index.html b/files/ru/web/guide/css/getting_started/text_styles/index.html
new file mode 100644
index 0000000000..d8e97fa5bd
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/text_styles/index.html
@@ -0,0 +1,151 @@
+---
+title: Text styles
+slug: Web/Guide/CSS/Getting_started/Text_styles
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}<span class="seoSummary">This is the 7th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> tutorial; it gives more examples of text styles. You modify your sample stylesheet to use different fonts.</span></p>
+
+<h2 class="clearLeft" id="Information_Text_styles">Information: Text styles</h2>
+
+<p>CSS имеет несколько свойств для стилизации текста.</p>
+
+<p>There is a convenient shorthand property, {{ cssxref("font") }}, which you can use to specify several aspects at once—for example:</p>
+
+<ul>
+ <li>Bold, italic, and small-caps (small capitals)</li>
+ <li>Size</li>
+ <li>Line height</li>
+ <li>Font typeface</li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type">Example</div>
+
+<pre class="brush:css">p {
+font: italic 75%/125% "Comic Sans MS", cursive;
+}
+</pre>
+
+<p>This rule sets various font properties, making all paragraphs italic.</p>
+
+<p>The font size is set to three-quarters of the size in each paragraph's parent element, and the line height is set to 125% (a little more spaced than normal).</p>
+
+<p>The font typeface is set to Comic Sans MS, but if this typeface is not available then the browser will use its default cursive (hand-written) typeface.</p>
+
+<p>The rule has the side-effect of turning off bold and small-caps (setting them to <code>normal</code>).</p>
+</div>
+
+<h3 id="Font_faces">Font faces</h3>
+
+<p>You cannot predict what typefaces the readers of your document will have. When you specify font typefaces, it is a good idea to give a list of alternatives in order of preference.</p>
+
+<p>End the list with one of the built-in default typefaces: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>.</p>
+
+<p>If the typeface does not support some features in the document, then the browser can substitute a different typeface. For example, the document might contain special characters that the typeface does not support. If the browser can find another typeface that has those characters, then it will use the other typeface.</p>
+
+<p>To specify a typeface on its own, use the {{ cssxref("font-family") }} property.</p>
+
+<h3 id="Font_sizes">Font sizes</h3>
+
+<p>Browser users can override the default font sizes or change the text size while they read a page, so it makes good sense for you to use relative sizes wherever you can.</p>
+
+<p>You can use some built-in values for font sizes, like <code>small</code>, <code>medium</code> and <code>large</code>. You can also use values relative to the font size of the parent element like: <code>smaller</code>, <code>larger</code>, <code>150%</code> or <code>1.5em</code>. An "em" is equivalent to the width of the letter "m" (for the font size of the parent element); thus 1.5em is one-and-a-half times the size of the font of the parent element.</p>
+
+<p>If necessary you can specify an actual size like: <code>14px</code> (14 pixels) for a display device or 14pt (14 points) for a printer. This is not accessible for visually impaired users because it does not allow them to change the size. A more accessible strategy is to set a built-in value like medium on a top-level element of the document, and then set relative sizes for all its descendent elements.</p>
+
+<p>To specify a font size on its own, use the {{ cssxref("font-size") }} property.</p>
+
+<h3 id="Line_height">Line height</h3>
+
+<p>The line height specifies the spacing between lines. If your document has long paragraphs with many lines, a larger-than-normal spacing makes it easier to read, especially if the font size is small.</p>
+
+<p>To specify a line height on its own, use the {{ cssxref("line-height") }} property.</p>
+
+<h3 id="Decoration">Decoration</h3>
+
+<p>The separate {{ cssxref("text-decoration") }} property can specify other styles, like <code>underline</code> or <code>line-through</code>. You can set it to <code>none</code> to explicitly remove any decoration.</p>
+
+<h3 id="Other_properties">Other properties</h3>
+
+<p>To specify italic on its own, use {{ cssxref("font-style") }}<code>: italic;</code><br>
+ To specify bold on its own, use <code>{{ cssxref("font-weight") }}: bold;</code><br>
+ To specify small capitals on its own, use <code>{{ cssxref("font-variant") }}: small-caps;</code></p>
+
+<p>To turn any of these off individually, you can specify the value <code>normal</code> or <code>inherit</code>.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">More details</div>
+
+<p>You can specify text styles in a variety of other ways.</p>
+
+<p>For example, some of the properties mentioned here have other values that you can use.</p>
+
+<p>In a complex stylesheet, avoid using the shorthand <code>font</code> property because of its side-effects (resetting other individual properties).</p>
+
+<p>For full details of the properties that relate to fonts, see <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> in the CSS Specification. For full details of text decoration, see <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p>
+
+<p>If you don't want to depend on the typefaces installed on users' systems, you can use {{ cssxref("@font-face") }} to specify an online font. However, this requires that the users have a browser that supports this rule.</p>
+</div>
+
+<h2 id="Action_Specifying_fonts">Action: Specifying fonts</h2>
+
+<p>For a simple document, you can set the font of the {{ HTMLElement("body") }} element and the rest of the document inherits the settings.</p>
+
+<ol>
+ <li>Edit your CSS file.</li>
+ <li>Add the following rule to change the font throughout the document. The top of the CSS file is a logical place for it, but it has the same effect wherever you put it:
+  <pre class="eval">body {
+font: 16px "Comic Sans MS", cursive;
+}
+</pre>
+ </li>
+ <li>Add a comment explaining the rule, and add white space to make it match your preferred layout.</li>
+ <li>Save the file and refresh your browser to see the effect. If your system has Comic Sans MS, or another cursive font that does not support italic, then your browser chooses a different font face for the italic text in the first line:
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
+    </tr>
+    <tr>
+     <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>From your browser's menu bar, choose <strong>View &gt; Text Size &gt; Increase</strong> (or <strong>View &gt; Zoom &gt; Zoom In</strong>). Even though you specified 16 pixels in the style, a user reading the document can change the size.</li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Challenge</div>
+
+<p>Without changing anything else, make all six initial letters twice the size in the browser's default serif font:</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>Add the following style declaration to the <code>strong</code> rule:</p>
+
+<pre class="brush: css">  font: 200% serif;
+</pre>
+If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden.
+
+<p> </p>
+<a class="hideAnswer" href="#challenge">Hide solution</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
+
+<h2 id="What_next">What next?</h2>
+
+<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}Your sample document already uses several named colors. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Color">next section</a> lists the names of standard colors and explains how you can specify others<strong>.</strong></p>
diff --git a/files/ru/web/guide/css/getting_started/what_is_css/index.html b/files/ru/web/guide/css/getting_started/what_is_css/index.html
new file mode 100644
index 0000000000..597b5be93f
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/what_is_css/index.html
@@ -0,0 +1,119 @@
+---
+title: Что такое CSS?
+slug: Web/Guide/CSS/Getting_started/What_is_CSS
+tags:
+  - Beginner
+  - CSS
+  - 'CSS:Getting_Started'
+  - Example
+  - Guide
+  - Веб
+  - Новичку
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<div>{{ CSSTutorialTOC() }}</div>
+
+<p>{{previousPage("/ru/docs/Web/Guide/CSS/Getting_Started", "CSS для начинающих")}} <span class="seoSummary">Эта первая статья руководства по <a href="/ru/docs/Web/Guide/CSS/Getting_Started" title="ru/CSS/Getting Started">CSS для начинающих</a> кратко объясняет, что такое Cascading Style Sheets (CSS). С её помощью вы сможете создать простой документ, который будете использовать в дальнейших разделах.</span></p>
+
+<h2 class="clearLeft" id="Информация_Что_такое_CSS">Информация: Что такое CSS</h2>
+
+<p>Каскадные таблицы стилей (Cascading Style Sheets = <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) — это язык, который отвечает за визуальное представление документов пользователю.</p>
+
+<p>Под <em>документом</em> мы будем понимать набор информации о структуре страницы, описываемый <em>языком разметки</em>.</p>
+
+<p>А <em>представление</em> документа пользователю, в свою очередь, означает его преобразование в удобную для восприятия форму. Браузеры, такие как Firefox, Chrome или Internet Explorer, были созданы для визуального отображения документов, например, на экране компьютера, проекторе или вывода через принтер.</p>
+
+<div class="tuto_example">
+<p><strong>Примеры</strong></p>
+
+<ul>
+ <li>Страница сайта, которую вы сейчас читаете — это документ. Структура информации, которую вы видите на странице, обычно описывается при помощи языка разметки HTML (<span lang="en">HyperText Markup Language</span> — Язык ГиперТекстовой Разметки)</li>
+ <li>Диалоговые окна в компьютерных программах, также называемые модальными окнами, как правило, также являются документами. Такие окна могут также быть описаны с помощью языка разметки, такого как XUL (<span lang="en">XML User Interface Language</span> — XML’ный Язык Пользовательского Интерфейса), которые можно найти, например, в некоторых приложениях от Mozilla.</li>
+</ul>
+</div>
+
+<p>В этом руководстве блоки с заголовком <strong>Подробнее</strong>, как нижеследующий, содержат дополнительную информацию и ссылки на ресурсы, позволяющие более глубоко изучить вопрос, которому посвящен тот или иной раздел. Вы можете сразу же воспользоваться этими материалами или же пропустить эти блоки и вернуться к ним позже.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробнее</div>
+
+<p>Документ это не то же самое, что файл. Но, тем не менее, документ может храниться в одном файле.</p>
+
+<p>Со страницей, которую вы сейчас читаете, дела обстоят немного сложнее. Когда ваш браузер запрашивает данную страницу, сервер обращается к базе данных и генерирует документ, собирая его по частям из нескольких документов, каждый из которых, в свою очередь, может располагаться в нескольких файлах. Однако в этом руководстве вы также сможете работать с документами, каждый из которых представлен одним файлом.</p>
+
+<p>Больше информации о документах и языках разметки вы найдете в других разделах этого сайта:</p>
+
+<table style="background-color: inherit; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td><a href="/ru/docs/Web/HTML" title="/ru/docs/Web/HTML">HTML</a></td>
+   <td>о веб-страницах</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/XML" title="/ru/docs/XML">XML</a></td>
+   <td>о структуре документов в общем</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/Web/SVG" title="/ru/docs/Web/SVG">SVG</a></td>
+   <td>о графике</td>
+  </tr>
+  <tr>
+   <td><a href="/ru/docs/XUL" title="/ru/docs/XUL">XUL</a></td>
+   <td>о пользовательских интерфейсах в Mozilla</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Во второй части данного руководства вы встретите примеры этих языков разметки.</p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробнее</div>
+
+<p>В терминах CSS программа, которая выводит документ пользователю, так называемому <em lang="en">user agent</em> (<span lang="en">UA</span>). Браузер — один из видов UA. CSS, таким образом, не предназначен только для браузеров или визуального представления, но в первой части данного руководства вы будете работать с CSS только в браузере.</p>
+
+<p>Прочие определения и термины, имеющие отношение к CSS, вы можете найти в <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Определениях</a> спецификации CSS, созданной World Wide Web Consortium (W3C), международным сообществом которое установило открытые стандарты web.</p>
+</div>
+
+<h2 id="К_действию_Создание_документа">К действию: Создание документа</h2>
+
+<ol>
+ <li>Создайте новую папку на вашем компьютере для упражнений.</li>
+ <li>Откройте текстовый редактор и создайте новый текстовый файл. Этот файл будет содержать документ для нескольких следующих упражнений.</li>
+ <li>Скопируйте и вставьте HTML, приведенный ниже, а затем сохраните ваш файл под именем <code>doc1.html.</code>
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+  <p>{{ LiveSampleLink('Action.3A_Creating_a_document', 'Посмотреть демо') }}</p>
+ </li>
+ <li>Откройте новую вкладку или новое окно в вашем браузере и откройте только что созданный файл.
+  <p>Вы должны увидеть строку, в которой заглавные буквы выделены полужирным начертанием:</p>
+
+  <table style="border: 2px outset #36b; padding: 1em;">
+   <tbody>
+    <tr>
+     <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p>То, что вы увидите на самом деле, может немного отличаться потому, что настройки по умолчанию вашего браузера и данной энциклопедии наверняка будут отличаться: небольшие различия в шрифте, пробелах и цветах не очень-то и важны.</p>
+ </li>
+</ol>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Зачем нужен CSS?")}}В документе, который вы создали, CSS пока что не использовался. В <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/ru/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">следующем разделе</a> вы научитесь использовать CSS для стилизации документа.</p>
diff --git a/files/ru/web/guide/css/getting_started/why_use_css/index.html b/files/ru/web/guide/css/getting_started/why_use_css/index.html
new file mode 100644
index 0000000000..04f708bc27
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/why_use_css/index.html
@@ -0,0 +1,109 @@
+---
+title: Зачем нужен CSS?
+slug: Web/Guide/CSS/Getting_started/Why_use_CSS
+tags:
+  - Beginner
+  - CSS
+  - 'CSS:Getting_Started'
+  - Example
+  - Guide
+  - Web
+  - Веб
+  - Новичку
+  - Руководство
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p>
+
+<p>{{ previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "Что такое CSS?") }}<span class="seoSummary">Это вторая статья руководства по <a href="/ru/docs/Web/Guide/CSS/Getting_started" title="ru/docs/Web/Guide/CSS/Getting_started">CSS для начинающих</a>, объясняющая взаимосвязь между CSS и документами. В ней вы узнаете, как добавить CSS стили для документа, который вы создали в процессе изучения первой статьи.</span></p>
+
+<h2 class="clearLeft" id="Информация_Зачем_нужен_CSS">Информация: Зачем нужен CSS?</h2>
+
+<p>CSS используется для определения стилей ваших документов, в том числе дизайна, верстки и вариаций макета для различных устройств и размеров экрана. Вы можете разместить стили CSS внутри тега &lt;HEAD&gt; документа с встроенной таблицей стилей, или приложить отдельный CSS-файл, который будет определять ваши стили извне. Чтобы привязать внешнюю таблицу стилей к документу, просто добавьте ссылку на таблицу стилей в заголовке &lt;HEAD&gt; документа.</p>
+
+<p>У внешней таблицы стилей есть множество преимуществ. Сохранение стилей отдельно от содержания HTML:</p>
+
+<ul>
+ <li>Помогает избежать дублирования</li>
+ <li>Облегчает обслуживание</li>
+ <li>Позволяет делать изменения для всего сайта в одном месте</li>
+</ul>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Используя CSS, вы храните информацию о стилях в общих файлах, которые доступны всем страницам. Например, когда документы ссылаются на те таблицы стилей, которые определяют цвет заголовков h2, вы можете применить стиль для тегов заголовков h2 на глобальном уровне путем изменения одного атрибута CSS.</p>
+
+<p>Когда пользователь открывает веб-страницу, браузер загружает информацию стиля вместе с содержанием страницы.</p>
+
+<p>Когда пользователь открывает веб-страницу в режиме печати, вы можете предоставить различную информацию о стилях которая сделает страницу более лёгкой для чтения.</p>
+</div>
+
+<p>Как заставить HTML и CSS работать вместе? В целом, HTML используется для описания содержимого документа, а не его стиля. CSS же используется, чтобы указать стиль документа, но не содержание. Позже в руководстве вы увидите некоторые исключения из этого правила.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Подробнее</div>
+
+<p>Язык разметки, типа HTML также обеспечивает некоторые способы задания стилей.</p>
+
+<p>Например, в HTML вы можете использовать тег &lt;B&gt;, чтобы сделать текст жирным, либо указать цвет фона страницы в теге &lt;BODY&gt;.</p>
+
+<p>При использовании CSS, задание стилей средствами языка разметки обычно не используется, поскольку вся информация о стилях легко доступна для чтения и изменения в CSS-файле.</p>
+</div>
+
+<h2 id="Действие_Создание_таблицы_стилей">Действие: Создание таблицы стилей</h2>
+
+<ol>
+ <li>Создайте новый текстовый файл в том же каталоге, что и <code>doc1.html</code>, созданный в первой статье.</li>
+ <li>Сохраните его как <code>style1.css</code>. Этот файл будет вашей таблицей стилей.</li>
+ <li>Скопируйте и вставьте в CSS-файл приведённую ниже строку, после чего сохраните файл:
+  <pre class="brush: css">strong {color: red;}
+</pre>
+ </li>
+</ol>
+
+<h3 id="Привязка_таблицы_стилей_к_документу">Привязка таблицы стилей к документу</h3>
+
+<ol>
+ <li>Для привязки вашего документа к таблице стилей, необходимо внести в HTML-файл некоторые исправления. Добавьте строки, приведённые ниже:
+  <pre class="brush: html; highlight:[6];">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;link rel="stylesheet" href="style1.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+ </li>
+ <li>Сохраните файл, и откройте его в браузере. Таблица стилей сделает заглавные буквы красными:</li>
+</ol>
+
+<p>{{ EmbedLiveSample('Действие_Создание_таблицы_стилей', '', '', '', 'Web/Guide/CSS/Getting_started/Why_use_CSS') }}</p>
+
+<p>{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'Просмотреть демо') }}</p>
+
+<div class="tuto_example" id="challenge">
+<div class="tuto_type">Задание</div>
+
+<p>В дополнение к красному, в CSS имеются и другие названия цветов.</p>
+
+<p>Не открывая подсказку, подберите ещё пять цветовых имён, которые будут работать в CSS.</p>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Возможное решение</div>
+
+<p>CSS поддерживает общие названия цветов, например <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, или <code>black</code>. Он также поддерживает некоторые более экзотические названия типа <code>chartreuse</code>, <code>fuschia</code>, или <code>burlywood</code>. Посмотрите <a href="/ru/docs/CSS/color_value" title="Цвет в CSS">значения цвета CSS</a>, чтобы ознакомится с полным списком поддерживаемых цветов, а так же методов их задания.</p>
+<a class="hideAnswer" href="#challenge">Скрыть решение</a></div>
+<a href="#tutochallenge" title="Display a possible solution for the challenge">Посмотреть решение задания.</a></div>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{nextPage("/ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "Как работает CSS.")}}  Теперь, когда у вас есть образец документа, связанный с отдельной таблицей стилей, вы готовы <a href="/ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/ru/docs/Web/Guide/CSS/Getting_started/How_CSS_works">узнать больше</a> о том, как ваш браузер объединяет их при отображении документа.</p>
diff --git a/files/ru/web/guide/css/getting_started/таблицы/index.html b/files/ru/web/guide/css/getting_started/таблицы/index.html
new file mode 100644
index 0000000000..b67f611ea7
--- /dev/null
+++ b/files/ru/web/guide/css/getting_started/таблицы/index.html
@@ -0,0 +1,524 @@
+---
+title: Таблицы
+slug: Web/Guide/CSS/Getting_started/Таблицы
+tags:
+  - CSS
+  - Веб
+  - Руководство
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+---
+<p>{{CSSTutorialTOC}}{{previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout")}}</p>
+
+<p>Это 13-я секция руководства <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Начало работы</a>; оно описывает более продвинутые селекторы и некоторые специфичные способы, которыми вы можете стилизовать таблицу. Вы создаете новый пример документа, содержащий таблицу и таблицу стилей для неё.</p>
+
+<h2 class="clearLeft" id="Информация_Таблицы">Информация: Таблицы</h2>
+
+<p>Таблица распологает информацию в прямоугольной сетке. Некоторые таблицы могут быть сложными, и для сложных таблиц разные браузеры выдают разный результат.</p>
+
+<p>Когда вы проектируете ваш документ, используйте таблицы для выражения <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">отношений</a> между кусочками информации. Поэтому это не важно, если различные браузеры отображают информацию слегка различными способами, потому что значение остается ясным.</p>
+
+<p>Не используйте таблицы необычным способом для создания особенной визуальной разметки. Техники на предыдущей странице руководства (<strong><a href="/ru/docs/Web/Guide/CSS/Getting_Started/Layout" title="en-US/docs/Web/Guide/CSS/Getting_Started/Layout">Разметка</a></strong>) предпочтительнее для этой цели.</p>
+
+<h3 id="Структура_таблицы">Структура таблицы</h3>
+
+<p>В таблице, каждый кусок информации отображается в ячейке (<em>cell)</em>.</p>
+
+<p>Ячейки, лежащие на одной линии, составляют строку (<em>row</em>).</p>
+
+<p>В некоторыех таблицах, строки могут быть сгруппирированы. Специальная группа строк в начале таблицы - заголовок (<em>header)</em>, в конце - нижний колонтитул (<em>footer)</em>. Главные строки таблицы - тело (<em>body)</em>, и они могут быть также сгруппирированы.</p>
+
+<p>Ячейки в линии сверху вниз, составляют столбец (<em>column)</em>, но столбцы имеют ограниченное приминение в таблицах CSS.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Таблица <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">Селекторов, основанных на отношении</a> в <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Selectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">Селекторы</a> имеет десять ячеек в пяти строках.</p>
+
+<p>Первая строка - заголовок. Остальные четыре строки - тело таблицы. Нижнего колонтитула нет.</p>
+
+<p>У неё два столбца.</p>
+</div>
+
+<p>Это руководство охватывает только простые таблицы, где результат довольно предсказуемый. В простой таблице, каждая ячейка занимает только одну ячейку в строке и в столбце. Вы можете использовать CSS для сложных таблиц, где ячейки занимают диапазон ячеек более чем одна в строке или столбце, но таблицы, подобно этим находятся вне пределов этого руководства.</p>
+
+<h3 id="Рамки">Рамки</h3>
+
+<p>Ячейки не имеют границ.</p>
+
+<p>У ячеек нет рамок и наполнений. По умолчанию, рамки разделены значениями таблицы, свойство {{cssxref("border-spacing")}}. Вы можете также полностью удалить пространство, установив свойство таблицы {{cssxref("border-collapse")}} в <code>collapse</code>.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Здесь три таблицы.</p>
+
+<p>У таблицы слева интервал рамки 0.5 em. У таблицы по центру он составляет ноль. Таблица справа имеет сжатые границы:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="padding-right: 2em;">
+    <table style="">
+     <tbody>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+       <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+       <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td style="padding-right: 2em;">
+    <table style="">
+     <tbody>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+       <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+       <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td style="padding-right: 6em;">
+    <table style="border-collapse: collapse;">
+     <tbody>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
+       <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
+       <td style="border: 1px solid #c00; text-align: center;">Spades</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Заголовок">Заголовок</h3>
+
+<p>{{HTMLElement("caption")}} элемент - это метка, которая применяется ко всей таблице. По умолчанию, она отображается вверху таблицы.</p>
+
+<p>Чтобы переместить её вниз, установите её свойство {{cssxref("caption-side")}} в <code>bottom</code>. Это свойство наследуется, поэтому, в качестве альтернативы вы можете установить это свойство у таблицы или у другого элемента предка.</p>
+
+<p>Чтобы стилизовать заголовок текста, используйте любое из обычных свойств для текста.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>У этой таблицы заголовок внизу</p>
+
+<pre class="brush: css">#demo-table &gt; caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+}
+</pre>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em 6em 1em 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <table>
+     <caption>Подходит</caption>
+     <tbody>
+      <tr>
+       <td>
+        <table style="border-collapse: collapse;">
+         <tbody>
+          <tr>
+           <td style="border: 1px solid gray; text-align: center;">Клубы</td>
+           <td style="border: 1px solid gray; text-align: center;">Сердца</td>
+          </tr>
+          <tr>
+           <td style="border: 1px solid gray; text-align: center;">Алмазы</td>
+           <td style="border: 1px solid gray; text-align: center;">Лопаты</td>
+          </tr>
+         </tbody>
+        </table>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Пустые_ячейки">Пустые ячейки</h3>
+
+<p>Вы можете отобразить пустые ячейки (т.е. их рамки и фон) указывав {{cssxref("empty-cells")}}: show; для элемента таблицы.</p>
+
+<p>Вы можете скрыть их, указав <code>empty-cells: hide;</code>. Тогда, если у элемента родителя ячейки есть фон, он будет отображен через пустую ячейку.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Пример</div>
+
+<p>Эти таблицы имеют бледно-зелёный фон. Их ячейки имеют бледно-серый фон и тёмно-серые рамки.</p>
+
+<p>В таблице слева пустая таблица отображается. В таблице справа, она скрыта:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="padding-right: 2em;">
+    <table style="background-color: #dfd;">
+     <tbody>
+      <tr>
+       <td style="border: 1px solid #555; background-color: #eee;"> </td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Сердца</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Алмазы</td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Лопаты</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td style="padding-right: 6em;">
+    <table style="background-color: #dfd;">
+     <tbody>
+      <tr>
+       <td> </td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Сердца</td>
+      </tr>
+      <tr>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Алмазы</td>
+       <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Лопаты</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Детали</div>
+
+<p>Для подбробной информации о таблицах, смотрите <a href="http://www.w3.org/TR/CSS21/tables.html">Таблицы</a> в Спецификации CSS.</p>
+
+<p>Информации там больше, чем в этом руководстве, но она не покрывает различия между браузерами, которые могут влиять на сложные таблицы.</p>
+</div>
+
+<h2 id="Действие_Стилизация_таблицы">Действие: Стилизация таблицы</h2>
+
+<ol>
+ <li>Создайте новый HTML документ, <code>doc3.html</code>. Скопируйте и вставьте содержимое отсюда:
+
+  <div style="height: 36em; overflow: auto;">
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Документ примера 3&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style3.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;table id="demo-table"&gt;
+      &lt;caption&gt;Океаны&lt;/caption&gt;
+      &lt;thead&gt;
+        &lt;tr&gt;
+          &lt;th&gt;&lt;/th&gt;
+          &lt;th&gt;Площадь&lt;/th&gt;
+          &lt;th&gt;Средняя глубина&lt;/th&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;&lt;/th&gt;
+          &lt;th&gt;млн. км&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
+          &lt;th&gt;м&lt;/th&gt;
+        &lt;/tr&gt;
+      &lt;/thead&gt;
+      &lt;tbody&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Северный Ледовитый&lt;/th&gt;
+          &lt;td&gt;13,000&lt;/td&gt;
+          &lt;td&gt;1,200&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Атлантический&lt;/th&gt;
+          &lt;td&gt;87,000&lt;/td&gt;
+          &lt;td&gt;3,900&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Тихий&lt;/th&gt;
+          &lt;td&gt;180,000&lt;/td&gt;
+          &lt;td&gt;4,000&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Индийский&lt;/th&gt;
+          &lt;td&gt;75,000&lt;/td&gt;
+          &lt;td&gt;3,900&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Южный&lt;/th&gt;
+          &lt;td&gt;20,000&lt;/td&gt;
+          &lt;td&gt;4,500&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/tbody&gt;
+      &lt;tfoot&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Общая&lt;/th&gt;
+          &lt;td&gt;361,000&lt;/td&gt;
+          &lt;td&gt;&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+          &lt;th&gt;Средняя&lt;/th&gt;
+          &lt;td&gt;72,000&lt;/td&gt;
+          &lt;td&gt;3,800&lt;/td&gt;
+        &lt;/tr&gt;
+      &lt;/tfoot&gt;
+    &lt;/table&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+  </div>
+ </li>
+ <li>Создайте новую таблицу стилей, <code>style3.css</code>. Скопируйте и вставьте содержимое отсюда:
+  <pre class="brush: css">/*** Style for doc3.html (Tables) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+}
+
+#demo-table &gt; caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+}
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+}
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+}
+
+
+/* header */
+#demo-table &gt; thead &gt; tr:first-child &gt; th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table &gt; thead &gt; tr + tr &gt; th {
+  font-style: italic;
+  color: gray;
+}
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+}
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+}
+
+#demo-table tbody th:after {
+  content: ":";
+}
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+}
+
+#demo-table tfoot th {
+  color: blue;
+}
+
+#demo-table tfoot th:after {
+  content: ":";
+}
+
+#demo-table &gt; tfoot td {
+  background-color: #cee;
+}
+
+#demo-table &gt; tfoot &gt; tr:first-child td {
+  border-top: .2em solid #7a7;
+}
+</pre>
+ </li>
+ <li>Откройте документ в вашем браузере. Он должен выглядеть наподобие этого:
+  <table style="background-color: white; border: 2px outset #36b; padding: 1em 6em 1em 1em;">
+   <tbody>
+    <tr>
+     <td>
+      <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Океаны</p>
+
+      <div style="border: 1px solid #7a7; background-color: #efe;">
+      <table style="background-color: #efe; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
+       <tbody>
+        <tr style="text-align: center; color: blue;">
+         <th> </th>
+         <th>Площадь</th>
+         <th style="padding-left: .5em; padding-right: .5em;">Средняя глубина</th>
+        </tr>
+        <tr style="font-style: italic; color: gray;">
+         <th> </th>
+         <th style="padding-left: .5em; padding-right: .5em;"><sup>млн. км</sup><sup>2</sup></th>
+         <th style="padding-left: .5em; padding-right: .5em;">м</th>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Северный Ледовитый:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Атлантический:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Тихий:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em;">Индийский:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+        </tr>
+        <tr>
+         <th style="padding-left: .5em; padding-right: .5em;">Южный:</th>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
+         <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em; color: blue;">Общая:</th>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+        </tr>
+        <tr>
+         <th style="padding-right: .5em; color: blue;">Средняя:</th>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+         <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+        </tr>
+       </tbody>
+      </table>
+      </div>
+     </td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li>Сравните правила в таблице стилей с отображенной таблицей, чтобы гарантировать, что вы понимаете действие для каждого правила. Если вы найдете правило, значение которого вы не понимаете, то закомментируйте его и обновите страницу, чтобы посмотреть, что изменилось. Вот несколько заметок об этой таблице:
+  <ul>
+   <li>Заголовок находится снаружи рамки таблицы.</li>
+   <li>Если у вас установлен минимальный размер точки в Опциях, это может повлиять на верхний индекс в km<sup>2</sup>.</li>
+   <li>Три пустые ячейки. Через две из них  позволено показывать фон таблицы. У третьей есть фон и верхняя рамка.</li>
+   <li>Двоеточия добавлены с помощью таблицы стилей.</li>
+  </ul>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Вызов</div>
+
+<p>Измените таблицу стилей, чтобы она выглядела, как эта:</p>
+
+<table style="background-color: white; border: 2px outset #36b; padding: 1em 6em 1em 1em;">
+ <tbody>
+  <tr>
+   <td>
+    <div style="border: 1px solid #7a7; background-color: #efe;">
+    <table style="background-color: #efe; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
+     <tbody>
+      <tr style="text-align: center; color: blue;">
+       <th>
+        <table style="background-color: #efe; border-collapse: collapse; font: 100% sens-serif; padding-right: .5em; text-align: right;">
+         <tbody>
+          <tr style="text-align: center; color: blue;">
+           <th> </th>
+           <th>Площадь</th>
+           <th style="padding-left: .5em; padding-right: .5em;">Средняя глубина</th>
+          </tr>
+          <tr style="font-style: italic; color: gray;">
+           <th> </th>
+           <th style="padding-left: .5em; padding-right: .5em;"><sup>млн. км</sup><sup>2</sup></th>
+           <th style="padding-left: .5em; padding-right: .5em;">м</th>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Северный Ледовитый:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Атлантический:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Тихий:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em;">Индийский:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
+          </tr>
+          <tr>
+           <th style="padding-left: .5em; padding-right: .5em;">Южный:</th>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
+           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em; color: blue;">Общая:</th>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
+          </tr>
+          <tr>
+           <th style="padding-right: .5em; color: blue;">Средняя:</th>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
+           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
+          </tr>
+         </tbody>
+        </table>
+       </th>
+      </tr>
+     </tbody>
+    </table>
+    </div>
+
+    <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Океаны</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><a href="/ru/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables">Посмотреть решение для этой задачи.</a></p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>{{nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Media", "Media")}}Это последняя страница в этом руководстве, которая фокусируется на CSS свойствах и значениях. Для полного обзора свойств и значений, смотрите <a href="http://www.w3.org/TR/CSS21/propidx.html">все свойства таблиц</a> в CSS Спецификациях.</p>
+
+<p>Следующая страница <a href="/ru/docs/Web/Guide/CSS/Getting_Started/Media" title="en-US/docs/Web/Guide/CSS/Getting_Started/Media">тоже рассматривает</a> цель и структуру CSS таблиц.</p>
diff --git a/files/ru/web/guide/css/index.html b/files/ru/web/guide/css/index.html
new file mode 100644
index 0000000000..5d13e8cc55
--- /dev/null
+++ b/files/ru/web/guide/css/index.html
@@ -0,0 +1,11 @@
+---
+title: Руководство разработчика CSS
+slug: Web/Guide/CSS
+tags:
+  - CSS
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+translation_of: Learn/CSS
+---
+prepare for redirect
diff --git a/files/ru/web/guide/css/understanding_z_index/adding_z-index/index.html b/files/ru/web/guide/css/understanding_z_index/adding_z-index/index.html
new file mode 100644
index 0000000000..2fff1726d3
--- /dev/null
+++ b/files/ru/web/guide/css/understanding_z_index/adding_z-index/index.html
@@ -0,0 +1,157 @@
+---
+title: Using z-index
+slug: Web/Guide/CSS/Understanding_z_index/Adding_z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+---
+<div>{{cssref}}</div>
+
+<p>The first part of this article, <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without the z-index property</a>, explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the {{cssxref("z-index")}} property on a <a href="/en-US/docs/Web/CSS/position#Types_of_positioning">positioned</a> element.</p>
+
+<p>Свойство <code>z-index</code> может иметь значение в целых числах (положительные, ноль, или отрицательные), что представляет собой позицию єлемента вдоль оси z. Если вы не знакомы с<strong> </strong>осью<strong> </strong>z, представьте себе страницу как стопку слоев, имеющих собственое порядковое число. Слои представлены в числовом порядке, with larger numbers above smaller numbers.</p>
+
+<ul>
+ <li>bottom layer<em> (farthest from the observer)</em></li>
+ <li>...</li>
+ <li>Layer -3</li>
+ <li>Layer -2</li>
+ <li>Layer -1</li>
+ <li>Layer 0 <em>(default rendering layer)</em></li>
+ <li>Layer 1</li>
+ <li>Layer 2</li>
+ <li>Layer 3</li>
+ <li>...</li>
+ <li>top layer<em> (closest to the observer)</em></li>
+</ul>
+
+<div class="note">
+<p><strong>Notes:</strong></p>
+
+<ul>
+ <li>When no <code>z-index</code> property is specified, elements are rendered on the default rendering layer 0 (zero).</li>
+ <li>If several elements share the same <code>z-index</code> value (i.e., they are placed on the same layer), stacking rules explained in the section <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="Stacking without z-index">Stacking without z-index</a> apply.</li>
+</ul>
+</div>
+
+<p>In the following example, the layers' stacking order is rearranged using <code>z-index</code>. The <code>z-index</code> of element #5 has no effect since it is not a positioned element.</p>
+
+<p>{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}</p>
+
+<h2 id="Source_code_for_the_example"><strong>Source code for the example</strong></h2>
+
+<h3 id="HTML"><strong>HTML</strong></h3>
+
+<pre class="brush: html">&lt;div id="abs1"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;
+  &lt;br /&gt;position: absolute;
+  &lt;br /&gt;z-index: 5;
+&lt;/div&gt;
+
+&lt;div id="rel1"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;
+  &lt;br /&gt;position: relative;
+  &lt;br /&gt;z-index: 3;
+&lt;/div&gt;
+
+&lt;div id="rel2"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;
+  &lt;br /&gt;position: relative;
+  &lt;br /&gt;z-index: 2;
+&lt;/div&gt;
+
+&lt;div id="abs2"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;
+  &lt;br /&gt;position: absolute;
+  &lt;br /&gt;z-index: 1;
+&lt;/div&gt;
+
+&lt;div id="sta1"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;
+  &lt;br /&gt;no positioning
+  &lt;br /&gt;z-index: 8;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  padding: 10px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  z-index: 5;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  left: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#rel1 {
+  z-index: 3;
+  height: 100px;
+  position: relative;
+  top: 30px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  z-index: 2;
+  height: 100px;
+  position: relative;
+  top: 15px;
+  left: 20px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  right: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  z-index: 8;
+  height: 70px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a>: Notes on the stacking context.</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, z-index on the second level</li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li>
+ <li>Last Updated Date: November 3, 2014</li>
+</ul>
+</div>
diff --git a/files/ru/web/guide/css/understanding_z_index/index.html b/files/ru/web/guide/css/understanding_z_index/index.html
new file mode 100644
index 0000000000..0074ff2577
--- /dev/null
+++ b/files/ru/web/guide/css/understanding_z_index/index.html
@@ -0,0 +1,51 @@
+---
+title: Понимание CSS z-index
+slug: Web/Guide/CSS/Understanding_z_index
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+  - Understanding_CSS_z-index
+  - Web
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<p>Обычно HTML страницы можно считать двухмерными, потому что текст, картинки и другие элементы расположены на странице без перекрытия. Существует единый нормальный поток отрисовки (rendering flow) и элементы избегают пространства, занятого другими.{{cssxref("z-index")}} атрибут позволяет регулировать порядок наложения объектов друг на друга в процессе отрисовки контента (rendering content).</p>
+
+<blockquote>
+<p><em>В CSS 2.1, позиция каждого блока была в трех измерениях. В дополнении к их горизонтальной и вертикальной позиции блоки лежали вдоль оси "z" и распологались один поверх другого. Позиция относительно оси "z" особенно актуальна, когда блоки визуально накладываются друг на друга. </em></p>
+</blockquote>
+
+<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p>
+
+<p>Это означает, что правила стиля CSS позволяют вам позиционировать блоки на слоях в дополнение к обычному слою рендеринга (слой 0). Положение Z каждого слоя выражается как целое число, представляющее порядок наложения для рендеринга. Большие числа означают ближе к наблюдателю. Положение Z можно контролировать с помощью свойства CSS z-index.</p>
+
+<p>Использование z-index кажется чрезвычайно простым: одно свойство, которому присваивается одно целое число, с простым для понимания поведением. Однако, когда z-index применяется к сложным иерархиям элементов HTML, его поведение может быть трудно понять или предсказать. Это обьясняется целым комплексом правил "укладки" элементов. Фактически в спецификации  <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> (CSS-2.1 Приложение Е) зарезервирован целый раздел, подробно обьясняющий эти правила.</p>
+
+<p>Данная статья попытается объяснить эти правила, с некоторым упрощением и несколькими примерами.</p>
+
+<ol>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Позиционирование без z-индекса</a> : правила по умолчанию</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Позиционирование и float</a> : как себя поводят float элементы c позиционированием</li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Использование z-index</a> : Using z-index to change default stacking</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li>
+</ol>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Информация о документе</h3>
+
+<ul>
+ <li>Автор: Paolo Lombardi</li>
+ <li>Эта статья - английский перевод статьи, которую я написал на итальянском для YappY. Я даю право делиться всем контентом: <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Дата последнего обновления: 9 июля 2005 г.</li>
+</ul>
+
+<p>Примечание автора: спасибо Владимиру Паланту и Роду Уайтли за обзор.</p>
+
+<article></article>
+</div>
diff --git a/files/ru/web/guide/css/understanding_z_index/stacking_without_z-index/index.html b/files/ru/web/guide/css/understanding_z_index/stacking_without_z-index/index.html
new file mode 100644
index 0000000000..7f4eb09133
--- /dev/null
+++ b/files/ru/web/guide/css/understanding_z_index/stacking_without_z-index/index.html
@@ -0,0 +1,140 @@
+---
+title: Stacking without z-index
+slug: Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index
+tags:
+  - CSS
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+---
+<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">Понимание CSS z-index</span></a></p>
+
+<h3 id="Наложения_без_Z-индекса">Наложения без Z-индекса</h3>
+
+<p>Когда элементы не имеют z-индека, они накладываються в таком порядке(снизу вверх):</p>
+
+<p>1. Фон и границы корневого элемента.</p>
+
+<p>2. Дочерние блоки в нормальном потоке в порядке размещения(в HTML порядке).</p>
+
+<p>3. Дочерние позиционированные элементы, в порядке размещения (в HTML порядке).</p>
+
+<p>В следующем примере, абсолютно и относительно спозиционированным блокам определена величина  и позиция таким образом, чтобы продемонстировать правила наложения.</p>
+
+<div class="note">
+<p><strong>Заметки:</strong></p>
+
+<ul>
+ <li>Given a homogeneous group of elements without any z-index property, such as the positioned blocks (DIV #1 to #4) in the example, the element's stacking order is their order in the HTML hierarchy, regardless of their position.</li>
+ <li>
+  <p>Standard blocks (DIV #5) in the normal flow, without any positioning property, are always rendered before positioned elements, and appear below them, even if they come later in the HTML hierarchy. </p>
+ </li>
+</ul>
+</div>
+
+<p><img alt="understanding_zindex_01.png" class="default internal" src="/@api/deki/files/910/=understanding_zindex_01.png"></p>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="absdiv1"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+    &lt;br /&gt;position: absolute; &lt;/div&gt;
+&lt;div id="reldiv1"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+    &lt;br /&gt;position: relative; &lt;/div&gt;
+&lt;div id="reldiv2"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+    &lt;br /&gt;position: relative; &lt;/div&gt;
+&lt;div id="absdiv2"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+    &lt;br /&gt;position: absolute; &lt;/div&gt;
+&lt;div id="normdiv"&gt;
+    &lt;br /&gt;&lt;span class="bold"&gt;DIV #5&lt;/span&gt;
+    &lt;br /&gt;no positioning &lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css"> .bold {
+     font-weight: bold;
+     font: 12px Arial;
+ }
+ #normdiv {
+     height: 70px;
+     border: 1px dashed #999966;
+     background-color: #ffffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv1 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 30px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv2 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 15px;
+     left: 20px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #absdiv1 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     left: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+ #absdiv2 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     right: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>(If the image does not display in CodePen, click the Tidy button in the CSS section)</p>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index') }}</p>
+
+<h3 id="Так_же_посмотрите">Так же посмотрите</h3>
+
+<ul>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" style="display: none;"> </span></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: November 3rd, 2014</li>
+</ul>
+</div>
diff --git a/files/ru/web/guide/css/using_multi-column_layouts/index.html b/files/ru/web/guide/css/using_multi-column_layouts/index.html
new file mode 100644
index 0000000000..65e96fcdcf
--- /dev/null
+++ b/files/ru/web/guide/css/using_multi-column_layouts/index.html
@@ -0,0 +1,124 @@
+---
+title: Использование CSS разметки для многих колонок
+slug: Web/Guide/CSS/Using_multi-column_layouts
+translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
+---
+<p>{{CSSRef("CSS Multi-columns")}}</p>
+
+<p><span class="seoSummary"><strong>CSS разметка для многих колонок</strong> расширяет <em>способ блочной разметки, </em>чтобы позволить легкое описание нескольких колонок текста.</span> Людям сложно читать текст, если строки слишком длинные; это занимает слишком много времени для глаз, чтобы перемещать взгляд с конца одной на начало следующей строки, и они забывают на какой строке находились. Поэтому, чтобы использовать большие дисплеи по максимуму, авторам следует ограничить ширину колонок текст расположенных бок о бок, как в газетах.</p>
+
+<p>К несчастью, это невозможно сделать с CSS и HTML без принудительного разбиения колонки в фиксированных позициях, или строго ограничить допустимую разметку в тексте, или использовать экстраординарный скрипт. Это ограничение снимается с помощью добавления новых CSS свойств, чтобы расширить традиционный блочный способ разметки.</p>
+
+<h2 id="Использование_колонок">Использование колонок</h2>
+
+<h3 id="Количество_колонок_и_ширина">Количество колонок и ширина</h3>
+
+<p>Два свойства CSS контролируют появятся ли колонки и как много их будет: {{ Cssxref("column-count") }} and {{ Cssxref("column-width") }}.</p>
+
+<p><code>Свойство column-count</code> устанавливает количество колонок определённым числом. Пример,</p>
+
+<pre class="brush: html">&lt;div style="column-count:2;"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p>отобразит содержимое в двух колонках (если вы используете многоколоночно совместимый браузер):</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p><code>Свойство column-width</code> устанавливает минимальную желаемую ширину колонки. Если <code>column-count</code> также не установлено, тогда браузер автоматически сделает столько колонок, сколько нужно, чтобы заполнить  доступную ширину.</p>
+
+<pre class="brush: html">&lt;div style="column-width:20em;"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p>становится:</p>
+
+<p style="-moz-column-width: 20em; -webkit-column-width: 20em; column-width: 20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p>Подробные детали описаны в <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3 спецификации</a>.</p>
+
+<p>В многоколончатом блоке, содержимое автоматически перетекает из одной колонки в следующую, как это необходимо. Вся HTML, CSS и DOM функциональность поддерживается внутри колонок, как например редактирование и печать.</p>
+
+<h3 id="Краткая_запись_columns"><code>К</code>раткая запись columns</h3>
+
+<p>В большинстве случаев веб-разработчики используют одно из двух свойств CSS: {{ cssxref("column-count") }} или {{ cssxref("column-width") }}. Так как значения для этих свойств не пересекаются, то часто удобно использовать короткую запись {{ cssxref("columns") }}. Пример:</p>
+
+<p>CSS объявление  <code>column-width:12em</code> может быть заменено:</p>
+
+<pre class="brush: html">&lt;div style="columns:12em"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-column-width: 12em; -moz-columns: 12em; -webkit-columns: 12em; columns: 12em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p>CSS объявление <code>column-count:4</code> может быть заменено:</p>
+
+<pre class="brush: html">&lt;div style="columns:4"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-columns: 4; -webkit-columns: 4; columns: 4;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<p>Два CSS объявления <code>column-width:8em</code> и <code>column-count:12</code> могут быть заменены:</p>
+
+<pre class="brush: html">&lt;div style="columns:12 8em"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-columns: 12 8em; -webkit-columns: 12 8em; columns: 12 8em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<h3 id="Выравнивание_высоты">Выравнивание высоты</h3>
+
+<p>CSS3-спецификация колонок требует, чтобы высота колонки была выровнена, т.е. браузер автоматически устанавливает максимальную высоту колонки, для того, чтобы высота содержимого в каждой из них была приблизительно одинаковая. Firefox так и делает.</p>
+
+<p>Однако, в некоторых ситуациях полезно установить максимальную высоту колонок явно, тогда расположение содержимого, начиная с первой колонки и последующих созданных, как необходимо, возможно, перекроют правую границу. Поэтому, если высота ограничена, с помощью CSS {{ cssxref("height") }} или {{ cssxref("max-height") }} свойств на многоколончатом блоке, каждой колонке разрешено расти до этой высоты, но не более, пока не добавится новая колонка. Этот режим также более эффективен для разметки.</p>
+
+<h3 id="Промежутки_между_колонками">Промежутки между колонками</h3>
+
+<p>Существует промежуток между колонками. По умолчанию рекомендовано значение <code>1em</code>. Это значение можно изменить, применяя свойство {{ Cssxref("column-gap") }} на многоколончатом блоке:</p>
+
+<pre class="brush: html">&lt;div style="column-width:20em; column-gap:2em;"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+qui officia deserunt mollit anim id est laborum&lt;/div&gt;
+</pre>
+
+<p style="-moz-column-width: 20em; -webkit-column-width: 20em; column-width: 20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
+<h2 id="Постепенное_ухудшение">Постепенное ухудшение</h2>
+
+<p>Свойства колонки будут просто проигнорированы браузерами, которые не поддерживают многоколончатый режим. Поэтому соответственно легче создать разметку, которая отобразит содержимое в одной колонке и будет использовать несколько колонок в тех браузерах, которые поддерживают многоколончатый режим.</p>
+
+<p>Обратите внимание, что не все браузеры поддерживают эти свойства без префикса. Чтобы использовать эти свойства в большинстве современных браузеров, каждое свойство должно быть написано трижды: одно с префиксом {{ property_prefix("-moz") }} , одно с префиксом {{ property_prefix("-webkit") }} и третье без префикса.</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>CSS3 колонки - примитивная разметка, которая поможет Веб-разработчикам лучше воспользоваться реальным участком экрана. Разработчики с воображением могут найти много способов для их использования, особенно с автоматическим выравниванием высоты.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li>
+</ul>
diff --git a/files/ru/web/guide/css/visual_formatting_model/index.html b/files/ru/web/guide/css/visual_formatting_model/index.html
new file mode 100644
index 0000000000..7a5de35909
--- /dev/null
+++ b/files/ru/web/guide/css/visual_formatting_model/index.html
@@ -0,0 +1,209 @@
+---
+title: Модель визуального форматирования
+slug: Web/Guide/CSS/Visual_formatting_model
+translation_of: Web/CSS/Visual_formatting_model
+---
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary"><em>Модель визуального форматирования </em>CSS<em> </em> - это алгоритм, используемый для обработки документа и его визуального отображения. Это базовая концепция CSS</span>. Модель визуального форматирования задаёт трансформацию каждого элемента в документе и создаёт ноль, одну или несколько боксов, согласно <a href="https://developer.mozilla.org/ru/docs/Web/CSS/box_model">боксовой модели CSS</a>. Расположение (layout) каждого бокса определяется:</p>
+
+<ul>
+ <li>размерами бокса: точно заданными или заданными ограничениями. Если размеры не заданы, это правило игнорируется;</li>
+ <li>типом бокса: inline, inline-level, atomic inline-level, block box;</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Box_positioning_scheme">схемой позиционирования</a>: normal flow, float или absolute;</li>
+ <li>другими элементами дерева: дочерними и соседними;</li>
+ <li>размерами и расположением окна просмотра ({{glossary("viewport")}});</li>
+ <li>внутренними размерами содержащихся изображений;</li>
+ <li>другой внешней информацией.</li>
+</ul>
+
+<p>Бокс отображается относительно краев <em>содержащего его блока. </em>Как правило, бокс определяет родительский блок для своих потомков. Однако, стоит заметить, что бокс не ограничен содержащим его блоком. Такое поведение слоев, выходящих за пределы своих содержащих блоков, называется <em>переполенинем</em> (<em>overflow).</em></p>
+
+<h2 id="Генерация_бокса">Генерация бокса</h2>
+
+<p>Генерация бокса - часть алгоритма модели визуального форматирования, процедура, генерирующая блоки из элементов. Различные типы боксов определяют различное поведение в контексте форматирования. Тип бокса зависит от свойства CSS {{ cssxref("display") }}.</p>
+
+<h3 id="Блочные_эклементы_и_блок-боксы">Блочные эклементы и блок-боксы</h3>
+
+<p>Говорят, что элемент является блочным, когда вычисленное значение его CSS свойства {{ cssxref("display") }} равно: <code>block</code>, <code>list-item</code>, или <code>table</code>. Блочный элемент визуально форматируется как блок (например, параграф), предназначенный для вертикальной компоновки (в столбик).</p>
+
+<p>Каждый элемент блочного уровня участвует в <a href="/ru/docs/CSS/block_formatting_context" title="block formatting context">контексте блочного форматирования</a>. Каждый элемент блочного уровня генерирует как миниум один блок-бокс, названный <em>главным блок-боксом</em>. Некоторые элементы, например, такие как list-item, создают дополнительные боксы для хранения маркеров и других типографических элементов, содержащихся в list item. Большинство блочных элементов генерирует только один, главный блок-бокс.</p>
+
+<p>Главный блок-бокс содержит сгенериованные боксы-потомки и сгенериованный контекст. Он так же будет боксом, участвующем в <a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">схеме позиционирования</a>.</p>
+
+<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">Элемент блочного уровня так же может быть блоком-контейнером. Блок-контейнер - это блок, который содержит либо только другие элементы блочного уровня, либо создаёт <a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">контекст инлайнового форматирования</a> и, таким образом, содержит только инлайновые элементы.</p>
+
+<p>Важно понимать, что понятие блочного элемента и понятие блочного контейнера - это разные вещи. Первое описывает, как блок будет себя вести по отношению к своему родителю и своим соседям/братьям. А второе - описывает, как блок будет взаимодействовать со своими потомками. Некоторые элементы блочного уровня, например, таблицы, не являются содержащими блоками. И наоборот, некоторые блоки-контейнеры, например, ячейки таблицы, не являются элементами блочного уровня.</p>
+
+<p>Элементы блочного уровня, которые так же являются контейнерами, называются <em>блок-боксами</em>.</p>
+
+<h4 id="Анонимные_блок-боксы">Анонимные блок-боксы</h4>
+
+<p>В некоторых случаях алгоритм визуального форматирования  вынужден добавлять дополнительные боксы. Так как эти боксы невозможно как-то проименовать и к ним невозможно применить css-селекторы, поэтому эти боксы называют <em>анонимными</em>.</p>
+
+<p>Из-за того, что к анонимным боксам невозможно применить селекторы, их невозможно изменить с помощью таблицы стилей. Это значит, что все наследуемые CSS свойства для них будут иметь значение <code>inherit</code>, а все ненаследуемые свойства будут иметь значение <code>initial</code>.</p>
+
+<p>Блоки-контейнеры содержат либо только инлайн-боксы, либо только элементы блочного уровня. Но, как правило, документ содержит и те и другие. В этом случае анонимные блок-боксы создаются вокруг примыкающих к ним инлайн-боксов.</p>
+
+<h3 id="Пример">Пример</h3>
+
+<p>Возьмём следующий HTML код (со стилями по умолчанию, то есть элементы {{ HTMLElement("div") }} и {{ HTMLElement("p") }} имеют значение <code>display:block</code> :</p>
+
+<pre class="syntaxbox"><code>&lt;div&gt;Some inline text &lt;p&gt;followed by a paragraph&lt;/p&gt; followed by more inline text.&lt;/div&gt;</code></pre>
+
+<p>Здесь создались два анонимных блока: один для текста перед параграфом (<code>Some inline text</code>), и второй для текста после параграфа (<code>followed by more inline text.</code>). И у нас получилась вот такая структура:</p>
+
+<p style="text-align: center;"><img alt="anonymous_block-level_boxes.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p>
+
+<p>Выглядеть это будет так:</p>
+
+<pre class="line-numbers language-html"><code class="language-html">Some inline text
+followed by a paragraph
+followed by more inline text.</code></pre>
+
+<p>В отличие от параграфа {{ HTMLElement("p") }}, Web разработчик не может напрямую контролировать стили этих двух анонимных боксов. Те свойства, которые наследуются, берут своё значение от элемента {{ HTMLElement("div") }}, например {{ cssxref("color") }}, определяющий цвет текста. А другие значения, ненаследуемые, устанавливаются в значение <code>initial</code>. Например, у них не будет своего свойства {{ cssxref("background-color") }}, он всегда будет в состоянии "прозрачный" (transparent), значении по умолчанию для этого свойства, и поэтому будет видно тот background, который установлен у элемента <code>&lt;div&gt;</code>. А вот для параграфа <code>&lt;p&gt; </code>можно установить своё свойство цвета фона. Таким образом, эти два анонимных бокса будут иметь один и тот же цвет текста.</p>
+
+<p>Ещё один случай, который приводит к созданию анонимных блок-боксов, это случай, когда инлайн-бокс содержит один или несколько блок-боксов. В этом случае элемент, содержащий блок-боксы, делится на два инлайн-бокса - один перед, а второй после блок-бокса. И потом инлайн-элементы перед и после блок-бокса дополнительно заключаются в <em>анонимные блок-боксы</em>. Таким образом блок-бокс становится соседом для анонимных блок-боксов, содержащих инлайн-элементы.</p>
+
+<p>Если есть несколько блок-боксов, идущих подряд, без инлайн-элементов между ними, то анонимные блок-боксы создаются только перед и после такого набора блок-боксов.</p>
+
+<h3 id="Пример_2">Пример</h3>
+
+<p>Возьмём следующий HTML код, где установим для элемента {{ HTMLElement("p") }} значение <code>display:inline</code> и для элемента {{ HTMLElement("span") }} значение <code>display:block</code> :</p>
+
+<pre class="syntaxbox"><code>&lt;p&gt;Some &lt;em&gt;inline&lt;/em&gt; text &lt;span&gt;followed by a paragraph&lt;/span&gt; followed by more inline text.&lt;/p&gt;</code></pre>
+
+<p>Создадутся два анонимных блок-бокса, один для текста перед элементом span (<code>Some <em>inline</em> text</code>) и один для текста после него (<code>followed by more inline text</code>), и у нас получится вот такая структура:</p>
+
+<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p>
+
+<p>Выглядеть она будет так:</p>
+
+<pre class="line-numbers language-html"><code class="language-html">Some inline text
+followed by a paragraph
+followed by more inline text.</code></pre>
+
+<h3 id="Элементы_инлайн-уровня_и_инлайн-боксы">Элементы инлайн-уровня и инлайн-боксы</h3>
+
+<p>Элементы, которые называются <em>элементами инлайн-уровня</em> - это элементы, у которых вычисленное значение CSS свойства {{ cssxref("display") }} установлено в : <code>inline</code>, <code>inline-block</code> или <code>inline-table</code>. Визуально они не представляют собой какие-то отдельные блоки, но они они распологаются в одну линию с другим контентом инлайн-уровня. Например, содержание параграфа, с различным форматированием, таким как подчёркивание или картинка, состоит из элементов инлайн-уровня.</p>
+
+<p><img alt="venn_inlines.png" class="internal lwrap" src="https://developer.mozilla.org/@api/deki/files/6008/=venn_inlines.png" style="float: left;"></p>
+
+<div class="warning">
+<p>Эта диаграмма использует устаревшую терминологию; см. примечания ниже. К тому же она некорректна, потому что жёлтый эллипс справа по определению должен быть изображён одинаковым по размеру с эллипсом слева или больше него  (it could be a mathematical superset), потому что в спецификации сказано: "Элементв инлайн-уровня генерируют боксы инлайн-уровня, участвующие в форматировании инлайн-уровня", см. CSS 2.2, глава 9.2.2</p>
+</div>
+
+<p>Элементы инлайн-уровня создают <em>боксы инлайн-уровня</em>, которые определены как боксы, участвующие в <a href="https://developer.mozilla.org/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">контексте форматирования инлайн-уровня</a>. <em>Inline boxes</em> are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with <code>display:inline</code>. Inline-level boxes, whose contents do not participate in an inline formatting context, are called <em>atomic inline-level boxes</em>. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of <code>inline-block</code> or <code>inline-table</code>, are never split into several boxes, as is possible with inline boxes.</p>
+
+<div class="note"><strong>Note:</strong> Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are <strong>not</strong> inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.</div>
+
+<div class="note">Atomic inline boxes cannot be split into several lines in an inline formatting context.
+<div style="-moz-column-width: 30em;">
+<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="style token"><span class="language-css token">
+  <span class="selector token">span</span> <span class="punctuation token">{</span>
+    <span class="property token">display</span><span class="punctuation token">:</span>inline<span class="punctuation token">;</span> <span class="comment token">/* default value*/</span>
+  <span class="punctuation token">}</span>
+</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">width</span><span class="punctuation token">:</span><span class="number token">20</span><span class="token unit">em</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   The text in the span <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span><span class="punctuation token">&gt;</span></span>can be split in several
+   lines as it<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span> is an inline box.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+</div>
+</div>
+
+<p>which leads to:</p>
+
+<div style="width: 20em;">The text in the span <span>can be split into several lines as it</span> is an inline box.</div>
+
+<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="style token"><span class="language-css token">
+  <span class="selector token">span</span> <span class="punctuation token">{</span>
+    <span class="property token">display</span><span class="punctuation token">:</span>inline-block<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">width</span><span class="punctuation token">:</span><span class="number token">20</span><span class="token unit">em</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   The text in the span <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span><span class="punctuation token">&gt;</span></span>cannot be split in several
+   lines as it<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span> is an inline-block box.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<div class="note">
+<div style="-moz-column-width: 30em;">
+<p>which leads to:</p>
+
+<div style="width: 20em;">The text in the span <span style="display: inline-block;">cannot be split into several lines as it</span> is an inline-block box.</div>
+</div>
+</div>
+
+<h4 id="Anonymous_inline_boxes">Anonymous inline boxes</h4>
+
+<p>As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to <code>initial</code> for all others.</p>
+
+<p>The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.</p>
+
+<div class="note">Example TBD</div>
+
+<h3 id="Other_types_of_boxes">Other types of boxes</h3>
+
+<h4 id="Line_boxes">Line boxes</h4>
+
+<p><em>Line boxes</em> are generated by the <a href="https://developer.mozilla.org/en-US/docs/CSS/Inline_formatting_context" title="block formatting context">inline formatting context</a> to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are <a href="https://developer.mozilla.org/en-US/docs/CSS/float" title="float">floats</a>, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.</p>
+
+<p>These boxes are technical, and Web authors do not usually have to bother with them.</p>
+
+<h4 id="Run-in_boxes">Run-in boxes</h4>
+
+<p><em>Run-in boxes</em>, defined using <code>display:run-in</code>, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.</p>
+
+<div class="note"><strong>Note:</strong> Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered <em>experimental</em>. They should not be used in production.</div>
+
+<h4 id="Model-induced_boxes">Model-induced boxes</h4>
+
+<p>Besides the inline and block formatting contexts, CSS specifies several additional <em>content models</em> that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:</p>
+
+<ul>
+ <li>The <a href="https://developer.mozilla.org/en-US/docs/CSS/table-layout" title="table-layout">table content model</a> may create a <em>table wrapper box</em> and a <em>table box</em>, but also specific boxes like <em>caption boxes</em>.</li>
+ <li>The <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">multi-column content model</a> may create <em>column boxes</em> between the container box and the content<em>.</em></li>
+ <li>The experimental grid, or flex-box content models, also create additional types of boxes.</li>
+</ul>
+
+<h4 id="Positioning_schemes">Positioning schemes</h4>
+
+<p>Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:</p>
+
+<ul>
+ <li>The <em>normal flow</em> - positions each box one after the other.</li>
+ <li>The <em>floats</em> algorithm - extracts the box from the normal flow and put it to the side of the containing box.</li>
+ <li>The <em>absolute positioning</em> scheme - positions a box within an absolute coordinate system that is established by its containing element. An absolutely positioned element can cover other elements.</li>
+</ul>
+
+<h3 id="Normal_flow">Normal flow</h3>
+
+<p>In the <em>normal flow</em>, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value <code>static</code> or <code>relative</code>, and if the CSS {{ cssxref("float") }} is set to the value <code>none</code>.</p>
+
+<h3 id="Example">Example</h3>
+
+<div class="note">When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out.<br>
+<br>
+When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out.</div>
+
+<div class="note">
+<p>There are two sub-cases of the normal flow: static positioning and relative positioning:</p>
+
+<ul>
+ <li>In <em>static positioning</em>, triggered by the value <code>static</code> of the {{ cssxref("position") }} property, the boxes are drawn at the exact position defined by the normal flow layout.</li>
+ <li>In <em>relative</em><em> positioning</em>, triggered by the value <code>relative</code> of the {{ cssxref("position") }} property, the boxes are drawn with an offset defined by the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</li>
+</ul>
+</div>
+
+<h3 id="Floats">Floats</h3>
+
+<p>In the <em>float positioning scheme</em>, specific boxes (called <em>floating boxes</em> or simply <em>floats)</em> are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.</p>
+
+<p>The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than <code>none</code> and {{ cssxref("position") }} to <code>static</code> or <code>relative</code>. If {{ cssxref("float") }} is set to <code>left</code>, the float is positioned at the beginning of the line box. If set to <code>right</code>, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.</p>
+
+<h3 id="Absolute_positioning">Absolute positioning</h3>
+
+<p>In the <em>absolute positioning scheme</em>, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block" title="CSS/Containing block">containing block</a> using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</p>
+
+<p>An element is absolutely positioned if the {{ cssxref("position") }} is set to <code>absolute</code> or <code>fixed</code>.</p>
+
+<p>With a <em>fixed positioned element</em>, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.</p>