Theme、StylesheetTheme設定ASP.NET的樣式與主題
阿新 • • 發佈：2019-01-03
1.動態網站與靜態網站
ASP.NET建立的動態網站，與靜態網站相比，簡單地說，就是在靜態網站的基礎上增加了由在伺服器端執行的程式碼動態生成的內容，這個在伺服器端執行的程式碼包括內碼表中的後臺程式碼，也包括前臺頁面中的控制元件。
靜態網頁的樣式，同樣適應於動態網頁的靜態內容。
2.樣式
(1)行內樣式：在HTML元素的內部，利用 style直接定義樣式(2)內部樣式：在網頁<head>標籤中，利用style標籤定義樣式
(3)外部樣式：將樣式定義在另外一個樣式表文件中，然後通過link標籤引入樣式表
很顯然，這三種樣式的優先級別是：行內樣式＞內部樣式＞外部樣式。
由於ASP.NET比靜態網頁多個伺服器端編譯執行的控制元件，很多時候，樣式表控制不了控制元件的樣式，這時，就出現了外觀。
3.外觀
外觀檔案通常與樣式表文件一齊放在主題資料夾中，與設定樣式、外觀的圖片一起，稱為ASP.NET的主題。也就是說，ASP.NET的主題主要包括樣式表、外觀檔案和圖片三個內容。
引入主題通常不再使用link標籤，而是使用Page頁的Theme或者StylesheetTheme屬性。
注意此時，標籤head一定具有runat="server屬性，否則，會出現錯誤：
(1)建立外觀檔案
(2)使用Theme設定主題
(3)使用StylesheetTheme設定主題<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" Theme="MyTheme" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>無標題頁</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="lblMessage" runat="server" Text="ASP.NET的面板" BackColor="#00FF00"></asp:Label> </div> </form> </body> </html>
不難看出，Theme和StylesheetTheme的主要區別是優先順序，與行內外觀屬性相比，三者的優先級別是：Theme＞行內外觀＞StylesheetTheme，也就是說，使用StylesheetTheme設定主題，顯示的外觀是行內外觀綠色；而使用Theme，行內外觀被改寫，顯示的是外觀檔案中的青色。<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" StylesheetTheme="MyTheme" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>無標題頁</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="lblMessage" runat="server" Text="ASP.NET的面板" BackColor="#00FF00"></asp:Label> </div> </form> </body> </html>
對於靜態網頁內容，使用Them、StylesheetTheme設定主題時的優先級別則是：
行內樣式＞Theme設定的外部樣式＞內部樣式＞StylesheetTheme設定的外部樣式
(4)Web.config檔案中設定主題
可以在web.config檔案的System.Web節中統一設定整個網站的主題，格式如下：
<pages theme="MyTheme" />
或
<pages styleSheetTheme="MyTheme" />如果某一網頁使用單獨的主題，可以在該網頁是再單獨設定Theme屬性；
而如果某一網頁不使用主題，剛可以採用以下兩種方法進行設定：
Theme=""或StylesheetTheme=""(注意引號中不能有空格);
EnableTheming="false"4.參考：
http://blog.csdn.net/yousuosi/article/details/8997646