Asp.net主題(theme)和皮膚(skin)的使用


 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文件的優先級是最低的


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM