样式、外观和主题
课程目标
样式
外观
主题及配置文件
主题和外观内容
主题和外观作用
体验项目——<通过设置主题改变整个应用程序外观 >
添加一个自定义主题外观文件，应用于整个站点，
以下设置了abe和Caendar控件外观，站点中每个
页面都会自动应用此外观文件。
样式、主题和外观概述
主题是属性设置的集合，使用这些设置可以定义页面和控件的外观，使的Web应用程序中的所有页、整个Web应用程序或服务器上的所有Web应用程都一致地应用此外观。主题由一组元素组成：外观、级联样式表(CSS)、图像和其他资源。主题将至少包含外观。主题是在网站或Web服务器上的特殊目录（App_Themes）中定义的。
（1）外观
外观文件的扩展名为.skin，它包含各个控件（例如，Button、abe、TextBox或Caendar控件）的属性设置。控件外观设置类似于控件标记本身，但只包含要作为主题的一部分来设置的属性。
例如，下面是Button控件的控件外观：
<asp:button runat="server" BackCoor="ightbue" ForeCoor="back" />
（2）级联样式表
主题还可以包含级联样式表（.css文件）。将扩展名为.css的文件放在主题目录中时，样式表将会自动作为主题的一部分应用。使用扩展名为.css的文件在主题文件夹中定义样式表。
（3）主题图形和其他资源
主题还可以包含图形和其他资源，例如脚本文件或声音文件。例如，页面主题的一部分可能包括TreeView控件的外观，当然也可以在主题中包括用于表示展开按钮和折叠按钮的图形。
主题
主题和外观特性使开发人员能够把样式和布局信息存放到一组独立的主题（Theme）文件中。
可以把这个主题应用到整个站点，用于改变该站点内的页面和控件的外观和感觉。
通过改变主题的内容，而不用改变站点的单个页面，就可以轻易地改变站点的样式。
主题可以在开发者之间共享。
向控件应用样式
目前广泛采用的样式表（CSS）在很大程度上就是负责处理Web上遇到的丰富的设计需求。
ASP.NET的所有HTM服务器控件和Web服务器控件都可提供一流的CSS样式支持。
给HTM控件应用样式
向Web服务器控件应用样式
给HTM控件应用样式
标准HTM标记通过样式属性支持CSS，该样式属性可以设置为分号分隔的属性/值对列表。
所有的ASP.NET HTM服务器控件都可以采用与标准HTM标记完全一样的方式接受样式。
HTM控件应用样式方式
编辑Stye属性
通过“样式生成器”对话框直接编辑设置控件的样式
定义cass属性
通过定义CSS的类，然后设置控件的cass属性应用样式
以编程方式操作Stye集合属性设置样式
使用此Stye集合属性以编程方式操作HTM服务器控件的样式。
向Web服务器控件应用样式
Web服务器控件添加了几个用于设置样式的强类型属性（例如背景色、前景色、字体名称和大小、宽度、高度等等），从而为样式提供了更多层次的支持。
部分控件可以通过“自动套用格式…”应用样式
定义CssCass属性
通过定义CSS的类，然后设置控件的CssCass属性应用样式
通过Stye对象使用AppyStye方法以编程方式设置Web服务器控件样式
利用主题来定制站点
主题提供了一种简易方式，可以独立于应用程序的页为站点中的控件和页定义样式设置。
可以从外部源获得自定义主题，以便将样式设置应用于应用程序。
多个主题的优点在于，设计站点时可以不考虑样式，以后应用样式时也无需更新页或应用程序代码。
一个主题的优点在于，样式设置存储在一个位置，可以独立于应用该主题的应用程序来维护这些设置。
主题应用示例
（1）新建一个Web项目，点击“添加新项”，选择“外观文件”并命名为“Button.skin”,点击“添加”按扭，如图所示。
（2）当单击“添加”按扭以后会弹出如图所示的对话框，程序提示是否将主题文件添加到“App_Themes”文件夹中。单击“是”，这样就为Web添加了一个名为“Button”的主题。
（3）在图中可以看到在“App_Themes”文件夹下有一个所创建的主题Button，在Button文件夹下有一个Button.skin文件，这就是刚添加的主题文件，双击Button.skin文件，为其添加外观设置代码。
为页指定主题：
通过<%@ Page Theme=“Button” %>指令设置全局主题或应用程序级主题的名称（Themes或App_Themes目录下的文件夹的名称），可为单个页指定主题。
为控件指定外观主题也很简单，只要指定相应的SkinID属性即可 。
（4）在页面中添加4个Button按扭，如图所示。
（5） 分别设置SkidID属性为空、Bue、Red，如图所示。
（6）应用主题后，运行结果
主题的应用范围
对网站应用主题
在应用程序的Web.config文件中，将<pages>元素设置为全局主题或页面主题的主题名称
将主题设置为样式表主题并作为本地控件设置
对部分网站内容应用主题
要仅对一部分页应用某主题，可以将这些页与它们自己的Web.config文件放在一个文件夹中 。
在根Web.config文件中创建一个<ocation>元素以指定文件夹
对单个页应用主题
将@Page指令的Theme或StyeSheetTheme属性设置为要使用主题的名称
对控件应用外观
主题中定义的外观应用于已应用该主题的应用程序或页中的所有控件实例
设置控件的SkinID属性
禁用主题
禁用页的主题
将@ Page指令的EnabeTheming属性设置为fase，如下例所示：
<%@ Page EnabeTheming="fase" %>
禁用控件的主题
将控件的EnabeTheming属性设置为fase 。
Theme和StyeSheetTheme优先级
通过设置@Page指令或配置的<pages/>节的Theme属性(attribute)应用的，则主题中的外观属性(property)将重写页中目标控件的同名属性(property)。
通过将@Page指令或配置的<pages/>节的StyeSheetTheme属性设置为主题的名称，可以将主题定义作为服务器端样式来应用。主题属性用作StyeSheetTheme时，可能被页中的控件重写。
对应用程序既应用Theme又应用StyeSheetTheme，则按以下顺序应用控件的属性：
首先应用StyeSheetTheme属性。
应用页中的控件属性（重写StyeSheetTheme）。
最后应用Theme属性（重写控件属性和StyeSheetTheme）。
主题和外观的内容
控件的可设置主题的属性（Themeabe属性）
在主题中使用CSS
在主题中使用图像
主题控件集合
主题控件模板
数据绑定和表达式
在主题中使用CSS
通过把级联样式表（CSS）放置在命名主题的子目录中，开发人员可以给该主题添加CSS。
如果页面包含了＜head runat=“server”/＞控件定义，那么该CSS样式表将应用于所有使用了该主题的页面。
具体示例参加书中案例
在主题中使用图像
主题还可以包含外观文件中的控件定义所引用的图像。
外观中对图像的引用应使用Theme 目录下图像文件夹的相对路径，以便外观文件和图像可以一起移动到其他应用程序中。
在运行时，会重新设置图像的路径，以使引用相对于目标页中的控件，而不是相对于外观文件。
具体示例参加书中案例
主题控件集合
可以在外观中设置集合属性。
在外观中设置集合属性时，不要将这些属性应用于目标控件集合中的项。而应在使用Theme时完全替换该集合，在使用StyeSheetTheme时合并该集合。
以上主题控件集合，对于包含样式集合的某些集合属性十分有用，如TreeView控件的 eveStyes属性或Menu控件的eveMenuItemStyes、eveSubMenuItemStyes或eveSeectedStyes属性。
具体示例参见书中案例
主题控件模板
可以在外观文件中应用模板属性。
与集合一样，在外观文件中定义模板属性不是在目标控件的模板中设置各项的主题，而是替换全部模板内容。
通过这种方法，可以对使用Theme或 StyeSheetTheme的应用程序中的模板化控件的布局进行显著的更改。
具体示例参见书中案例
数据绑定和表达式
使用<%# Eva %>或<%# Bind %>的数据绑定在主题模板中也有效，但不是任何代码数据绑定或表达式都允许。
具体示例参见书中案例
主题和外观作用
使用 ASP.NET 2.0的“主题和外观”功能，可以将样式和布局信息分解为单独的文件组，统称为“主题”。
主题可应用于任何站点，影响站点中页和控件的外观。
通过更改主题即可轻松地维护对站点的样式更改，而无需对站点各页进行编辑。
可与其他开发人员共享主题。
主题应用的规则和优先级
（1）如果设置了应用程序或页的Theme属性，则主题中控件设置和页中控件的设置将进行合并，以构成控件的最终设置。
（2）如果同时在控件和主题中定义了控件的属性，则主题中的控件属性设置将重写任何页中控件上的设置。
（3）如果将主题通过设置页面的StyeSheetTheme属性作为样式表主题来应用，则页中的属性设置优先于主题中属性定义的设置。
（4）当在页级别或容器级别禁用主题时，会对页或容器包含的所有控件禁用主题，如Pane Web服务器控件或者用户控件。
（5）如果在Web.config里指定了主题，则这个设置将覆盖页面的StyeSheetTheme设置和页面上的控件设置。
（6）CSS样式的定义采取就近和后定义起作用的原则。如果前后对一个控件定义了相同的CSS，那么后面的定义将起作用而忽略前面的定义。
（7）.ASPX页面中如果设置了<head runat=”server”>，则ASP.NET 2.0将自动引入主题中的CSS文件。
（8）在主题文件夹中可以包括图片，这在TreeView、Menu等服务器控件中使用自定义图片时特别有用。这些图片的地址只需要提供与外观文件.skin的相对路径即可，ASP.NET 2.0会自动调整为正确的UR地址。
实践项目——<通过设置主题改变整个应用程序外观 >
程序的实现要求如下：
（1）创建一个主题外观文件，设置相关应用控件的样式和外观。
（2）修改配置信息，应用此外观文件。
（3）那么当前应用程序中所有页面相关控件就会按设置外观显示。
本章总结
样式
外观
主题及配置文件
主题和外观内容
主题和外观作用