path: root/files/ru/learn/css/first_steps/how_css_works/index.html

---
title: Как работает CSS
slug: Learn/CSS/First_steps/How_CSS_works
tags:
  - Beginner
  - CSS
  - DOM
  - DOM дерево
  - Learn
  - Начинающий
  - Обучение
  - дерево
translation_of: Learn/CSS/First_steps/How_CSS_works
---
<p>{{LearnSidebar}}<br>
 {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>

<p class="summary">Мы уже изучили основы CSS, для чего он нужен и как создавать простые таблицы стилей. В этом уроке мы посмотрим, как браузер обрабатывает CSS и HTML и выводит содержимое на веб-страницу.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Необходимые знания:</th>
   <td>Основы компьютерной грамотности, <a href="/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения">базовое программное обеспечение</a>, умение <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">умение работать с файлами</a> и начальные знания HTML (рекомендуется изучить <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>).</td>
  </tr>
  <tr>
   <th scope="row">Задача:</th>
   <td>Понимать основы того, как браузер анализирует CSS и HTML и что происходит когда браузер встречает неизвестные CSS стили</td>
  </tr>
 </tbody>
</table>

<h2 id="Как_работает_CSS">Как работает CSS?</h2>

<p>Когда браузер отображает документ, он должен совместить его содержимое с его стилями. Этот процесс идёт в несколько этапов, о которых мы сейчас поговорим. Держите в уме, что это очень упрощённая версия того как браузер действительно загружает веб-страницу, а также то, что разные браузеры делают это по разному. Но, происходит, грубо говоря, следующее:</p>

<ol>
 <li>Браузер получает HTML-страницу (например, из Интернета)</li>
 <li>Преобразует {{Glossary("HTML")}} в {{Glossary("DOM")}} (<em>Document Object Model</em>). DOM (или DOM-дерево) - это представление страницы в памяти компьютера. Подробнее на DOM мы остановимся чуть позже.</li>
 <li>Затем браузер забирает все ресурсы и описания, связанные с HTML-документом, например: встроенные картинки, видео ... и  стили CSS! JavaScript присоединяется чуть позже и мы пока не будем говорить об этом, чтобы все не усложнять.</li>
 <li>После этого браузер анализирует полученный CSS код, сортирует описанные там правила в зависимости от их селекторов и раскладывает их в различные «корзины»: элементы, классы, идентификаторы(ID) и т.п. Основываясь на найденных селекторах браузер понимает какие правила относятся к определённым «узлам» в DOM-дереве и применяет их по мере необходимости (этот промежуточный шаг называют «формированием дерева представления» или «формированием дерева рендеринга»)</li>
 <li>Дерево представления (<em>render tree</em>) формируется в том порядке, в каком оно затем должно будет отображаться, когда все правила будут применены.</li>
 <li>Затем происходит визуальное отображение контента на странице (этот этап называется «отрисовкой»)</li>
</ol>

<p>Диаграмма демонстрирует этот процесс.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/17080/Browser_simple_rendering_pipeline__ru.png" style="height: 655px; max-width: 635px; width: 1366px;"></p>

<h2 id="DOM-дерево">DOM-дерево</h2>

<p>DOM напоминает дерево. Каждый элемент, атрибут, отрывок текста становится {{Glossary("Node/DOM","DOM node")}} в разметке. DOM-узлы определяются их отношением с другими узлами. Некоторые родительские элементы имеют дочерние, а у дочерних элементов есть братские.</p>

<p>Понимание DOM позволит вам разрабатывать, отлаживать и поддерживать ваш CSS, потому что именно в DOM-дереве ваши таблицы стилей и код встречаются. Когда вы начнёте работать с браузерным DevTools(инструменты для разработки) вы будете перемещаться по DOM при выборе элементов чтобы увидеть какие правила применяются.</p>

<h2 id="A_real_DOM_representation">Как представлено DOM-дерево</h2>

<p>Вместо длинного, нудного объяснения взглянем лучше на пример, чтобы понять, как HTML-код преобразуется в DOM.</p>

<p>Возьмём следующий пример:</p>

<pre class="brush: html">&lt;p&gt;
  Let's use:
  &lt;span&gt;Cascading&lt;/span&gt;
  &lt;span&gt;Style&lt;/span&gt;
  &lt;span&gt;Sheets&lt;/span&gt;
&lt;/p&gt;
</pre>

<p>В DOM-дереве узел, соответствующий элементу <code>&lt;p&gt;</code>, — это родительский элемент. Его дочерние элементы — текст и три элемента <code>&lt;span&gt;</code>. Узлы <code>SPAN</code> также будут родителями — с текстом в качестве дочерних элементов:</p>

<pre>P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"
</pre>

<p>Вот как браузер преобразует HTML-код — он загружает DOM-дерево, и в результате мы получим это:</p>

<p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p>

<div class="hidden">
<pre class="brush: css">p {margin:0;}</pre>
</div>

<h2 id="Добавление_CSS_в_DOM">Добавление CSS в DOM</h2>

<p>Допустим, мы добавили таблицу стилей к нашему примеру:</p>

<pre class="brush: html">&lt;p&gt;
  Let's use:
  &lt;span&gt;Cascading&lt;/span&gt;
  &lt;span&gt;Style&lt;/span&gt;
  &lt;span&gt;Sheets&lt;/span&gt;
&lt;/p&gt;</pre>

<p>А вот CSS-код:</p>

<pre class="brush: css">span {
  border: 1px solid black;
  background-color: lime;
}</pre>

<p>Браузер загрузит HTML-код, преобразует его в DOM и только потом загрузит CSS. Так как у нас всего одно правило,  браузер загрузит CSS очень быстро! Это правило будет добавлено к каждому из трёх элементов <code>&lt;span&gt;</code>. После этого информация будет отображена на экране.</p>

<p>Новый результат:</p>

<p>{{EmbedLiveSample('Добавление_CSS_в_DOM', '100%', 55)}}</p>

<p>В статье <a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a> мы будем использовать браузер DevTools для отладки CSS.</p>

<h2 id="Что_происходит_когда_браузер_не_понимает_CSS">Что происходит, когда браузер не понимает CSS?</h2>

<p><a href="/ru/docs/Learn/CSS/First_steps/Что_такое_CSS#Поддержка_браузера">В предыдущем уроке</a> я упомянул, что некоторые браузеры могут не поддерживать новые функции CSS. Вдобавок не все используют новейшие версии браузеров. Зная, что CSS разрабатывается всё время, вы можете поразиться и крайне ужаснуться тому, что происходит, если браузер не распознаёт объявление или селектор. Что же произойдёт?</p>

<p>— Да ничего: браузер просто пропустит это!</p>

<p>Если браузер встретит свойство, которое он не понимает, он просто-напросто проигнорирует его и двинется дальше. Он сделает так, если вы допустите опечатку или ошибку в свойстве или значении или если он не поддерживает какое-либо свойство или значение.</p>

<p>Если же браузер встретит селектор, который он не распознаёт, то он просто пропустит данное правило и двинется дальше.</p>

<p>Ниже я использовал британское написание слова <em>color</em>, что делает свойство некорректным. Поэтому текст не будет синим. Однако всё остальное будет работать; пропущено только недействительное свойство.</p>

<div id="Skipping_example">
<pre class="brush: html">&lt;p&gt; I want this text to be large, bold and blue.&lt;/p&gt;</pre>

<pre class="brush: css">p {
  font-weight: bold;
  colour: blue; /* некорректное написание свойства цвета */
  font-size: 200%;
}</pre>
</div>

<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p>

<p>Такое поведение можно использовать, например, при добавлении новых функций CSS в качестве дополнения, причём вы будете уверены, что ничего не сломается, если браузер не распознает элемент. Вы можете использовать два правила с одинаковыми уровнями спецификации: одно — в качестве альтернативы для случая, если браузер не поддерживает нововведение.</p>

<p>Это хорошо применяется, если вы хотите использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают <code>calc()</code> как значение. Я добавлю резерв — значение в px, затем задам ширину с помощью функции <code>calc()</code>, равной <code>100% - 50px</code>. Старые браузеры используют пиксельное значение, потому что не распознают <code>calc()</code>. Новые браузеры используют <code>calc()</code> так как эта строка появляется позже в каскаде.</p>

<pre class="brush: css">.box {
  width: 500px;
  width: calc(100% - 50px);
}</pre>

<h2 id="Завершение">Завершение</h2>

<p>Вы почти закончили модуль; осталось только одно. В следующей статье вы попрактикуетесь в <a href="/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge">использовании ваших новых знаний</a>.</p>

<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>

<h2 id="В_этом_модуле">В этом модуле</h2>

<ol>
 <li><a href="/ru/docs/Learn/CSS/First_steps/Что_такое_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="/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>