asp2.0 Theme and CSS (collect)

一,主题与样式的区别:

1.主题可以定义控件或页的许多属性，而不仅仅是样式属性。例如，使用主题，可以指定 TreeView 控件的图形、GridView 控件的模板布局，等等。
2.主题可以包括图形。
3.主题层叠的方式与样式表不同。例如，除非您显式地将主题作为样式表主题来应用，否则默认情况下属性值会重写本地属性值。
4.每页只能应用一个主题。不能向一页应用多个主题，这与样式表不同，样式表可以向一页应用多个样式表。

下面这些是msdn关于theme和skin的介绍：

主题是属性设置的集合，使用这些设置可以定义页面和控件的外观，然后在某个 Web 应用程中的所有页、整个 Web 应用程序或服务器上的所有 Web 应用程中一致地应用此外观。

主题和控件外观

主题由一组元素组成：外观、级联样式表 (CSS)、图像和其他资源。主题将至少包含外观。主题是在网站或 Web 服务器上的特殊目录中定义的。

外观

外观文件具有文件扩展名 .skin，它包含各个控件（例如， Button 、 Label 、 TextBox 或 Calendar 控件）的属性设置。控件外观设置类似于控件标记本身，但只包含您要作为主题的一部分来设置的属性。例如，下面是 Button 控件的控件外观：

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

在 theme 文件夹中创建 .skin 文件。一个 .skin 文件可以包含一个或多个控件类型的一个或多个控件外观。可以为每个控件在单独的文件中定义外观，也可以在一个文件中定义所有主题的外观。

有两种类型的控件外观 -“默认外观”和“已命名外观”：

• 当向页应用主题时，默认外观自动应用于同一类型的所有控件。如果控件外观没有 SkinID 属性，则是默认外观。例如，如果为 Calendar 控件创建一个默认外观，则该控件外观适用于使用本主题的页面上的所有 Calendar 控件。（默认外观严格按控件类型来匹配，因此 Button 控件外观适用于所有 Button 控件，但不适用于 LinkButton 控件或从 Button 对象派生的控件。）

• 已命名外观是设置了 SkinID 属性的控件外观。已命名外观不会自动按类型应用于控件。而应当通过设置控件的 SkinID 属性将已命名外观显式应用于控件。通过创建已命名外观，可以为应用程序中同一控件的不同实例设置不同的外观。

级联样式表

主题还可以包含级联样式表（.css 文件）。将 .css 文件放在主题目录中时，样式表自动作为主题的一部分应用。使用文件扩展名 .css 在主题文件夹中定义样式表。

主题图形和其他资源

主题还可以包含图形和其他资源，例如脚本文件或声音文件。例如，页面主题的一部分可能包括 TreeView 控件的外观。您可以在主题中包括用于表示展开按钮和折叠按钮的图形。

通常，主题的资源文件与该主题的外观文件位于同一个文件夹中，但它们也可以在 Web 应用程序中的其他地方，例如，主题目录的某个子文件夹中。若要引用主题目录的某个子文件夹中的资源文件，请使用类似该 Image 控件外观中显示的路径：

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

也可以将资源文件存储在主题目录以外的位置。如果使用颚化符 (~) 语法来引用资源文件，Web 应用程序将自动查找相应的图像。例如，如果您将主题的资源放在应用程序的某个子目录中，则可以使用格式为 ~/SubFolder/filename.ext 的路径来引用这些资源文件，如下面的代码示例所示。

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

主题的应用范围

您可以定义单个 Web 应用程序的主题，也可以定义供 Web 服务器上的所有应用程序使用的全局主题。定义主题之后，可以使用 @ Page 指令的 Theme 或 StyleSheetTheme 属性将该主题放置在单个页上，或者可以通过设置应用程序配置文件中的 <pages> 元素将其应用于应用程序中的所有页。如果在 Machine.config 文件中定义了 <pages> 元素，则主题将应用于服务器上的 Web 应用程序中的所有页。

页面主题

页面主题是一个主题文件夹，其中包含控件外观、样式表、图形文件和其他资源，该文件夹是作为网站中的 /App_Themes 文件夹的子文件夹创建的。每个主题都是 /App_Themes 文件夹的一个不同的子文件夹。下面的代码示例演示一个典型的页面主题，它定义了两个名为 BlueTheme 和 PinkTheme 的主题。

MyWebSite
App_Themes
BlueTheme
Controls.skin
BlueTheme.css
PinkTheme
Controls.skin
PinkTheme.css

全局主题

全局主题是可以应用于服务器上的所有网站的主题。当您维护同一个服务器上的多个网站时，可以使用全局主题定义域的整体外观。

全局主题与页面主题类似，因为它们都包括属性设置、样式表设置和图形。但是，全局主题存储在 Web 服务器的名为 /Themes 的全局文件夹中。服务器上的任何网站以及任何网站中的任何页面都可以引用全局主题。主题设置优先级

可以通过指定主题的应用方式来指定主题设置相对于本地控件设置的优先级。

如果设置了页的 Theme 属性，则主题和页中的控件设置将进行合并，以构成控件的最终设置。如果同时在控件和主题中定义了控件设置，则主题中的控件设置将重写控件上的任何页设置。即使页面上的控件已经具有各自的属性设置，此策略也可以使主题在不同的页面上产生一致的外观。例如，它使您可以将主题应用于在 ASP.NET 的早期版本中创建的页面。

此外，也可以通过设置页面的 StyleSheetTheme 属性将主题作为样式表主题来应用。在这种情况下，本地页设置优先于主题中定义的设置（如果两个位置都定义了设置）。这是级联样式表使用的模型。如果您希望能够设置页面上的各个控件的属性，同时仍然对整体外观应用主题，则可以将主题作为样式表主题来应用。

可以使用主题来定义的属性

通常，可以使用主题来定义与某个页或控件的外观或静态内容有关的属性。只能设置那些其 ThemeableAttribute 属性 (Attribute) 设置为 true（在控件类中）的属性 (Property)。

显式地指定控件行为而不是指定外观的属性不接受主题值。例如，不能使用主题来设置 Button 控件的 CommandName 属性。同样，不能使用主题来设置 GridView 控件的 AllowPaging 属性或 DataSource 属性

 

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控件时就不用再写一次了.