Справочник по функциям 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, чтобы открыть внешнюю таблицу стилей, которая определяет правило. Таблица стилей откроется в области редактора средства "Источники ".

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

На следующем рисунке после щелчка https://learn.microsoft.com/_themes/docs.theme/master/en-us/_themes/styles/b66bc881.site-ltr.css:2 вы перейдете к строке 2 https://learn.microsoft.com/_themes/docs.theme/master/_themes/styles/b66bc881.site-ltr.css, где .content h1:first-of-type определено правило CSS.

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

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

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

2. Перейдите в область Вычисления в инструменте Элементы .

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

   Унаследованные свойства непрозрачны.

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

   На следующем рисунке на панели Вычисление показаны свойства CSS, применяемые к выбранному h1 элементу:

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Переключение псевдокласса, например :active, :focus, :hoverили :visited:

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

2. В инструменте Элементы перейдите в область Стили .

3. Щелкните :hov.

4. Выберите псевдокласс, который нужно включить.

   На следующем рисунке показано переключение псевдокласса :hover . В окне background-color: cornflowerblue просмотра объявление применяется к элементу, даже если на элемент фактически не наведен указатель мыши.

   

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

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

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

1. Откройте меню Команда.

2. Начните вводить rendering, а затем выберите Показать отрисовку.

3. Щелкните раскрывающийся список Эмуляция CSS Media и выберите печать.

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

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

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

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

   

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

   

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

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

   

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

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

   

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

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

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

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

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

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

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

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

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, введите значение или используйте клавиши со стрелками для увеличения значения на определенную сумму:

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

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

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

Средство выбора цвета предоставляет пользовательский интерфейс для изменения 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	Изменение
   Тип	Выберите Вычислить или Вставка. Только для box-shadow.
   Смещение по X	Укажите значение в текстовом поле или перетащите синюю точку.
   Смещение по Y	Укажите значение в текстовом поле или перетащите синюю точку.
   Blur	Укажите значение в текстовом поле или перетащите ползунок.
   Распространяться	Укажите значение в текстовом поле или перетащите ползунок. Только для box-shadow.

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

   

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

С помощью редактора easing измените значение свойства animation-timing-function или transition-timing-function в элементе HTML:

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

   Например, откройте страницу демонстрации анимированного свойства в новой вкладке или окне, щелкните страницу правой кнопкой мыши и выберите Проверить , чтобы открыть средства разработки, а затем в инструменте Элементы нажмите клавиши CTRL+F и найдите "spinner", а затем выберите <div class="spinner"> элемент .

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

2. В области Стили найдите animation объявление в .bad .spinner правиле CSS и нажмите кнопку Открыть редактор кубов безие ( .

   Откроется редактор "Упрощение ":

   

3. Измените свойства функции синхронизации анимации:

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

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

   

Примечание.

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

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