Справочник по функциям CSS

Откройте для себя новые рабочие процессы в следующем исчерпывающем справочнике по функциям средств разработчика Microsoft Edge, связанным с просмотром и изменением CSS.

Основные сведения см. в статье Начало работы по просмотру и изменению CSS.

Подробное содержание:

• Выбор элемента
• CSS-представление
  • Навигация по ссылкам
  • Просматривайте подсказки с документацией по CSS, специфичностью и значениями настраиваемых свойств
    • Просмотреть документацию по CSS
    • Особенности селектора просмотров
    • Просмотр значений настраиваемых свойств
  • Просмотр внешней таблицы стилей, в которой определено правило
  • Просмотр недопустимых, переопределенных, неактивных и других CSS
  • Просмотр только кода CSS, примененного к элементу
  • Просмотр свойств CSS в алфавитном порядке
  • Просмотр унаследованных свойств CSS
  • Просмотр правил CSS
    • Просмотр @property правил
    • Просмотр @supports правил
    • Просмотр @scope правил
    • Просмотр @font-palette-values правил
    • Просмотр @position-try правил
  • Просмотр блочной модели элемента
  • Поиск и фильтрация CSS элемента
  • Эмуляция страницы, на которой установлен фокус
  • Переключение псевдокласса
  • Просмотр унаследованных псевдоэлементов выделения
  • Просмотр каскадных слоев
  • Просмотр страницы в режиме печати
  • Просмотр используемых и неиспользуемых CSS с помощью средства "Охват"
  • Режим принудительного предварительного просмотра
• Копировать CSS
• Изменение CSS
  • Два способа добавления объявления CSS в элемент
    • Добавление встроенного объявления CSS в элемент
    • Добавление объявления CSS в существующее правило стиля
  • Изменение имени или значения объявления
  • Изменение перечисляемых значений с помощью сочетаний клавиш
  • Изменение значений длины
  • Добавление класса к элементу
  • Эмуляция светлой и темной темы и включение автоматического темного режима
  • Переключение класса
  • Добавление правила стиля
    • Выберите таблицу стилей, в которую необходимо добавить правило
    • Добавление правила стиля в определенное место таблицы стилей
  • Переключение объявления
  • Редактирование ::view-transition псевдоэлементов во время анимации
  • Выравнивание элементов сетки и их содержимого с помощью редактора сетки
  • Изменение цветов с помощью палитры
  • Пример цвета со страницы с помощью пипетки
  • Изменение значения угла с помощью Angle Clock
  • Изменение теней поля и текста с помощью теневого редактора
  • Измените время показа анимации и переходов с помощью редактора плавной анимации
    • Использование готовых настроек для настройки времени показа
    • Настройка времени показа слайдов
• См. также

Выбор элемента

Инструмент "Элементы" в средствах разработчика позволяет просматривать и изменять CSS одного элемента за раз. Выбранный элемент будет выделен в дереве DOM. Стили элемента отображаются в области "Стили ". Руководство см. в статье Просмотр CSS элемента.

На рисунке выше:

• Элемент h1 , выделенный в дереве DOM , является выбранным элементом.
• Справа в области "Стили " показаны стили элемента.
• Слева элемент выделен в окне просмотра, но только потому, что курсор мыши в данный момент наведен на него в дереве DOM:

Выбрать элемент можно несколькими способами.

• На отрисованной веб-странице щелкните правой кнопкой мыши элемент страницы, а затем выберите "Проверить".

• В средствах разработчика щелкните "Выбрать элемент" () или нажмите клавиши CTRL+SHIFT+C (Windows, Linux) или COMMAND+SHIFT+C (macOS), а затем щелкните элемент в окне просмотра.

• В средствах разработчика щелкните элемент в дереве DOM.

• В средствах разработчика выполните запрос, например, document.querySelector('p') в консоли, щелкните результат правой кнопкой мыши и выберите "Показать на панели элементов".

CSS-представление

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

Навигация по ссылкам

На вкладке "Стили" в различных местах отображаются ссылки на другие места, в том числе:

• После правил CSS — таблицы стилей и источники CSS. Такие ссылки открывают средство "Источники ". Если таблица стилей свернута, см. статью Переформатирование минифицированного файла JavaScript с красивой печатью в функциях отладки JavaScript.

• В разделах Унаследовано от родительских элементов.

• В var() вызовах к объявлениям настраиваемых свойств. См. Использование пользовательских свойств (переменных) CSS на сайте MDN.

• В animation сокращенных свойствах к @keyframes.

• Дополнительные ссылки см. во всплывающих подсказках к документации.

У ссылок могут быть разные стили. Если вы не уверены, что это ссылка, попробуйте щелкнуть ее, чтобы узнать.

Например, вы можете:

1. Переход в приложение To Do в новом окне или вкладке.

2. Щелкните правой кнопкой мыши пробел над строкой "Добавить задачу" и выберите пункт "Проверить".

   Откроются средства разработчика с выбранным инструментом "Элементы ".

3. Откройте вкладку "Стили ".

   Отображаются различные типы ссылок:

   

Просматривайте подсказки с документацией по CSS, специфичностью и значениями настраиваемых свойств

В средстве "Элементы " на вкладке "Стили " отображаются подсказки с полезной информацией при наведении курсора на определенные элементы.

Просмотреть документацию по CSS

Чтобы отобразить описание свойства CSS в подсказке:

1. Перейдите на веб-страницу, например в приложение To Do, в новом окне или на вкладке.

2. Щелкните правой кнопкой мыши пробел над строкой "Добавить задачу" и выберите пункт "Проверить".

   Откроются средства разработчика с выбранным инструментом "Элементы ".

3. Откройте вкладку "Стили ".

4. Наведите указатель мыши на имя свойства CSS, например padding:.

   Появится всплывающая подсказка:

   

   DevTools извлекает описания подсказок из репозитория пользовательских данных VS Code .

5. В подсказке щелкните ссылку "Подробнее ".

   Отображается справочная страница CSS для свойства в MDN, например "Свойствоpadding CSS".

Чтобы отключить подсказки CSS:

• В подсказке установите флажок "Не показывать ".

Чтобы снова включить подсказки CSS:

1. В средствах разработчика выберите "Настройка средств разработчика и управление ими", а затем выберите "Параметры".

2. В структуре слева выберите "Настройки", а затем прокрутите вниз до раздела "Элементы ".

3. Установите флажок "Показывать подсказку документации по CSS ".

Особенности селектора просмотров

Наведите курсор на селектор CSS, чтобы отобразить подсказку, показывающую вес специфичности селектора, например: Специфичность: (0,0,1):

Например, вы можете:

1. Перейдите на веб-страницу, например в приложение To Do, в новом окне или на вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите пункт "Проверить".

   Откроются средства разработчика с выбранным инструментом "Элементы ".

3. В дереве DOM выберите <body> элемент.

4. На вкладке "Стили " наведите указатель мыши на body селектор CSS.

   Отображается подсказка, показывающая Специфичность: (0,0,1):

   

См. также:

• Специфичность - MDN.

Просмотр значений настраиваемых свойств

Наведите указатель var(--custom-property) мыши на функцию, чтобы увидеть значение настраиваемого свойства во всплывающей подсказке.

Например, вы можете:

1. Перейдите на веб-страницу, например в приложение To Do, в новом окне или на вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите пункт "Проверить".

   Откроются средства разработчика с выбранным инструментом "Элементы ".

3. В дереве DOM выберите <body> элемент.

4. На вкладке "Стили " в правиле body CSS наведите курсор на --spacing.

   Это значение .3rem отображается во всплывающей подсказке:

   

См. также:

• Пользовательские свойства (--*): переменные CSS - MDN.

Просмотр внешней таблицы стилей, в которой определено правило

В области "Стили " щелкните ссылку рядом с правилом CSS, чтобы открыть внешнюю таблицу стилей, определяющую правило. Таблица стилей откроется на панели Корректор инструмента "Источники ".

Если таблица стилей свернута, нажмите кнопку Форматировать () в нижней части области Редактора . Дополнительные сведения см. в статье "Переформатирование минифицированного файла JavaScript с красивой печатью в функциях отладки JavaScript".

На рисунке выше, после щелчка , to-do-styles.css:5вы перейдете в строку 5 , to-do-styles.cssгде определено h1 правило CSS.

Просмотр недопустимых, переопределенных, неактивных и других CSS

Вкладка "Стили" обнаруживает много видов проблем CSS и выделяет их различными способами.

Просмотр только кода CSS, примененного к элементу

В области "Стили" отображаются все правила, применяемые к элементу, включая объявления, которые были переопределены. Если вас не интересуют переопределенные объявления, используйте область "Вычисления" для просмотра только тех CSS, которые фактически применяются к элементу.

Например, вы можете:

1. Перейдите на веб-страницу, например в приложение To Do, в новом окне или на вкладке.

2. Щелкните правой кнопкой мыши заголовок "Мои задачи" и выберите пункт "Проверка".

   Средства разработчика открываются с выбранным инструментом " Элементы " и элементом, выбранным <h1> в дереве DOM.

3. В средстве "Элементы " откройте вкладку "Вычисляемые ".

   Отображаются свойства CSS, примененные к выбранному элементу:

   

   Имя и значение свойства, выделенные курсивом, указывают на значение, вычисленное во время выполнения.

4. Чтобы отобразить все свойства, установите флажок Показать все .

Просмотр свойств CSS в алфавитном порядке

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

Просмотр унаследованных свойств CSS

Установите флажок "Показать все" в области "Вычисления". Смотрите только CSS, примененный к элементу, выше.

Просмотр правил CSS

Правила At — это операторы CSS, позволяющие управлять поведением CSS.

В инструменте "Элементы " на вкладке "Стили " отображаются следующие правила в выделенных разделах:

• @property - см. Просмотр @property правил ниже.
• @supports - см. Просмотр @supports правил ниже.
• @scope - см. Просмотр @scope правил ниже.
• @font-palette-values - см. Просмотр @font-palette-values правил ниже.
• @position-try - см. Просмотр @position-try правил ниже.

Просмотр @property правил

Правило @property CSS позволяет определять настраиваемые свойства CSS определенных типов в таблице стилей.

Наведите указатель мыши на имя такого свойства на вкладке "Стили ", чтобы увидеть подсказку, содержащую:

• Значение свойства, например 20%.
• Дескрипторы свойства, такие как: initial value: 40%
• Просмотр зарегистрированного свойства Ссылка на его регистрацию в разделе свертывания @property в нижней части вкладки "Стили".

Например, вы можете:

1. Перейдите на страницу, которая использует правило, @property например "Просмотреть @property правила at", в новом окне или на вкладке.

2. Щелкните правой кнопкой мыши третий абзац элемента и выберите пункт "Проверить".

   Откроются средства разработчика с выбранным инструментом "Элементы ".

3. На вкладке "Стили " наведите указатель мыши на эту var(--itemSize) функцию:

   

   Всплывающая подсказка содержит:

   • Значение свойства, например 100px.
   • Дескрипторы свойства, такие как начальное значение.
   • Просмотреть ссылку на зарегистрированный ресурс.

4. Нажмите ссылку «Просмотреть зарегистрированный объект ».

   Отображается развернутый раздел @property далее на вкладке "Стили ":

   

Чтобы изменить @property правило, дважды щелкните его имя или значение. См. раздел "Изменение имени или значения объявления" ниже.

См. также:

• @property: наделение переменных CSS суперспособностями в Web.dev.
• Пользовательские свойства (--*): переменные CSS в MDN.

Просмотр @supports правил

На вкладке "Стили" показаны @supports правила CSS, если они применяются к элементу.

Например, чтобы просмотреть @supports правило:

1. В новом окне или вкладке перейдите на страницу, где используется правило, @supports например " Просмотр @supports правил".

2. Щелкните правой кнопкой мыши "Я поддерживаю цветовое пространство CIE LAB!", а затем выберите "Проверить".

   Откроются средства разработчика. В средстве "Элементы " в дереве <div class="box"> DOM выбран элемент. На вкладке "Стили " @supports перечислены объявления CSS:

   

• Если браузер поддерживает lab() эту функцию, элемент зеленого цвета.

• Если браузер не поддерживает эту lab() функцию, элемент фиолетового цвета.

Чтобы узнать, какие версии браузеров поддерживают цветовое пространство CIE LAB, выполните поиск Caniuse.com по запросу "lab".

Просмотр @scope правил

На вкладке "Стили" отображаются правила CSS @scope , если они применены к элементу.

AT-правила @scope позволяют определять области применения стилей CSS, то есть явно применять стили к определенным элементам. Смотрите @scope CSS at-rule на MDN.

Чтобы просмотреть @scope правило:

1. В новом окне или вкладке перейдите на страницу, которая использует правило, @scope например на демонстрацию Просмотреть @scope правила at:

   

2. Щелкните правой кнопкой мыши "Я текст, который живет на карте" и выберите "Проверить".

   Откроются средства разработчика с выбранным инструментом "Элементы ".

3. Откройте вкладку "Стили ".

4. Изучите @scope правило:

   

   В этом примере правило (цвет фона = слива) переопределяет глобальное объявление CSS background-color (аквамарин) для любого <p> элемента, @scope который находится внутри элемента (например, ), <div>имеющего класс.card

   Чтобы изменить @scope правило, дважды щелкните его по ссылке:

5. На вкладке "Стили " дважды щелкните сливу, нажмите клавишу DELETE, а затем выберите бежевый.

   Текст в карте на демонстрационной веб-странице изменится с сливового фона на бежевый.

Просмотр @font-palette-values правил

CSS-правило @font-палитра-значения at-rule позволяет настраивать (переопределять) значения font-palette по умолчанию свойства. В инструменте "Элементы " вкладка "Стили " показывает это правило в специальном разделе.

Чтобы просмотреть @font-palette-values правило CSS, выполните указанные ниже действия.

1. В новом окне или вкладке перейдите на страницу, использующую правило, @font-palette-values например на демонстрацию Просмотр @font-palette-values правил .

2. Щелкните правой кнопкой мыши "Новые цвета" и выберите "Проверить".

   Откроются средства разработчика с выбранным инструментом "Элементы ".

3. На вкладке "Стили " найдите @font-palette-values правило CSS:

   

   В этом примере --New значения палитры шрифтов переопределяют значения по умолчанию цветного шрифта.

   Чтобы изменить пользовательское значение, дважды щелкните его, как показано ниже.

4. В правиле @font-palette-values CSS в свойстве override-colors дважды щелкните 0 gold, 1 redи введите 0 blue, 1 red.

   На проверенной веб-странице "новые цвета" теперь отображаются как синий и красный.

Просмотр @position-try правил

Правило @position-try CSS вместе со свойством position-try-fallbacks позволяет определить альтернативные позиции привязки для элементов.

В средстве "Элементы " вкладка "Стили " разрешает и связывает следующее:

• Значения position-try-fallbacks свойств (или position-try-options значения свойств) связаны со специальным @position-try --name разделом правил CSS.

• Значения position-anchor и anchor() аргументы свойств связаны с соответствующими элементами, имеющими popovertarget атрибуты.

Например, следует проверить position-try-fallbacks значения и @position-try правила CSS следующим образом:

1. В новом окне или вкладке перейдите на страницу, где используются position-try-fallbacks значения и @position-try правила, например @position-try на демонстрацию View at-rules.

2. На отрисованной веб-странице откройте подменю; то есть нажмите ВАША УЧЕТНАЯ ЗАПИСЬ, а затем нажмите ВИТРИНА.

   Откроется подменю со списком команд: ОБЪЯВЛЕНИЯ,СПЕЦИАЛЬНЫЕ ПРЕДЛОЖЕНИЯ,ВЫХОД из СИСТЕМЫ.

3. В подменю щелкните правой кнопкой мыши над LISTINGS и выберите Inspect.

   Откроются средства разработчика с выбранным инструментом "Элементы ". Выбран элемент <ul id="submenu"> подменю в дереве DOM:

   

4. На вкладке "Стили " в правиле #submenu CSS найдите свойство position-try-fallbacks и щелкните его --bottom значение.

   Вкладка "Стили" прокручивается вниз до соответствующего @position-try раздела:

   

5. На вкладке "Стили " в правиле #submenu CSS щелкните --submenu ссылку в любом из следующих свойств:

   position-anchor: --submenu;
   left: anchor(--submenu right);
   top: anchor(--submenu top);
   

   В дереве DOM выбирается элемент (<button popovertarget="submenu">) с соответствующим popovertarget значением атрибута (popovertarget="submenu"), а на вкладке "Стили " отображается CSS элемента:

   

Чтобы изменить значение, дважды щелкните его.

См. также:

• @position-try CSS at-rule, at MDN.

Просмотр блочной модели элемента

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

Чтобы изменить значение, дважды щелкните его.

На следующем рисунке схема блочной модели в области "Стили " показана блочная модель для выделенного h1 элемента:

См. также:

• Коробочная модель в MDN.

Поиск и фильтрация CSS элемента

Используйте текстовое поле "Фильтр " в областях "Стили " и "Вычисления" для поиска определенных свойств или значений CSS.

Чтобы также искать унаследованные свойства в области "Вычисления", проверка флажок "Показать все".

На следующем рисунке область "Стили " отфильтрована, чтобы отобразить только правила, которые содержат поисковый запрос color.

На следующем рисунке область "Вычисляемый " отфильтрована таким образом, чтобы отображались только объявления, включающие поисковый запрос 100%:

Эмуляция страницы, на которой установлен фокус

Если переключить фокус с проверяемой веб-страницы на средства разработчика, некоторые элементы наложения автоматически скрываются, если они запускаются фокусом. Например, вы можете:

• Раскрывающиеся списки.
• Меню.
• Элементы выбора дат.

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

• В средстве "Элементы " на вкладке "Стили " щелкните :hov (Переключить состояние элемента) и установите флажок Эмулировать страницу в фокусе .
• В средстве отрисовки установите флажок Эмулировать страницу, на которой установлен фокус.

Внимание! Если этот параметр включен, document.visibilityState событие задается и visiblevisibilitychange не запускается. См. API видимости страниц на сайте MDN.

Чтобы попробовать эмулировать страницу, на которой установлен фокус:

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

2. Щелкните поле ввода. Или нажмите клавишу TAB, чтобы установить фокус на поле ввода текста.

   Под текстовым полем ввода появится другой элемент с надписью "Это сообщение появляется, только когда текстовое поле находится в фокусе".

3. Щелкните правой кнопкой мыши поле ввода и выберите "Проверить".

   Средства разработчика открываются, и элемент сообщения исчезает. Теперь в фокусе находится окно средств разработчика, а не просматриваемая веб-страница, поэтому элемент сообщения исчезает.

4. В средстве "Элементы " на вкладке "Стили " щелкните :hov (Переключить состояние элемента) и установите флажок Эмулировать страницу в фокусе .

5. Убедитесь, что элемент <input id="textBox" type="text"> текстового поля ввода по-прежнему выделен.

   Под текстовым полем ввода вновь отображается элемент сообщения под текстовым полем ввода.

   Теперь вы можете проверить элемент сообщения, который находится под текстовым полем ввода, даже если фокус находится не на проверенной странице в средствах разработчика:

   

6. Подчистка: в средстве "Элементы" на вкладке "Стили" щелкните (Переключить состояние элемента), а затем снимите :hov флажок Эмулировать страницу в фокусе.

Флажок «Эмулировать фокусированную страницу» также отображается в инструменте «Рендеринг »; см. Инструмент отрисовки, чтобы увидеть, как выглядит веб-страница с различными вариантами отображения или недостатками зрения.

См. также:

• Заморозьте экран & проверки исчезающих элементов в блоге Chrome для разработчиков.

Переключение псевдокласса

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

1. Перейдите на веб-страницу, например в приложение To Do, в новом окне или на вкладке.

2. Введите задачу, например задачу 1.

3. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

4. Выберите средство "Элементы ".

5. В дереве DOM выберите <li class="task"> элемент.

6. Откройте вкладку "Стили ".

7. В правом верхнем углу щелкните :hov.

   Отображаются флажки.

8. Установите флажок для псевдокласса, который вы хотите включить, например :hover:

   

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

На вкладке "Стили" показаны следующие псевдоклассы для всех элементов.

• :active - МДН.
• :focus
• :focus-within
• :target
• :hover
• :focus-visible

Кроме того, некоторые элементы могут иметь псевдоклассы, специфичные для элементов. При выборе такого элемента на вкладке "Стили " отображается раздел принудительного состояния элемента , который можно развернуть и включить псевдоклассы, специфичные для элемента, например, флажок :read-write :

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

Просмотр унаследованных псевдоэлементов выделения

Псевдоэлементы позволяют стилизовать определенные части элементов. Псевдоэлементы выделения — это фрагменты документа со статусом "выделено", которые выделяются стилем "выделено", чтобы указать пользователю на этот статус.

Например, такими псевдоэлементами являются:

• ::selection
• ::spelling-error
• ::grammar-error
• ::highlight

При конфликте нескольких стилей CSS-каскад определяет победивший стиль. См. Введение в каскад CSS на MDN.

Чтобы лучше понять наследование и приоритет правил, просмотрите унаследованный псевдоэлемент highlight в следующей демонстрации.

Чтобы просмотреть унаследованные псевдоэлементы выделения:

1. Перейдите к демонстрации "Выделить псевдоэлементы " в новом окне или вкладке.

2. Выделите фрагмент текста "Я унаследовал стиль псевдоэлемента выделения моих родителей. Выбери меня!»

   Выделенный текст изменится на красный на желтом фоне.

3. Щелкните правой кнопкой мыши текст "Я унаследовал стиль псевдоэлемента выделения моих родителей. Выберите меня!", а затем выберите "Проверить".

   Откроются средства разработчика. В инструменте Элементы на вкладке Стили отображается раздел: Унаследовано от ::selection псевдо div.text-parent:

   

4. В дереве DOM выберите <div class="text-parent"> элемент.

   На вкладке Стили отображается раздел: Псевдо ::элемент выбора:

   

См. также:

• Псевдоэлементы в MDN.

Просмотр каскадных слоев

Каскадные слои обеспечивают более явное управление файлами CSS, чтобы предотвратить конфликты между стилем. Это полезно в следующих случаях:

• Большие кодовые базы.
• Проектирование системы.
• Управление сторонними стилями.

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

1. Перейдите на веб-страницу, где используются каскадные слои, например на демонстрацию каскадных слоев .

2. Щелкните правой кнопкой мыши элемент "Мои стили многослойны!" и выберите "Проверить".

   Откроются средства разработчика.

3. В средстве "Элементы " откройте вкладку "Стили ".

4. На вкладке Стили просмотрите три каскадных слоя и их стили: page, component и base:

   

5. Чтобы просмотреть порядок слоев, щелкните имя слоя (страница, компонент или база). Кнопка представления CSS Layers.

   Слой page имеет наивысшую специфичность, поэтому фон элемента зеленый.

См. также:

• Каскадные слои, в MDN.

Просмотр страницы в режиме печати

Просмотр страницы в режиме печати

1. Перейдите на веб-страницу.

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Откроются средства разработчика.

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

4. На панели быстрого просмотра нажмите кнопку "Другие инструменты " (+).

5. Выберите инструмент отрисовки .

   Средство отрисовки откроется на панели быстрого просмотра в нижней части средств разработчика.

6. В средстве отрисовки щелкните раскрывающийся список Эмулировать тип носителя CSS и выберите печать.

   Веб-страница отображается так, как будто вы печатаете.

7. Когда все будет готово, в средстве отрисовки щелкните раскрывающийся список Эмулировать тип носителя CSS и выберите Без эмуляции.

Просмотр используемых и неиспользуемых CSS с помощью средства "Охват"

Средство "Охват" показывает, какой CSS фактически используется на странице.

1. Откройте меню команд, нажав клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), пока в средствах разработчика установлен фокус.

2. Начните вводить , coverageа затем выберите "Показать покрытие:

   

   Откроется средство "Охват ":

   

3. Нажмите Start instrumenting coverage and refresh the page (). Страница обновится, и средство "Охват " предоставит обзор того, сколько CSS (и JavaScript) используется в каждом файле, загружаемом браузером. Зеленый цвет представляет используемый CSS. Красный цвет представляет неиспользуемый CSS.

   Обзор того, сколько CSS (и JavaScript) используется и не используется:

   

4. Чтобы отобразить построчную разбивку используемого CSS, щелкните файл CSS.

   На следующем рисунке строки с 145 по 147 и с 149 по 151 b66bc881.site-ltr.css не используются, тогда как используются строки с 163 по 166:

   

Режим принудительного предварительного просмотра

См. статью "Принудительно перевести средства разработчика в режим предварительного просмотра".

Копировать CSS

Из одного выпадающего меню на вкладке «Стили » вы можете копировать отдельные правила CSS, объявления, свойства или значения; см. основы синтаксиса CSS в статье Что такое CSS? на сайте MDN.

Кроме того, вы можете копировать свойства CSS в синтаксисе JavaScript. Эта опция удобна, если вы используете библиотеки CSS-in-JS; см. статью Редактирование стилей для платформ CSS-in-JS.

Чтобы скопировать CSS:

1. Перейдите на веб-страницу, использующую CSS, например приложение To Do, в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите пункт "Проверить".

   Откроются средства разработчика с выбранным инструментом "Элементы ".

3. В дереве DOM выберите элемент, например <h1>.

4. На вкладке "Стили " в правиле CSS щелкните правой кнопкой мыши свойство CSS, например text-align: center:

   

5. Выбор элемента меню, вызываемого правой кнопкой мыши:

   • Копировать объявление. Копирует свойство и его значение в синтаксисе CSS: property: value;

   • Копировать свойство. Копирует только property имя.

   • Копировать значение. Копирует только файл value.

   • Копировать правило. Копирует правило CSS целиком: selector[, selector] { property: value; property: value; ... }

   • Копировать объявление как JS. Копирует свойство и его значение в синтаксисе JavaScript: propertyInCamelCase: 'value'

   • Копировать все объявления. Копирует все свойства и их значения в синтаксисе CSS: property: value; property: value; ...

   • Копировать все объявления как JS. Копирует все свойства и их значения в синтаксисе JavaScript: propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • Скопируйте все изменения CSS. Копирует изменения, внесенные на вкладке "Стили " во всех объявлениях. Этот пункт меню отображается условно.

   • Просмотр вычисленного значения. Возвращает вас на вкладку "Вычисления" ; см. только CSS, примененный к элементу, выше.

Изменение CSS

В этом разделе перечислены все способы изменения CSS встиляхэлементов>.

Кроме того, вы можете:

• Переопределение CSS при загрузке страниц. См. раздел Переопределение ресурсов веб-страницы с помощью локальных копий (вкладка "Переопределения)".

• Сохраните измененный CSS в локальных источниках в рабочей области. См. статью Редактирование и сохранение файлов в рабочей области (вкладка рабочей области средства "Источники")".

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

Порядок объявлений влияет на стиль элемента. Вы можете добавлять объявления, добавляя встроенное объявление или добавляя объявление в правило стиля. Эти два подхода описаны в следующих разделах.

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

Добавление встроенного объявления эквивалентно добавлению атрибута style в HTML элемента. Для большинства сценариев вы, вероятно, захотите использовать встроенные объявления.

Встроенные объявления обладают более высокой специфичностью, чем внешние, поэтому их использование гарантирует, что изменения вступят в силу в ожидаемом элементе. Для получения дополнительной информации о специфичности см. Типы селекторов в Specificity на MDN.

Чтобы добавить встроенное объявление:

1. Выберите элемент.

2. В области "Стили " щелкните в скобках раздела element.style . Курсор станет заметным, позволяя ввести текст.

3. Введите имя свойства и нажмите клавишу ВВОД.

4. Введите допустимое значение для этого свойства и нажмите клавишу ВВОД. В деревеstyle DOM к элементу добавлен атрибут.

Кроме того, можно ввести значение в поле свойства, и средства разработчика предложат список совпадающих пар свойство: значение на выбор. Например, если вы вводите данные bold в поле свойств, DevTools предлагает font-weight: bold и font-weight: bolder в качестве возможных правил. Нажмите клавишу ВВОД, чтобы применить правило.

На следующем рисунке margin-top свойства and background-color применены к выбранному элементу. В дереве DOM объявления отражаются в атрибуте style элемента.

Добавление объявления CSS в существующее правило стиля

Если вы отлаживаете стили элемента и вам нужно специально протестировать, что происходит, когда объявление определено в разных местах, добавьте объявление в существующее правило стиля.

Чтобы добавить объявление в существующее правило стиля:

1. Выберите элемент.

2. В области "Стили " щелкните в скобках правила стилей, в которые вы хотите добавить объявление. Курсор станет заметным, позволяя ввести текст.

3. Введите имя свойства и нажмите клавишу ВВОД.

4. Введите допустимое значение для этого свойства и нажмите клавишу ВВОД.

Изменение имени или значения объявления

Чтобы изменить имя объявления CSS, дважды щелкните имя объявления.

Чтобы изменить значение объявления CSS, дважды щелкните его значение. На следующем снимке экрана показано выбор значения из списка:

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

Изменение перечисляемых значений с помощью сочетаний клавиш

Чтобы изменить числовое значение объявления CSS, введите его или используйте клавиши со стрелками, чтобы увеличить значение на определенное значение. Например, font-sizeпри изменении перечисляемого значения объявления можно использовать следующие сочетания клавиш, чтобы увеличить значение на фиксированное значение:

Сочетание клавиш	Действие
ALT+СТРЕЛКА ВВЕРХ (Windows, Linux), OPTION+СТРЕЛКА ВВЕРХ (macOS)	Приращение на 0,1.
СТРЕЛКА ВВЕРХ	Увеличивайте на 1 или на 0,1, если текущее значение находится в диапазоне от -1 до 1.
SHIFT + СТРЕЛКА ВВЕРХ	Шаг на 10.
CTRL+SHIFT+PGUP (Windows, Linux), SHIFT+COMMAND+СТРЕЛКА ВВЕРХ (macOS)	Шаг на 100.

Чтобы уменьшить нажатие, нажмите клавишу СТРЕЛКА ВНИЗ (или PAGE DOWN) вместо клавиши СТРЕЛКА ВВЕРХ или PAGE UP.

Изменение значений длины

Указатель можно использовать для изменения любого свойства, которое имеет значение длины, например width, height, marginpadding, , или border.

Чтобы изменить единицу длины:

1. Откройте веб-страницу с использованием CSS, например приложение To Do, в новом окне или вкладке.

2. Щелкните правой кнопкой мыши текст "Добавить задачу" и выберите "Проверить".

   Откроются средства разработчика с инструментом "Элементы ". Элемент <label> выбирается в дереве DOM.

3. На вкладке Стили в правиле .new-task-form CSS в свойстве max-width: наведите курсор на 50rem.

   Появится подсказка, демонстрирующая эквивалентное значение и единицы: 800px.

4. Щелкните значение 50rem.

   Появится всплывающая подсказка: "Приращение/уменьшение с помощью колесика мыши или клавиш вверх/вниз. Ctrl: +/-100, Shift: +/-10, ALT: +/-0,1"

5. Перемещайте колесо мыши либо нажимайте клавиши СТРЕЛКА ВВЕРХ и СТРЕЛКА ВНИЗ , одновременно нажимая нужную клавишу:

   Ctrl: шаг на 100. SHIFT: шаг на 10. Alt: шаг на 0,1.

   На проверенной веб-странице ширина текстового поля "Добавление задачи" меняется по мере изменения значения.

6. В поле значения свойства max-width введите значение 200px (изменяясь с rem единиц на px единицы).

7. Снова переместите колесико мыши или нажмите клавиши СТРЕЛКА ВВЕРХ и СТРЕЛКА ВНИЗ , удерживая клавишу CTRL (+/-100), SHIFT (+/-10) или ALT (+/-0,1).

   На проверенной веб-странице ширина текстового поля "Добавление задачи" меняется при изменении значения:

   

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

Чтобы добавить класс к элементу:

1. Выберите элемент в дереве DOM.

2. Щелкните CLS.

3. Введите имя класса в текстовое поле "Добавить новый класс ".

4. Нажмите клавишу ВВОД.

   

Эмуляция светлой и темной темы и включение автоматического темного режима

Чтобы включить автоматический темный режим или эмулировать предпочитаемые пользователем светлые или темные темы:

1. В инструменте Элементы на вкладке Стили нажмите кнопку Переключить общие эмуляции рендеринга () в правом верхнем углу:

   

2. В раскрывающемся списке выберите один из следующих вариантов.

   • prefers-color-scheme: светлая. Указывает, что пользователь предпочитает светлую тему.

   • prefers-color-scheme: dark. Указывает, что пользователь предпочитает темную тему.

   • Автоматический темный режим. Отображает вашу страницу в темном режиме, даже если вы его не реализовали. Кроме того, устанавливается prefers-color-scheme значение dark "Автоматически".

Этот раскрывающийся список является ярлыком для функций prefers-color-schemeэмуляции мультимедиа CSS и включения автоматических параметров темного режима средства отрисовки.

См. также:

• Эмуляция темного или светлого режима с помощью инструмента отрисовки в Эмуляция темных или светлых схем на отрисованной странице.
• Проверка проблем контрастности в темной и светлой теме
• Автоматическая темная тема в блоге Chrome для разработчиков.
• prefers-color-scheme: Здравствуй, темнота, мой старый друг из web.dev.

Переключение класса

Чтобы включить или отключить класс для элемента:

1. Выберите элемент в дереве DOM.

2. Откройте панель Классы элементов . См. статью Добавление класса к элементу. Под текстовыми полями Add New Class находятся все классы, применяемые к этому элементу.

3. Установите флажок рядом с классом, который нужно включить или отключить.

Добавление правила стиля

Чтобы добавить новое правило стиля:

1. Выберите элемент.

2. Щелкните Правило нового стиля (). Средства разработчика вставляют новое правило под правилом element.style .

   На следующем рисунке средства разработчика добавляют правило стиля после нажатия h1.devsite-page-title кнопки "Новое правило стиля".

   

Выберите таблицу стилей, в которую необходимо добавить правило

По умолчанию при добавлении правила стиля DevTools создает новую таблицу стилей с именем inspector-stylesheet в документе, а затем добавляет новое правило стилей в эту таблицу стилей.

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

• Щелкните и удерживайте кнопку New Style Rule (), а затем выберите из списка таблицу стилей, в которую нужно добавить правило стиля.

Добавление правила стиля в определенное место таблицы стилей

По умолчанию при добавлении правила стиля нажатием кнопки «Новое правило стиля » (») новое правило вставляется под правилом element.style в inspector-stylesheet таблице стилей.

Чтобы добавить правило стиля в определенное место конкретной таблицы стилей, начните с области "Стили ":

1. В средстве "Элементы " на вкладке "Стили " наведите указатель мыши на правило стиля, находящееся непосредственно над тем местом, куда вы хотите добавить новое правило стиля.

   В правой части правила CSS появится кнопка Вставить правило стиля ниже (").

2. Нажмите кнопку Вставить правило стиля ниже ():

   

Переключение объявления

Чтобы включить или отключить одно объявление:

1. Выберите элемент.

2. В области "Стили " наведите указатель мыши на правило, определяющее объявление. Рядом с каждым объявлением появляется флажок.

3. Установите или снимите флажок рядом с объявлением. При очистке объявления DevTools зачеркивает его, чтобы показать, что оно больше не активно.

   На следующем рисунке свойство margin-top для выделенного в данный момент элемента отключено.

   

Редактирование ::view-transition псевдоэлементов во время анимации

См. следующие статьи:

• Редактирование псевдоэлементов ::view-transition во время анимации в Анимация: проверка и изменение эффектов анимации CSS в документации Chrome.
• Сглаживание переходов с помощью API просмотра переходов в документах Chrome.

Выравнивание элементов сетки и их содержимого с помощью редактора сетки

См. следующие статьи:

• Выравнивание элементов сетки и их содержимого: всплывающее окно редактора сетки в Проверка макетов сетки CSS.

Изменение цветов с помощью палитры

Палитра предоставляет пользовательский интерфейс для изменений color и background-color объявлений.

Чтобы открыть палитру:

1. Выберите элемент.

2. В области "Стили" найдите объявление , background-colorили аналогичное объявлениеcolor, которое нужно изменить. Слева от значения , background-colorили аналогичного colorзначения, есть небольшой квадрат, который служит для предварительного просмотра цвета.

   На следующем рисунке маленький квадрат слева rgba(0, 0, 0, 0.7) от него показан в режиме предварительного просмотра этого цвета.

   

3. Щелкните предварительный просмотр, чтобы открыть палитру.

   

На следующем рисунке и в списке показаны все элементы пользовательского интерфейса палитры.

Выноска	Компонент	Описание
1	Оттенки
2	Пипетка	Пример цвета со страницы с помощью пипетки
3	Копировать в буфер обмена	Скопируйте отображаемое значение в буфер обмена.
4	Отображаемое значение	Представление цвета в формате RGBA, HSLA или шестнадцатеричное представление.
5	Цветовая палитра	Щелкните квадрат, чтобы изменить цвет.
6	Оттенок
7	Непрозрачность
8	Переключатель отображаемых значений	Переключение между представлениями текущего цвета RGBA, HSLA и шестнадцатеричным.
9	Переключатель цветовой палитры	Переключение между палитрой "Дизайн материалов", пользовательской палитрой или палитрой цветов страницы. Средства разработчика создают цветовую палитру страницы на основе цветов, найденных в таблицах стилей.

См. также:

• Использование цвета и палитры в Цветовая система в material.io: палитра Material Design.

Пример цвета со страницы с помощью пипетки

Чтобы изменить выбранный цвет на какой-либо другой цвет на странице:

1. Щелкните значок пипетки Курсор изменится на лупу.

2. Наведите курсор на пиксель цвета нужного цвета в любом месте экрана.

3. Щелкните для подтверждения.

   На следующем рисунке палитра показывает текущее значение rgba(0,0,0,0.7)цвета , близкое к черному. После щелчка определенный цвет изменится на версию черного, который сейчас выделен в окне просмотра.

   

См. также:

• Тестирование контрастности цвета текста с помощью палитры

Изменение значения угла с помощью Angle Clock

Angle Clock предоставляет пользовательский интерфейс для изменения угловых величин в значениях свойств CSS.

Чтобы открыть Angle Clock:

1. Выберите элемент, включающий объявление угла.

2. В области "Стили " найдите объявление transform или background , которое нужно изменить. Щелкните поле Предварительный просмотр угла рядом со значением угла.

   На следующем рисунке маленькие часы слева 100deg от — это предварительный вид угла.

3. Щелкните предварительный просмотр, чтобы открыть Angle Clock:

   

4. Измените значение угла, щелкнув круг Angle Clock , или прокрутите мышь, чтобы увеличить или уменьшить значение угла на 1.

Есть и другие сочетания клавиш для изменения значения угла. Дополнительные сведения см. в сочетаниях клавиш панели "Стили".

Изменение теней поля и текста с помощью теневого редактора

Используйте теневой редактор для изменения значения box-shadow свойства или text-shadow CSS элемента HTML:

1. Выбор элемента с объявлением box-shadow ИЛИ text-shadow .

   Например, откройте демонстрационную страницу 1DIV в новой вкладке или окне, щелкните страницу правой кнопкой мыши и выберите "Проверить ", чтобы открыть средства разработчика, а затем в средстве "Элементы " выберите <div class="demos"> элемент.

2. В области "Стили " в правиле .demos CSS найдите объявление box-shadow и нажмите соответствующую кнопку "Открыть теневой редактор " (").

   Откроется Редактор теней:

   

3. Измените свойства тени, как указано ниже.

   Property	Как изменить
   Type	Выберите "Начало" или "Вставка". Только для box-shadow.
   Смещение по оси X	Укажите значение в текстовом поле или перетащите синюю точку.
   Смещение по оси Y	Укажите значение в текстовом поле или перетащите синюю точку.
   Blur	Укажите значение в текстовом поле или перетащите ползунок.
   Спред	Укажите значение в текстовом поле или перетащите ползунок. Только для box-shadow.

   Изменения применяются к элементу на отрисованной веб-странице в режиме реального времени:

   

Измените время показа анимации и переходов с помощью редактора плавной анимации

Используйте редактор плавной анимации для изменения значения свойства animation-timing-function или transition-timing-function в элементе HTML.

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

1. В средствах разработчика в средстве "Элементы " в дереве DOM выберите элемент, к которому применена анимация или переход CSS.

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

   Откроются средства разработчика с инструментом "Элементы ".

2. Нажмите Ctrl+F и найдите "spinner", а затем выберите элемент, <div class="spinner"> который находится внутри <div class="animation-demo good">.

   Красные (плохие) и зеленые (хорошие) поля на этой демонстрационной странице — это две разные анимации CSS. Обе анимации выполняются с помощью CSS с помощью animation свойства CSS и определяют ease-in-out функцию синхронизации.

3. На вкладке Стили в правиле .good .spinner CSS в объявлении animation слева ease-in-outот нажмите кнопку Открыть кубический редактор Безье ().

   Откроется редактор замедленной работы:

   

Использование готовых настроек для настройки времени показа

Чтобы изменить время показа простым щелчком мыши, используйте пресеты в редакторе плавной анимации:

1. Откройте редактор замедленной анимации, как описано в разделе "Изменение времени анимации и переходов с помощью редактора замедленной анимации" выше.

2. Нажмите одну из четырех кнопок выбора:

   Кнопка	Тип функции	Ключевое слово CSS
   	Линейные функции	linear
   	Функции облегчения работы	ease-in-out
   	Функции простоты	ease-in
   	Функции простоты	ease-out

   Выбор кнопки задает значение ключевого слова в правиле CSS (которое меняется, если вы выбрали вариант пресета на следующем шаге), а переключатель настроек открывается в нижней части редактора плавной анимации.

3. В переключателе стилей нажмите левую или правую<> кнопку, чтобы выбрать один из следующих шаблонов настроек:

   • Линейные стили: elastic, bounce, или emphasized.

   • Кубические пресеты Безье:

   Ключевое слово синхронизации	Готовая настройка	Кубический Безье
   легкость выхода	В выход, синус	cubic-bezier(0.45, 0.05, 0.55, 0.95)
   легкость выхода	В исходящем, квадратичном режиме	cubic-bezier(0.46, 0.03, 0.52, 0.96)
   легкость выхода	В выходе, кубическом	cubic-bezier(0.65, 0.05, 0.36, 1)
   легкость выхода	Быстро выходить, медленно входить	cubic-bezier(0.4, 0, 0.2, 1)
   легкость выхода	В выход, назад	cubic-bezier(0.68, -0.55, 0.27, 1.55)

   Ключевое слово синхронизации	Готовая настройка	Кубический Безье
   удобство	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
   удобство	Дюйм, квадратичный	cubic-bezier(0.55, 0.09, 0.68, 0.53)
   удобство	Дюйм, кубический	cubic-bezier(0.55, 0.06, 0.68, 0.19)
   удобство	Внутрь, назад	cubic-bezier(0.6, -0.28, 0.74, 0.05)
   удобство	Быстрый выход, линейный вход	cubic-bezier(0.4, 0, 1, 1)

   Ключевое слово синхронизации	Готовая настройка	Кубический Безье
   облегчение выхода	Вон, синус	cubic-bezier(0.39, 0.58, 0.57, 1)
   облегчение выхода	Выход, квадратичный	cubic-bezier(0.25, 0.46, 0.45, 0.94)
   облегчение выхода	Выход, кубический	cubic-bezier(0.22, 0.61, 0.36, 1)
   облегчение выхода	Линейный выход, медленный вход	cubic-bezier(0, 0, 0.2, 1)
   облегчение выхода	Вон, назад	cubic-bezier(0.18, 0.89, 0.32, 1.28)

См. также:

• Кривая Безье в MDN.

Настройка времени показа слайдов

Чтобы задать пользовательские значения для функций времени, используйте контрольные точки на линиях:

• Для линейных функций щелкните в любом месте линии, чтобы добавить контрольную точку, и перетащите ее. Чтобы удалить контрольную точку, дважды щелкните ее.

  

• Для кубических функций Безье перетащите одну из контрольных точек:

  

Любое изменение запускает анимацию шара в режиме предварительного просмотра в верхней части редактора замедленной анимации.

См. также

• Начало работы по просмотру и изменению CSS.
• Просмотр CSS для элемента.
• Переформатируйте минифицированный файл JavaScript с помощью красивой печати в функциях отладки JavaScript.
• Инструмент отрисовки, чтобы увидеть, как выглядит веб-страница с различными вариантами отображения или недостатками зрения.
• Добавление псевдосостояния к классу.
• Меню команд
• Принудительно перевести средства разработчика в режим предварительного просмотра.
• Переопределение ресурсов веб-страницы с помощью локальных копий (вкладка "Переопределения")".
• Изменение и сохранение файлов в рабочей области (средство "Источники" — вкладка рабочей области).
• Эмуляция темного или светлого режима с помощью инструмента отрисовки в Эмуляция темных или светлых схем на отрисованной странице.
• Проверка проблем контрастности в темной и светлой теме
• Выравнивание элементов сетки и их содержимого: всплывающее окно редактора сетки в Проверка макетов сетки CSS.
• Тестирование контрастности цвета текста с помощью палитры
• Сочетания клавиш для панели "Стили".

Демонстрации:

• Приложение To Do
• Просмотр @property правил
• Просмотр @supports правил
• Просмотр @scope правил
• Просмотр @font-palette-values правил
• Просмотр @position-try правил
• Эмуляция страницы, на которой установлен фокус
• Выделение псевдоэлементов
• Каскадные слои
• 1DIV
• Демонстрационная страница анимированных свойств

МДН:

• Использование настраиваемых свойств CSS (переменные)
• padding Свойство CSS
• Специфика
• Пользовательские свойства (--*): Переменные CSS
  • Пользовательские свойства (--*): Переменные CSS
• @scope Правила CSS
• @position-try CSS at-rule
• @font-palette-values CSS at-rule
• Блочная модель
• API видимости страницы
• :active
• :focus
• :focus-within
• :target
• :hover
• :focus-visible
• Введение в каскад CSS
• Псевдоэлементы
• Каскадные слои.
• Основы синтаксиса CSS в статье Что такое CSS?
• Типы селекторов по специфичности.
• Функция animation-timing-function
• Transition-Timing-function
• Кривая Безье

GitHub:

• Пользовательские данные VS Code — репозиторий "microsoft / vscode-custom-data".

Web.dev:

• @property: наделение суперспособностями переменных CSS
• prefers-color-scheme: Здравствуй, темнота, мой старый друг

Блог Chrome для разработчиков:

• Закрепление экрана & проверка исчезающих элементов
• Автоматическая темная тема

Документы Chrome:

• Редактирование псевдоэлементов ::view-transition во время анимации в Анимация: проверка и изменение эффектов анимации CSS в документации Chrome.
• Сглаживание переходов с помощью API просмотра переходов в документах Chrome.

material.io:

• Использование цветов и палитры в цветовой системе: палитра Material Design.

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные Google , и используемые в соответствии с условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Оригинальная страница находится здесь , автором которой является Кейси Баскес.

Эта работа предоставляется по лицензии Creative Commons Attribution 4.0 International License.