unslug ru: move

5 files changed, 1589 insertions, 0 deletions

diff --git a/files/ru/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ru/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html
new file mode 100644
index 0000000000..a192eb1d28
--- /dev/null
+++ b/files/ru/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -0,0 +1,152 @@
+---
+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
+translation_of_original: Web/Guide/CSS/Getting_started/Cascading_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/conflicting/learn/css/building_blocks/selectors/index.html b/files/ru/conflicting/learn/css/building_blocks/selectors/index.html
new file mode 100644
index 0000000000..a6d9e5d116
--- /dev/null
+++ b/files/ru/conflicting/learn/css/building_blocks/selectors/index.html
@@ -0,0 +1,133 @@
+---
+title: 'CSS properties: what they are and how to use them'
+slug: Learn/CSS/CSS_properties
+translation_of: Learn/CSS/Building_blocks/Selectors
+translation_of_original: Learn/CSS/CSS_properties
+---
+<div class="summary">
+<p>{{Glossary("CSS")}} определяет как должна выглядеть вебстраница. Он использует предопределенные правила вместе с селекторами и свойствами для применения стилей к элементам HTML или группам элементов.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basics of {{Glossary("HTML")}}, <a href="https://developer.mozilla.org/en-US/Learn/HTML/HTML_tags">HTML elements</a>, and <a href="https://developer.mozilla.org/en-US/Learn/CSS/Using_CSS_in_a_web_page#The_link_tag">how to link HTML documents to CSS stylesheets</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>Learn about different CSS selectors and properties enough to style a simple webpage.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Разделение содержимого и стиля делает Веб разработку намного быстрее и проще. Когда вы определяете только стуктуру документа в вашем HTML файле и храните всю информацию о стиле в отдельном файле (называемом stylesheet), вы можете обновлять стили нескольких документов одновременно (а так же экономить ресурсы компьютера).</p>
+
+<p>CSS syntax consists of easy-to-use, intuitive keywords.</p>
+
+<pre class="brush: css">p {
+   font-family: "Times New Roman", georgia, sans-serif;
+   font-size: 24px;
+}</pre>
+
+<p>In the example above, <code>p</code> is a selector that applies styles to all the <code>{{HTMLElement("p")}}</code> elements at once. The CSS properties <code>font-family</code> and <code>font-size</code> are enclosed within curly braces and the corresponding values, right after the colon, determine the styles.</p>
+
+<p>There are more than <a href="/en-US/docs/Web/CSS/Reference">250 properties</a> you can apply to your document. From text to layout, (almost) anything is possible.</p>
+
+<h2 id="Active_Learning">Active Learning</h2>
+
+<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<h2 id="Deeper_dive">Deeper dive</h2>
+
+<p>If properties are fairly simple to use, selectors are another story. Okay, they aren't that hard, and mastering them unleashes the full potential of CSS. In the next examples, we will introduce the most common selectors.</p>
+
+<p>A CSS rule consists of selectors associated with properties. Selectors specify which elements will receive the properties laid down in the rule. Multiple rules can apply to the same element; the CSS cascade (which we'll discuss later on) determines which rule ends up taking effect in the case of conflicts. For now, just remember that the rule with the most <a href="/en-US/docs/Web/CSS/Specificity">specific selector</a> overrides the rules with more generic selectors.</p>
+
+<h3 id="The_element_selector">The element selector</h3>
+
+<p>Element selectors select HTML elements by element names only. Moreover, like all CSS selectors, you can apply a common set of properties to several elements at once.</p>
+
+<p>For our first example, let's assume the following HTML code fragment:</p>
+
+<pre class="brush: html">&lt;h1&gt;I'm an example&lt;/h1&gt;
+&lt;p&gt;In this example, I'm a paragraph&lt;/p&gt;
+&lt;p&gt;And I'm another paragraph&lt;/p&gt;
+</pre>
+
+<p>In the following CSS rule, the element selector <code>p</code> applies the given styles simultaneously to all the <code>{{HTMLElement("p")}}</code> elements of our HTML document, preventing extensive rewriting. We are using the {{cssxref("font-family")}} property (which defines the font in which text appears) and the {{cssxref("font-size")}} (which defines text size).</p>
+
+<pre class="brush: css">p {
+  font-family: "Helvetica", Arial, sans-serif;
+  font-size  : 12px;
+}</pre>
+
+<p>The next CSS rule only applies to <code>{{HTMLElement("h1")}}</code> elements. We are using the {{cssxref("font-size")}} property to make our title twice the size of the body text, and the {{cssxref("font-weight")}} property to make the title bold.</p>
+
+<pre class="brush: css">h1 {
+  font-size  : 24px;
+  font-weight: bold;
+}</pre>
+
+<p>The following CSS rule applies the requisite styles to both <code>{{HTMLElement("h1")}}</code> and <code>{{HTMLElement("p")}}</code> elements, potentially removing even more duplication. (This use is called "group selector" or "chain selector". Notice the comma separating the selectors). Here we are using the {{cssxref("color")}} property to specify the same text color for both headings and paragraphs.</p>
+
+<pre class="brush: css">h1, p {
+  color: darkmagenta;
+}</pre>
+
+<p>Here is the result of all this code:</p>
+
+<p>{{ EmbedLiveSample('The_element_selector') }}</p>
+
+<h3 id="The_id_selector">The id selector</h3>
+
+<p>The <code>id</code><strong> </strong>attribute of a particular HTML element uniquely identifies that element. Hence, an id selector is used only when a set of style rules applies to a single element.</p>
+
+<p>For our next example, let's assume the following HTML code fragment:</p>
+
+<pre class="brush: html">&lt;p id="hello"&gt;Hello world!&lt;/p&gt; </pre>
+
+<p>The following CSS rule applies only to that unique identified element. To make a selector into an id selector, you must put a hash character (#) in front of the id name. We are using three properties: {{cssxref("text-align")}} to center the text within the paragraph {{cssxref("border")}} to add a thin line around the paragraph, and {{cssxref("padding")}} to add some extra inner-margin between the text and the border.</p>
+
+<pre class="brush: css">#hello {
+  text-align: center;
+  border    : 1px solid black;
+  padding   : 8px;
+}</pre>
+
+<p>And the result is the following:</p>
+
+<p>{{ EmbedLiveSample('The_id_selector') }}</p>
+
+<h3 id="The_class_selector">The class selector</h3>
+
+<p>Within HTML, the <code>class</code><strong> </strong>attribute lets you apply multiple identifiers to HTML elements. Those identifiers can be used with CSS to match groups of elements regardless of element name.</p>
+
+<p>For our next example, let's assume the following HTML code fragment:</p>
+
+<pre class="brush: html">&lt;h1 class="hello"&gt;Hey there!&lt;/h1&gt;
+&lt;p class="hello bye"&gt;Let's hang out together!&lt;/p&gt;
+&lt;p class="bye"&gt;And walk over the mountain&lt;/p&gt;
+</pre>
+
+<p>Let's apply a CSS rule for all elements with the class <code>hello</code>. To make the selector into a class selector, put a period/full stop before the class name. We use the {{cssxref("font-style")}} property to italicize the text.</p>
+
+<pre class="brush: css">.hello {
+  font-style: italic;
+}</pre>
+
+<p>And another one for all elements with the class <code>bye</code>. Here we are using the {{cssxref("text-decoration")}} property to draw a line through the text.</p>
+
+<pre class="brush: css">.bye {
+  text-decoration: line-through;
+}</pre>
+
+<p>Here's what happened:</p>
+
+<p>{{ EmbedLiveSample('The_class_selector') }}</p>
+
+<h2 id="Next_step">Next step</h2>
+
+<p>So we've gone over the basics to get started with CSS. You can <a href="/en-US/docs/Learn/CSS/Basic_text_styling_in_CSS">learn more about text styling</a> or start exploring<a href="/en-US/docs/Web/CSS/Tutorials"> our CSS Tutorials</a> right away.</p>
diff --git a/files/ru/conflicting/learn/css/building_blocks/selectors_918fb6c37a4d06789bc062c48d591992/index.html b/files/ru/conflicting/learn/css/building_blocks/selectors_918fb6c37a4d06789bc062c48d591992/index.html
new file mode 100644
index 0000000000..797aefefa3
--- /dev/null
+++ b/files/ru/conflicting/learn/css/building_blocks/selectors_918fb6c37a4d06789bc062c48d591992/index.html
@@ -0,0 +1,434 @@
+---
+title: Selectors
+slug: Web/Guide/CSS/Getting_started/Selectors
+translation_of: Learn/CSS/Building_blocks/Selectors
+translation_of_original: Web/Guide/CSS/Getting_started/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/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/ru/conflicting/learn/css/building_blocks/styling_tables/index.html
new file mode 100644
index 0000000000..82b7edae60
--- /dev/null
+++ b/files/ru/conflicting/learn/css/building_blocks/styling_tables/index.html
@@ -0,0 +1,525 @@
+---
+title: Таблицы
+slug: Web/Guide/CSS/Getting_started/Таблицы
+tags:
+  - CSS
+  - Веб
+  - Руководство
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+translation_of_original: Web/Guide/CSS/Getting_started/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/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/ru/conflicting/learn/css/building_blocks/values_and_units/index.html
new file mode 100644
index 0000000000..911a8010b6
--- /dev/null
+++ b/files/ru/conflicting/learn/css/building_blocks/values_and_units/index.html
@@ -0,0 +1,345 @@
+---
+title: Color
+slug: Web/Guide/CSS/Getting_started/Color
+translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
+translation_of_original: Web/Guide/CSS/Getting_started/Color
+---
+<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>