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=
""COLOR: black">'Trebuchet MS
';Color: Navy;
">
This is highlighted text.</div>
<h1 style=
""COLOR: black">'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
{
"COLOR: black">'Trebuchet MS
';
Color: Navy;
}
.HighlightedText
{
"COLOR: black">'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{
"COLOR: black">'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
{
"COLOR: black">'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;
}:
这种技术对于创建要在多个页面中使用样式信息的站点并不理想，因为开发人员必须为站点内的每个页面单独地复制<style>标记和样式定义。对这种情况的解决方案是将样式定义移到一个单独的CSS文件中。
3184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
