Просмотр и изменение CSS

Kayce Basques

Sofia Emelianova

Изучите эти интерактивные руководства, чтобы изучить основы просмотра и изменения CSS страницы с помощью Chrome DevTools.

Просмотр CSS элемента

1. Щелкните правой кнопкой мыши « Inspect me! текст ниже и выберите «Проверить» . Откроется панель «Элементы» DevTools.

   Осмотрите меня!

2. Обратите внимание: « Inspect me! элемент, выделенный синим цветом в дереве DOM .

   

3. В дереве DOM найдите значение атрибута data-message для Inspect me! элемент.

4. Введите значение атрибута в текстовое поле ниже.

5. На панели «Элементы» > «Стили» найдите правило класса aloha .

   На панели «Стили» перечислены правила CSS, применяемые к любому элементу, выбранному в дереве DOM , который по-прежнему должен быть элементом Inspect me! элемент.

6. Класс aloha объявляет значение для padding . Введите это значение и его единицу измерения без пробелов в текстовое поле ниже.

Если вы хотите закрепить окно DevTools справа от области просмотра, как на снимке экрана на первом шаге, см. раздел Изменение размещения DevTools .

Добавьте объявление CSS к элементу

Используйте панель «Стили» , если вы хотите изменить или добавить объявления CSS к элементу.

1. Щелкните правой кнопкой мыши Add a background color to me! текст ниже и выберите «Проверить» .

   Добавьте мне цвет фона!

2. Нажмите element.style в верхней части панели «Стили» .

3. Введите background-color и нажмите Enter .

4. Введите honeydew и нажмите Enter . В дереве DOM вы можете видеть, что к элементу было применено объявление встроенного стиля.

Добавьте класс CSS к элементу

Используйте панель «Стили» , чтобы увидеть, как выглядит элемент, когда класс CSS применяется к элементу или удаляется из него.

1. Щелкните правой кнопкой мыши Add a class to me! элемент ниже и выберите «Проверить» .

   Добавьте мне класс!

2. Нажмите .cls . DevTools открывает текстовое поле, в котором вы можете добавить классы к выбранному элементу.

3. Введите color_me в текстовом поле «Добавить новый класс» и нажмите Enter. Под текстовым полем «Добавить новый класс» появится флажок, в котором вы можете включать и выключать класс. Если « Add a class to me! к элементу были применены какие-либо другие классы, вы также сможете переключать их отсюда.

Добавить псевдосостояние в класс

Используйте панель «Стили» , чтобы применить псевдосостояние CSS к элементу. DevTools поддерживает :active , :focus , :focus-within , :target , :hover , :visited или focus-visible .

1. Наведите Hover over me! текст ниже. Цвет фона изменится.

   Нависай надо мной!

2. Щелкните правой кнопкой мыши Hover over me! текст и выберите «Проверить» .

3. На панели «Стили» нажмите :hov .

4. Установите флажок :hover . Цвет фона изменится, как и раньше, даже если вы на самом деле не наводите курсор на элемент.

Изменение размеров элемента

Используйте интерактивную диаграмму «Блочная модель» на панели «Стили» , чтобы изменить ширину, высоту, отступы, поля или длину границы элемента.

1. Щелкните правой кнопкой мыши Change my margin! элемент ниже и выберите «Проверить» .

   Измените мою маржу!

2. Чтобы увидеть блочную модель , нажмите кнопку Показывать кнопку боковой панели на панели действий на панели «Стили» .

3. На диаграмме «Блоковая модель» на панели «Стили» наведите указатель мыши на отступы. Заполнение элемента выделяется в области просмотра.

4. Дважды щелкните левое поле в блочной модели . В настоящее время элемент не имеет полей, поэтому margin-left имеет значение - .

5. Введите 100 и нажмите Enter .

В блочной модели по умолчанию используются пиксели, но она также принимает и другие значения, например 25% или 10vw .