使用 CSS 概述
更新：2007 年 11 月
级联样式表 (CSS) 包含应用于网页中的元素的样式规则。这些样式定义元素的显示方式以及元素在页面中的放置位置。Visual Studio 2008 提供了可用于处理 CSS 的工具。
本主题包括：
方案
CSS 工具的功能
背景
代码示例
类参考
新增功能
方案
在 Visual Studio 2008 中，使用设计器创建和编辑网页时，可以编写不同的样式规则，如内联样式规则、包含在网页中的样式规则或包含在外部样式表中的样式规则。您可以使用可视辅助查看应用于页面元素的填充和边距，还可以使用定位工具将元素定位。
返回页首
CSS 工具的功能
Visual Studio 2008 提供了一组工具，可用来创建、应用和管理样式和级联样式表 (CSS)。这些工具包括：
**“应用样式”**窗口，用于创建、修改和应用样式。您还可以链接到或移除外部 CSS。此窗口可标识样式类型，并显示该样式是否用于当前网页，以及该样式是否由当前选定内容使用。有关更多信息，请参见如何：使用“应用样式”窗口和“管理样式”窗口。
**“管理样式”窗口，其中的很多功能与“应用样式”窗口中的相同。但可以使用“管理样式”**窗口将样式从内部样式表（页面中的 style 元素）移到外部样式表，或从外部样式表移到内部样式表。还可以使用此窗口在样式表内移动样式。有关更多信息，请参见如何：使用“应用样式”窗口和“管理样式”窗口。
**“CSS 属性”**窗口，显示网页中当前选定内容使用的样式。该窗口还显示样式的优先级。此外，该窗口还提供所有 CSS 属性的完整列表。这样您就可以向现有样式添加属性、修改已设置的属性及创建新的内联样式。有关更多信息，请参见如何：使用“CSS 属性”窗口。
**“直接样式应用”**工具栏，可通过它应用或移除基于类或 ID 的样式，并创建和应用新的样式。它还对 Visual Studio 生成的样式提供更大程度的控制。有关更多信息，请参见如何：使用“直接样式应用”工具栏。
标记选择器，用于在处理网页时选择 HTML 标记。标记选择器栏位于编辑窗口的底部。当您将光标置于页面中的任何位置时，快速标记选择器栏将显示标明该区域的基础 HTML 标记的那些标记。您还可以使用 Esc 键上移 HTML 层次结构，以选择嵌套在其他标记内的标记。有关更多信息，请参见 Visual Web Developer 中的 HTML 编辑器标记导航。
返回页首
背景
您可以不必将格式设置属性单独分配给页面中的每个元素，而是创建样式规则。当 Web 浏览器遇到某个元素的任何实例或具有特定 ID 或样式类的元素的任何实例时，这些规则应用属性值（通常是格式设置规则）。
若要使用 CSS 样式，您必须了解如何创建样式以及如何应用样式。本节包含有关 CSS 样式和 Visual Studio 2008 中的工具（使用这些工具可以更轻松地使用 CSS 样式）的 W3C CSS 规范信息。
定义 CSS 样式规则
每个 CSS 样式规则（也称为样式）都有两个主要部分：选择器（如 h1）和声明（如 color:blue）。声明由一个属性 (color) 及其值 (blue) 组成。样式规则的语法如下：
Selector { property : value ; property2 : value2}
例如，以下 CSS 样式规则指定任何 h1 元素中的任何文本都应居中并使用蓝色的字体。
h1 {text-align:center; color:blue;}
使用不同类型的样式
您可以定义不同用途的样式规则，如应用于元素、应用于具有指定类的元素或应用于基于 ID 的元素的样式规则。样式是由其规则集定义的，包括一个选择器，后跟一个属性声明块（位于左大括号 ( { ) 和右大括号 ( } ) 之间）。每一种样式类型的选择器都与其他样式类型的选择器不同。基于类的选择器前面有一个句点 (.)。基于 ID 的选择器前面有一个数字符号 (#)。基于元素的样式的选择器只包含 HTML 元素的名称，如 h1。
基于元素的样式
基于元素的样式定义您要应用到特定 HTML 元素的每个实例的属性。（基于元素的样式可以由元素各个实例的基于类或基于 ID 的样式重写。） 例如，您可能希望为所有段落（p 元素中的内容）创建 25 像素的边距。为此，您可以创建一个基于元素的样式，该样式使用 p 元素作为自己的选择器，并包含边距属性的声明。下面的示例演示此基于元素的样式规则。
p { margin-left: 25px; margin-right: 25px }
基于类的样式
基于类的样式定义您要应用到特定元素类型子集的属性（例如，应用于部分而不是全部 p 元素）。它们还可以应用于不同类型的元素，如一些 p 元素和一些 span 元素。下面的示例演示基于类的样式规则。名称 introduction 为该样式的选择器（该类的名称）。
.introduction {font-size: small; color: white}
下面的示例演示如何为 <p> 标记指定类：
<p class="introduction">
基于 ID 的样式
基于 ID 的样式定义您要应用到由其 ID 属性 (attribute) 标识的特定元素的属性 (property)。要为网页中的单个 HTML 元素设置样式时，通常使用基于 ID 的样式。下面的示例演示基于 ID 的样式。名称 footer 指定此样式应用于的 ID。
#footer {background-color: #CCCCCC; margin: 15px}
下面的示例演示如何为 <p> 标记指定 ID：
<p id="footer">
编写 CSS 样式
您可以在多个位置编写 CSS 样式规则，包括：
与 HTML 标记的内联。
在网页上的 style 元素中。
在链接或导入到网页中的外部样式表（.css 文件）中。
通常，在外部样式表中编写应用于整个网站的样式规则。在页面的 style 元素中编写只应用于该页的样式规则。将应用于单个页元素的样式规则编写为内联样式。很多设计人员和开发人员发现，在一个或多个外部样式表中编写所有样式规则可以使维护样式变得更加轻松。
创建内联样式
内联样式规则是在元素的开始标记中使用样式属性定义的。当您要为网页中的单个元素定义属性，但不想重用该样式时，可以使用内联样式。
下面的示例演示内联样式。
<p style="font-weight: bold; font-style: italic; color: #FF0000">
创建内部（页特定的）CSS 样式
CSS 样式规则可以在网页的 head 元素中的 style 元素内定义。在这种情况下，这些样式规则只应用于该页中的元素。
下面的示例演示如何定义 CSS 样式规则以及将该规则应用于一个网页中的所有 h1 元素。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>HTML 4.0 CSS Element Style Example</title>
<style type="text/css"> h1{text-align:center; color:blue;} </style>
</head>
<body>
<h1>This text is centered and blue</h1>
</body>
</html>
在此网页中，<h1> 和 </h1> 标记之间的所有文本都居中并显示为蓝色。您不必为文档中的每个 h1 元素重新指定这些样式属性。如果要更改 h1 元素中所有文本的颜色（或任何属性），可以编辑一个样式规则。
创建外部级联样式表
外部样式表是一个文件扩展名为 .css 的文本文件，只包含样式规则。使用 link 元素可以将样式表链接到网页，如下面的示例所示。
<link rel="stylesheet" type="text/css" href="myStyles.css" />
此 link 元素将外部样式表 myStyles.css 中的样式规则应用于当前页。
在外部样式表中列出的样式规则与 style 元素中的样式规则的编写方式相同。但是，它们不在 <style> 和 </style> 标记间。下面的示例演示一个简单 .css 文件的完整内容。
h1 { text-align:center; color:blue; }
.head2 { font-size:14pt; text-align:center; color:blue; font-weight:bold; font-style:italic; }
可以将外部样式表链接到多个 HTML 页，这可使样式应用于整个网站。样式表将格式设置规则与内容分开。这使管理样式规则变得更加轻松。
了解 CSS 样式规则的优先级
CSS 样式规则“级联”遵循优先级的顺序。全局样式规则首先应用于 HTML 元素，而局部样式规则可重写全局样式规则。例如，在网页的 style 元素中定义的样式会重写在外部样式表中定义的样式。同样，在页面的 HTML 元素中定义的内联样式会重写在其他位置为同一元素定义的任何样式。
即使在应用局部样式之后，未被局部 CSS 样式规则重写的各全局样式规则仍将应用于各个元素。在上一节的示例中，控制 h1 元素中的文本的局部 CSS 样式将替代用于 h1 文本的部分 Web 浏览器的全局样式规则（使 h1 文本居中并显示为蓝色）。但是，它们不会更改所有可用样式，如字体特征。全局和局部样式规则按上述顺序应用。结果是，此页上的所有 h1 文本都以格式化为粗体、居中和蓝色的较大字体显示。
代码示例
返回页首
类参考
没有应用于 CSS 工具的类。
返回页首
新增功能
Visual Studio 2008 现在可以让用户体验到一些新工具中丰富的 CSS 编辑功能，从而可以比以前更加轻松地使用级联样式表 (CSS)。通过使用“CSS 属性”窗口、“应用样式”和“管理样式”窗口以及“直接样式应用”工具，可以在“设计”视图中完成布局设计和内容样式设置的大部分工作。您还可以使用 WYSIWYG 可视布局工具在“设计”视图中更改定位、填充和边距。
返回页首