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

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

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

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

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

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

Пример выбранного элемента

На приведенном выше рисунке:

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

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

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

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

  • В DevTools щелкните элемент в дереве DOM.

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

Просмотр CSS

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

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

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

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

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

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

    Откроется devTools с выбранным инструментом Элементы .

  3. Перейдите на вкладку Стили .

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

    Различные ссылки выделены

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

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

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

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

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

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

    Откроется devTools с выбранным инструментом Элементы .

  3. Перейдите на вкладку Стили .

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

    Отобразится подсказка:

    Подсказка с документацией по свойству CSS

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

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

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

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

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

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

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

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

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

Просмотр специфики селектора

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

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

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

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

    Откроется devTools с выбранным инструментом Элементы .

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

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

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

    Подсказка с специфичным весом соответствующего селектора

См. также:

Просмотр значений пользовательских свойств

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

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

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

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

    Откроется devTools с выбранным инструментом Элементы .

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

  4. На вкладке Стили в правиле body CSS наведите указатель мыши на --spacing.

    Значение .3rem отображается в подсказке:

    Значение настраиваемого свойства в подсказке

См. также:

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

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

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

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

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

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

На вкладке Стили распознаются многие типы проблем CSS и выделяются по-разному.

Просмотр только css, который фактически применяется к элементу

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

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

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

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

    Откроется devTools с выбранным инструментом Элементы с элементом <h1> , выбранным в дереве DOM.

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

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

    Вычисленная панель

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

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

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

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

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

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

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

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

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

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

Css at-rule @property позволяет определять пользовательские свойства CSS определенных типов в таблице стилей.

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

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

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

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

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

    Откроется devTools с выбранным инструментом Элементы .

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

    Подсказка для css at-property at-rule

    Подсказка содержит:

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

  4. Щелкните ссылку Просмотр зарегистрированного свойства .

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

    --itemSize в разделе at-property

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

См. также:

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

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

Например, чтобы просмотреть правило, выполните следующие @supports действия:

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

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

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

    Результат HTML для at-supports at-rule

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

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

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

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

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

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

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

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

    Результат HTML-& CSS для область at-rule

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

    Откроется devTools с выбранным инструментом Элементы .

  3. Перейдите на вкладку Стили .

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

    Правило при область на вкладке Стили

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

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

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

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

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

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

Чтобы просмотреть правило CSS, выполните следующие действия @font-palette-values :

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

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

    Откроется devTools с выбранным инструментом Элементы .

  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 правил .

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

    Отобразится подменю со списком команд: LISTINGS, SPECIAL OFFERS, SIGN OUT.

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

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

    Результат HTML-& CSS для правила at-try

  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 элемента:

    Элемент button, выбранный в дереве DOM, и его CSS

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

См. также:

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

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

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

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

Схема модели Box

См. также:

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

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

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

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

Фильтрация панели

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

Фильтрация вычисленной панели

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

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

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

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

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

Осторожностью: Если этот параметр включен, document.visibilityState задается значение visible , а visibilitychange событие не срабатывает. См. раздел API видимости страницы в MDN.

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

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

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

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

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

    Откроется DevTools, и элемент message исчезнет. Окно DevTools теперь находится в фокусе, а не проверенной веб-страницы, поэтому элемент message исчезает.

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

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

    Под текстовым полем ввода элемент message снова появляется под текстовым полем ввода.

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

    Установлен флажок Эмулировать сфокусированную страницу

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

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

См. также:

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

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

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

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

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

    Откроется devTools.

  4. Выберите инструмент Элементы .

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

  6. Перейдите на вкладку Стили .

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

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

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

    Выбор псевдокласса :при наведении указателя мыши

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

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

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

Раздел состояния элемента Force для элемента textarea

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

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

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

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

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

При конфликте нескольких стилей каскад CSS определяет стиль выигрыша. См . статью Общие сведения о каскаде CSS в MDN.

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

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

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

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

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

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

    Откроется devTools. В инструменте Элементы на вкладке Стили отображается раздел: Наследуется от ::selection pseudo of div.text-parent:

    Просмотр раздела

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

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

    Просмотр раздела Псевдо на вкладке Стили

См. также:

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

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

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

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

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

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

    Откроется devTools.

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

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

    Каскадные слои

  5. Чтобы просмотреть порядок слоев, щелкните имя слоя (страница, компонент или база). Кроме того, нажмите значок Переключить представление ", чтобы переключить представление "Слои CSS".

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

См. также:

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

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

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

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

    Откроется devTools.

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

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

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

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

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

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

  7. По завершении в средстве отрисовки щелкните раскрывающийся список Тип носителя Эмуляция CSS , а затем выберите Нет эмуляции.

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

Инструмент "Покрытие " показывает, какой CSS фактически использует страница.

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

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

    Открытие средства

    Появится средство покрытия :

    Средство покрытия

  3. Щелкните Начать охват инструментирования и обновите страницу (Начать охват инструментирования и обновить страницу). Страница обновляется, а средство покрытия предоставляет общие сведения о том, сколько CSS (и JavaScript) используется из каждого файла, загружаемого браузером. Зеленый цвет представляет использованный CSS. Красный цвет представляет неиспользуемый CSS.

    Общие сведения о том, сколько css (и JavaScript) используется и не используется:

    Общие сведения о том, сколько CSS (и JavaScript) используется и не используется

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

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

    Построчное разбивка используемых и неиспользуемых CSS

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

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

Копирование CSS

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

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

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

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

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

    Откроется devTools с выбранным инструментом Элементы .

  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 в элемент

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

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

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

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

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

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

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

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

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

Добавление встроенных объявлений

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

С помощью указателя можно изменить любое свойство, которое имеет значение длины, например width, height, padding, marginили border.

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

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

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

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

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

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

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

    Появится подсказка " Increment/decrement with mousewheel or up/down keys. CTRL: +/-100, SHIFT: +/-10, ALT: +/-0.1"

  5. Переместите мышь или нажмите клавиши UpArrow и DownArrow при нажатии клавиши:

    CTRL: приращение к 100. Shift: приращение к 10. Alt: приращение к 0,1.

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

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

  7. Снова переместите колесо мыши или нажмите клавиши UPArrow и DownArrow , удерживая клавиши CTRL (+/-100), SHIFT (+/-10) или ALT (+/-0.1).

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

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

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

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

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

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

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

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

    Панель

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

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

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

    Переключение распространенных эмуляций отрисовки

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

    • предпочитает цветовую схему: свет. Указывает, что пользователь предпочитает светлую тему.

    • предпочитаемая цветовая схема: темная. Указывает, что пользователь предпочитает темную тему.

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

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

См. также:

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

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

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

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

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

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

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

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

  2. Щелкните Создать правило стиля (Новое правило стиля). DevTools вставляет новое правило под правилом element.style .

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

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

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

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

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

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

Выбор таблицы стилей

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

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

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

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

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

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

    Вставить правило стиля ниже

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

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

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

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

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

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

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

Изменение псевдоэлеминий ::view-transition во время анимации

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

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

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

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

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

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

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

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

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

    Предварительный просмотр цвета

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

    Средство выбора цвета

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

Средство выбора цвета с заметками

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

См. также:

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

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

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

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

  3. Щелкните, чтобы подтвердить.

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

    Использование пипетка

См. также:

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

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

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

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

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

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

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

    Предварительный просмотр угла

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

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

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

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

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

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

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

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

    Редактор тени

  3. Измените свойства тени следующим образом:

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

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

    Влияние изменений, внесенных в редакторе теней

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

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

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

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

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

    Откроется средство DevTools, в котором отображается инструмент "Элементы ".

  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. Откройте редактор easing, как описано выше в разделе Изменение времени анимации и перехода с помощью редактора easing.

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

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

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

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

    • Линейные предустановки: elastic, bounceили emphasized.

    • Предустановки Кубический Безье:

    Ключевое слово времени Предустановленных Кубический Безье
    упрощение в выходе In Out, Sine cubic-bezier(0.45, 0.05, 0.55, 0.95)
    упрощение в выходе В out, Quadratic cubic-bezier(0.46, 0.03, 0.52, 0.96)
    упрощение в выходе In Out, Cubic cubic-bezier(0.65, 0.05, 0.36, 1)
    упрощение в выходе Быстрый выход, медленный вход cubic-bezier(0.4, 0, 0.2, 1)
    упрощение в выходе In Out, Back cubic-bezier(0.68, -0.55, 0.27, 1.55)
    Ключевое слово времени Предустановленных Кубический Безье
    специальные возможности In, Sine cubic-bezier(0.47, 0, 0.75, 0.72)
    специальные возможности In, Quadratic cubic-bezier(0.55, 0.09, 0.68, 0.53)
    специальные возможности In, Cubic cubic-bezier(0.55, 0.06, 0.68, 0.19)
    специальные возможности In, Back 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)
    специальные возможности Out, Quadratic cubic-bezier(0.25, 0.46, 0.45, 0.94)
    специальные возможности Out, Cubic 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)

См. также:

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

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

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

    Перетаскивание контрольной точки линейной функции

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

    Перетаскивание контрольных точек функции Cubic Bezier

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

См. также

Демо:

MDN:

Github:

Web.dev:

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

Документы Chrome:

material.io:

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Кейс Баски.

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

  • Last updated on