diff options
Diffstat (limited to 'files/ru/learn/css/first_steps/how_css_is_structured')
| -rw-r--r-- | files/ru/learn/css/first_steps/how_css_is_structured/index.html | 528 |
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><link></code>:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Я пробую писать CSS</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + <h1>Привет!</h1> + <p>Это мой первый опыт в CSS</p> + </body> +</html></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"><!-- Файл находится внутри под-директории <em>styles</em>, находящейся в текущей директории --> +<link rel="stylesheet" href="styles/style.css"> + +<!-- Файл — внутри под-директории <em>styles</em> внутри под-под-директории <em>general</em> и так далее --> +<link rel="stylesheet" href="styles/general/style.css"> + +<!-- Вверх на один уровень в директории, затем направиться в под-директорию <em>styles</em> --> +<link rel="stylesheet" href="../styles/style.css"></pre> + +<h3 id="Внутренняя_таблица_стилей">Внутренняя таблица стилей</h3> + +<p>Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента {{htmlelement("style")}}, содержащейся внутри HTML {{htmlelement("head")}}.</p> + +<p>Таким образом, HTML будет выглядеть вот так:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Я пробую писать CSS</title> + <style> + h1 { + color: blue; + background-color: yellow; + border: 1px solid black; + } + + p { + color: red; + } + </style> + </head> + <body> + <h1>Привет!</h1> + <p>Это мой первый опыт в CSS</p> + </body> +</html></pre> + +<p>Это может быть полезно в некоторых обстоятельствах (возможно, вы работаете с системой управления контентом, где вы не можете изменить CSS-файлы непосредственно), но это менее эффективно, чем внешние таблицы стилей: CSS будет необходимо прописывать отдельно для каждой страницы и изменять, если требуются изменения.</p> + +<h3 id="Встроенные_стили">Встроенные стили</h3> + +<p>Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте <code>style</code>:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Я пробую писать CSS</title> + </head> + <body> + <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Привет!</h1> + <p style="color:red;">Это мой первый опыт в CSS</p> + </body> +</html></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"><!DOCTYPE html> +<html lang="ru"> + <head> + <meta charset="utf-8"> + <title>Я пробую писать CSS</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + + <p>Пишите сюда свой код</p> + + </body> +</html></pre> + +<p>styles.css:</p> + +<pre class="brush: css notranslate">/* Пишите сюда свой код */ + +p { + color: red; +}</pre> + +<p>Затем, когда вы столкнетесь с CSS и захотите поэкспериментировать со стилями, измените содержимое <code><body></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"><p class="special">Какого же я цвета?</p></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"><div class="outer"><div class="box">The inner box is 90% - 30px.</div></div></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("<transform>")}} <code>rotate()</code>.</p> + +<div id="transform_example"> +<pre class="brush: html notranslate"><div class="box"></div></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><body></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> |