MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

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

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

  1. Браузер преобразует язык разметки и CSS в DOM (Document Object Model). DOM представляет собой документ в памяти компьютера. Он сочетает в себе содержание документа с его стилем.
  2. Браузер отображает содержимое 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. Вам просто нужно установить это расширение в браузере (подробнее см. ниже).

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

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

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

  3. В 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 Инспектор, но проще в установке и использовании.

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

Что дальше?

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

Метки документа и участники

 Внесли вклад в эту страницу: BychekRU, F-302
 Обновлялась последний раз: BychekRU,