将样式信息移动到单独的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页面的基础上创建一个简单的样式化页面。
(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元素那样。
. 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所要做的是提供一种机制，这种机制基于服务器端控件的类型而不是客户端控件的类型来指定元素的外观，因此当一个控件在不同的浏览器上显示时，其一致性将能尽可能地保持。这个目标是通过使用主题和皮肤实现的。
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
