快速入门：设置控件的样式 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

若要自定义使用 JavaScript 的 Windows 运行时应用中控件的外观，可以使用级联样式表 (CSS)，这与在网站上使用 CSS 非常相似。使用 JavaScript 的 Windows 应用商店应用还支持一些高级控件样式设置功能，Windows JavaScript 库提供了一组全面的样式，这些样式便于为你的应用提供 Windows 8 的外观。

我们将在这里展示如何包括 WinJS 样式表、如何设置 HTML 控件（称为固有控件）的样式、如何设置 WinJS 控件的样式，以及如何使用 WinJS 所提供的版式类。

请将此操作功能视为我们的应用功能大全系列的一部分。: Windows 应用商店应用 UI 全解

先决条件

• 我们假设你了解如何在使用 JavaScript 的 Windows 运行时应用中处理事件。若要了解处理事件的建议方法，请参阅快速入门：添加 HTML 控件和处理事件。
• 我们假设你可以创建和使用 WinJS 控件。若要了解具体做法，请参阅快速入门：添加 WinJS 控件和样式。
• 你还必须熟悉 CSS。（有关 CSS 的详细信息，请参阅 HTML/CSS/JavaScript 基础知识。）

使用适用于 JavaScript 的 Windows 库样式表的好处

WinJS 样式表提供了以下内容：

• 一组样式，可使你的控件外观出色并与基于触摸的显示器良好协作。
• 对于高对比度模式的自动支持。我们在设计样式时牢记高对比度，因此，当你的应用处于高对比度模式的设备上运行时，它将能够正确显示。
• 对于其他语言的自动支持。WinJS 样式表为 Windows 8 支持的每种语言自动选择正确的字体。你甚至可以在同一个应用中使用多种语言，而且它们能够正确显示。
• 对于其他阅读顺序的自动支持。对于阅读方向为从右到左的语言，HTML 和 WinJS 控件、布局和样式会自动进行调整。

使用最新的 Windows JavaScript 库样式表

若要启用最新的 WinJS 样式表：

1. 从 Get WinJS 下载最新版本，并将其复制到应用或网站的目录。
2. 将 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 提供两个默认的样式表（ui-dark.css 和 ui-light.css），你可以使用这两个样式表为你的应用提供 Windows 外观。

• 对于主要显示图像或视频的应用，我们建议使用深色样式表。
• 对于包含大量文本的应用，我们建议使用浅色样式表。

（如果你使用的是自定义配色方案，请使用最适合你的应用的外观和感觉的样式表。）

这些样式表定义以下样式：

• 基本样式

  html、body 和 iframe 元素的样式。

• 固有 HTML 控件的样式

  固有 HTML 控件（如 button）的样式。

• 其他固有 HTML 控件的类

  可分配给固有 HTML 控件以便为它们提供不同外观的 CSS 类。有关这些类的完整列表，请参阅 HTML 控件的 CSS 类。

• WinJS 控件样式

  代表适用于 WinJS 控件的可设置样式部分的 CSS 类。

• 版式样式

  版式元素（如 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）的样式，如在典型的 HTML 页面何种使用 CSS HTML 控件的样式一样。（若要了解 CSS 及其工作方式，请参阅 HTML/CSS/JavaScript 基础知识。）

例如，若要设置文本输入框的样式，以便它的宽度为 400 像素，请编写下面的 CSS：

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

典型的控件有多个组成部分或子部分。例如，上个示例中的文本输入控件有两部分：文本值和清除按钮。

使用 JavaScript 的 Windows 应用商店应用提供 CSS 伪元素，通过这些元素可以设置许多控件中各个部分的样式。文本输入值的伪元素是 -ms-value，清除按钮的伪元素是 -ms-clear。

若要设置控件某个部分的样式，请使用下面的语法：

element selector::part name { /* Your styles here */ }

例如，若要设置输入框的清除按钮的样式，可以创建下面的样式：

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

你可以将伪元素选择器与其他选择器结合使用，以便你可以创建具有特定类名或 ID 的目标控件。

例如，若要设置使用 "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

 

Select 控件 option 元素还提供 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 控件类

样式表包括可分配给固有 HTML 控件以便为它们提供不同外观的 CSS 类。例如，可以使用 win-backbutton 类使标准按钮看上去像用来向后导航的按钮。

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

使用该类可以使按钮看上去如下所示：

设置适用于 JavaScript 的 Windows 库控件的样式

若要设置 WinJS 控件的样式，请替代该控件的 WinJS CSS 类。例如，若要设置 AppBar 的样式，可以替代 win-appbar 类。

下一个示例将创建一个隐藏 ListView 的进度指示器的样式。

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

有关可用类的完整列表，请参阅 WinJS CSS 类。有关特定控件所使用的类的详细信息，请参阅该控件的引用页。

某些控件（如 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 版式类。

示例

若要了解有关样式设置的更多信息，请查看以下示例：

• 应用的样式处理和品牌打造示例

• 高对比度显示的 CSS 示例

摘要

你已了解如何使用 WinJS 样式表、如何设置固有控件和 WinJS 控件的样式，以及如何使用 WinJS 为版式提供的其他 CSS 类。

相关主题

HTML/CSS/JavaScript 基础知识

了解 CSS 选择器

WinJS CSS 类

HTML 控件的 CSS 类

Windows 运行时和 Windows JavaScript 库的 API 引用