Начало работы по просмотру и изменению CSS

  • Статья

Чтобы узнать, как использовать средства разработки для просмотра и изменения CSS для страницы, ознакомьтесь с интерактивными разделами руководства в этой статье.

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

  1. Откройте демонстрационную страницу Примеры CSS в новом окне или вкладке. (Чтобы открыть ссылку в новом окне или вкладке, щелкните ссылку правой кнопкой мыши. Или нажмите и удерживайте нажатой клавишу CTRL (для Windows, Linux) или Command (для macOS), а затем щелкните ссылку.

  2. Щелкните текст правой Inspect Me! кнопкой мыши и выберите пункт Проверить.

    На панели дерева DOM под инструментомInspect Me! Элементы выделяется элемент:

    Проверяемый элемент выделен в дереве DOM

  3. В элементе Inspect Me! найдите значение атрибута data-message и скопируйте его.

  4. В представлении страницы введите data-message значение, скопированное в текстовое поле Значение сообщения данных .

  5. Щелкните текст правой Inspect Me! кнопкой мыши и выберите пункт Проверить.

  6. В devTools в инструменте Элементы выберите панель Стили . Элемент Inspect Me! выделен на панели Стили.

  7. В элементе найдите Inspect Me!aloha правило класса. Это правило отображается, так как оно применяется к элементу Inspect Me! .

  8. В классе найдите aloha значение стиля padding и скопируйте его:

    Класс CSS, применяемый к проверяемму элементу, выделен на панели Стили

  9. В представлении страницы вставьте padding значение в текстовое поле Значение заполнений .

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

Панель Стили используется при изменении или добавлении объявлений CSS в элемент.

  1. Во-первых, рекомендуется выполнить предыдущее руководство по просмотру CSS для элемента .

  2. Откройте демонстрационную страницу Примеры CSS в новом окне или вкладке.

  3. Щелкните текст правой Add A Background Color To Me! кнопкой мыши и выберите пункт Проверить.

  4. Щелкните element.style в верхней части панели Стили .

  5. Введите background-color или выберите его в раскрывающемся списке, а затем нажмите клавишу ВВОД.

  6. Введите honeydew или выберите его из раскрывающегося списка цветов, а затем нажмите клавишу ВВОД. После выбора цвета в дереве DOM отображается встроенное объявление стиля, применяемое к элементу.

    Объявление background-color:honeydew применяется к элементу с помощью element.style раздела панели Стили :

    Добавление объявления CSS в элемент с помощью панели Стили

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

Сведения о том, как выглядит элемент при применении класса CSS к элементу или удалении из него, см. на панели Стили .

  1. Во-первых, рекомендуется выполнить предыдущее руководство по просмотру CSS для элемента .

  2. Откройте демонстрационную страницу Примеры CSS в новом окне или вкладке.

  3. Щелкните текст правой Add A Class To Me! кнопкой мыши и выберите пункт Проверить.

  4. Нажмите кнопку Классы элементов (CLS). DevTools отображает текстовое поле, в котором можно добавить классы CSS в проверяемый элемент страницы.

  5. Введите color_me в текстовое поле Добавить новый класс и нажмите клавишу ВВОД. Под текстовым полем Добавить новый класс появится флажок, в котором можно включить и выключить класс. Если к элементу Add A Class To Me! применены другие классы, можно также переключить каждый класс отсюда.

    Класс color_me применяется к элементу с помощью раздела .cls панели Стили :

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

Добавление псевдогосударя в класс

Используйте панель Стили для постоянного применения псевдосостояния CSS к элементу. DevTools поддерживает :active, :focus, :hoverи :visited.

  1. Во-первых, рекомендуется выполнить предыдущее руководство по просмотру CSS для элемента .

  2. Откройте демонстрационную страницу Примеры CSS в новом окне или вкладке.

  3. Наведите указатель мыши на Hover Over Me! текст. Цвет фона изменяется.

  4. Щелкните текст правой Hover Over Me! кнопкой мыши и выберите пункт Проверить.

  5. На панели Стили нажмите кнопку Переключить состояние элемента (:hov).

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

    На следующем снимке экрана показан результат переключения псевдосостояния :hover для элемента.

    Переключение псевдосостояния на элемент

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

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

  1. Во-первых, рекомендуется выполнить предыдущее руководство по просмотру CSS для элемента .

  2. Откройте демонстрационную страницу Примеры CSS в новом окне или вкладке.

  3. Щелкните текст правой Change My Margin! кнопкой мыши и выберите пункт Проверить.

  4. На схеме box Model на панели Стили наведите указатель мыши на заполнение. Заполнение элемента выделено в окне просмотра.

    В зависимости от размера окна DevTools может потребоваться прокрутить до нижней части панели Стили , чтобы отобразить модель box.

  5. Дважды щелкните левое поле в box Model, которое в настоящее время имеет значение -. Означает - , что элемент не имеет значения для margin-left.

  6. Введите 100px и нажмите клавишу ВВОД. Модель Box по умолчанию использует пиксели, но она также принимает другие значения, такие как 25%, или 10vw.

    Наведите указатель мыши на заполнение элемента:

    Наведите указатель мыши на заполнение элемента

    Изменение левого поля элемента:

    Изменение левого поля элемента

Отладка запросов мультимедиа

Запросы мультимедиа CSS — это способ заставить веб-сайт реагировать на изменения параметров конфигурации для каждого пользователя. Наиболее распространенным вариантом использования является предоставление странице другого макета CSS в зависимости от размеров окна просмотра.

Использование отдельных макетов позволяет использовать макет с одним столбцом для мобильных устройств и макетов с несколькими столбцами, если доступно больше экранной недвижимости.

Чтобы отладить или проверить запросы мультимедиа, определенные в CSS, выполните следующие действия.

  1. Откройте демонстрационную страницу Примеры CSS в новом окне или вкладке.

  2. Чтобы открыть средства разработки, щелкните правой кнопкой мыши веб-страницу и выберите пункт Проверить.

  3. Нажмите кнопку Переключить эмуляцию устройства (значок эмуляции устройства). Или, когда devTools будет фокусироваться, нажмите клавиши CTRL+SHIFT+M (Windows, Linux) или COMMAND+SHIFT+M (macOS).

    Панель инструментов устройства откроется на веб-странице, а веб-страница теперь отображается в области Эмуляция устройства:

    Открытие панели инструментов устройства

  4. Открыв панель инструментов устройства, нажмите кнопку Дополнительные параметры (значок дополнительных параметров) в правом верхнем углу и выберите Показать запросы мультимедиа:

    Отображение запросов мультимедиа на панели инструментов устройства

    Цветные полосы над веб-страницей представляют различные запросы мультимедиа.

  5. Наведите указатель мыши на границы на гистограммах, чтобы отобразить значения различных запросов мультимедиа. Щелкните каждое значение запроса мультимедиа, чтобы изменить размер веб-страницы в соответствии с ней.

    Выбор запроса мультимедиа на панели предварительного просмотра

  6. Чтобы открыть CSS-файл, содержащий запросы мультимедиа, и изменить их исходный код, щелкните правой кнопкой мыши одну из цветных полос и выберите пункт Показать в исходном коде. Появится средство Источники , а соответствующий запрос мультимедиа выделен в CSS-файле:

    Отображение запросов мультимедиа в редакторе в средстве

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

Creative Commons License Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.