开发任何Web应用程序的过程都是围绕着两个主要方面进行的：功能和外观。Web应用程序的功能方面主要包括站点的结构、控件的行为、用户经验、保护应用程序安全的代码、当用户单击某个按钮时会发生什么，等。站点的外观多少包含一些美学因素，涉及到色彩和图片的使用、页面的布局以及在某种程度上还包括在浏览器上显示的代码样式。一个成功的应用程序应努力在两者之间保持平衡，既保证在视觉上给用户享受，又保证使用上的简单性，但很多站点在这个问题上都做得不好。
本章首先介绍为Web应用程序制作样式的基本工具，然后介绍Visual Web Developer设置样式的能力。在介绍编写独立的CSS文件之前，先介绍为单个控件设置样式的基础知识，然后介绍主题—— 一种为页面和站点设置样式的新技术。
本章讨论了以下内容：
●为站点设置样式，从为单个元素设置样式到使用CSS样式表
●在VWD中为应用程序开发样式表
●使用ASP.NET 2.0的主题(theme)和皮肤(skin)快速开发样式化的Web页面，使它们符合一致的外观
●使用主题和皮肤为Wrox United添加样式
另外，本章还讨论了实用性和可存取性，这是两个重要的方面，在站点的开发过程中应给予充分考虑。
5.1 为站点设置样式
站点的首页是访客首先看到的页面，虽然我们知道不能通过一本书的封面判断其价值(特别是Wrox出版社的书籍，不能通过作者的面部照片判断书籍价值)，但我们仍会根据书籍的外观产生第一印象，无论是一种普通的反应(一般吧，功能还可以，搜索框在哪里？)，一种肯定的反应(整洁、朴实、美观，我想浏览其他页面！)，还是一种否定的反应(哇，一团糟，我要到其他地方去！)。第一印象是很重要的，因此必须正确处理！
任何站点设计中都包含有常见的元素；例如，一个显示公司名称的标题，站点主要内容的介绍，或者您浏览站点的原因。另外还会发现诸如菜单、搜索框、链接组、页脚等区域。没有这类元素的页面一般只适用于特定的用户；例如，开发人员为了验证一个概念，或者希望尝试一本书中的某种新技术。准确地放置这些元素是很重要的，就像组织站点的内容以符合站点的样式一样。
设置样式和布局站点是Web开发中的一个有机整体。虽然布局站点是一个方面，但设置样式可能更加复杂。本章将重点讨论这个过程中涉及到的页面样式化、规则和层次结构—— 在页面上布局元素和放置内容是站点设计的一部分，本书从始至终都将讨论这个主题。
5.1.1 style属性改变Web页面上元素外观的最快捷的方法是添加style属性。Web页面上任何可见的元素都具有style属性。例如：
<div style="font-weight:bold;color:red;border-bottom:solid 2pt navy">This is a styled "div" tag</div>
图5-1显示了这个style属性在Internet Explorer中的效果。
图 5-1
在下面的“试一试”练习中，首先将创建一个可以在其中进行本章所有示例的站点。
试一试：样式化一个简单的页面，第一部分--逐个元素进行(1) 在VWD中，打开名为Chapter05的初始示例站点(C:\BegASPNET2\Chapters\Begin\)。这个初始站点仅仅包含了少数几个文件，从而为进行本章中的示例做好了准备。
(2) 添加一个新的空白.aspx页面并将其命名为Default.aspx。直接切换到Source View并在Form标记之间输入灰色部分的代码：
<form id="form1" runat="server">
<div style="font-weight:bold; color:red; border-bottom:solid 2pt
navy; ">
This is a styled "div" tag
</div>
</form>
请注意VWD是如何帮助您输入样式信息的(如图5-2所示)。
图 5-2
(3) 现在切换到Design View并观察这些格式化信息是如何应用到页面上的，如图5-3所示。
图 5-3
(4) 注意属性窗口是如何显示style属性值的。如果在属性值内的任意位置单击鼠标，在属性值的后面将会出现椭圆按钮(…)。单击该按钮将会看到如图5-4所示的Style Builder对话框。
在为元素设置样式时这个对话框非常有用，因为使用它可以不必记住每个样式的语法。开发人员所需做的就是选择希望应用于元素的样式并单击OK即可。我们将在另一个页面使用这个对话框设置样式。
图 5-4
(5) 创建另一个.aspx页面并将其命名为StyledPage1.aspx。在这个页面中，需要添加一个<div>元素，该元素内的文本是“This is highlighted text”以及一个标题1(h1)元素，该元素内的文本是“This is also highlighted text”。
(6) 使用Style Builder对话框(如图5-5所示)将两个元素的字体设置为Trebuchet MS，并将颜色设置为藏青色。这个操作将在Source View中自动添加如下代码：
<div style="font-family: 'Trebuchet MS';Color: Navy; ">
This is highlighted text.</div>
<h1 style="font-family: 'Trebuchet MS';Color: Navy; ">
This is also highlighted text.</h1>
图 5-5
(7) 在浏览器中查看该页面以便浏览完成后的文档。其内容应该类似图5-6所示。
图 5-6
操作回顾现在这个页面可能还不是很令人满意，但修改其外观并不需要占用很多时间。接下来就可以把这项技术用于站点上的每个元素。可以在一个站点中使用多种不同的样式属性，附录E中列出了一些最常用的元素，可以帮助开发人员为站点选择最喜欢的样式。
在学习了如何为页面上的元素设置样式之后，将样式表嵌入代码就不是什么复杂的问题了。HTML元素的样式属性的语法和样式表中所使用的样式语法完全一样，下一小节将学习如何使用样式表从而提高代码的可维护性。
样式表的概念从出现至今已有数年的时间(它最初是由W3C在1996年12月作为一个建议提出来的)，每个设计得很优秀的站点都包含有一个定义明确的CSS样式表，这个样式表为站点定义了一个特定的外观。使用样式表，开发人员可以定义页面上每种类型的元素应怎样显示，同时还可以为特定的样式创建定义并将其应用于页面上的相关元素。例如，可以指定每个<div>标记的实例都应包含藏青色的文本，或者也可以定义一个名为HighlightedText的样式类(class)，然后将其应用于页面上的所有<div>标记以及类似的元素。下面是一个样式表的一部分代码，其中分别定义了这两种样式：
div
{
font-family: 'Trebuchet MS';
Color: Navy;
}
.HighlightedText
{
font-family: 'Trebuchet MS';
Color: Navy;
}
注意这两者之间的惟一差别是HighlightedText类的前面有一个点号，这个类名是用户自定义的。点号表示可以将这个区域作为一个类应用于任意元素，而不用为某种特定类型的元素定义默认样式。
为了将样式用于元素，并不需要对元素本身进行任何修改；只要页面知道在什么地方能够找到样式信息，样式就可以自动地得以应用(稍后将讨论怎样定位样式信息)。然而，为元素指定某个特定的自定义类样式时，可以使用Class属性，例如：
<div class="HighlightedText">This is highlighted text.</div>
<h1 class="HighlightedText">This is also highlighted text.</h1>
虽然在本书中看不到文本的颜色，但是可以看到在前面的样式类定义的字体样式已经应用于这两个元素，如图5-7所示。
图 5-7
当然，如果亲自进行这个练习，将看到字体呈藏青色。
1. 样式的语法样式定义包含在花括号之间。开括号的位置可以紧跟在元素或类名的后面，也可以另起一行；例如，div样式可以重写为如下形式：
div{
font-family: 'Trebuchet MS';
Color: Navy;
}
可以任意选择自己喜欢的样式—— 就作者个人而言，我喜欢将所有的括号放在一条垂直线上对齐。
也可以对样式信息使用类似锚标记(<a>)这种带有特定变化的标记，从而在将鼠标放置在这些标记上时它们的外观能够自动发生变化，如下所示：
a:link, a:visited
{
color: #cc3300;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
a:active
{
color: #ff9900;
text-decoration: underline;
}
此代码将在页面上显示带有下划线的红色链接，当用户将鼠标放在链接上时，下划线将消失，而在单击链接时，它们立即变成浅橙色。通过这种方式可以提示用户鼠标正位于某个链接之上，并且刚才单击过某个链接。由逗号分隔开的两个条目表示后面的样式信息对它们都有效(在这个示例中，逗号分隔的两个条目是a:link和a:visited)。
完全使用CSS为页面设置样式的第一步就是决定要为每个元素设置什么样的样式并创建一组样式定义。
可以将样式定义存放在两个位置从而将其应用到Web页面上。第一个位置是将其存放在页面顶部<head>元素内的<style>标记内。另一种选择是创建一个独立的外部样式表来保存样式定义，并将这个外部样式表文件链接到需要使用它的Web页面。
在下一小节将首先介绍把样式定义放在页面上的<style>标记内的技术，然后再介绍怎样引入外部的CSS样式表。
2. 将样式信息从style属性移到style区域如果只对单个页面设置样式，则可以将样式信息嵌入到页面的HTML语言的<head>标记内，如下所示：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Styled Page 1</title>
<style>
.HighlightedText
{
font-family: 'Trebuchet MS';
Color: Navy;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="HighlightedText">This is highlighted text.</div>
<h1 class="HighlightedText">This is also highlighted text.</h1>
</form>
</body>
</html>
这些代码和前面示例中所使用的代码是一样的。注意怎样使用<style>标记在页面的<head>区域内简便地嵌入样式信息。在单个页面中使用这种技术是很好的—— 实际上，如果曾经将Word文档保存为HTML，将看到这种技术用于定义文档的样式从而使得该文档呈现为HTML。作者在Word 2003中将这个文件保存为Web Page(Filtered)，这种方式产生的HTML代码比在Word中将这个文件保存为Web Page时自动产生的标准代码要整洁得多。在保存该文件之后，作者查看了产生的源代码，并发现了如下所示的样式定义，它们描述了在本章中使用的某些高亮区域是怎样定义的：
p.code, li.code, div.code
{margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:30.0pt;
margin-bottom:.0001pt;
line-height:112%;
font-size:8.5pt;
font-family:Courier;}:
这种技术对于创建要在多个页面中使用样式信息的站点并不理想，因为开发人员必须为站点内的每个页面单独地复制<style>标记和样式定义。对这种情况的解决方案是将样式定义移到一个单独的CSS文件中。
3. 将样式信息移动到单独的CSS文件中这可能是最简单的一个步骤。一旦将样式定义封装在<style>标记之内以后，将这些信息提取到一个单独的样式表中实在是一件非常容易的事情。开发人员需要进行的所有工作就是创建一个扩展名为.css的文件，将Web页面内的样式信息复制到该文件中，并以如下方式添加该样式表的链接：
<head runat="server">
<title>Styled Page 2</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
样式表文件中只包含样式信息，因此可以说现在已拥有一个包含所有样式代码的样式表：
.HighlightedText
{
font-family: 'Trebuchet MS';
color: Navy;
}
a:link, a:visited
{
color: #cc3300;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
a:active
{
color: #ff9900;
text-decoration: underline;
}
接下来可以将该样式表链接到Web页面，并在页面中添加如下灰色部分代码：
<form id="form1" runat="server">
<div class="HighlightedText">This is highlighted text.</div>
<h1 class="HighlightedText">This is also highlighted text.</h1>
<div><a href="default.aspx">This is a sample link</a></div>
</form>
在查看这个页面时将看到如图5-8所示的画面。
图 5-8
接下来将实践这些概念。在下面的“试一试”练习中，将在前面创建的StylePage1.aspx页面的基础上创建一个简单的样式化页面。
试一试：样式化一个简单的页面，第一部分--使用CSS(1) 在Chapter05站点中创建另一个名为StylePage2.aspx的新页面。
(2) 从StyledPage1.aspx页面中复制<div>标记和标题，并删除每个元素中的style属性。在相同的位置上，添加一个class属性，并将其值设置为“HighlightedText”。
<form id="form1" runat="server">
<div class="HighlightedText">
This is highlighted text.</div>
<h1 class="HighlightedText">
This is also highlighted text.</h1>
</form>
(3) 在页面的标题下面添加一个文本为“This is a sample link”的超链接。将“default.aspx”设置为它的href属性的值。
<form id="form1" runat="server">
<div class="HighlightedText">
This is highlighted text.</div>
<h1 class="HighlightedText">
This is also highlighted text.</h1>
<div><a href="default.aspx">This is a sample link</a></div>
</form>
(4) 该链接的后面添加一个换行符，并在该换行符的后面添加一个ASP.NET的Label控件。您应该记得服务器控件有一组与标准控件不相同的属性，因此将该标签控件的CssClass属性设置为“HighlightedText”，同时将Font-Italic属性设置为“true”：
This is also highlighted text.</h1>
<div><a href="default.aspx">This is a sample link</a></div><br />
<asp:Label CssClass="HighlightedText" Font-Italic="true" ID="Label1"
runat="server" Text="This is an ASP.NET label"></asp:Label>
</form>
(5) 在Solution Explorer中右击Chapter05站点并选择Add New Item。从图标列表中选择StyleSheet并接受默认名称：StyleSheet.css。在这个文件中，添加如下代码：
.HighlightedText
{
font-family: 'Trebuchet MS';
color: Navy;
}
a:link, a:visited
{
color: #cc3300;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
a:active
{
color: #ff9900;
text-decoration: underline;
}
注意在CSS样式表中所使用的语法与在Source View中对某个HTML控件设置style属性时所使用的语法是相同的，这将有助于CSS文件的编写，如图5-9所示。
另外还要注意到工具栏上的Build Style图标；如果单击这个按钮，将启动Style Builder对话框。可以自己尝试使用这个对话框—— 添加另一个元素定义(例如<div>)，并在其后添加一对花括号。将光标放置在花括号内并单击该按钮启动Style Builder。在选择所需的样式之后，只需单击OK，这些样式就将作为一个CSS条目出现在StyleSheet.css文件中。
(6) 最后的收尾工作只有一件事情要做，那就是告诉Web页面引用定义在.css文件中的样式。切换回StyledPage2.aspx并进入Design View。应该看到如图5-10所示的画面。
图 5-9
图 5-10
(7) 现在从Solution Explorer中将StyleSheet.css文件的图标拖放到设计区中。该操作一完成，页面的外观就将发生变化(如图5-11)所示。
图 5-11
如果现在运行这个页面，将会在浏览器窗口中看到几乎相同的画面。
操作回顾使用CSS文件为页面中的HTML元素添加样式只需完成两件事情。一件是定义表示元素样式的类，另一件是在页面中添加一个链接以便定位CSS文件。当把CSS文件拖放到设计区时，页面的顶部将添加如下代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Styled Page 2</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
页面顶部的这个链接告诉Web页面到什么地方查找样式信息。从此刻起，页面中的任何class属性都将试图引用这个CSS样式表以便为这些元素找到样式信息。如果找不到相应的类，就不会有任何样式应用于元素，除非在元素的Style属性中手动指定了样式。
对指定了class属性的HTML元素，还可以在它的Style属性中指定额外的样式信息。任何定义在Style属性中的样式都将重写那些在CSS文件中指定的样式，从而使得开发人员可以调整页面上特定元素的外观。
服务器控件有些不同。由于服务器控件在呈现时会被转换为恰当的HTML代码，所以可以使用的属性将会不尽相同。在这个示例中，使用了一个Label控件。相对而言，Label控件非常简单，所以可对其添加的样式不是很多。在本示例中，您为其添加了一个CSS链接，并定义了另一个样式。服务器控件所使用的CssClass属性直接和HTML元素的class属性相关。而单个的样式属性则类似于HTML元素中的style属性：
<asp:Label CssClass="HighlightedText" Font-Italic="true" ID="Label1"
runat="server" Text="This is an ASP.NET label"></asp:Label>
在呈现该标签的时候，将产生如下代码：
<span id="Label1" class="HighlightedText" style="font-style:italic; ">This is an ASP.NET label</span>
注意在浏览器中自定义的样式属性被转换为一个标准的style标记。因为CSS样式在客户端才起作用，所以页面一旦呈现之后，HTML元素的class属性和style属性都将得以应用，就像静态的HTML元素那样。
4. CSS的局限性和使用服务器端代码设置样式在使用CSS为站点设置样式时，可以指定特定元素在页面上的外观。这对于一个静态的HTML站点是可以的，单对于服务器端元素，这可能会有一些问题。例如，一个简单的ASP.NET控件Panel。如果将一个Panel控件拖放到页面上，添加一些文本，并在两个不同的浏览器中查看这个页面(例如，Internet Explorer和一个比较老的或功能有限的浏览器，如Links)，在查看页面的源代码时会看到不同的结果。下面是一些源代码示例：
<form id="form1" runat="server">
<asp:Panel ID="Panel1" runat="server" Height="50px" Width="
125px">This text
is contained within an ASP.NET Panel control
</asp:Panel>
</form>
现在，如果在Internet Explorer 6或Firefox 1.0.2中查看Web页面，将产生如下所示的代码：
<form method="post" action="StyledPanels.aspx" id="form1">
<div>
<input type="hidden" span="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwULLTEwODU4OTkxMzRkZHehxD/SHmjEeZzCKx7+bB752B3R" />
</div>
<div id="Panel1" style="height:50px;width:125px; ">
This text is contained within an ASP.NET Panel control
</div>
</form>
如果在比较老的浏览器(例如Mozilla 5.0)中查看这个页面，将产生如下代码：
<form name="form1" method="post" action="StyledPanels.aspx" id="form1">
<input type="hidden" span="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwULLTEwODU4OTkxMzRkZHBovyeleyCJNtOpi+uco+l/zE5a" />
<div id="Panel1">
This text is contained within an ASP.NET Panel control
</div>
</form>
注意在两种情况下Panel都被呈现为一个<div>控件，但在第二种情况中，它丢失了高度和宽度信息。这里只是一个小小的变化，但是却是对ASP.NET 1.1的一项很重大的改进。ASP.NET 1.1以前在较老的浏览器中将ASP.NET的Panel控件呈现为HTML的表格。例如：
<table id="Panel1" cellpadding="0" cellspacing="0" border="0" height="
50"
width="125">
<tr><td>
This text is contained within an ASP.NET Panel control
</td></tr>
</table>
现在虽然ASP.NET 2.0已经将很多类似的问题从我们的日常编程工作中移除，但有一个问题仍然存在，那就是在服务器端看到的内容与在客户端看到的内容不一样，而且无法保证同一个元素在不同的浏览器上会以相同的方式进行呈现。ASP.NET 2.0所要做的是提供一种机制，这种机制基于服务器端控件的类型而不是客户端控件的类型来指定元素的外观，因此当一个控件在不同的浏览器上显示时，其一致性将能尽可能地保持。这个目标是通过使用主题和皮肤实现的。槝<