ASP.NET2.0中themes、Skins和MasterPage中引用CSS

一看Themes、Skins这2名字就都知道是用来做什么的了吧，下面就说下它是做什么的(怎么都知道了还说,~_~)，利用Themes我们可以很容易的更改控件、页面的风格，而不需要修改我们的代码和页面文件。
Themes文件被单独的放在1个App_Themes文件夹下面，与你的程序是完全分开的。
使用themes
1、在1个页面中应用Theme:
      如果想在某1个页面中应用Theme，直接在aspx文件中修改<%@ Page Theme="..." %>，比如你想这个页面应用default2 theme，设置<%@ Page Theme="default2" %>就OK

2、在所有页面应用同1个Theme:
      如果要在所有页面上使用相同的Theme，在web.config中的<system.web>节点下加上句<pages theme="..."/>

3、让控件不应用Theme:
        第1个例子中我们看到了2个Label的风格都变了,就是说.skin文件中的风格在页面上所有Label都起作用了。但有时我们希望某1个Label不应用.skin中的风格，这时你只需设置Label的EnableTheming属性为false的时候就可以了。也许你还想不同的label显示不同的风格，你只需设置label的SkinID属性就可以。 

前面已经说了在aspx文件头使用 <%@ Page Theme="..." %> 来使用theme，而用这个方法应用theme中的风格将会覆盖你写在aspx中的控件属性style。

 而使用<%@ Page StyleSheetTheme="..." %>应用theme就不会覆盖你在aspx文件中写的属性style：

控件应用style属性的顺序如下：
a、StyleSheetTheme引用的风格
b、代码设定的控件属性(覆盖StyleSheetTheme)
c、Theme引用的风格(覆盖前面2个) 

ASP.NET 2.0 中增加了内建的 MasterPage 的支持，这对我们来说是一个很大的便利。然而经过一段时间的使用，我发现 MasterPage 并不是那么完美：嵌套的 MasterPage 不能支持设计时界面，以及下面要提到的Content Page 中增加 CSS 的问题。

通常，在没有 2.0 之前，我们在页面里要增加一个 CSS 引用的语法如下：

< link  rel ="stylesheet"  href ="css/test.css"   />

原本是很平常的做法。但是在一个 MasterPage 的子页面中，出现了一个很尴尬的局面，就是：我们该把上述代码放到什么位置？
因为 MasterPage 的具体内容页面中，只能定义一个个的 <asp:Content /> 标签的内容。我们按照通常的做法在 aspx 里面无法对页面的 <header/> 内容进行控制。而这个 <link/> 标签又必须放在 <header/> 内。我试验过在 <asp:Content /> 内部加入这行代码，但是会提示出错的。
同时，我们也无法在 MasterPage 的 <header/> 内部放好一个 ContentPlaceHolder 用于将来放入 CSS 的引用代码。
因此我的做法是定义了一个 helper 类如下：

static   public   class  ControlHelper
{
     static   public   void  AddStyleSheet(Page page,  string  cssPath)
    {
        HtmlLink link  =   new  HtmlLink();
        link.Href  =  cssPath;
        link.Attributes[ " rel " ]  =   " stylesheet " ;
        link.Attributes[ " type " ]  =   " text/css " ;
        page.Header.Controls.Add(link);
    }
}

这样，在具体页面，我们就可以通过如下代码添加 CSS 引用：

protected   void  Page_Load( object  sender, EventArgs e)
{
    ControlHelper.AddStyleSheet( this .Page,  " css/projectPage.css " );    
}

并且，这个代码支持在具体内容页面，或者一个嵌套的 Master Page 中使用。

说到这里也许有人会问，为什么要把 CSS 分开成这样来加载呢？有必要吗？我把所有页面的 CSS 定义到几个公共 CSS 文件里岂不是很好？

其实，熟悉 web 标准的 HTML 制作的朋友一定知道，在比较完美的状态下，页面的 html 和用于表现的 CSS 应该彻底分离。而我们基于 web 标准的设计，通常是先做出一个 Master Page 中各个框架 div 的定位代码，以及 header，footer 部分的修饰代码。这些是每个内容页面都要用到的，会放在一个统一的 CSS 里面。其他的具体内容页面，每个页面又会有各自不同的内容的布局，修饰样式，因此我把每个具体页面特定的部分放在它自己的 CSS里。这样就形成了一个按照 Master Page 的实现层次（可嵌套），逐层合并的 CSS 模型。其好处是实现了每个 CSS 文件的职责分离，更容易理解和维护。