ASPNET中的CSS主题和母版页Word文档格式.docx
《ASPNET中的CSS主题和母版页Word文档格式.docx》由会员分享，可在线阅读，更多相关《ASPNET中的CSS主题和母版页Word文档格式.docx（13页珍藏版）》请在冰豆网上搜索。
bold;
large;
Lime;
.heading2
medium;
font-style:
italic;
#C0BA72;
.blockText
padding:
10px;
background-color:
#FFFFD9;
border-style:
solid;
border-width:
thin;
VS中选择视图，其他窗口，文档大纲，可以清楚的罗列当前样式表中所有的规则，可以迅速定位到某一规则：
应用样式表
要在Web页面里使用某个规则，首先页面要链接到适当的样式表，可在<
head>
节中添加如下代码（可在VS中拖动样式表进入head）：
<
linkhref="
MyStyleSheet.css"
rel="
stylesheet"
type="
text/css"
/>
div>
<
!
--对于普通控件应用样式,可设置CssClass属性.-->
asp:
LabelID="
Label1"
runat="
server"
Text="
ThisLabelusestheheading1style."
CssClass="
heading1"
>
/asp:
Label>
--对于一段普通的HTML,要使用class特性-->
divid="
paragraph"
class="
blockText"
p>
ThisparagraphusestheblockTextstyle.<
/p>
/div>
也可通过“应用样式”窗口来指定具体的规则应用（视图->
应用样式），这个设计可以实现一个预览的效果，不过注意以下几点：
∙如果选中的是Web控件，它添加或修改CssClass属性。
∙如果选中的是普通的HTML元素，它添加或修改Class特性。
∙如果选中一段HTML内容，它添加一个<
span>
或<
元素，然后设置它的Class特性。
VS还提供了更多的样式表助手，下面这些特性可以帮助你在平时管理样式：
∙“管理样式”窗口：
打开一个Web页面，可以选择“视图”->
“管理样式”。
∙样式表工具条：
它提供修改现有样式以及新增样式的按钮。
（右击工具栏并勾选“样式表”复选框）。
∙“CSS属性”窗口：
这个窗口允许仔细检查样式表并修改它的格式化属性。
（“视图”->
“CSS属性”）。
主题
CSS规则只限于一组固定的样式特性，它们允许重用特定的格式化细节（字体、边框、前景色和背景色等），但它们显然不能控制ASP.NET控件的其他方面。
例如，CheckBoxList控件有一些用于控制如何把项组织为行或列的属性。
虽然这些属性影响的是控件的可视外观，但它们在CSS的范围之外，所以必须手工设置。
此外，你可能还希望在定义控件格式的同时定义控件的部分行为。
例如，你可能希望标准化Calender控件的选择模式或者TextBox控件的折行。
显然，这些都不可能通过CSS实现。
主题弥补了这一缺陷。
和CSS相似，主图允许定义一组作用于多个页面中控件的样式特性。
不过，和CSS不同的是，主题不是由浏览器实现的。
相反，它们是在服务器上实现的ASP.NET自有的解决方案。
主题不会代替样式，但它们可以提供CSS不能提供的一些特性。
下面是它们的主要区别：
∙主题基于控件而不是HTML。
主题允许定义和重用几乎所有的控件属性。
例如，可以在主题中定义一组通用的节点图片并把它们应用于多个TreeView控件，还可以为多个GridView控件定义一组模版。
CSS只是直接作用于HTML的样式特性。
∙主题应用在服务器上。
主题作用到页面时，样式化后的最终页面被传送给用户。
而使用样式表时，浏览器同时接收到页面和样式信息并在客户端合并它们。
∙主题不会像CSS那样层叠。
如果在一个主题和另一个控件里同时指定了一个属性，那么主题里定义的值会覆盖控件的属性。
不过，有一个方法可以改变这个行为，提高页面属性的优先级，这样主题的行为将更像样式表。
主题文件夹和外观
所有的主题都是与应用程序相关的。
要在Web应用程序里使用主题，必须创建一个定义它的文件夹，这个文件夹必须放在一个叫做App_Themes的文件夹里，而App_Themes又必须位于Web应用程序的顶层目录中。
只要每个主题都在一个单独的文件夹里，应用程序就可以定义多个主题。
对于一个给定的页面，每次只能有一个主题处于活动状态。
要让主题真正有效，必须在主题文件夹里创建至少一个外观文件。
外观文件是一个使用.skin扩展名的文本文件。
ASP.NET不会直接提供外观文件，相反，它们用于在幕后定义主题。
外观文件从本质上来说是一些控件标签（稍有些变形）。
外观文件里的控件标签不必完整定义控件，它们只有一组你希望标准化的属性。
例如，如果希望应用一个一致的颜色方案，可能只需设置ForeColor和BackColor之类的属性。
若在外观文件中为ListBox控件添加控件标签，代码看起来应该是这样的：
ListBoxrunat="
ForeColor="
White"
BackColor="
Orange"
是必需的，其他所有部分都是可选的。
id特性不允许在主题里使用，因为它必须唯一区别实际网页中的每个控件。
你可以决定是创建多个外观文件还是把所有的控件标签都放到一个外观文件里。
这两种方式等效，因为ASP.NET把同一个主题目录里的所有外观文件都看成是同一个主题定义的一部分。
通常，把复杂控件（如数据控件）的控件标签单独放在外观文件里比较有意义。
应用简单主题
VS没有为创建主题提供任何设计时支持，因此从其他Web页面复制和粘贴控件标签是个好的选择，现在创建一个外观文件如下：
TextBoxrunat="
Buttonrunat="
让一个页面应用主题，需要在Page指令内加上Theme特性（也可以在设计时从属性窗口中选中“Document”对象设置它的Theme属性）：
%@PageLanguage="
C#"
AutoEventWireup="
true"
...Theme="
FunkyTheme"
%>
当某个主题应用到页面后，ASP.NET会考虑Web页面上的每个控件并检查外观文件以便查看它们是否为控件定义了属性，如果发现了匹配的标签，那么从外观文件获得的信息会覆盖控件的当前属性。
处理主题冲突
如果控件的属性和主题定义的属性产生冲突，总是优先使用主题定义的属性。
不过，有时候你可能希望改变这一行为，以便使控件可以覆盖某些特定的细节从而优化主题。
ASP.NET允许这么做，不过这个选项要么对整个页面的所有控件起作用，要么都不起作用。
要实现这样的变化，只要再Page指令里用StyleSheetTheme特性替代Theme特性即可，下面是一个示例：
...StylesheetTheme="
另一个办法是配置特定控件，从而使它完全忽略主题，只需把该控件的EnableTheming属性设为false。
TextBoxID="
TextBox1"
Width="
130px"
EnableTheming="
false"
Test<
TextBox>
为同一控件创建多个主题
把每个控件锁定于某个单一格式有利于标准化，不过对于实际的应用程序而言，这可能不够灵活。
例如，根据文本框出现的位置以及它们包含的数据类型，你可能需要几种不同的文本框；
而对于标签，当它们用作标题或者正文文字的时候可能更需要差异化。
一般而言，如果为同一个控件创建了不止一个主题，那么ASP.NET会给出一个编译错误，提示每个控件只可以有一个默认外观。
要解决这个问题，需要指定SkinID特性来创建一个被命名的外观。
下面是一个示例：
Font-Bold="
True"
SkinID="
Dramatic"
这种方式的缺点是不能像默认外观一样自动被应用。
要使用命名外观，必须指定Web页面上匹配控件的SkinID属性。
如果你不喜欢为主题默认加入的类型，可以把所有的外观都变成命名的，这样，除非设置了控件的SkinID属性，否则它们不会被应用。
SkinID不必保持唯一，它只要对每个控件唯一即可。
例如，对于显示大量信息的页面，你可以创建新的Button、TextBox以及Label控件，并给它们相同的外观名称（例如Smaller）。
含有模版和图片的外观
到目前为止，你见到的主题示例都只应用了相对简单的属性。
其实，你可以在外观文件里创建更加详细的控件标签。
大多数属性都支持主题，如果某个属性不能在主题里声明，尝试运行应用程序时会得到一个编译错误。
很多控件支持指定一组格式化信息的样式。
数据控件是一个这样的例子，Calender控件也是。
为了匹配主题，你可以在外观文件中如下定义Calender样式：
Calendarrunat="
BorderColor="
Black"
BorderStyle="
Solid"
CellSpacing="
1"
Font-Names="
Verdana"
Font-Size="
9pt"
Height="
250px"
500px"
NextPrevFormat="
ShortMonth"
SelectionMode="
Day"
SelectedDayStyleBackColor="
DarkOrange"
DayStyleBackColor="
NextPrevStyleFont-Bold="
8pt"
DayHeaderStyleFont-Bold="
#333333"
TitleStyleBackColor="
Firebrick"
None"
12pt"
OtherMonthDayStyleBackColor="
NavajoWhite"
False"
DarkGray"
Calendar>
这个外观定义了Calender的字体，颜色和样式，还设置了选择模式、月份导航链接的格式和日历的大小。
外观的另一个强大技能是把图片作为主题的一部分而重用它们。
假设你完善了一幅图片，想把它应用于整个网站的“确定”按钮，你还有另一幅图片想要用于所有的“取消”按钮。
1.把图片加到主题文件夹（为了达到最好的组织效果，应该为存放图片创建一个或多个子文件夹）。
1.
2.创建使用这些图片的外观。
此时，所有这些标签必须是已命名的外观，因为你定义的标准化按钮类型应该只在需要时才被页面使用。
你不是在定义一个作用于所有按钮的默认样式。
（在外观文件里添加对图片的引用时，一定要保证图片的URL是相对于主题文件夹而不是页面所在的文件夹。
主题应用到控件时，ASP.NET自动在URL开始处插入Themes\ThemeName）
ImageButtonrunat="
OKButton"
ImageUrl="
ButtonImages/buttonOK.jpg"
CancelButton"
ButtonImages/buttonCancel.jpg"
3.现在就可以应用这些图片了，在Web页面里创建一个引用相应外观名称的ImageButton（你可以使用同样的技术为其他使用图片的控件创建外观，例如可以标准化TreeView中使用的节点图片、BulletList控件的列表图片或者GridView里使用的图标）：
CodeFile="
ImageInTheme.aspx.cs"
Inherits="
Chapter16_ImageInTheme"
Theme="
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
headrunat="
title>
/title>
/head>
body>
formid="
form1"
ImageButtonID="
ImageButton1"
ImageButton2"
/form>
/body>
/html>
效果：
在主题里使用CSS
ASP.NET还允许把样式表用作主题的一部分。
你可能会由于以下几个原因使用这一功能：
∙你希望样式化那些不和服务器对应的HTML元素
∙你倾向于使用样式表，因为它们更加标准化，或者因为它们同时还可以格式化静态HTML页面
∙你已经为创建样式表付出了大量努力，因而不愿意创建主题曲实现同样的格式化
要在主题里使用样式表，必须把样式表放入主题文件夹。
ASP.NET搜索这个文件夹里所有的.CSS文件并把它们动态的插入到所有应用此主题的页面。
也正因此，<
元素必须加上runat="
变为服务器控件，ASP.NET才能将<
link>
标签插入。
通过配置文件来应用主题
有时，你可能希望把主题应用到整个Web应用程序。
要达到这一目的，最简捷的办法是在web.config文件的<
pages>
元素里为应用程序配置主题，如下所示：
configuration>
system.web>
pagestheme="
/system.web>
/configuration>
如果希望使用样式表行为以便主题不会覆写冲突的控件属性，那么可以使用styleSheetTheme特性替代Theme特性：
pagesstyleSheetTheme="
无论哪种方式，配置文件里指定了主题之后，只要页面没有单独设置主题，主题就会应用到网站的所有页面。
如果某个页面指定了Theme或StyleSheetTheme特性，页面设置的优先级将高于web.config的设置。
利用这一技术，还可以很方便的把主题应用到Web应用程序某些特定部分。
例如，可以为每个子文件夹创建一个一个单独的web.config文件，并通过<
设置不同的主题。
如果某个单独的页面不想应用这个全局的主题，也可以在Page指令中设置EnableTheming为false。
动态应用主题
有时候，主题不用于标准化网站外观，而是用于使每个用户可配置外观。
这时，Web应用程序就使用户有机会选择页面要使用的主题了。
这项技术其实非常简单。
你所要做的只是在代码里动态的设置Page.Theme属性或Page.StyleSheet属性。
唯一需要注意的是，这一步必须在Page.PreInit事件阶段完成。
以后，尝试设置这些属性会触发异常。
可以把选定的主题放在Session、cookie、用户配置属性或者其他用户特定的位置。
需要使用一些技巧才能创建一个允许用户选择主题的页面。
这一问题是因为，在页面加载前不能够读取用户的选择，而此时已过了PreInit阶段，所有这个时候再设置主题已经太晚了。
解决这一问题的一个办法是重定向到页面自身从而触发一次刷新。
完成这一任务的最高效办法是使用Server.Transfer（）方法，这样，所有的处理过程都发生在服务器端。
（Response.Redirect（）向客户端发送一个重定向首部，所以需要一次往返。
）
下面这个示例可以说明上述所讲的技术：
protectedvoidPage_Load（objectsender,EventArgse）
if（!
Page.IsPostBack）
{
DirectoryInfothemeDir=newDirectoryInfo（Server.MapPath（"
~\\App_Themes"
））;
lstThemes.DataTextField="
Name"
;
lstThemes.DataSource=themeDir.GetDirectories（）;
lstThemes.DataBind（）;
}
protectedvoidPage_PreInit（objectsender,EventArgse）
if（Session["
Theme"
]==null）
Page.Theme="
"
else
Page.Theme=Session["
].ToString（）;
protectedvoidcmdApply_Click（objectsender,EventArgse）
Session["
]=lstThe
升级会员 