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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

   

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

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

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

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

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

Если вы хотите закрепить окно DevTools справа от области просмотра, как на снимке экрана в шаге 1, см. раздел Изменение размещения 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 в текстовое поле Add new class и нажмите Enter. Под текстовым полем Add new class появится флажок, в котором вы можете включить или выключить класс. Если бы к элементу Add a class to me! были применены какие-либо другие классы, вы также могли бы переключать их здесь.

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

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

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

   Наведите курсор на меня!

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

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

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

Для получения дополнительной информации см. Переключение псевдокласса .

Изменить размеры элемента

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

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

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

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

3. На диаграмме Box Model на вкладке Styles наведите курсор на padding . Padding элемента будет выделен в области просмотра.

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

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

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