asp2.0 Theme and CSS (collect)

一,主題與樣式的區別:

1.主題可以定義控制項或頁的許多屬性，而不僅僅是樣式屬性。例如，使用主題，可以指定 TreeView 控制項的圖形、GridView 控制項的模板布局，等等。
2.主題可以包括圖形。
3.主題層疊的方式與樣式表不同。例如，除非您顯式地將主題作為樣式表主題來應用，否則預設情況下屬性值會重寫區域屬性值。
4.每頁只能應用一個主題。不能向一頁應用多個主題，這與樣式表不同，樣式表可以向一頁應用多個樣式表。

下面這些是msdn關於theme和skin的介紹：

主題是屬性設定的集合，使用這些設定可以定義頁面和控制項的外觀，然後在某個 Web 應用程式程中的所有頁、整個 Web 應用程式或伺服器上的所有 Web 應用程式程中一致地應用此外觀。

主題和控制面板

主題由一組元素組成：外觀、階層式樣式表 (CSS)、映像和其他資源。主題將至少包含外觀。主題是在網站或 Web 服務器上的特殊目錄中定義的。

外觀

面板檔案具有副檔名 .skin，它包含各個控制項（例如，、、 或 控制項）的屬性設定。控制面板設定類似於控制項標記本身，但只包含您要作為主題的一部分來設定的屬性。例如，下面是 Button 控制項的控制面板：

<asp:button runat="server" BackColor="lightblue" ForeColor="black" />

在 theme 檔案夾中建立 .skin 檔案。一個 .skin 檔案可以包含一個或多個控制項類型的一個或多個控制面板。可以為每個控制項在單獨的檔案中定義外觀，也可以在一個檔案中定義所有主題的外觀。

有兩種類型的控制面板 -“預設面板”和“具名面板”：

• 當向頁應用主題時，預設面板自動應用於同一類型的所有控制項。如果控制面板沒有 SkinID 屬性，則是預設面板。例如，如果為 Calendar 控制項建立一個預設面板，則該控制面板適用於使用本主題的頁面上的所有 Calendar 控制項。（預設面板嚴格按控制項類型來匹配，因此 Button 控制面板適用於所有 Button 控制項，但不適用於 控制項或從 Button 對象派生的控制項。）

• 具名面板是設定了 屬性的控制面板。具名面板不會自動按類型應用於控制項。而應當通過設定控制項的 SkinID 屬性將具名面板顯式應用於控制項。通過建立具名面板，可以為應用程式中同一控制項的不同執行個體設定不同的外觀。

階層式樣式表

主題還可以包含階層式樣式表（.css 檔案）。將 .css 檔案放在主題目錄中時，樣式表自動作為主題的一部分應用。使用副檔名 .css 在主題檔案夾中定義樣式表。

主題圖形和其他資源

主題還可以包含圖形和其他資源，例如指令檔或音效檔。例如，頁面主題的一部分可能包括 控制項的外觀。您可以在主題中包括用於表示展開按鈕和摺疊按鈕的圖形。

通常，主題的資源檔與該主題的面板檔案位於同一個檔案夾中，但它們也可以在 Web 應用程式中的其他地方，例如，主題目錄的某個子檔案夾中。若要引用主題目錄的某個子檔案夾中的資源檔，請使用類似該 控制面板中顯示的路徑：

<asp:Image runat="server" ImageUrl="ThemeSubfolder/filename.ext" />

也可以將資源檔儲存在主題目錄以外的位置。如果使用顎化符 (~) 文法來引用資源檔，Web 應用程式將自動尋找相應的映像。例如，如果您將主題的資源放在應用程式的某個子目錄中，則可以使用格式為 ~/SubFolder/filename.ext 的路徑來引用這些資源檔，如下面的程式碼範例所示。

<asp:Image runat="server" ImageUrl="~/AppSubfolder/filename.ext" />

主題的應用範圍

您可以定義單個 Web 應用程式的主題，也可以定義供 Web 服務器上的所有應用程式使用的全域主題。定義主題之後，可以使用 指令的 Theme 或 StyleSheetTheme 屬性將該主題放置在單個頁上，或者可以通過設定應用程式設定檔中的 元素將其應用於應用程式中的所有頁。如果在 Machine.config 檔案中定義了 元素，則主題將應用於伺服器上的 Web 應用程式中的所有頁。

頁面主題

頁面主題是一個主題檔案夾，其中包含控制面板、樣式表、圖形檔案和其他資源，該檔案夾是作為網站中的 /App_Themes 檔案夾的子檔案夾建立的。每個主題都是 /App_Themes 檔案夾的一個不同的子檔案夾。下面的程式碼範例示範一個典型的頁面主題，它定義了兩個名為 BlueTheme 和 PinkTheme 的主題。

MyWebSiteApp_ThemesBlueThemeControls.skinBlueTheme.cssPinkThemeControls.skinPinkTheme.css

全域主題

全域主題是可以應用於伺服器上的所有網站的主題。當您維護同一個伺服器上的多個網站時，可以使用全域主題定義域的整體外觀。

全域主題與頁面主題類似，因為它們都包括屬性設定、樣式表設定和圖形。但是，全域主題儲存在 Web 服務器的名為 /Themes 的通用檔案夾中。伺服器上的任何網站以及任何網站中的任何頁面都可以引用全域主題。主題設定優先權

可以通過指定主題的應用方式來指定主題設定相對於本地控制項設定的優先順序。

如果設定了頁的 屬性，則主題和頁中的控制項設定將進行合并，以構成控制項的最終設定。如果同時在控制項和主題中定義了控制項設定，則主題中的控制項設定將重寫控制項上的任何頁設定。即使頁面上的控制項已經具有各自的屬性設定，此策略也可以使主題在不同的頁面上產生一致的外觀。例如，它使您可以將主題應用於在 ASP.NET 的早期版本中建立的頁面。

此外，也可以通過設定頁面的 屬性將主題作為樣式表主題來應用。在這種情況下，本地頁設定優先於主題中定義的設定（如果兩個位置都定義了設定）。這是階層式樣式表使用的模型。如果您希望能夠設定頁面上的各個控制項的屬性，同時仍然對整體外觀應用主題，則可以將主題作為樣式表主題來應用。

可以使用主題來定義的屬性

通常，可以使用主題來定義與某個頁或控制項的外觀或靜態內容有關的屬性。只能設定那些其 屬性 (Attribute) 設定為 true（在控制項類中）的屬性 (Property)。

顯式地指定控制項行為而不是指定外觀的屬性不接受主題值。例如，不能使用主題來設定 Button 控制項的 屬性。同樣，不能使用主題來設定 控制項的 屬性或 屬性

 

ASP.NET提供了一種使介面樣式統一的方法，就是皮膚主題。

二.CSS and Themes

1．概述
實現了功能，但介面看上去比較醜陋。你可以每個控制項都設定其表現屬性，以使介面美觀一些。但這樣做畢竟太麻煩。
2．增加主題
在方案總管中，在網站上單擊右鍵，選擇“添加ASP.NET檔案夾/主題”，建立一個皮膚主題，並取名為Default。

可以看到網站中自動建立了兩級目錄“App_Themes/Default”。一個項目中可以建立多個主題，但都必須放到App_Themes目錄下。我們建立的Default就是一個主題，主題下麵包含一個skin檔案和多個css檔案，用於設定介面樣式。

在Default上點擊右鍵，選擇“添加新項”，然後選擇“面板檔案”，點擊“添加”按鈕，就在Default主題下建立了一個皮膚檔案SkinFile.skin。

如果添加新項時選擇添加“樣式表”，就可以添加一個css檔案。我們添加兩個css檔案GridStyle.css和StyleSheet.css。前者用於設定GridView的樣式，後者用於設定其它控制項樣式。

樣式表的內容比較豐富，大家可以找相關資料學習。這裡我們只是用簡單的樣本來說明其用法。

2.1 StyleSheet.css檔案
樣式表中，可以設定多個樣式單元，每個單元有一個名字，稱為類名。我們在檔案中鍵入以下代碼。

body

{

     FONT-SIZE: 12px;

     MARGIN: 0px;

     CURSOR: default;

     FONT-FAMILY: Tahoma, Verdana;

     background-color: #F2F2F2;

}

.commonText

{

    font-size: 12px;

}

.MsgText

{

     font-size:12px;

     color:Red;

}

.PromptText

{

     font-size:16px;

     color:#3795D2;

}

.BtnStyle

{

      font-size:12px;

      text-decoration:none;

      background-color: #FFFFFF;

      border-style: groove

}

Body樣式主要是用來設定頁面資訊的，我們設定了字型大小為12px（Font-Size:12px）、字型（Font-Family）、背景色（backgroud-color:#F2F2F2）及其它一些屬性。

對於文本，我們設定了三種樣式：commonText僅設定了文本的大小，MsgText設定為紅色字型，PromptText則是藍色16px的字型。至於程式如何把它們區分開來，我們從SkinFile.Skin中可以看到。

BtnStyle為按鈕的樣式。

2.2 SkinFile.Skin檔案
首先，css檔案中的文本有三種樣式，我們在skin中如何區分呢？答案是SkinID，如下代碼所示：

<asp:Label runat="server" CssClass="commonText"></asp:Label>

<asp:Label runat="server" CssClass="MsgText" SkinID="MsgText"></asp:Label>

<asp:Label runat="server" CssClass="PromptText" SkinID="PromptText"></asp:Label>

我們設定了三種Label的樣式，可以看到這三種樣式通過CssClass屬性區分開，它後面引號中的值就是css檔案中的樣式類名。其中有兩個Label有SkinID屬性，而另外一個沒有設定，沒有SkinID的是預設樣式，有SkinID的在指定了控制項的SkinID並且名稱與其一致時才被使用。至於它們的使用，後面我們再介紹。

下面在skin檔案中再輸入以下代碼，分別建立DropDownList、TextBox的皮膚樣式以及兩個Button的樣式。兩個Button的區別是：沒有SkinID具有固定寬度65px，有SkinID的沒有設定寬度。

<asp:DropDownList runat="server" CssClass="commonText"></asp:DropDownList>

<asp:TextBox runat="server" CssClass="commonText"></asp:TextBox>

<asp:Button runat="server" CssClass="BtnStyle" Width="65px" />

<asp:Button runat="server" CssClass="BtnStyle" SkinID="NoWidthBtn" />

3．皮膚的使用
3.1 單個頁面中使用主題
（1）開啟default.aspx檔案進入設計模式。

（2）屬性最上面一個列表框選擇DOCUMENT。

（3）找到Theme屬性，點擊後面的列表框箭頭，會看到我們剛增加的主題“Default”，選中它。

（4）運行程式，會看到整個頁面使用了沒有SkinID屬性的那些樣式。

（5）任意選中一個Label，找到SkinID屬性，這個屬性是空的。點擊後面的列表框箭頭，會發現有兩個可選項，就是skin檔案中指定的Label那兩個主題，選擇一個，運行並看一下效果。

通過以上實驗我們可以看到，如果控制項不指定SkinID，則使用skin檔案中那些沒有SkinID屬性的樣式；如果指定了，則使用skin檔案中SkinID與之同名的那些樣式。

3.2 在整個網站中使用主題
上面講了主題的使用方法，但如果一個介面一個介面的設定主題，顯得有些麻煩，能不能在整個網站中都使用同一種主題，而不必每個頁面都設定呢。

我們把Default.aspx檔案的Theme屬性刪除，然後開啟web.config，找到<system.web>，緊跟這個標籤下面輸入：

    <pages theme="Default" />

然後運行代碼，發現運行效果跟剛才是一樣的。

這一句的意思就是對所有網頁使用同一主題Default。那麼我們前面說了，可以在網站中建立多個主題，如何使用其它主題呢？如果我們配置了web.config的預設主題，那麼頁面使用這個預設主題，除非版面設定了Theme屬性指定使用其它主題。

4．關於GridView的主題
選中頁面中GridView，看它的屬性中樣式那一組，會看到有很多樣式需要設定。

像GridView控制項，它可以設定表頭樣式(HeaderStyle)、顯示項目的樣式（RowStyle）、交替行樣式（AlternatingRowStyle，就是偶數行用這個樣式，奇數行用RowStyle的樣式）、分頁時頁碼樣式等等。

那麼我們就需要設定這些樣式。

4.1 GridStyle.css
該檔案設定了幾個樣式，有些是在skin檔案中重複使用的：

.GridItem

{

     font-size: 12;

     background-color:#D6EBFF;

     text-align:left;

}

.GridEdit

{

     font-size: 12;

     background-color:#D6EBFF;

     text-align:left;

}

.GridHeader

{

     font-size:12;

     background-color:#00AFE8;

     text-align:left;

}

.GridAlter

{

     font-size:12;

     background-color:#D6DBEF;

     text-align:left;

}

4.2 SkinFile.skin檔案
在主題檔案中，增加以下代碼：

<asp:GridView runat="server" AutoGenerateColumns="False">

    <RowStyle CssClass="GridItem" />

    <EditRowStyle CssClass="GridEdit" />

    <SelectedRowStyle CssClass="GridHeader" />

    <PagerStyle CssClass="GridItem" />

    <HeaderStyle CssClass="GridHeader" />

    <AlternatingRowStyle CssClass="GridAlter" />

</asp:GridView>

我們可以看到，顯示項目樣式RowStyle和分頁頁碼PagerStyle使用了相同的樣式GridItem。表頭和選中項使用了相同的樣式GridHeader。當然你也可以給它們設定不同的樣式，我設定成相同是為了說明也可以這樣用。

再次運行程式，瀏覽效果。

5．設定主題的簡單方法
實際上，主題的設定不一定非要用css檔案，只要一個skin檔案就可以了。具體方法是先從網頁上設定控制項的字型、顏色等屬性，達到你要的效果後，進入源模式，把這個控制項的代碼直接複製到skin檔案中，然後刪除掉ID=”xx”這個屬性就可以了，大家不妨試一下。

既然這種方法這麼簡單，為什麼還要使用css呢？這是因為，skin中的樣式，只能應用於伺服器端控制項，就是由runat=”server”的那些控制項。對於Html控制項，skin檔案是不起作用的，這時就需要用到css。單獨做成css，應用到Html控制項時就不用再寫一次了.