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

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

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

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

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

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

   

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

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

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

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

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

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

   

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 к элементу или удалении из него, см. на панели Стили .

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 панели Стили :

   

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

Используйте панель Стили для постоянного применения псевдосостояния 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. Исходная страница находится здесь и автор Кейс Баски.

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