unslug ru: move

1 files changed, 528 insertions, 0 deletions

diff --git a/files/ru/learn/css/first_steps/how_css_is_structured/index.html b/files/ru/learn/css/first_steps/how_css_is_structured/index.html
new file mode 100644
index 0000000000..d2c60edcfb
--- /dev/null
+++ b/files/ru/learn/css/first_steps/how_css_is_structured/index.html
@@ -0,0 +1,528 @@
+---
+title: Как структурирован CSS
+slug: Learn/CSS/First_steps/Как_структурирован_CSS
+tags:
+  - Beginner
+  - CSS
+  - HTML
+  - Learn
+  - Комментарии
+  - Обучение
+  - Свойство
+  - Структура
+  - значения
+  - отступ
+  - селектор
+  - сокращение
+translation_of: Learn/CSS/First_steps/How_CSS_is_structured
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary">Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Базовое програмное обеспечение</a>, базовые знания <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работа с файлами</a>, и базовые знания HTML (статья <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>), и знание о том <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>Подробно узнать основные синтаксические структуры CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Применение_CSS_к_вашему_HTML">Применение CSS к вашему HTML</h2>
+
+<p>Первое, что мы рассмотрим, это три метода применения CSS к документу.</p>
+
+<h3 id="Внешняя_таблица_стилей">Внешняя таблица стилей</h3>
+
+<p>В статье ​<a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a> мы связывали внешнюю таблицу стилей с нашей страницей. Это самый распространенный и полезный способ крепления CSS к документу, так вы можете привязать CSS сразу к нескольким страницам, что позволяет стилизовать их всё с той же таблицей стилей. В большинстве случаев различные страницы сайта будут выглядеть почти так же, поэтому вы можете использовать один и тот же набор правил для основного вида.</p>
+
+<p>Внешняя таблица стилей - это когда у вас есть CSS отдельным файлом с расширением <code>.css</code>, и ссылка на него из HTML-элемента <code>&lt;link&gt;</code>:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Я пробую писать CSS&lt;/title&gt;
+    &lt;link rel="stylesheet" href="styles.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Привет!&lt;/h1&gt;
+    &lt;p&gt;Это мой первый опыт в CSS&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Файл CSS может выглядеть следующим образом:</p>
+
+<pre class="brush: css notranslate">h1 {
+  color: blue;
+  background-color: yellow;
+  border: 1px solid black;
+}
+
+p {
+  color: red;
+}</pre>
+
+<p>Атрибут <code>href</code> элемента {{htmlelement("link")}} должен ссылаться на файл в файловой системе.</p>
+
+<p>В приведенном выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:</p>
+
+<pre class="brush: html notranslate">&lt;!-- Файл находится внутри под-директории <em>styles</em>, находящейся в текущей директории --&gt;
+&lt;link rel="stylesheet" href="styles/style.css"&gt;
+
+&lt;!-- Файл — внутри под-директории <em>styles</em> внутри под-под-директории <em>general</em> и так далее --&gt;
+&lt;link rel="stylesheet" href="styles/general/style.css"&gt;
+
+&lt;!-- Вверх на один уровень в директории, затем направиться в под-директорию <em>styles</em> --&gt;
+&lt;link rel="stylesheet" href="../styles/style.css"&gt;</pre>
+
+<h3 id="Внутренняя_таблица_стилей">Внутренняя таблица стилей</h3>
+
+<p>Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента {{htmlelement("style")}}, содержащейся внутри HTML {{htmlelement("head")}}.</p>
+
+<p>Таким образом, HTML будет выглядеть вот так:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Я пробую писать CSS&lt;/title&gt;
+    &lt;style&gt;
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1&gt;Привет!&lt;/h1&gt;
+    &lt;p&gt;Это мой первый опыт в CSS&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Это может быть полезно в некоторых обстоятельствах (возможно, вы работаете с системой управления контентом, где вы не можете изменить CSS-файлы непосредственно), но это менее эффективно, чем внешние таблицы стилей: CSS будет необходимо прописывать отдельно для каждой страницы и изменять, если требуются изменения.</p>
+
+<h3 id="Встроенные_стили">Встроенные стили</h3>
+
+<p>Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте <code>style</code>:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Я пробую писать CSS&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;h1 style="color: blue;background-color: yellow;border: 1px solid black;"&gt;Привет!&lt;/h1&gt;
+    &lt;p style="color:red;"&gt;Это мой первый опыт в CSS&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>Пожалуйста, не делайте этого! </strong>Это очень плохо для технического обслуживания (вам, возможно, придётся обновить одну и ту же информацию несколько раз в одном документе), а также смешивает ваши презентационные данные CSS с структурной информацией HTML, что делает код трудным для чтения и понимания. Хранение различных типов кода отделено делает работу гораздо более лёгкой для всех, кто работает над кодом.</p>
+
+<p>Есть несколько мест, где встроенные стили являются более распространенными или даже желательными. Вам, возможно, придется прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.</p>
+
+<h2 id="Игра_с_CSS_в_этой_статье">Игра с CSS в этой статье</h2>
+
+<p>Существует много возможностей, чтобы поиграть с CSS в этой статье. Для этого мы рекомендуем создать новый каталог / папку на вашем компьютере и внутри него создать копии следующих двух файлов:</p>
+
+<p>index.html:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang="ru"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Я пробую писать CSS&lt;/title&gt;
+    &lt;link rel="stylesheet" href="styles.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+    &lt;p&gt;Пишите сюда свой код&lt;/p&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>styles.css:</p>
+
+<pre class="brush: css notranslate">/* Пишите сюда свой код */
+
+p {
+  color: red;
+}</pre>
+
+<p>Затем, когда вы столкнетесь с CSS и захотите поэкспериментировать со стилями, измените содержимое <code>&lt;body&gt;</code> HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.</p>
+
+<p>Если вы не используете систему, в которой вы можете легко создавать файлы, вы можете вместо этого использовать интерактивный редактор ниже чтобы экспериментировать.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} </p>
+
+<p>Читайте дальше и получайте удовольствие!</p>
+
+<h2 id="Селекторы">Селекторы</h2>
+
+<p>Говоря о CSS, нельзя не упомянуть о селекторах, о некоторых типах которых мы уже говорили в руководстве <a href="/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a>. Селектор — это то, как мы обозначаем что-либо в нашем HTML-документе, чтобы стилизовать его. Если стиль не применился, то это, скорее всего, потому, что селектор в таблицах стилей не совпал с тем, что в HTML-документе.</p>
+
+<p>Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:</p>
+
+<pre class="brush: css notranslate">h1  /* это селектор тегов */
+a:link  /* это селектор ссылок */
+.manythings  /* это селектор классов (классы применяются тогда, когда необходимо применить правило к нескольким элементам) */
+#onething  /* это селектор идентификаторов (они применяются, когда правило относится к одному элементу) */
+*  /* уневерсальный селектор */
+.box p  /* селектор потомков */
+.box p:first-child  /* селектор потомков + селектор псевдоклассов */
+h1, h2, .intro  /* пречисление селекторов */
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Вы узнаете больше о селекторах в руководстве <a href="/ru/docs/Web/CSS/CSS_%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">CSS-селекторы</a> в следующем модуле.</p>
+</div>
+
+<h3 id="Спецификация">Спецификация</h3>
+
+<p>Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента <code>p</code> — он будет синим; также я задал класс, который сделает элемент красным:</p>
+
+<pre class="brush: css notranslate">.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}</pre>
+
+<p>А теперь допустим, что в нашем HTML-коде у нас есть абзац <code>p</code> с классом <code>special</code>. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?</p>
+
+<pre class="brush: html notranslate">&lt;p class="special"&gt;Какого же я цвета?&lt;/p&gt;</pre>
+
+<p>В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются <strong>каскадами</strong>, или <strong>спецификациями</strong>. В примере ниже мы задали два правила для селектора <code>p</code>, но в итоге текст будет синим: объвление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}
+
+p {
+  color: blue;
+}</pre>
+
+<p>А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.</p>
+
+<p><strong>Попрактикуйтесь сами — добавьте два правила для параграфа <code>p { ... }</code> в вашу таблицу стилей. Затем добавьте класс к одному элементу <code>p</code> и попробуйте применить к нему какой-нибудь стиль.</strong></p>
+
+<p>Понимание каскадов, или правил, улучшается с практикой. В статье <a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a> я хорошенько объясню, как определить уровень спецификации. А пока что запомните, что иногда CSS не применяется так, как вы того хотели бы, так как у чего-то в таблице стилей больший уровень спецификации.</p>
+
+<h2 id="Свойства_и_значения">Свойства и значения</h2>
+
+<p>Если говорить в общем, CSS строится на двух его составляющих:</p>
+
+<dl>
+ <dt><strong>Свойства</strong> </dt>
+ <dd>Определяют, какую характеристику вы желаете изменить (например, <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>).</dd>
+</dl>
+
+<dl>
+ <dt>Значения </dt>
+ <dd>Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.</dd>
+</dl>
+
+<p>На изображении внизу выделены свойство и его значение. Здесь свойство — <code>color</code>, а его значение — <code>blue</code>.</p>
+
+<p><img alt="A declaration highlighted in the CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>Свойство вкупе со значением называется <em>CSS-объявлением</em>. CSS-объявления помещаются внутри <em>блока объявлений CSS</em>. Ниже показан наш CSS-код с выделенным блоком объявлений.</p>
+
+<p><img alt="A highlighted declaration block" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>Наконец блок объявлений воссоединяется с <em>селекторами</em>, образуя <em>CSS-правила</em>. Наше изображение содержит два правила — одно для селектора <code>h1</code>, другое для селектора <code>p</code>. Правило для <code>h1</code> выделено.</p>
+
+<p><img alt="The rule for h1 highlighted" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+
+<p>Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием (<code>:</code>).</p>
+
+<p><strong>Попробуйте подобрать нужные значения к следующим свойствам, а свойства добавить в ваш код: </strong></p>
+
+<ul>
+ <li><strong>{{cssxref("font-size")}}</strong></li>
+ <li><strong>{{cssxref("width")}}</strong></li>
+ <li><strong>{{cssxref("background-color")}}</strong></li>
+ <li><strong>{{cssxref("color")}}</strong></li>
+ <li><strong>{{cssxref("border")}}</strong></li>
+</ul>
+
+<div class="warning">
+<p><strong>Важно</strong>: Если свойство или значение не определено, то объявление считается <em>недействительным</em> — и будет попросту проигнорировано.</p>
+</div>
+
+<div class="warning">
+<p><strong>Важно</strong>: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, <code>color</code> надо <em>всегда</em> писать <code>color</code>; британский вариант <code>colour</code> не будет работать.</p>
+</div>
+
+<h3 id="Функции">Функции</h3>
+
+<p>Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию <code>calc()</code>. Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:</p>
+
+<div id="calc_example">
+<pre class="brush: html notranslate">&lt;div class="outer"&gt;&lt;div class="box"&gt;The inner box is 90% - 30px.&lt;/div&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}</pre>
+</div>
+
+<p>В результате получим это:</p>
+
+<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p>
+
+<p>Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!</p>
+
+<p>В следующем примере будут различные значения для свойства {{cssxref("&lt;transform&gt;")}} <code>rotate()</code>.</p>
+
+<div id="transform_example">
+<pre class="brush: html notranslate">&lt;div class="box"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn)
+}</pre>
+</div>
+
+<p>Результат этого кода будет:</p>
+
+<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p>
+
+<p><strong>Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл: </strong></p>
+
+<ul>
+ <li><strong>{{cssxref("transform")}}</strong></li>
+ <li><strong>{{cssxref("background-image")}}, в частности со значениями градиента</strong></li>
+ <li><strong>{{cssxref("color")}},в частности со значениями rgb/rgba/hsl/hsla</strong></li>
+</ul>
+
+<h2 id="правила">@правила</h2>
+
+<p>До сих пор не сталкивались мы с правилами <code><a href="/en-US/docs/Web/CSS/At-rule">@rules</a></code> (произносится как <em>эт-рулс</em>, от английского "at-rules"). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил <code>@rules</code> простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать <code>@import</code>:</p>
+
+<pre class="brush: css notranslate">@import 'styles2.css';</pre>
+
+<p>Чаще других встречается <code>@rules</code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> под названием </span></font><code>@media</code>: оно позволяет вам использовать <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиа-запросы</a>, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).</p>
+
+<p>Ниже у нас CSS-файл, в котором значение заднего фона элемента <code>&lt;body&gt;</code> равно <code>pink</code>. Однако после мы добавили правило <code>@media</code>, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.</p>
+
+<pre class="brush: css notranslate">body {
+  background-color: pink;
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}</pre>
+
+<p>Вы столкнётесь и с другими правилами <code>@rules</code> в продолжение следующих уроков.</p>
+
+<p><strong>Добавьте правило, которое изменяет стиль элемента, основываясь на ширине окна. Измените ширину окна, чтобы увидеть результат.</strong></p>
+
+<h2 id="Стенография">Стенография</h2>
+
+<p>Некоторые свойства вроде {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} и {{cssxref("margin")}} называются <em>стенографическими свойствами</em>, — они позволяют установать несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.</p>
+
+<p>К примеру, это строка (комментарий не в счёт):</p>
+
+<pre class="brush: css notranslate">/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются
+   в порядке верх–право–низ–лево (по часовой стрелке сверху). В трёхзначных стенограммах
+   значения добавляются в порядке верх(низ)–право–лево.
+   В двузначных стенограммах значения добавляются
+   от верхнего/нижнего края к левому/правому краю */
+padding: 10px 15px 15px 5px;</pre>
+
+<p>делает то же самое, что и эти четыре, вместе взятые:</p>
+
+<pre class="brush: css notranslate">padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;
+</pre>
+
+<p>или эти:</p>
+
+<pre class="brush: cpp notranslate">padding-block-start: 10px
+padding-inline-end: 15px;
+padding-block-end: 15px;
+padding-inline-start: 5px;</pre>
+
+<p>в то время как строка:</p>
+
+<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre>
+
+<p>делает то же, что и эти строки:</p>
+
+<pre class="brush: css notranslate">background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-scroll: fixed;</pre>
+
+<p>Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в <a href="/ru/docs/Web/CSS/Reference">Руководстве по CSS</a>.</p>
+
+<p><strong>Добавьте вышеупоминутые объвления в ваш код. Попробуйте изменить значения и посмотреть на результат.</strong></p>
+
+<div class="blockIndicator warning">
+<p><strong>Осторожно</strong>: Стенографии позволяют пропускать некоторые величины, и это может отразиться на результате недолжным образом.</p>
+</div>
+
+<h2 id="Комментарии">Комментарии</h2>
+
+<p>Как и в HTML, вы можете делать комментарии, чтобы прояснить тот или иной отрывок кода.</p>
+
+<p>Комментарии в CSS начинаются с <code>/*</code> и окачиваются с <code>*/</code>. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.</p>
+
+<pre class="brush: css notranslate">/* Работаю над основными элементами */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* Позволяет определить размер шрифта. На широких экранах
+     больше размер шрифта для удобства чтения */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* Работаю над элементами, вложенными в DOM  */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  background-style: none
+}
+
+div p{
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}</pre>
+
+<p>Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора <code>.special</code>.</p>
+
+<pre class="brush: css notranslate">/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}</pre>
+
+<p><strong>Добавьте комментарии в ваш CSS-код, чтобы приноровиться к ним.</strong></p>
+
+<h2 id="Отступы">Отступы</h2>
+
+<p>Под отступами подразумеваются пробелы, табуляция и перенос на новую строку. Как и в HTML, браузер будет стараться игнорировать большие отступы в CSS-коде; к тому же большие отступы пагубны для читаемости кода.</p>
+
+<p>В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:</p>
+
+<pre class="brush: css notranslate">body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+div p,
+#id:first-line {
+  background-color: red;
+  background-style: none
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+</pre>
+
+<p id="Very_compact">То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:</p>
+
+<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+@media (min-width: 70em) { body {font-size: 130%;} }
+
+h1 {font-size: 1.5em;}
+
+div p, #id:first-line {background-color: red; background-style: none}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+</pre>
+
+<p>Как вы будете оформлять код — решать вам; хотя, работая в команде, вы обнаружите, что она придерживается тех правил форматирования, которые в ней утверждены.</p>
+
+<p>Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:</p>
+
+<pre class="brush: css notranslate">margin: 0 auto;
+padding-left: 10px;</pre>
+
+<p>А такие объявления не действительны:</p>
+
+<pre class="brush: css notranslate">margin: <strong>0auto</strong>;
+<strong>padding- left</strong>: 10px;</pre>
+
+<p>Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.</p>
+
+<p><strong>Добавьте отступы в ваш код и посмотрите, что повлияет на код, а что нет.</strong></p>
+
+<h2 id="Что_дальше">Что дальше?</h2>
+
+<p>Полезно знать, как браузер делает из HTML и CSS готовую страницу, поэтом следующая ваша статья — <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a> — мы рассмотрим этот процесс.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ol>
+ <li><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS">Что такое CSS?</a></li>
+ <li><a href="/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS">Как структурирован CSS</a></li>
+ <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li>
+ <li><a href="/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Использование ваших новых знаний</a></li>
+</ol>