共用方式為

HOW TO：使用套用樣式和管理樣式視窗

  • 發行項

更新：2007 年 11 月

您可以使用 [套用樣式] 和 [管理樣式] 視窗套用、修改、重新命名及刪除樣式。您也可以附加或中斷連結外部階層式樣式表 (CSS)、選取某樣式的所有執行個體，或尋找包含樣式之規則集的程式碼。

這兩個視窗各有其特定用途。[套用樣式] 視窗可將一個或多個樣式套用到頁面項目。[套用樣式] 視窗會根據樣式規則來顯示各樣式。因此，您只要檢視視窗中出現的樣式，即可迅速辨認您要使用的樣式。

[管理樣式] 視窗可用來變更樣式的位置或順序。您可以把外部 CSS 的樣式移入內部 CSS，或把內部的樣式移到外部。您也可以移動樣式在樣式表或樣式區塊內的位置。

這兩個工具都以圖示來表示樣式的定義。下表列出並描述各圖示。

圖示

描述

紅點表示 ID 架構樣式。

綠點表示類別架構樣式。

藍點表示項目架構樣式。

黃點表示內嵌樣式 (Inline Style)。

圈起來的點表示目前頁面所用的樣式。

@ 符號表示匯入的外部階層式樣式表。

使用套用樣式視窗

[套用樣式] 視窗列出為頁面定義的所有 CSS 樣式規則，包括外部樣式表中定義的樣式規則、內嵌樣式的樣式規則，以及頁面定義之樣式的樣式規則。類別架構及 ID 架構樣式規則會出現在樣式所屬之外部 .css 檔案名稱的下方。如果樣式規則定義在頁面中，則出現在 [目前的頁面] 下方。項目架構樣式規則也採同樣的組織方式，但會另外出現在不同標題 [內容選取器] 下方。

您可以把視窗設定為列出所有樣式規則。或者，您也可以限制視窗僅列出目前 Web 網頁或網頁上目前選取範圍所用的樣式規則。無論選取哪一種，項目架構樣式規則及內嵌樣式規則只有在兩種情況下才會出現：一種是當您把滑鼠指標移到使用該樣式的頁面項目上時，另一種是當您選取使用該樣式的內容時。

您也可以排序 [套用樣式] 視窗中出現的樣式清單。

如果特定樣式因視窗背景的關係而看不清楚，您可以選取一個色彩，讓沒有背景屬性的樣式以此色彩為底色出現在視窗中。

注意事項：

若要讓樣式的所有規則暫時出現在快顯視窗 (Pop-Up Window) 上，請將滑鼠指標移到 [套用樣式] 視窗中的該樣式上。

套用樣式視窗概觀

[套用樣式] 視窗的使用者介面有以下功能：

  • [新樣式]，存取 [樣式] 對話方塊。

  • [附加樣式表]，選取樣式表以附加到目前頁面。

  • [清除樣式]，移除目前選取範圍上的所有類別架構及內嵌樣式規則。

  • [目前的頁面]，列出目前頁面上及匯入之外部 CSS 檔案上的所有類別架構及 ID 架構樣式規則。

  • 外部 CSS 檔案 (以 @ 符號表示)，列出所有匯入至目前 Web 網頁的樣式規則。

  • 外部 CSS 檔案，連結自目前 Web 網頁且會顯示成一個獨立區段。

  • 包圍樣式的實線矩型框線，表示目前選取範圍正在使用。

  • [內容選取器]，列出目前選取範圍所用的項目架構樣式規則。

  • [內嵌樣式]，列出要套用至所選內嵌項目的樣式規則。

  • 各樣式規則的快速鍵功能表，可讓您執行多項與樣式相關的工作。

使用套用樣式視窗

[套用樣式] 視窗可讓您將一個或多個樣式迅速套用到頁面項目。

使用套用樣式視窗將樣式套用至頁面項目

  1. 若要顯示 [套用樣式] 視窗，請按一下 [格式] 功能表中的 [CSS 樣式]，再按一下 [套用樣式]。

  2. 在 Web 網頁的 [設計] 檢視或 [原始碼] 檢視中，選取您要套用樣式的項目，然後在 [套用樣式] 視窗中執行下列其中一項動作：

    • 若要套用單一現有樣式規則，請按一下您要套用的類別或 ID 樣式。

    • 若要套用多個現有樣式規則，請按住 CTRL 鍵然並按一下您要套用的每一個樣式。

您可以變更樣式順序、變更要顯示的樣式或自訂視窗來顯示您要的項目。

使用套用樣式視窗排序樣式

  • 按一下 [套用樣式] 視窗中的 [選項]，然後執行下列其中一項動作：

    • 若要以樣式規則在 CSS 中出現的順序排列，請按一下 [依順序分類]。

    • 若要以字母順序及樣式類型 (類別架構或 ID 架構) 排列，請按一下 [依型別分類]。

您可以顯示或隱藏 [套用樣式] 視窗中的樣式規則。只有在您把滑鼠指標移到使用該樣式的內容上，或選取使用該樣式的內容時，項目架構樣式及內嵌樣式規則才會出現在 [套用樣式] 視窗中。

使用套用樣式視窗顯示或隱藏樣式

  • 按一下 [套用樣式] 視窗中的 [選項]，然後執行下列其中一項動作：

    • 若要列出目前 Web 網頁外部、內部及內嵌 CSS 中包含的所有樣式規則，請按一下 [顯示所有樣式]。

    • 若只要列出目前 Web 網頁使用的樣式規則，請按一下 [顯示目前網頁使用的樣式]。

    • 若只要列出 Web 網頁上目前選取範圍使用的樣式規則，請按一下 [顯示選取範圍使用的樣式]。

如果樣式規則沒有背景色彩，您可以套用一個色彩，以便在 [套用樣式] 視窗中更清楚地檢視樣式名稱。如果樣式有背景樣式規則，則背景會與樣式一同顯示。

在套用樣式視窗中顯示色彩背景

  1. 按一下 [套用樣式] 視窗中的 [選項]，然後按一下 [預覽背景色彩]。

  2. 在 [其他色彩] 對話方塊中選取色彩，然後按一下 [確定]。

使用管理樣式視窗

[管理樣式] 視窗會列出頁面之外部階層式樣式表 (CSS) 定義的所有樣式規則。同時也會列出頁面中定義的樣式規則，但不會列出內嵌樣式。您可以使用 [管理樣式] 視窗，把外部樣式表中的樣式移至頁面的 style 項目，或把內部的樣式移至外部。您也可以使用這個視窗來移動樣式在 CSS 樣式規則集中的位置。

您可以把視窗設定成列出所有樣式規則，或限制視窗僅列出目前 Web 網頁或目前網頁中選取範圍所用的樣式規則。所有類別架構、項目架構及 ID 架構樣式規則會出現在樣式規則所屬之外部 .css 檔案名稱的下方。目前頁面上的樣式規則會出現在 [目前的頁面] 下方。

注意事項：

若要讓樣式的所有規則暫時出現在快顯視窗 (Pop-Up Window) 上，請將滑鼠指標移到 [套用樣式] 視窗中的該樣式上。

管理樣式視窗概觀

[管理樣式] 視窗的使用者介面有以下功能：

  • [新樣式]，存取 [樣式] 對話方塊。

  • [附加樣式表]，選取樣式表以附加至目前頁面。

  • [目前的頁面]，列出目前頁面上及匯入之外部 CSS 檔案上的類別架構及 ID 架構樣式規則。

  • 連結自目前 Web 網頁之任何外部 .css 檔案的索引標籤。

  • 預設選取器分組，顯示任何樣式的選取器，而這些樣式會將多個選取器包含在一個群組中。如果要個別列出選取器，請按一下 [選項]，然後按一下 [分隔群組選取器]。

若要預覽 [管理樣式] 視窗中選取的樣式，請按一下 [選項]，然後按一下 [顯示選取的樣式預覽]。

使用管理樣式視窗

您可以變更樣式順序並自訂視窗來顯示您要的項目。如果您在清單中上下移動樣式，樣式表中的樣式也會移動。這會影響樣式屬性 (Property) 階層。例如，假設 Property 屬性 (Attribute) 設定成兩種不同樣式，則以後來的樣式為優先。

注意事項：

[管理樣式] 視窗設定成 [依項目分類] 或 [依型別分類] 時，您不能將樣式移到樣式清單上的某一個特定位置。不論是哪一種情況，您只能將樣式從外部 CSS 移動到另一個外部 CSS 上或頁面上，或將樣式拖曳至外部 CSS 檔案的名稱上或 [目前的頁面] 上以反向移動。

使用管理樣式視窗移動樣式

  1. 若要顯示 [管理樣式] 視窗，請按一下 [格式] 功能表中的 [CSS 樣式]，再按一下 [管理樣式]。

  2. 按一下 [管理樣式] 視窗中的 [選項]，然後按一下 [依順序分類]，然後執行下列動作：

    • 若要移動樣式在 CSS 中的位置，請在清單中上下拖曳樣式。例如，您可以將最常用的樣式放在一起，使其彼此相鄰，方便取用。

    • 若要把樣式從頁面上移到頁面連結的外部 CSS 上，請將 [目前的頁面] 下方的樣式拖曳到外部 CSS 的名稱下方，或拖曳到外部 CSS 的樣式清單上的某個特定位置。

    • 若要把樣式從外部 CSS 移到頁面上，請將外部 CSS 名稱下方的樣式拖曳到 [目前的頁面]，或拖曳到 [目前頁面] 下方樣式清單上的某個特定位置。如果 [目前的頁面] 沒有出現，請在 Web 網頁的 head 項目中加入 style 項目。

    • 若要把樣式從外部 CSS 移到另一個外部 CSS 上，請將樣式拖曳到外部 CSS 的名稱上，或拖曳到外部 CSS 中樣式清單上的某個特定位置。

[管理樣式] 視窗最適合用來管理樣式，但它也可以將樣式套用到頁面項目。

使用管理樣式視窗套用樣式

  1. 在 Web 網頁的 [設計] 檢視或 [原始碼] 檢視中，選取您要套用樣式的項目。

  2. 以滑鼠右鍵按一下您要套用的類別或 ID 樣式，然後在快速鍵功能表中按一下 [套用樣式]。

您也可以使用 [選項] 按鈕底下的項目來排序樣式。

使用管理樣式視窗排序樣式

  • 按一下 [管理樣式] 視窗中的 [選項]，然後執行下列其中一項動作：

    • 若要以樣式在 CSS 中出現的順序排列，請按一下 [依順序分類]。

    • 如果要列出各 HTML 項目套用的樣式，請按一下 [依項目分類]。

    • 若要依照字母順序及樣式類型排列樣式，請按一下 [依型別分類]。

您可以把同一組的樣式區隔開來，以利操作。

在樣式內含多個選取器時分別列出每個選取器

  • 按一下 [管理樣式] 視窗中的 [選項]，然後按一下 [分隔群組選取器]。

您也可以指定 [管理樣式] 視窗中要顯示的樣式。

顯示或隱藏管理樣式視窗中的樣式

  • 按一下 [管理樣式] 視窗中的 [選項]，然後按一下 [依順序分類]，然後執行下列動作：

    • 若要列出外部樣式表中包含的所有樣式、頁面上的所有樣式以及目前頁面的內嵌樣式規則，請按一下 [顯示所有樣式]。

    • 若只要列出目前頁面使用的樣式，請按一下 [顯示目前網頁使用的樣式]。

    • 若只要列出頁面上目前選取範圍使用的樣式，請按一下 [顯示選取範圍使用的樣式]。

請參閱

概念

HOW TO：使用 CSS 屬性視窗

HOW TO：使用直接樣式應用程式工具列