共用方式為

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

  • 發行項

更新：2007 年 11 月

[直接樣式應用程式] 工具列可讓您建立和修改樣式。[直接樣式應用程式] 工具列可以跟 Visual Studio 中的其他 CSS 工具搭配使用。包括 [CSS 屬性 ] 視窗、[管理樣式 ] 視窗及 [套用樣式 ] 視窗。

頁面如果還沒有 CSS 樣式規則，而您想設計此頁面的樣式，您可以使用 [直接樣式應用程式] 工具列來產生並套用新樣式。例如，您可以使用 [直接樣式應用程式] 工具列來選取段落並將色彩套用到文字上。如此，Visual Studio 就會建立新的 CSS 樣式規則，並將規則套用到文字上。如果您在同一段落中設定了其他屬性的格式 (如段落的字型系列)，Visual Studio 會把新的屬性宣告加進剛才產生的樣式規則裡。

使用直接樣式應用程式工具列

您可以利用 [直接樣式應用程式] 工具列，透過自動或手動模式來產生及修改樣式。如果您對 CSS 撰寫仍不甚熟悉，可以選用自動模式，讓 Visual Studio 自動產生樣式規則。如果您熟悉 CSS 撰寫，則可以選用手動模式，以便更妥善地撰寫樣式規則。

在手動模式中，您可以將屬性宣告加入至不同樣式。包括新樣式、不同的產生樣式或是您已建立的樣式。當您使用手動模式，如有必要正確指派樣式，Visual Studio 會加入項目到 Web 網頁中。

直接樣式應用程式工具列概觀

下表列出 [直接樣式應用程式] 工具列的項目。

注意事項：

   當您使用自動模式時，[目標規則] 下拉式清單及 [重複使用現有樣式] 按鈕都會停用。

項目

描述

您可以用 [樣式應用程式] 下拉式清單設定要使用哪一種模式來產生及修改樣式。如果您是 CSS 撰寫新手，請使用自動模式。如果您已熟悉 CSS 撰寫，則可以選用手動模式，以簡化設計流程。

[目標規則] 下拉式清單會影響新的 CSS 屬性。您可以用它來檢視要修改的樣式名稱，或為目前項目建立的樣式型別。依預設，會鎖定優先順序最高的樣式。如果沒有任何樣式，預設值為 [新增自動類別]。

[目標規則] 下拉式清單提供下列選項。各選項的效果則視目前選取範圍而定。

  • 內嵌樣式：修改現有屬性宣告，或把新屬性宣告加進現有內嵌樣式。

  • 新內嵌樣式：在新產生的內嵌樣式中加入屬性宣告，並將樣式套用至目前的開頭標記。目前頁面項目沒有已存在的內嵌樣式時，才能使用本選項。

  • 新自動 ID "#id"：為沒有設定規則的已套用 ID 建立新樣式。如果您為頁面項目建立了 ID，而這些項目沒有樣式，在您將樣式套用到這些項目時，這個選項就很有用。

  • 新自動類別：為沒有規則的已套用類別建立新樣式。

  • 新自動類別 ".rule"：在自動產生的類別架構樣式中加入屬性宣告，並將樣式套用至目前的開頭標記。如果您為頁面項目建立了類別，而這些項目沒有樣式，在您將樣式套用到這些項目時，這個選項就很有用。

  • 套用新樣式：使用 [新樣式] 對話方塊建立新樣式，並選擇性地將此樣式套用到目前的選取範圍。

[重複使用現存的樣式] 按鈕會影響現有樣式和屬性中已進行的變更。如果所選樣式不包含您格式化的屬性之宣告，但目前選取範圍中的其他樣式有包含，則 [重複使用現存的樣式] 會判斷哪一個樣式已修改。選取 [重複使用現存的樣式] 時，會修改內含宣告的屬性。未選取 [重複使用現存的樣式] 時，則會修改目標規則。

[顯示重疊] 按鈕會指定是否要在要套用所選規則的項目上顯示重疊。選取本選項時，設計工具會用虛線圍繞使用 [目標規則] 下拉式清單中所選樣式的內容。這種重疊顯示方式可讓您檢視使用 [直接樣式應用程式] 工具列所做的變更會影響哪些項目。當您套用多個規則時，此選項特別好用，因為您可以更容易地存取要修改的特定規則。

將直接樣式應用程式工具列與 ASP.NET 控制項搭配使用

您可以使用 [直接樣式應用程式] 工具列來變更支援樣式設定之 ASP.NET 伺服器控制項的樣式。您可以使用工具列將樣式套用到下列控制項：為內嵌樣式及 CssClass 屬性 (Attribute) 定義屬性 (Property) 的控制項，以及繼承自 WebControl 類別的控制項。使用者控制項未定義這些屬性。因此，工具列不能與使用者控制項搭配使用。

ID 架構樣式規則不應與伺服器控制項搭配使用。在標記中或伺服端程式碼中指派的名稱，不一定就是所呈現之 HTML 項目的 ID。因此，仰賴 ID 來設定伺服器控制項的樣式並非可靠的方式。

使用直接樣式應用程式工具列

您可以在 [直接樣式應用程式] 工具列上設定應用程式模式，以決定樣式規則的建立方式。

在直接樣式應用程式工具列上設定應用程式模式

  • 按一下 [直接樣式應用程式] 工具列上的 [樣式應用程式] 下拉式清單，然後按一下 [自動] 或 [手動]。

[直接樣式應用程式] 工具列可快速建立新樣式或修改現有樣式規則。

使用直接樣式應用程式工具列建立新樣式

  1. 在 [設計] 檢視或 [原始碼] 檢視中，切換至 [手動] 樣式應用程式模式。

  2. 選取您要格式化的內容。

  3. 按一下 [直接樣式應用程式] 工具列上的 [目標規則] 下拉式清單，然後執行下列其中一項動作：

    • 若要根據您套用的格式化規則來產生新樣式，並將此樣式套用到目前內容，請選取 [新內嵌樣式]、[新自動 ID] 或 [新自動類別]，然後格式化內容。

    • 若要使用 [新樣式] 對話方塊建立新樣式，並選擇性地將此樣式套用到目前的選取範圍，請選取 [套用新樣式]。

您可以修改已套用到選取範圍的現有樣式規則，或為樣式規則建立新的屬性宣告。

使用直接樣式應用程式工具列修改現有樣式

  1. 在 [設計] 檢視或 [原始碼] 檢視中，切換至 [手動] 樣式應用程式模式。

  2. 選取您要格式化的內容。

  3. 按一下 [直接樣式應用程式] 工具列上的 [目標規則] 清單，然後按一下您要的樣式。

  4. 如果所選樣式不包含您格式化的屬性之宣告，但目前選取範圍中的其他樣式有包含，請選取 [重複使用現存的樣式] 來修改現有樣式。

  5. 格式化內容。

請參閱

概念

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

HOW TO：使用 CSS 屬性視窗