path: root/files/ru/learn/css/first_steps/как_структурирован_css/index.html

---
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>