共用方式為

使用 CSS 概觀

  • 發行項

階層式樣式表 (CSS) 包含樣式規則，可套用至網頁中的項目。 這些樣式可定義項目的顯示方法，以及在頁面上放置的位置。 Visual Studio 提供可用來處理 CSS 的工具。

本主題包含下列章節：

  • 案例

  • CSS 工具功能

  • 背景

  • 程式碼範例

  • 類別參考

  • 秘訣

案例

當您編輯網頁時，您可以在下列三個位置中建立樣式規則： 內嵌內部、 <style>一節中的網頁，或在外部樣式表內。 您可以使用視覺輔助工具，查看套用至頁面項目的邊框距離和邊界。 您也可以使用定位工具來定位項目。

回到頁首

CSS 工具功能

Visual Studio 提供下列工具，可讓您建立、套用和管理樣式與階層式樣式表 (CSS)：

  • [套用樣式] 視窗可讓您建立、修改和套用樣式。 您也可以連結至或移除外部 CSS。 視窗識別樣式類型，並顯示樣式是否用於目前的網頁，並在目前的選取範圍是否使用它。

  • [管理樣式] 視窗提供許多與 [套用樣式] 視窗相同的功能。 不過，您可以使用管理樣式視窗，將樣式從移<style>一節中的網頁至外部樣式表，反之亦然。 這個視窗也可以在樣式表內移動樣式。

  • CSS 屬性 ] 視窗會顯示在網頁中目前的選取範圍所使用的樣式。 也會顯示樣式的優先順序。 此外，這個視窗還提供所有 CSS 屬性的完整清單。 您可以將屬性加入至現有的樣式、 修改屬性，您已設定，並建立新的內嵌樣式。 如需詳細資訊，請參閱 HOW TO：使用 CSS 屬性視窗。

  • 如果您正在使用 ASP。NET Web Form 網頁 (.aspx 檔) 中，標籤選擇器可讓您選取的 HTML 標記，當您使用網頁中。 標籤選擇器列位於編輯視窗底端。 將指標移至網頁的任何位置時，快速標籤選擇器列會顯示標記，這些標記顯示該區域的基礎 HTML 標記。 您也可以使用 ESC 鍵，在 HTML 階層中上移，選取以巢狀方式置於其他標記內的標記。

回到頁首

背景

您沒有在網頁中的特定型別的每一個項目來指定格式設定的屬性。 相反地，您可以建立樣式規則套用至該型別的所有項目。 這些規則將套用屬性值，如格式設定規則的執行個體的項目，或具有特定 ID 或樣式類別的任何項目。

本章節中，在您深入了解 CSS 樣式，以及如何建立和套用它們藉由使用 Visual Studio。

Bb398931.collapse_all(zh-tw,VS.110).gif定義 CSS 樣式規則

每個 CSS 樣式規則 (又稱為樣式) 有兩個主要部分：選取器 (例如 h1) 和宣告 (例如 color:blue)。 宣告由屬性 (color) 和值 (blue) 組成。 樣式規則的語法如下：

Selector { property : value ; property2 : value2}

比方說，下列的 CSS 樣式規則會指定所指定文字中任何h1項目置中對齊，且具有藍色的字型色彩。

h1 {text-align:center; color:blue;}

Bb398931.collapse_all(zh-tw,VS.110).gif使用不同樣式類型

樣式規則會套用至項目，有的項目至class屬性，或加入項目，有一個 id。 在樣式表中，每一種被以選取器。 類別型選取器的開頭是句號 (.)。 ID 型選取的開頭是數字符號 (#)。 項目為基礎的選取器是只是名稱的 HTML 項目，例如h1。 完整的樣式是一個選擇器，再加上一個左括號 ({}) 和右大括號 (}) 內的屬性宣告一組。

Bb398931.collapse_all(zh-tw,VS.110).gif項目型樣式

項目型樣式定義您要在特定 HTML 項目的每一個執行個體上套用的屬性 (對於一個項目的個別執行個體，類別型或 ID 型樣式可以覆寫項目型樣式)。比方說，您可能想要在網頁的所有段落周圍的 25 個像素 (p項目)。 若要這樣做，您可以建立使用的樣式， p選取器後面跟著包含邊界屬性的大括號。 下列範例顯示這個項目型樣式規則。

p { margin-left: 25px; margin-right: 25px }

Bb398931.collapse_all(zh-tw,VS.110).gif類別型樣式

類別型樣式定義您要在特定項目類型的子集 (例如，部分而非所有 p 項目) 上套用的屬性。 也可以套用至不同類型的項目，例如 p 項目和部分 span 項目。 下列範例顯示類別型樣式規則。 名稱introduction樣式選取器 (類別的名稱)。

.introduction {font-size: small; color: white}

下列範例顯示如何指定 <p> 標記的類別：

<p class="introduction">
注意事項注意事項

在 Visual Studio 中，不會根據 .css 檔案中定義的類別來驗證標記中的類別名稱。這是因為類別名稱可做為 ECMAScript 程式碼的語意描述元 (做為 Microformat)，或標記尚未定義的樣式。

Bb398931.collapse_all(zh-tw,VS.110).gifID 型樣式

識別碼型樣式定義您想要套用至項目具有特定的 ID 屬性的屬性。 當您想將樣式套用在網頁中的單一的 HTML 項目時，經常會使用 ID 架構樣式。 下列範例顯示 ID 型樣式。 名稱 footer 指定套用這個樣式的 ID。

#footer {background-color: #CCCCCC; margin: 15px}

下列範例顯示如何指定 <p> 標記的 ID：

<p id="footer">

Bb398931.collapse_all(zh-tw,VS.110).gif撰寫 CSS 樣式

您可以在許多位置中撰寫 CSS 樣式規則，包括下列位置：

  • 內嵌在 HTML 標記中。

  • 在style網頁中的項目。

  • 在外部樣式表 (.css 檔案) 中的連結或匯入網頁。

一般而言，您會在外部樣式表中撰寫套用至整個網站的規則。 在網頁的 style 項目中，可以撰寫只套用至該網頁的樣式規則。 撰寫成內嵌樣式的樣式規則只套用至單一頁面項目。 許多設計人員和開發人員發現在一個或多個外部樣式表中撰寫所有樣式規則，比較容易維護樣式。

Bb398931.collapse_all(zh-tw,VS.110).gif建立內嵌樣式

內嵌樣式規則是在項目的開頭標記中使用 style 屬性來定義。 如果您要定義網頁中的單一元素的屬性，且不想重複使用該樣式，請使用內嵌樣式。 下列範例顯示內嵌樣式。

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Bb398931.collapse_all(zh-tw,VS.110).gif建立內部 (網頁專用) CSS 樣式

CSS 樣式規則可以定義在style元素內head網頁的項目。 在此情況下，樣式規則只套用至該網頁的項目。

下列範例顯示如何定義和套用到所有的 CSS 樣式規則h1網頁中的項目。

<!DOCTYPE HTML>
<html>
  <head>
    <title>CSS Element Style Example</title>
      <style>
        h1{text-align:center; color:blue;}
      </style>
  </head>
  <body>
    <h1>This text is centered and blue</h1>
  </body>
</html>

此網頁，在任何文字的顯示之間<h1>和</h1>標記會置中和藍色。 您不需要為文件中的每個 h1 項目重複指派這些樣式屬性。 如果要變更 h1 項目中所有文字的色彩 (或任何屬性)，您可以編輯一個樣式規則。

Bb398931.collapse_all(zh-tw,VS.110).gif建立外部階層式樣式表

外部樣式表是副檔名為 .css 且只包含樣式規則的文字檔。 您可以將樣式表連結至某個網頁藉由使用link元素，如下列範例所示。

<link rel="stylesheet" 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 網頁，可將樣式套用至整個網站。 樣式表會將格式化規則和內容分開。 這個方法可讓您更容易管理樣式規則。

Bb398931.collapse_all(zh-tw,VS.110).gif了解 CSS 樣式規則的優先順序

CSS 樣式規則會串聯 (Cascade)，這表示會遵循一套優先順序。 全域樣式規則首先套用至 HTML 項目，然後被區域樣式規則覆寫。 比方說，所定義的樣式style網頁中的項目就會覆寫在外部樣式表中所定義的樣式。 同樣地，在網頁的 HTML 項目中定義的內嵌樣式，將會覆寫該項目在別處定義的任何樣式。

除非覆寫了由區域 CSS 樣式規則，就會套用個別全域樣式規則。 在前述範例中，本機 CSS 樣式的h1項目取代的全域一些h1樣式規則 (置h1文字且變成藍色)。 但是，不會變更所有可用的樣式，例如字型特性。 全域和區域樣式規則也會依此順序套用。 結果，這個網頁上的所有 h1 文字會以格式化為粗體、置中和藍色的較大字型顯示。

程式碼範例

逐步解說：建立和修改 CSS 檔

逐步解說：使用現有的 CSS 檔

HOW TO：使用 CSS 屬性視窗

回到頁首

類別參考

沒有類別套用至 CSS 工具。

回到頁首

秘訣

Visual Studio 提供豐富的 CSS 編輯體驗，其中包含數種工具，讓階層式樣式表 (CSS) 的使用方式比以前更為簡單。 有很多設計版面配置和樣式設定內容的工作可以在作業在設計 藉由檢視 CSS 屬性 ] 視窗和 套用樣式 和 管理樣式 windows。 您也可以在 [設計] 檢視內使用 WYSIWYG 視覺化配置工具變更位置、邊框距離和邊界。

回到頁首