ASP.NET立即上手教程(5)

應用樣式到HTML伺服器控制項

WEB是一個靈活的使用者介面環境，不同的網站在視覺和感覺上極盡變化之能事。層疊式樣式表（CSS）的廣泛應用，極大的豐富了WEB的設計。所有ASP.NET的HTML伺服器控制項和WEB伺服器控制項，已經被設計為能夠提供一流的CSS樣式支援。這一部分討論如何應用樣式到伺服器控制項，並且示範伺服器控制項在WEB FORMS中所提供的精細的外觀控制。

應用樣式到 HTML伺服器控制項

標準的HTML標籤通過STYLE屬性來支援CSS，STYLE屬性由一系列成對出現的以分號分割的 屬性/值 來定義。例如{font: 12pt verdana; font-weight:700;color:orange;}。關於IE瀏覽器對CSS屬性支援的更多資訊，請參考MSDN Web Workshop的 CSS Attributes Reference 頁面。所有ASP.NET的 HTML伺服器控制項，都可以像標準HTML標誌那樣，接受CSS樣式。下面的例子說明了把一些樣式應用到不同的HTML伺服器控制項。如果你察看返回給用戶端的來源程式，你就會發現這些在控制項中引用的樣式送到了用戶端。

CSS也定義了CLASS屬性，通過在文檔中包含<style>...</style>來設定CSS樣式 。這個屬性的優點是僅需要定義一次，就可以應用到不同的標籤上，而不需要重新定義標籤本身的樣式。HTML伺服器控制項的樣式也可以用這種方式管理。請看下面的例子：

當ASP.NET頁面被解析的時候，樣式資訊就被組裝到了System.Web.UI.HtmlControls.HtmlControl 類上的STYLE屬性上（類型是CssStyleCollection）。該屬性建立一個字典，以字串索引的集合中的值，填充應用控制項樣式的每一個樣式屬性值。例如，你可以使用下面的代碼設定和取回HtmlInputText伺服器控制項的width樣式屬性值。

以下為引用的內容： <script language="C#" runat="server" >   void Page_Load(Object sender, EventArgs E) {     MyText.Style["width"] = "90px";     Response.Write(MyText.Style["width"]);   } </script> <input type="text" id="MyText" runat="server"/>

下面的這個例子，向你展示如何使用Style集合屬性，通過程式來操縱HTML伺服器控制項的樣式

應用樣式到WEB伺服器控制項

WEB伺服器控制項對樣式提供了額外的支援層級，即對於常用的樣式設定，增加了幾個強型別屬性。常用的樣式包括背景色、前景色彩、字型名稱和大小、寬度、字型加重等等。這些樣式屬性作為HTML中可以使用的樣式行為的子集，並且作為“平台”屬性，在System.Web.UI.WebControls.WebControl基類中直接擴充。使用這些屬性的好處在於，在開發工具，例如VS.NET中，他們提供了編譯時間類型檢查和狀態完成。

下面的例子顯示了一個應用了若干樣式的日曆控制項（作為對照，同時包含了一個沒有使用樣式的日曆控制項）。注意當你設定一個類類型的屬性，例如Font，你需要使用子屬性文法 屬性名稱-子屬性名稱。

名稱空間System.Web.UI.WebControls包含Style基類，可以封裝常用的樣式屬性（其他的樣式類，例如TableStyle 和 TableItemStyle，都是從這個基類繼承而來）。

許多伺服器控制項擴充了這個類型的屬性，用來指定該控制項分支元素的樣式。例如，日曆控制項擴充了許多樣式屬性：DayStyle, WeekendDayStyle, TodayDayStyle, SelectedDayStyle, OtherMonthDayStyle, 和 NextPrevStyle等等。你可以使用子屬性文法 屬性名稱-子屬性名稱來設定這些樣式的分支屬性，如下面的例子：

一個細微的差別文法，允許聲明每一個Style 屬性，作為子項目嵌套在web伺服器控制項標籤中。

以下為引用的內容： <ASP:Calendar ... runat="server">   <TitleStyle BorderColor="darkolivegreen" BorderWidth="3"       BackColor="olivedrab" Height="50px" /> </ASP:Calendar>

下面的例子展示了交替顯示文法，但是功能上與前一個一樣。

如同處理HTML伺服器控制項一樣，你可以使用CSS類定義來應用樣式到WEB伺服器控制項。WebControl基類擴充了一個String屬性，名叫CssClass，用來設定樣式類：

如果設定到伺服器控制項的屬性不符合該控制項的任何強型別屬性，那麼這個屬性和值就會被放到該控制項的Attributes集合中。預設的情況下，伺服器控制項將會不加修改的引用這些屬性返回到發出請求的瀏覽器用戶端。這就意味著，樣式和類的屬性可以直接應用在伺服器控制項，而不使用這些控制項的強型別屬性。當然了，明白這個概念需要理解控制項的實際引用，他同樣是一個應用樣式的靈活的方式。對於標準的表單輸入控制項，這個方法特別有用。請看下面的例子：

通過使用WebControl基類的ApplyStyle方法，WEB伺服器控制項的樣式也能用程式來設定，就象下面這段代碼：

以下為引用的內容： <script language="C#" runat="server">   void Page_Load(Object Src, EventArgs E ) {     Style style = new Style();     style.BorderColor = Color.Black;     style.BorderStyle = BorderStyle.Dashed;     style.BorderWidth = 1;     MyLogin.ApplyStyle (style);     MyPassword.ApplyStyle (style);     MySubmit.ApplyStyle (style);   } </script> Login: <ASP:TextBox id="MyLogin" runat="server" />/<p/> Password: <ASP:TextBox id="MyPassword" TextMode="Password" runat="server" /> View: <ASP:DropDownList id="MySelect" runat="server"> ... </ASP:DropDownList>

本章小節：

1. ASP.NET的 HTML 伺服器控制項和 Web 伺服器控制項家族提供了一流的CSS樣式支援。

2. 可以通過設定控制項的樣式或者類屬性來應用樣式。這些設定可以通過控制項的Attributes集合用程式來訪問。對於HTML伺服器控制項，樣式屬性的分支值可以通過控制項的Style集合來擷取。

3. 大多數常用的樣式設定已經作為WEB伺服器控制項自身的強型別屬性

4. System.Web.UI.WebControls 名稱空間包含Style 基類，封裝了常用的類型屬性。許多Web 伺服器控制項擴充了這個屬性，作為分支引用元素。

5. 對於伺服器控制項，使用 WebControl 基類的ApplyStyle方法可以用程式來設定樣式。