快速入門：設定控制項的樣式 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]

若要在使用 JavaScript 的 Windows 執行階段應用程式中自訂控制項的外觀，您要使用階層式樣式表 (CSS)，這非常類似您在網站上使用的樣式表。使用 JavaScript 的 Windows 市集應用程式也支援一些控制設定樣式的進階功能，而且適用於 JavaScript 的 Windows Library 會提供一組完整的樣式，讓您的應用程式輕鬆擁有 Windows 8 的外觀及操作方式。

這裡我們為您示範如何加入 WinJS 樣式表、如何設定 HTML 控制項 (也稱為內建控制項) 的樣式、如何設定 WinJS 控制項的樣式，以及如何使用 WinJS 所提供的印刷格式類別。

如需了解此功能的運作情形，請參閱應用程式功能，從開始到完成系列: Windows 市集應用程式 UI，從開始到完成

先決條件

• 我們假設您知道如何處理使用 JavaScript 的 Windows 執行階段應用程式中的事件。若要了解建議的事件處理方法，請參閱快速入門：新增 HTML 控制項和處理事件。
• 我們假設您可以建立及使用 WinJS 控制項。若要了解如何使用，請參閱快速入門：新增 WinJS 控制項與樣式。
• 您也必須熟悉 CSS。(如需 CSS 的詳細資訊，請參閱 HTML/CSS/JavaScript 基本概念)。

使用適用於 JavaScript 的 Windows Library 樣式表的優點

WinJS 樣式表提供：

• 一組樣式，可讓您的控制項看起來很棒，也能搭配觸控式顯示器運作。
• 自動支援高對比模式。我們的樣式是針對高對比來設計，因此，當您的應用程式在裝置上以高對比模式執行時，將會正常顯示。
• 自動支援其他語言。WinJS 樣式表會針對 Windows 8 支援的每種語言，選取正確的字型。您甚至可以在相同的應用程式中使用多種語言，這些控制項還是會正常顯示。
• 自動支援其他讀取順序。HTML 和 WinJS 控制項、配置以及樣式會針對由右至左讀取方向的語言自動調整。

使用 Windows Library for JavaScript 的最新樣式表

若要啟用最新的 WinJS 樣式表：

1. 從取得 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 設定這些控制項的樣式一樣 (若要了解 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
}

您可以結合虛擬元素選取器與其他選取器，將目標設定在具有特定類別名稱或識別碼的控制項。

例如，若要設定使用 "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 控制項類別

樣式表包含 CSS 類別，您可以將這些類別指派給內建 HTML 控制項，以便提供不同的外觀及操作方式。例如，您可以使用 win-backbutton 類別，讓標準按鈕的外觀像是向後瀏覽的按鈕。

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

使用類別，讓按鈕的外觀如下：

設定適用於 JavaScript 的 Windows Library 控制項的樣式

若要設定 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 執行階段和適用於 JavaScript 的 Windows Library 的 API 參考