ASP.NET Web 伺服器控制項和 CSS 樣式

發行項
10/22/2014

更新：2007 年 11 月

藉由設定各種外觀屬性，例如 ForeColor、BackColor、Height 和 Width，您可以控制 ASP.NET 伺服器控制項的外觀。此外，某些控制項支援公開其他樣式相關設定的樣式物件。

注意事項：
ASP.NET Web 網頁會在執行階段會當成 HTML 網頁運作。除了 Web 伺服器控制項 (Server Dontrol) 外，您可以用 CSS 樣式來設定頁面上任何項目 (Element) 的外觀。此外，您也可以定義包含階層式樣式表設定的 ASP.NET 主題，然後將主題套用至網頁或站台。如需詳細資訊，請參閱 ASP.NET 佈景主題和面板。

下列章節提供直接設定樣式的資訊，包括如何在設計階段以及透過程式設計方式使用樣式。

將外觀屬性呈現至瀏覽器

網頁在執行時，會根據使用者瀏覽器的功能呈現外觀屬性。如果使用者的瀏覽器支援階層式樣式表 (CSS)，則會將外觀屬性 (Property) 呈現為組成控制項的 HTML 項目樣式屬性 (Attribute)。例如，假設您定義 HyperLink Web 伺服器控制項，並將其 ForeColor 屬性設為 Red、Bold 屬性設為 true 和 Size 屬性設為 xx-small，則會將控制項呈現如下 (若使用者的瀏覽器支援樣式表的話)：

<a id="hyperlink1" style="color: red; font-size: xx-small; font-weight: bold;">HyperLink</a>

<a id="hyperlink1" style="color: red; font-size: xx-small; font-weight: bold;">HyperLink</a>

另一方面來說，如果使用者的瀏覽器不支援樣式，則會以其他方法 (如 <font> 項目) 呈現控制項。以下顯示先前範例中的呈現部分，但這次的瀏覽器並不支援樣式：

<a id="a1"><b><font color="red" size="1">HyperLink</font></b></a>

<a id="a1"><b><font color="red" size="1">HyperLink</font></b></a>

其他根據瀏覽器而有不同呈現的屬性範例還有 BorderWidth 和 BorderColor。

某些外觀屬性不使用樣式就無法呈現，例如 BorderStyle。因此不支援樣式的瀏覽器就會忽略這些屬性。如需詳細資訊，請參閱 ASP.NET Web 伺服器控制項和瀏覽器能力。

控制項樣式物件

除了像是 ForeColor 和 BackColor 的外觀屬性外，控制項也會公開一個或多個封裝其他外觀屬性的樣式物件。其中一個範例是 Font 樣式屬性，它會公開包含與字型有關之個別屬性的物件型別 FontInfo，例如 Size、Name 和 Bold。

某些控制項會公開可以用來設定控制項特定部分外觀的樣式物件。例如，Calendar Web 伺服器控制項包含了如 DayStyle (個別日期)、SelectedDayStyle (使用者選取的日、週或月) 以及 WeekendDayStyle 的樣式物件。例如，您可以使用 SelectedDayStyle 樣式物件，設定使用者所選之日期的 BackColor 和 ForeColor 屬性。

大部分的樣式物件都是 Style 或 TableItemStyle 型別，因為它們設定的是表格儲存格的屬性。Font 屬性是 FontInfo 型別。

樣式物件的優先順序和繼承

在複雜的控制項中，樣式物件通常會繼承其他樣式物件的特性。例如，在 Calendar 控制項中，SelectedDayStyle 物件是以 DayStyle 物件為基礎。如果您沒有明確設定 SelectedDayStyle 的任何屬性，就會繼承 DayStyle 物件的特性。

這項繼承動作表示您設定的樣式物件屬性有優先順序。例如，下列清單顯示 Calendar 控制項之樣式物件屬性的順序，清單最後的物件設定擁有最高的優先順序。

基底 Calendar 控制項的外觀屬性。
DayStyle 樣式物件。
WeekendDayStyle 樣式物件。
OtherMonthDayStyle 樣式物件。
TodayDayStyle 樣式物件。
SelectedDayStyle 樣式物件。

當在容器 (Container) 項目和文字項目之間分隔樣式時，可能會很難處理樣式。例如，假設您有一個控制項的樣式表，且想要將文字樣式屬性套用至連結，而其餘的樣式套用至容器。如果使用控制項的樣式屬性設定樣式，例如功能表控制項的 MenuItemStyle 或月曆控制項的 TodayDayStyle，上述假設是可行的，然而使用 CssClass 屬性所定義的樣式卻更加困難，因為 ASP.NET 無法知道伺服器上的類別內容。ASP.NET 可以將 CssClass 屬性中定義的樣式套用至文字項目和容器項目，並加入內嵌樣式 (Inline Style) 隱藏這樣雙重應用的效果 (雙框線、比例字型乘法等等)。

套用控制項樣式最有效的方法是使用控制項定義的樣式屬性，以及使用樣式表或內嵌樣式，視需要對個別項目做些許的調整。若要覆寫控制項的樣式屬性定義的樣式，請在樣式表或內嵌樣式中使用 !important CSS 規則。

下列程式碼範例會在 hovernodestyle 項目上使用 CssClass 屬性。這個類別先後被定義為 myclass 和 a.myclass:visited，因此它會覆寫 a:visited 定義。

<%@ Page Language="C#" %>
<html>
<head >
  <asp:sitemapdatasource id="SiteMapSource"  />
  <style type="text/css">
    a:visited 
    {
      color: #000066
    }
    myclass, a.myclass:visited {
      color: #FF0000
    }
  </style>
</head>
<body>
  <form >
    <a href="https://www.Contoso.com">Contoso</a>
    <asp:treeview id="treeview1"  
        initialexpanddepth="1"  
        datasourceid="SiteMapSource" 
        forecolor="#444444" 
        font-names="Verdana" 
        font-size="0.8em">
      <nodestyle font-bold="true" />
      <hovernodestyle cssclass=myclass />
    </asp:treeview>
  </form>
</body>
</html>

如果要使用階層式樣式表 (CSS) 自訂控制項的外觀，請使用內嵌樣式或個別 CSS 檔案，但不要一起使用。同時使用內嵌樣式和個別 CSS 檔案可能會導致非預期的結果。

直接控制 CSS 樣式和類別

除了外觀屬性和樣式物件之外，控制項也會公開能夠讓您更直接管理 CSS 樣式的兩種屬性：CssClass 和 Style。CssClass 屬性能夠讓您將樣式表類別指派給控制項。Style 屬性能夠讓您將樣式屬性的字串設定成以現有狀態寫入控制項。您可以使用 Style 屬性設定尚未透過其他屬性 (Property) 公開的樣式屬性 (Attribute)。Style 屬性會公開能夠直接呼叫其方法以設定樣式的集合，例如 Add 和 Remove。

在 Style 屬性中所作的設定不會反映在對應的個別外觀屬性中。例如，如果您在 Style 屬性將字串設定為 background-color:red ，則即使控制項會以紅色背景呈現，BackColor 屬性還是不會設定為紅色。如果您同時設定了外觀屬性和 Style 屬性，則個別外觀屬性的優先順序會超越 Style 屬性。

共用方式為