![ASP.NET入门教程 5.1.2 CSS 级联样式表[4],第1张](/aiimages/ASP.NET%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B+5.1.2+CSS+%E7%BA%A7%E8%81%94%E6%A0%B7%E5%BC%8F%E8%A1%A8%5B4%5D.png "ASP.NET入门教程 5.1.2 CSS 级联样式表[4],第1张")
接下来可以将该样式表链接到Web页面 并在页面中添加如下灰色部分代码
<form id= form runat= server >
<div class= HighlightedText >
This is highlighted text </div>
<h class= HighlightedText >
This is also highlighted text </h >
<div><a href= default aspx >This is a sample link</a></div>
</form>
在查看这个页面时将看到如图 所示的画面
CSS的局限性和使用服务器端代码设置样式
在使用CSS为站点设置样式时 可以指定特定元素在页面上的外观 这对于一个静态的HTML站点是可以的 单对于服务器端元素 这可能会有一些问题 例如 一个简单的ASP NET控件Panel 如果将一个Panel控件拖放到页面上 添加一些文本 并在两个不同的浏览器中查看这个页面（例如 Internet Explorer和一个比较老的或功能有限的浏览器 如Links） 在查看页面的源代码时会看到不同的结果 下面是一些源代码示例
<form id= form runat= server >
<asp:Panel ID= Panel runat= server Height= px Width= px >This text is contained within an ASP NET Panel control
</asp:Panel>
</form>
lishixinzhi/Article/program/net/201311/15349
这些代码和前面示例中所使用的代码是一样的 注意怎样使用<style>标记在页面的<head>区域内简便地嵌入样式信息 在单个页面中使用这种技术是很好的 实际上 如果曾经将Word文档保存为HTML 将看到这种技术用于定义文档的样式从而使得该文档呈现为HTML 作者在Word 中将这个文件保存为Web Page（Filtered） 这种方式产生的HTML代码比在Word中将这个文件保存为Web Page时自动产生的标准代码要整洁得多 在保存该文件之后 作者查看了产生的源代码 并发现了如下所示的样式定义 它们描述了在本章中使用的某些高亮区域是怎样定义的
p code li code div code
{margin top: cm
margin right: cm
margin bottom: cm
margin left: pt
margin bottom: pt
line height: %
font size: pt
font family:Courler}:
这种技术对于创建要在多个页面中使用样式信息的站点并不理想 因为开发人员必须为站点内的每个页面单独地复制<styled>标记和样式定义 对这种情况的解决方案是将样式定义移到一个单独的CSS文件中
将样式信息移动到单独的CSS文件中
这可能是最简单的一个步骤 一旦将样式定义封装在<style>标记之内以后 将这些信息提取到一个单独的样式表中实在是一件非常容易的事情 开发人员需要进行的所有工作就是创建一个扩展名为 CSS的文件 将Web页面内的样式信息复制到该文件中 并以如下方式添加该样式表的链接
<head runat= server >
<title>Styled Page </title>
<link href= StyleSheet css rel= stylesheet type= text/css />
</head>
样式表文件中只包含样式信息 因此可以说现在己拥有一个包含所有样式代码的样式表
HighlightedText
{
font family: Trebuchet MS
color: Navy
}
a:link a:visited
{
color: #cc
text decoration: underline
}
a:hover
{
text decoration: none
}
a:active
{
color: #ff
text decoration: underline
}
lishixinzhi/Article/program/net/201311/15351
