ASP.net CSS

ASP.NET主题功能从ASP.NET 2.0版本已经开始支持了,用来定义页面和控件的外观,主题由一组元素组成:外观，CSS，图像和其他资源。

  1.外观

  外观文件具有文件拓展名.skin，它包含各个控件的属性和样式属性设置。例如，下面是几个服务器控件的外观定义:

  <asp:Label Runat="server" ForeColor="#004000" BackColor="#C0C0FF"/>

  <asp:TextBox Runat="server" ForeColor="#004000" BackColor="#C0C0FF"/>

  <asp:Button Runat="server" ForeColor="#004000" BackColor="#C0C0FF"/>

  当页面应用主题时,默认外观自动应用于同一类型的所有控件。

  如果控件外观设置了SkinID属性,则会按SkinID呈现相应外观,如：

  <asp:TextBox Runat="server" ForeColor="#004000" BackColor="#C0C0FF"/>

  <asp:TextBox Runat="server" ForeColor="#004000" BackColor="#C0C0FF" SkinID="skindot"/>

  <asp:TextBox Runat="server" ForeColor="#004000" BackColor="#C0C0FF" SkinID="skinbat"/>

  页面端设置为:

  <form id="form1" runat="server">

  <div>

     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

     <asp:TextBox ID="TextBox1" runat="server" SkinID="skindot"></asp:TextBox>

     <asp:TextBox ID="TextBox1" runat="server" SkinID="skinbat"></asp:TextBox>

  </div>

  </form>

  以上三个TextBox分别应用了外观中的三个样式。

  注意:Skin文件定义的样式只有在运行时才可以看到,在设计模式是看不到的。

       Skin文件定义的样式只适用于服务端控件。

 

2.级联样式表(CSS)

  主题还可以包含级联样式表(.CSS文件)。将css文件放在主题文件夹中时,样式表自动作为主题的一

 

部分加以应用。

  3.主题图形和其他资源

  这些资源主要包括控件所需图片，脚本文件，声音文件。

 

  主题可以应用于整个应用程序级别，页面级别，服务器控件级别。

  (1) 应用于整个应用程序级别

  在Web.config文件中配置:

  <configuration>

     <system.web>

         <pages theme="主题文件夹名">

     </system.web>

  </configuration>

  另外如果在Machine.config文件中定义了<pages>元素,主题将应用于服务器上的Web应用程序中的

 

所有页。

  (2) 应用于页面级别

  在页面中如下配置:

  <%@ Page Language="C#" Theme="主题文件夹名" EnableTheming="true"%>

  (3) 应用于服务器控件级别

  <asp:Textbox ID="TextBox1" Runat="server" Theme="主题文件夹名" EnableTheming="true">

  注意:如果页面禁用了主题，即使控件设置了EnableTheming="true" 也无法应用主题。

 

 

ASP.NET主题的使用

   在解决方案窗口右键单击当前站点名称,依次选择"ASP.NET文件夹→主题"，会创建一个名为App_Themes的文件夹,此文件夹由系统命名,不

 

能重命名。在该文件夹下建立两个主题文件夹:Autumn和Spring。现在可以在主题文件夹下建立.skin文件和.css文件。现在我们就可以

 

在.skin文件与.css文件中来设计页面元素的样式了。

   运用：换肤

   后台代码：

   protected void Page_Load(object sender,EventArgs e)

   {

     if(!Page.IsPostBack)

     {

       if(Session["CurrentTheme"]!=null)

       {

         this.DropDownList1.SelectedIndex=this.DropDownList1.Items.IndexOf(this.DropDownList1.Items.FindByValue(Session

 

["CurrentTheme"]).ToString());

       }

     }

   }

   protected void Page_PreInit(object sender,EventArgs e)

   {

     if(Session["CurrentTheme"]!=null)

     {

       this.Page.Theme=Session["CurrentTheme"].ToString());        

     }

     else

     {

       this.Page.Theme="Spring";

     }

    }

   protected void DropDownList1_SelectedIndexChanged(object sender,EventArgs e)

   {

    Session["CurrentTheme"]=this.DropDownList1.SelectedValue;

    Response.Redirect("该页.aspx");

   }

   这里的当前选中的主题是在Session中存储的。ASP.NET规定主题设置必须在Page_PreInit事件中或之前完成,所以这里定义了此事件,此事件是先于Page_Load事件的。