Проверка правил CSS

При отладке приложений можно просматривать и изменять правила CSS для выбранных элементов DOM и их дочерних элементов.

На вкладках Стиль и Отслеживать стили проводника DOM отображаются правила CSS, применимые к выбранному элементу. Правила отображаются в зависимости от применимости в конкретных ситуациях согласно правилам приоритета CSS. На вкладке Стили правило, указанное в списке первым, применяется к выбранному элементу в первую очередь, а указанное последним, соответственно, применяется последним. Применяемые правила переопределяют ранее примененные правила. Значения этих правил можно редактировать. Щелкните значение, введите новое и нажмите клавишу "Ввод". Изменение немедленно отображается в приложении.

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

Изменения, вносимые на вкладках Стиль и Отслеживать стили, не являются окончательными. Они удаляются, когда отладка устанавливается.

Просмотр и изменение CSS-правил

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

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

1. Создайте приложение Магазина Windows в Visual Studio, воспользовавшись JavaScript с шаблоном проекта приложения с разделением.

2. В Обозревателе решений откройте файл items.css. (Файл items.css можно найти в папке страниц.)

3. Замените следующий код CSS:

       .itemspage .itemslist .item {
           -ms-grid-columns: 1fr;
           -ms-grid-rows: 1fr 90px;
           display: -ms-grid;
           height: 250px;
           width: 250px;
       }
   

   На следующий код:

       .itemspage .itemslist .item {
           -ms-grid-columns: 1fr;
           -ms-grid-rows: 1fr 90px;
           display: -ms-grid;
           height: 250px;
           width: 250px;
           color: #ff6a00;
       }
   

   Этот код добавляет стиль, устанавливающий цвет #ff6a00 (оранжевый) для каждого элемента списка. Селектор CSS .itemspage .itemslist .item задает набор имен классов для элементов DIV в файле items.html, которые отображаются в виде вложенных элементов в модели DOM в реальном времени. Элемент DIV задает элементы списка.

4. В раскрывающемся списке рядом с кнопкой Начать отладку на панели инструментов Отладка выберите Имитатор.

   

5. Нажмите клавишу F5, чтобы запустить приложение в режиме отладки.

   После завершения загрузки приложения просмотрите заголовки элементов списка, например Заголовок группы: 1. Цвет не изменился, поэтому попытка применить оранжевый цвет к заголовкам не удалась. Мы установим причину неполадки и исправим ее с помощью вкладок CSS в проводнике DOM.

   Совет

   После того как приложение отобразится в имитаторе, расположите имитатор сбоку от Visual Studio. Это позволит сразу же просматривать результаты после выбора и изменения стилей CSS.

6. Переключитесь на Visual Studio и щелкните Выбор элемента в проводнике DOM (или нажмите CTRL+B). При этом изменится режим выделения, то есть можно будет выделить элемент щелчком, а приложение отображается на переднем плане. Вернуть предыдущий режим можно одним щелчком. Ниже показана кнопка Выбор элемента.

   

   Совет

   Кроме того, выбрать HTML-элементы можно непосредственно в проводнике DOM. Дополнительные сведения о выборе элементов см. в разделе Краткое руководство: отладка приложений (JavaScript).

7. В имитаторе наведите курсор на заголовок первого элемента в списке, Заголовок группы: 1, на левой панели начальной страницы. Вокруг заголовка появится цветной контур, как показано ниже:

   

8. Щелкните выделенный заголовок. Проводник DOM автоматически выбирает соответствующий элемент HTML, который выглядит примерно так. (Идентификатор будет другим.)

   <h4 class="item-title" id="_win_bind74" data-win-bind="textContent: title">Group Title: 1</h4>
   

   При выборе элемента в проводнике DOM имя текущей страницы отображается в поле Источник элемента справа от кнопки Выбор элемента. Файл items.html должен быть указан как HTML-файл:

   

   При выборе элемента H4 в проводнике DOM на вкладках Стили, Отслеживать стили и других теперь отображаются правила, связанные с элементом H4. Ниже показана вкладка Отслеживать стили с открытым свойством color:

   

   В этом представлении содержится полезная информация о правилах, связанных со свойством color, например тех, что представлены ниже:

   • Первое и второе вхождения свойства color не используются. Зачеркнутый текст означает, что свойство переопределено другим применением того же свойства с использованием правил приоритета CSS (специфичность).

   • Второе вхождение свойства color отмечено оранжевым квадратом, который указывает, что это свойство color, которое мы добавили в CSS-файл items.css.

   • Третье вхождение свойства color используется для задания цвета элементов в списке. Это значение задается в файле items.css, но оно устанавливается специально для следующего селектора CSS: .itemspage .itemslist .item .item-overlay .item-title.

9. Снимите флажок для третьего вхождения свойства color. Теперь в имитаторе видно, что цвет всех заголовков элементов изменился на оранжевый.

10. Выберите второе вхождение свойства color, а затем дважды щелкните значение свойства rgb(255, 106, 0).

11. С помощью клавиатуры удалите 106 и введите 255, а затем нажмите клавишу ВВОД. Цвета заголовков элементов в имитаторе изменятся на желтый.

12. Чтобы внести изменения в исходный CSS-файл, щелкните ссылку items.css на вкладке Отслеживать стили. Это приведет к открытию items.css, где можно изменить значение свойства цвета. Чтобы обновить приложение без остановки и перезапуска отладчика, нажмите кнопку Обновить приложение Windows на панели инструментов Отладка.

См. также

Задачи

Просмотр прослушивателей событий

Основные понятия

Краткое руководство: отладка приложений (JavaScript)

Просмотр и изменение макета

Другие ресурсы

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