Как работает CSS

Перейти к предыдущему разделу:
Зачем нужен CSS? Это третья статья руководства по CSS для начинающих, объясняет, как работает CSS в вашем браузере, а также назначение Объектной Модели Документа (Document Object Model или DOM). Вы также узнаете, как сделать анализ документа.

Информация: Как работает CSS

Когда браузер отображает документ, он должен совместить содержимое документа с информацией о стилях для него. Браузер обрабатывает документ в два этапа:

Браузер преобразует язык разметки и CSS в DOM (Document Object Model). DOM представляет собой документ в памяти компьютера. Он сочетает в себе содержание документа с его стилем.
Браузер отображает содержимое DOM.

Язык разметки использует элементы для определения структуры документа. Элемент обозначается с использованием тегов, которые представляют собой строки, начинающиеся с символа '<' и заканчивающиеся '>'. Большинство элементов имеет парные теги: открывающий тег и закрывающий тег. Для открывающего тега, поместите имя элемента между '<' и '>'. Для закрывающего тега, поместите '/' между '<', и именем элемента.

В зависимости от языка разметки, некоторые элементы имеют только начальный тег, или тег, где '/' располагается после имени элемента. Элемент так же может быть контейнером, включающим в себя другие элементы. В этом случае они располагаются между открывающим и закрывающим тегами. Не забывайте всегда закрывать теги внутри контейнера.

DOM имеет древовидную структуру. Каждый элемент, атрибут и запуск текста на языке разметки становится узлом в древовидной структуре. Узлы определяются их взаимодействием с другими узлами DOM. Некоторые элементы становятся родительскими по отношению к другим, дочерним узлам (или узлам-потомкам). В свою очередь, дочерние узлы имеют "братьев" (siblings).

Понимание DOM поможет вам при разработке, отладке и поддержке CSS, поскольку DOM это место, где встречаются CSS и содержимое документа.

Пример

В данном примере, тег <p> и его закрывающий тег </p> создают контейнер:

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

Живой пример

В DOM соответствующий узел P является родительским. Его дочерние узлы - это теги STRONG и узлы текста. Теги STRONG, в свою очередь, являются родительскими по отношению к текстовым узлам, которые являются их дочерними узлами:

P
├─STRONG
│ └─"C"
├─"ascading"
├─STRONG
│ └─"S"
├─"tyle"
├─STRONG
│ └─"S"
└─"heets"

К действию: Анализ DOM

Использование DOM Inspector

Для анализа DOM, вам потребуется специальная программа. Вы можете использовать расширение DOM Inspector (DOMi) от Mozilla для анализа DOM. Вам просто нужно установить это расширение в браузере (подробнее см. ниже).

Используйте браузер Mozilla, чтобы открыть свой HTML-документ.
Из строки меню браузера выберите Инструменты > DOM инспектор, или Инструменты > Веб-разработка > Инспектор.

Подробнее

Если в вашем браузере Mozilla не установлен DOMi, вы можете установить его с сайта дополнений и перезапустить браузер. Затем возвращайтесь к этому руководству.

Если вы не хотите устанавливать DOMi (или вы используете браузер не от Mozilla), то можете воспользоваться Рентген-очками, как описано в секции ниже. Или вы можете пропустить эту секцию и перейти к прямо к следующей странице. Если вы пропустите данный раздел, это не помешает вам в дальнейшем освоении руководства.
В DOMi разверните узлы вашего документа, нажав на их стрелки.
Замечание: Пустые места в вашем HTML файле DOMi может отображать как пустые текстовые узлы, которые можно игнорировать.

Часть результата может выглядеть следующим образом, в зависимости от того, какие узлы вы развернули:
```
│ ▼╴P
│ │ │ ▼╴STRONG
│ │ └#text
│ ├╴#text
│ ►╴STRONG
│ │
```
При выборе любого узла, вы можете использовать правую панель DOMi's для поиска информации об узле. Например, когда вы выбираете текстовый узел, DOMi показывает вам текст в соответствующей панели.

При выборе узла элемента, DOMi анализирует его и предоставляет огромное количество информации, которая содержится в правой панели. Информация о стилях - лишь часть информации, которую там можно просмотреть.

Задача

В DOMi, кликните на узле STRONG.

Используйте правую панель ДОМи, чтобы выяснить, где цвет для этого узла установлен на красный, и где его внешний вид сделан толще, чем обычный текст.

Possible solution

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

Hide solution

Посмотреть решение задачи.

Использование Рентген-очков

Рентген-очки показывают меньше информации, чем DOM Инспектор, но проще в установке и использовании.

Перейдите на домашнюю страницу X-Ray Goggles.
Перетащите ссылку X-Ray Googles с этой страницы на панель закладок.
Откройте HTML-документ.
Запустите Рентген-очки, кликнув по появившейся закладке.
Передвигайте курсор мыши по документу для просмотра элементов в документе.

Что дальше?

Перейти к следующему разделу:
Каскадность и наследованиеЕсли вы решили задачу, то увидели, что информация о стиле из более чем одного места взаимодействует для создания окончательного стиля для элемента. На следующей странице объясняется больше об этих взаимодействиях.