asp.net的服務(wù)器端控件提供了多種樣式的設(shè)計(jì),如果對(duì)每個(gè)控件都單獨(dú)設(shè)置,是比較繁瑣的事情,所以微軟也提供了針對(duì)這些服務(wù)器端控件的樣式管理,其實(shí)也可以通過(guò)css來(lái)控制部分服務(wù)器端控件的樣式,比如textbox,如果用普css就是對(duì)input進(jìn)行樣式控制,但對(duì)于gridview或者日歷控件等,css文件無(wú)法靈活的控制,這就需要微軟專(zhuān)門(mén)為服務(wù)器端控件提供的主題和皮膚。
主題和皮膚的使用方法:
1、新建外觀(guān)文件(*.skin),然后在文件里設(shè)定服務(wù)器端控件的樣式
2、在aspx頁(yè)面的Page里加入外觀(guān)文件的應(yīng)用,StylesheetTheme或者Theme(兩者有不同)
StylesheetTheme和Theme的區(qū)別:
針對(duì)默認(rèn)的樣式(沒(méi)有定義SkinID的樣式),在相應(yīng)的aspx頁(yè)面中Theme將采用定義的樣式,在頁(yè)面里再設(shè)計(jì)同屬性的樣式無(wú)效;StylesheetTheme則允許在頁(yè)面里再定義同屬性的樣式并有效。(注意:是同屬性的樣式,比如同是定義Height)
舉例:
假設(shè)我們建立了一個(gè)外觀(guān)文件newSkin,定義了一個(gè)默認(rèn)textbox的樣式和一個(gè)指定SkinID的textbox的樣式(背景顏色、邊框的顏色、寬度和線(xiàn)條類(lèi)型)
<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頁(yè)面中使用Theme來(lái)引入外觀(guān)文件,并且在頁(yè)面里有四個(gè)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>
控件4:<asp:TextBox ID="TextBox2" SkinID="new" runat="server" BorderWidth="1px" BorderStyle="Solid"></asp:TextBox>
結(jié)果:
控件1和控件2的樣式是一樣的,控件2在頁(yè)面里設(shè)置的樣式無(wú)效;
控件3除了自定義的高度之外,和控件1、2的樣式一樣。(在外觀(guān)文件里沒(méi)有定義的屬性樣式,可以在頁(yè)面里定義)
控件4的樣式是外觀(guān)文件里SkinID為new的樣式,頁(yè)面里定義的樣式無(wú)效。
示例2:
在aspx頁(yè)面中使用Theme來(lái)引入外觀(guān)文件,并且在頁(yè)面里有四個(gè)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>
結(jié)果:
控件1是使用外觀(guān)文件里的默認(rèn)樣式;
控件2是頁(yè)面里自定義的樣式;
控件3除了自定義的高度之外,和控件1的樣式一樣;
控件4的樣式使用了外觀(guān)文件里SkinID為new的樣式中BackColor="#FFCC99" BorderColor="#FF6600"這兩個(gè)屬性,BorderWidth和BorderStyle則是頁(yè)面里定義的樣式。
如果StylesheetTheme或Theme和我們?cè)瓉?lái)設(shè)計(jì)頁(yè)面的css文件(或者頁(yè)面定義style)同時(shí)使用會(huì)是什么情況?
結(jié)果:無(wú)論是使用StylesheetTheme或Theme,只要是在外觀(guān)文件里定義的屬性值,均是有效的,沒(méi)有定義的屬性值采用css文件里的樣式。
如果同時(shí)使用StylesheetTheme或Theme、頁(yè)面自定義樣式和css文件,那又會(huì)怎么樣?
結(jié)果:優(yōu)先級(jí)(優(yōu)先級(jí)的意思是先采用優(yōu)先級(jí)高定義的樣式,如果優(yōu)先級(jí)高的沒(méi)有定義,則采用下一優(yōu)先級(jí)的樣式)
1、Theme:外觀(guān)文件->頁(yè)面控件自定義樣式->css文件
2、StylesheetTheme:頁(yè)面控件自定義樣式->外觀(guān)文件->css文件
總之,css文件的優(yōu)先級(jí)是最低的。
聯(lián)系客服