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

Кейси Баски
София Емельянова
Sofia Emelianova
GitHub

Изучите эти интерактивные руководства, чтобы изучить основы просмотра и изменения 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 к элементу

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

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

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

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

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

Применение класса color_me к элементу.

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

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

  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 .