asp.net 的服務器端控件提供了多種樣式的設計,如果對每個控件都單獨設置,是比較繁瑣的事情,所以微軟也提供了針對這些服務器端控件的樣式管理,其實也可以通過 css來控制部分服務器端控件的樣式,比如textbox,如果用普css就是對input進行樣式控制,但對於gridview或者日歷控件等,css 文件無法靈活的控制,這就需要微軟專門為服務器端控件提供的主題和皮膚。
主題和皮膚的使用方法:
1、新建外觀文件(*.skin),然后在文件里設定服務器端控件的樣式
2、在aspx頁面的Page里加入外觀文件的應用,StylesheetTheme或者Theme(兩者有不同)
StylesheetTheme和Theme的區別:
針對默認的樣式(沒有定義SkinID的樣式),在相應的aspx頁面中Theme將采用定義的樣式,在頁面里再設計同屬性的樣式無效;StylesheetTheme則允許在頁面里再定義同屬性的樣式並有效。(注意:是同屬性的樣式,比如同是定義Height)
舉例:
假設我們建立了一個外觀文件newSkin,定義了一個默認textbox的樣式和一個指定SkinID的textbox的樣式(背景顏色、邊框的顏色、寬度和線條類型)
<asp:TextBox runat="server" BorderColor="#6699FF" BackColor="#CCFFCC" BorderWidth="1px" BorderStyle="Solid"></asp:TextBox>
<asp:TextBox runat="server" SkinID="new" BackColor="#FFCC99" BorderColor="#FF6600" BorderStyle="Dotted" BorderWidth="2px"></asp:TextBox>
示例1:
在aspx頁面中使用Theme來引入外觀文件,並且在頁面里有四個TextBox的控件:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Skin_Default" Theme="newSkin" %>
控件1:<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
控件2:<asp:TextBox ID="TextBox1" runat="server" BackColor="#009933" BorderColor="#FF6600" BorderStyle="Dotted" BorderWidth="2px"></asp:TextBox>
控件3:<asp:TextBox ID="TextBox2" runat="server" Height="40px"></asp:TextBox>26
控件4:<asp:TextBox ID="TextBox2" SkinID="new" runat="server" BorderWidth="1px" BorderStyle="Solid"></asp:TextBox>
結果:
控件1和控件2的樣式是一樣的,控件2在頁面里設置的樣式無效;
控件3除了自定義的高度之外,和控件1、2的樣式一樣。(在外觀文件里沒有定義的屬性樣式,可以在頁面里定義)
控件4的樣式是外觀文件里SkinID為new的樣式,頁面里定義的樣式無效。
示例2:
在aspx頁面中使用Theme來引入外觀文件,並且在頁面里有四個TextBox的控件:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Skin_Default" StylesheetTheme="newSkin" %>
控件1:<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
控件2:<asp:TextBox ID="TextBox1" runat="server" BackColor="#009933" BorderColor="#FF6600" BorderStyle="Dotted" BorderWidth="2px"></asp:TextBox>
控件3:<asp:TextBox ID="TextBox2" runat="server" Height="40px"></asp:TextBox>
控件4:<asp:TextBox ID="TextBox2" SkinID="new" runat="server" BorderWidth="1px" BorderStyle="Solid"></asp:TextBox>
結果: 控件1是使用外觀文件里的默認樣式;
控件2是頁面里自定義的樣式;
控件3除了自定義的高度之外,和控件1的樣式一樣;
控件4的樣式使用了外觀文件里SkinID為new的樣式中BackColor="#FFCC99" BorderColor="#FF6600"這兩個屬性,BorderWidth和BorderStyle則是頁面里定義的樣式。
如果StylesheetTheme或Theme和我們原來設計頁面的css文件(或者頁面定義style)同時使用會是什么情況?
結果:無論是使用StylesheetTheme或Theme,只要是在外觀文件里定義的屬性值,均是有效的,沒有定義的屬性值采用css文件里的樣式。
如果同時使用StylesheetTheme或Theme、頁面自定義樣式和css文件,那又會怎么樣?
結果:優先級(優先級的意思是先采用優先級高定義的樣式,如果優先級高的沒有定義,則采用下一優先級的樣式)
1、Theme:外觀文件->頁面控件自定義樣式->css文件
2、StylesheetTheme:頁面控件自定義樣式->外觀文件->css文件
總之,css文件的優先級是最低的