Урок 6 из 53 · 8 мин

DevTools: стили под микроскопом

Как посмотреть, какие правила применились, и править стили прямо в браузере.

Рентген

Как понять, откуда взялся этот отступ?
Бро
Спроси меня через DevTools. Я покажу все правила элемента, кто победил и откуда он взялся.

Понятие

Elements → Styles

Что это: Правый клик → «Просмотреть код» → панель Styles: все правила элемента, проигравшие зачёркнуты.
Зачем: Главный способ понять, почему стиль не работает.

Понятие

Computed

Что это: Вкладка Computed: итоговое значение каждого свойства и правило-источник.
Зачем: Видно, откуда взялся каждый пиксель.

Понятие

Блочная модель в DevTools

Понятие

Правка вживую

Что это: Значения в Styles можно менять, добавлять свойства и переключать галочки.
Зачем: Подобрать цвет или отступ за секунды, потом перенести в код.

Ваш ход

Задание

У заголовка лишний огромный отступ сверху из правила h1 { margin-top: 80px; }. Исправь его на 16px.

<style>
h1 { margin-top: 80px; color: #6b3e26; }
</style>
<h1>Мой сайт</h1>

<style>
h1 { margin-top: 80px; color: #6b3e26; }
</style>
<h1>Мой сайт</h1>

Результат обновляется при вводе

ПрактикаОбязательное задание

Выберите один ответ.

Что значит зачёркнутое объявление в панели Styles?

Домашнее заданиеДля закрепления

Выберите один ответ.

Где посмотреть итоговое значение свойства элемента?