Изучите эти интерактивные руководства, чтобы изучить основы просмотра и изменения CSS страницы с помощью Chrome DevTools.
Просмотр CSS элемента
Щелкните правой кнопкой мыши «
Inspect me!
текст ниже и выберите «Проверить» . Откроется панель «Элементы» DevTools.Осмотрите меня!
Обратите внимание: «
Inspect me!
элемент, выделенный синим цветом в дереве DOM .В дереве DOM найдите значение атрибута
data-message
дляInspect me!
элемент.Введите значение атрибута в текстовое поле ниже.
На панели «Элементы» > «Стили» найдите правило класса
aloha
.На панели «Стили» перечислены правила CSS, применяемые к любому элементу, выбранному в дереве DOM , который по-прежнему должен быть элементом
Inspect me!
элемент.Класс
aloha
объявляет значение дляpadding
. Введите это значение и его единицу измерения без пробелов в текстовое поле ниже.
Если вы хотите закрепить окно DevTools справа от области просмотра, как на снимке экрана на первом шаге, см. раздел Изменение размещения DevTools .
Добавьте объявление CSS к элементу
Используйте панель «Стили» , если вы хотите изменить или добавить объявления CSS к элементу.
Щелкните правой кнопкой мыши
Add a background color to me!
текст ниже и выберите «Проверить» .Добавьте мне цвет фона!
Нажмите
element.style
в верхней части панели «Стили» .Введите
background-color
и нажмите Enter .Введите
honeydew
и нажмите Enter . В дереве DOM вы можете видеть, что к элементу было применено объявление встроенного стиля.
Добавьте класс CSS к элементу
Используйте панель «Стили» , чтобы увидеть, как выглядит элемент, когда класс CSS применяется к элементу или удаляется из него.
Щелкните правой кнопкой мыши
Add a class to me!
элемент ниже и выберите «Проверить» .Добавьте мне класс!
Нажмите .cls . DevTools открывает текстовое поле, в котором вы можете добавить классы к выбранному элементу.
Введите
color_me
в текстовом поле «Добавить новый класс» и нажмите Enter. Под текстовым полем «Добавить новый класс» появится флажок, в котором вы можете включать и выключать класс. Если «Add a class to me!
к элементу были применены какие-либо другие классы, вы также сможете переключать их отсюда.
Добавить псевдосостояние в класс
Используйте панель «Стили» , чтобы применить псевдосостояние CSS к элементу. DevTools поддерживает :active
, :focus
, :focus-within
, :target
, :hover
, :visited
или focus-visible
.
Наведите
Hover over me!
текст ниже. Цвет фона изменится.Нависай надо мной!
Щелкните правой кнопкой мыши
Hover over me!
текст и выберите «Проверить» .На панели «Стили» нажмите :hov .
Установите флажок :hover . Цвет фона изменится, как и раньше, даже если вы на самом деле не наводите курсор на элемент.
Изменение размеров элемента
Используйте интерактивную диаграмму «Блочная модель» на панели «Стили» , чтобы изменить ширину, высоту, отступы, поля или длину границы элемента.
Щелкните правой кнопкой мыши
Change my margin!
элемент ниже и выберите «Проверить» .Измените мою маржу!
Чтобы увидеть блочную модель , нажмите кнопку Показывать кнопку боковой панели на панели действий на панели «Стили» .
На диаграмме «Блоковая модель» на панели «Стили» наведите указатель мыши на отступы. Заполнение элемента выделяется в области просмотра.
Дважды щелкните левое поле в блочной модели . В настоящее время элемент не имеет полей, поэтому
margin-left
имеет значение-
.Введите
100
и нажмите Enter .
В блочной модели по умолчанию используются пиксели, но она также принимает и другие значения, например 25%
или 10vw
.