Краткое руководство: использование стилей для элементов управления (HTML)

Статья
03/04/2016

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Для настройки внешнего вида элементов управления в приложении среды выполнения Windows на JavaScript используются каскадные таблицы стилей (CSS), что во многом напоминает оформление веб-сайтов. Кроме того, приложения Магазина Windows на JavaScript поддерживают ряд дополнительных функций для стилевого оформления элементов управления, а в библиотеке Windows для JavaScript доступен полный набор стилей, позволяющих быстро придать приложению внешний вид и стиль Windows 8.

Из этой статьи вы узнаете, как включить таблицу стилей WinJS, как применять стили к элементам управления HTML (они также называются встроенными), как задавать стили для элементов управления WinJS и как использовать типографические классы WinJS.

См. эту функцию в действии в нашей серии Функции приложений от А до Я: Пользовательский интерфейс Магазина Windows от А до Я

Необходимые условия

Предполагается, что вы имеете представление об обработке событий в приложении среды выполнения Windows на JavaScript. Рекомендуемый способ обработки событий описан на странице Краткое руководство: добавление элементов управления HTML и обработка событий.
Предполагается, что вы умеете создавать и использовать элементы управления WinJS. Чтобы узнать, как это делать, см. Краткое руководство: добавление элементов управления и стилей WinJS.
Также предполагается знакомство с CSS. (Дополнительные сведения о CSS см. в статье Основы HTML/CSS/JavaScript.)

Преимущества использования таблиц стилей из библиотеки Windows для JavaScript

Таблицы стилей WinJS предоставляют следующее:

Набор стилей, благодаря которому элементы управления хорошо выглядят и хорошо работают на сенсорных экранах.
Автоматическая поддержка режимов высокой контрастности. Эти стили разработаны с учетом требований высокой контрастности и будут корректно отображаться в приложениях на устройствах, работающих в режиме высокой контрастности.
Автоматическую поддержку других языков. Таблицы стилей WinJS автоматически выбирают подходящий шрифт для каждого языка, поддерживаемого Windows 8. Вы можете использовать в одном приложении несколько языков, и все они будут отображаться правильно.
Автоматическую поддержку другого направления чтения. Элементы управления, макеты и стили HTML и WinJS автоматически подстраиваются под языки с направлением чтения справа налево.

Использование новейших таблиц стилей из библиотеки Windows для JavaScript

Добавление новейших таблиц WinJS

Скачайте последнюю версию по ссылке Скачать WinJS и скопируйте ее в каталог своего приложения или веб-сайта.
Добавьте WinJS CSS и ссылки на сценарии на каждую страницу своего приложения или веб-сайта, использующую возможности WinJS.

В следующем примере показано, как эти ссылки выглядит как для приложения, имеющего файлы WinJS в корневом каталоге.

    <!-- WinJS style sheets (include one) -->
    <link href="/WinJS/css/ui-dark.css" rel="stylesheet">
    <link href="/WinJS/css/ui-light.css" rel="stylesheet">

    <!-- WinJS code -->
    <script src="/WinJS/js/WinJS.js"></script>

WinJS содержит две таблицы стилей по умолчанию, которые помогают придать приложению внешний вид и функциональные возможности Windows: ui-dark.css и ui-light.css.

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

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

В этих таблицах определяются следующие стили:

Основные стили

Стили для элементов html, body и iframe.
Стили встроенных элементов управления HTML

Стили встроенных элементов управления HTML, такие как button.
Дополнительные классы встроенных элементов управления HTML

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

Классы CSS, представляющие определяемые стилем части элементов управления WinJS.
Типографические стили

Стили для типографических элементов, таких как h1, dd и p.
Дополнительные типографические классы

Классы CSS, которые вы можете использовать для определения стиля текста. Например, можно использовать класс win-type-large, чтобы сделать текст элемента крупным.

Настройка внешнего вида приложения

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

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

Вы можете переопределить любой стиль в таблице стилей по умолчанию. Для этого создайте собственную таблицу стилей и добавьте ее после таблицы WinJS:


<!-- The WinJS style sheet. -->
<link href="/WinJS/css/ui-dark.css" rel="stylesheet">

<!-- Your style sheet for overriding portions of the default style sheet. -->
<link href="/css/mystylesheet.css" rel="stylesheet" />

Задание цветов

Вы можете переопределить таблицы стилей WinJS или указать собственные стили. Если вы указываете собственные стили, то лучше использовать системные цвета CSS, так как для них автоматически выбирается правильное отображение в режиме высокой контрастности. Список системных цветов см. в разделе об определяемых пользователем системных цветах.

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

Стили элементов управления HTML

Для элементов управления HTML (они входят в стандарт HTML5, например button, textarea и select) вы можете задать стили с помощью CSS, как и на обычной HTML-странице. (Сведения о работе CSS см. в статье Основы HTML/CSS/JavaScript. )

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

input[type=text]
{
    width: 400px;
}

Элемент управления для ввода текста

Обычно элемент управления состоит из нескольких частей (или компонентов). Например, элемент управления для ввода текста, показанный в предыдущем примере, состоит из двух частей: текстового значения и кнопки очистки.

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

В приложениях Магазина Windows на JavaScript предусмотрены псевдоэлементы CSS, которые позволяют задавать стили для отдельных частей многих элементов управления. Для значения текстового ввода используется псевдоэлемент -ms-value, а для кнопки сброса — псевдоэлемент -ms-clear.

Элемент управления для ввода текста со значениями

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

element selector::part name { /* Это ваши стили */ }

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

input[type=text]::-ms-clear
{
            border: 2px solid orange
}

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

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

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

input[type=text].orangeButton::-ms-clear
{
            border: 2px solid orange
}

Дополнительные сведения о различных сочетаниях псевдоэлементов с другими селекторами см. в разделе Основные сведения о селекторах CSS.

Далее показаны части, доступные для каждого элемента управления HTML.

Элемент управления	Части
input type=checkbox	-ms-check
input type=radio	-ms-check
input type=password	-ms-reveal
input type=range	-ms-fill-lower, -ms-fill-upper, -ms-thumb, -ms-track, -ms-ticks-after, -ms-ticks-before, -ms-tooltip
input type=email, input type=number, input type=password, input type=search, input type=tel, input type=url	-ms-value,-ms-clear
input type=file	-ms-value, -ms-browse
progress	-ms-fill
select	-ms-value, -ms-expand

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


<select id="fontNameSelect" onChange="formatText('fontName')">
    <option style="font-family:Arial;">Arial</option>
    <option style="font-family:Comic Sans MS;">Comic Sans MS</option>
    <option style="font-family:Courier New;">Courier New</option>
    <option style="font-family:Cursive;">Cursive</option>
    <option style="font-family:Segoe Script;">Segoe Script</option>
</select>

Классы элементов управления HTML

Таблица стилей содержит классы CSS, которые вы можете назначить встроенным элементам управления HTML, чтобы изменить их внешний вид и удобство использования. Например, класс win-backbutton позволяет сделать из обычной кнопки стрелку, указывающую назад.

<button class="win-backbutton"></button>

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

Кнопка, использующая класс CSS backbutton

Стили элементов управления из библиотеки Windows для JavaScript

Чтобы задать стиль для элемента управления WinJS, необходимо переопределить для него классы CSS WinJS. Например, для элемента AppBar нужно переопределить класс win-appbar.

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

.win-listView .win-progress {
    display: none;
}

Полный список доступных классов см. в разделе Классы CSS WinJS. Дополнительные сведения о классах, используемых в конкретном элементе управления, см. на странице справки для этого элемента.

Некоторые элементы управления, такие как ListView и FlipView, также поддерживают шаблоны элементов. Шаблоны дают большие возможности в выборе внешнего вида и содержания элементов списка. Дополнительные сведения см. на страницах Краткое руководство. Добавление ListView и Краткое руководство. Добавление FlipView.

Типографические классы

В таблицу стилей также входят классы CSS для типографии, которые вы можете применять к любому элементу, содержащему текст. Например, класс win-title задает стиль Windows 8 для заголовка. В этом примере с помощью типографических классов создаются различные типы заголовков.


     <p class="win-type-xx-large">win-type-xx-large</p>
     <p class="win-type-medium">win-type-medium</p>
     <p class="win-type-xx-small">win-type-xx-small</p>

Элементы, использующие типографические классы

Полный список таких типографических классов см. в разделе Типографические классы CSS.

Примеры

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

Сводка

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