ASP.NET入门教程 5.1.2 CSS 级联样式表[3]

2023-02-28 22:48:01html-css010

ASP.NET入门教程 5.1.2 CSS 级联样式表[3],第1张

这些代码和前面示例中所使用的代码是一样的注意怎样使用<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页面内的样式信息复制到该文件中并以如下方式添加该样式表的链接

<title>Styled Page </title>

</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

接下来可以将该样式表链接到Web页面并在页面中添加如下灰色部分代码

This is highlighted text </div>

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）在查看页面的源代码时会看到不同的结果下面是一些源代码示例

<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>

.wrap {

width: 500px

border: 1px solid black

margin: 0 auto

}

</style>