使用 CSS 概觀
更新：2007 年 11 月
階層式樣式表 (CSS) 包含樣式規則，可套用至 Web 網頁中的項目。這些樣式定義如何項目的顯示方式和在網頁上的位置。Visual Studio 2008 提供可用來使用 CSS 的工具。
這個主題包含：
案例
CSS 工具和功能
背景
程式碼範例
類別參考
新功能
案例
在 Visual Studio 2008，除了使用設計工具建立和編輯 Web 網頁之外，您也可以撰寫內嵌、包含在 Web 網頁中或包含在外部樣式表中的樣式規則。您可以使用視覺輔助工具，查看套用至頁面項目的邊框距離和邊界。您也可以使用定位工具來定位項目。
回到頁首
CSS 工具功能
Visual Studio 2008 提供一組工具，可建立、套用和管理樣式和階層式樣式表 (CSS)。這些工具包括：
[套用樣式] 視窗可讓您建立、修改和套用樣式。您也可以連結至或移除外部 CSS。這個視窗識別樣式類型，並指出該樣式是否用在目前 Web 網頁中以及是否由目前選取項目使用。如需詳細資訊，請參閱 HOW TO：使用套用樣式和管理樣式視窗。
[管理樣式] 視窗提供許多與 [套用樣式] 視窗相同的功能。不過，您可以使用 [管理樣式] 視窗，將樣式從內部樣式表 (網頁中的 style 項目) 移至外部樣式表，反之亦然。這個視窗也可以在樣式表內移動樣式。如需詳細資訊，請參閱 HOW TO：使用套用樣式和管理樣式視窗。
[CSS 屬性] 視窗顯示 Web 網頁中目前選取項目使用的樣式。也會顯示樣式的優先順序。此外，這個視窗還提供所有 CSS 屬性的完整清單。這可讓您將屬性加入至現有樣式、修改已設定的屬性和建立新的內嵌樣式 (Inline Style)。如需詳細資訊，請參閱 HOW TO：使用 CSS 屬性視窗。
[直接樣式應用程式] 工具列可讓您套用或移除類別型或 ID 型樣式，也可以建立和套用新的樣式。可讓您進一步控制 Visual Studio 所產生的樣式。如需詳細資訊，請參閱 HOW TO：使用直接樣式應用程式工具列。
標籤選擇器可讓您在 Web 網頁中選取 HTML 標記。標籤選擇器列位於編輯視窗底端。將指標移至網頁的任何位置時，快速標籤選擇器列會顯示標記，這些標記顯示該區域的基礎 HTML 標記。您也可以使用 ESC 鍵，在 HTML 階層中上移，選取以巢狀方式置於其他標記內的標記。如需詳細資訊，請參閱 Visual Web Developer 中的 HTML 編輯器標記巡覽。
回到頁首
背景
除了逐一指派格式屬性給網頁中的每個項目，您也可以建立樣式規則。當 Web 瀏覽器發現一個項目的任何執行個體時，或發現具有特定 ID 或樣式類別之項目的任何執行個體時，這些規則會套用屬性值 (通常是格式化規則)。
使用 CSS 樣式時，您必須了解如何建立樣式和如何套用樣式。這個章節包含 W3C CSS 規格中有關 CSS 樣式的資訊，也包含 Visual Studio 2008 中讓您更容易使用 CSS 樣式的工具資訊。
定義 CSS 樣式規則
每個 CSS 樣式規則 (又稱為樣式) 有兩個主要部分：選取器 (例如 h1) 和宣告 (例如 color:blue)。宣告由屬性 (color) 和值 (blue) 組成。樣式規則的語法如下：
Selector { property : value ; property2 : value2}
例如，下列 CSS 樣式規則指定任何 h1 項目中的任何文字必須置中，且字型色彩為藍色。
h1 {text-align:center; color:blue;}
使用不同樣式類型
您可以定義樣式規則，然後套用至項目、套用至已指派類別的項目，或依 ID 套用至項目。樣式由規則集定義，規則集包含選取器，後面接著在左大括號 ( { ) 和右大括號 ( } ) 之間出現的屬性宣告區塊。各種樣式依其選取器做區別。類別型選取器的開頭是句號 (.)。ID 型選取的開頭是數字符號 (#)。項目型樣式的選取器只由 HTML 項目的名稱組成，例如 h1。
項目型樣式
項目型樣式定義您要在特定 HTML 項目的每一個執行個體上套用的屬性 (對於一個項目的個別執行個體，類別型或 ID 型樣式可以覆寫項目型樣式)。例如，您可能想要在所有段落周圍建立 25 像素的邊界 (p 項目中的內容)。若要這樣做，您可以建立項目型樣式，這個樣式使用 p 項目做為選取器，且包含邊界屬性的宣告。下列範例顯示這個項目型樣式規則。
p { margin-left: 25px; margin-right: 25px }
類別型樣式
類別型樣式定義您要在特定項目類型的子集 (例如，部分而非所有 p 項目) 上套用的屬性。也可以套用至不同類型的項目，例如 p 項目和部分 span 項目。下列範例顯示類別型樣式規則。名稱 introduction 是樣式的選取器 (類別的名稱)。
.introduction {font-size: small; color: white}
下列範例顯示如何指定 <p> 標記的類別：
<p class="introduction">
ID 型樣式
ID 型樣式定義您要在依 ID 屬性識別的特定項目上套用的屬性。通常是當您想要在 Web 網頁中設定單一 HTML 項目的樣式時使用 ID 型樣式。下列範例顯示 ID 型樣式。名稱 footer 指定套用這個樣式的 ID。
#footer {background-color: #CCCCCC; margin: 15px}
下列範例顯示如何指定 <p> 標記的 ID：
<p id="footer">
撰寫 CSS 樣式
您可以在許多位置中撰寫 CSS 樣式規則，包括下列位置：
內嵌在 HTML 標記中。
在 Web 網頁的 style 項目中。
在連結至或匯入至 Web 網頁的外部樣式表中 (.css 檔)。
一般而言，您會在外部樣式表中撰寫套用至整個網站的規則。在網頁的 style 項目中，可以撰寫只套用至該網頁的樣式規則。撰寫成內嵌樣式的樣式規則只套用至單一頁面項目。許多設計人員和開發人員發現在一個或多個外部樣式表中撰寫所有樣式規則，比較容易維護樣式。
建立內嵌樣式
內嵌樣式規則是在項目的開頭標記中使用 style 屬性來定義。如果您要為 Web 網頁中的單一項目定義屬性，且不想要重複使用樣式，請使用內嵌樣式。
下列範例顯示內嵌樣式。
<p style="font-weight: bold; font-style: italic; color: #FF0000">
建立內部 (網頁專用) CSS 樣式
在 Web 網頁的 head 項目內，可以在 style 項目中定義 CSS 樣式規則。在此情況下，樣式規則只套用至該網頁的項目。
下列範例顯示如何定義 CSS 樣式規則並套用至 Web 網頁的所有 h1 項目。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>HTML 4.0 CSS Element Style Example</title>
<style type="text/css"> h1{text-align:center; color:blue;} </style>
</head>
<body>
<h1>This text is centered and blue</h1>
</body>
</html>
在這個 Web 網頁中，出現在 <h1> 和 </h1> 標記之間的任何文字將會置中且為藍色。您不需要為文件中的每個 h1 項目重複指派這些樣式屬性。如果要變更 h1 項目中所有文字的色彩 (或任何屬性)，您可以編輯一個樣式規則。
建立外部階層式樣式表
外部樣式表是副檔名為 .css 且只包含樣式規則的文字檔。您可以使用 link 項目，將樣式表連結至 Web 網頁，如下列範例所示。
<link rel="stylesheet" type="text/css" href="myStyles.css" />
這個 link 項目會將外部樣式表 myStyles.css 中的樣式規則套用至目前的頁面。
外部樣式表中列出的樣式規則和 style 項目中的樣式規則都以相同的方式撰寫。但是，沒有以 <style> 和 </style> 標記括住。下列範例顯示範例 .css 檔的完整內容。
h1 { text-align:center; color:blue; }
.head2 { font-size:14pt; text-align:center; color:blue; font-weight:bold; font-style:italic; }
您可以將一個外部樣式表連結至多個 HTML 網頁，這樣就可以將樣式套用至整個網站。樣式表會將格式化規則和內容分開。這樣比較容易管理樣式規則。
了解 CSS 樣式規則的優先順序
CSS 樣式規則會串聯 (Cascade)，這表示會遵循一套優先順序。全域樣式規則首先套用至 HTML 項目，然後被區域樣式規則覆寫。例如，在 Web 網頁的 style 項目中定義的樣式，將會覆寫外部樣式表中定義的樣式。同樣地，在網頁的 HTML 項目中定義的內嵌樣式，將會覆寫該項目在別處定義的任何樣式。
未被區域 CSS 樣式規則覆寫的個別全域樣式規則則會套用至項目 (即使已套用區域樣式)。在上一節的範例中，影響 h1 項目文字的區域 CSS 樣式會取代 Web 瀏覽器對於 h1 文字的部分全域樣式規則 (置中 h1 文字且變成藍色)。但是，不會變更所有可用的樣式，例如字型特性。全域和區域樣式規則也會依此順序套用。結果，這個網頁上的所有 h1 文字會以格式化為粗體、置中和藍色的較大字型顯示。
程式碼範例
回到頁首
類別參考
沒有類別套用至 CSS 工具。
回到頁首
新功能
Visual Studio 2008 現在具有豐富的 CSS 編輯經驗，其中提供了數種新工具，讓階層式樣式表 (CSS) 的使用方式比以前更為簡單。在 [設計] 檢視內使用 [CSS 屬性視窗]、[套用樣式] 和 [管理樣式] 視窗，以及 [直接樣式應用程式] 工具，可以完成大部分的內容配置和樣式設定工作。您也可以在 [設計] 檢視內使用 WYSIWYG 視覺化配置工具變更位置、邊框距離和邊界。
回到頁首