Theme、StylesheetTheme設定ASP.NET的樣式與主題

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

ASP.NET建立的動態網站，與靜態網站相比，簡單地說，就是在靜態網站的基礎上增加了由在伺服器端啟動並執行代碼動態產生的內容，這個在伺服器端啟動並執行程式碼封裝括字碼頁中的後台代碼，也包括前台頁面中的控制項。

靜態網頁的樣式，同樣適應於動態網頁的靜態內容。

一、樣式

1、
行內樣式（在HTML元素的內部，利用 style直接定義樣式）

<head runat="server">    <title>ASP.NET的樣式</title></head><body>    <form id="form1" runat="server">    <div>    <p style="background-color:#FF0000">ASP.NET的樣式</p>    </div>    </form></body>

2、
內部樣式（在網頁<head>標籤中，利用style標籤定義樣式）

<head id="Head1" runat="server">    <title>ASP.NET的樣式</title>    <style type="text/css">    p    {        background-color:#FF7F00;    }    </style></head><body>    <form id="form1" runat="server">    <div>    <p style="background-color:#FF0000">ASP.NET的樣式</p>    </div>    </form></body>

3、
外部樣式（將樣式定義在另外一個樣式表檔案中）

（1）外部樣式表檔案：

（2）通過link標籤引入樣式表

<html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server">    <title>ASP.NET的樣式</title>    <link href="App_Themes/MyTheme/StyleSheet.css" rel="stylesheet" type="text/css" />    <style type="text/css">    p    {        background-color:#FF7F00;    }    </style></head><body>    <form id="form1" runat="server">    <div>    <p style="background-color:#FF0000">ASP.NET的樣式</p>    </div>    </form></body></html>

很顯然，這三種樣式的優先順序別是：行內樣式＞內部樣式＞外部樣式。

由於ASP.NET比靜態網頁多個伺服器端編譯啟動並執行控制項，很多時候，樣式表控制不了控制項的樣式，這時，就出現了外觀。

二、外觀

設定控制項的外觀，可以直接設定控制項的外觀屬性，也可以在外部的面板檔案中集中設定。

面板檔案通常與樣式表檔案一齊放在主題檔案夾中，與設定樣式、外觀的圖片一起，稱為ASP.NET的主題。也就是說，ASP.NET的主題主要包括樣式表、面板檔案和圖片三個內容。

引入主題通常不再使用link標籤，而是使用Page頁的Theme或者StylesheetTheme屬性。

注意此時，標籤head一定具有runat="server屬性，否則，會出現錯誤：

1、
建立面板檔案

2、使用Theme設定主題

<%@ 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>

3、使用StylesheetTheme設定主題

<%@ 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>

不難看出，Theme和StylesheetTheme的主要區別是優先順序，與行內外觀屬性相比，三者的優先順序別是：Theme＞行內外觀＞StylesheetTheme，也就是說，使用StylesheetTheme設定主題，顯示的外觀是行內外觀綠色；而使用Theme，行內外觀被改寫，顯示的是面板檔案中的青色。

對於靜態網頁內容，使用Them、StylesheetTheme設定主題時的優先順序別則是：

行內樣式＞Theme設定的外部樣式＞內部樣式＞StylesheetTheme設定的外部樣式

4、Web.config檔案中設定主題

可以在web.config檔案的System.Web節中統一設定整個網站的主題，格式如下：

或

5、某一網頁不使用主題

如果某一網頁使用單獨的主題，可以在該網頁是再單獨設定Theme屬性；而如果某一網頁不使用主題，剛可以採用以下兩種方法進行設定：

Theme=""或StylesheetTheme=""(注意引號中不能有空格);

EnableTheming="false"

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More