使用 CSS 概述
级联样式表 (CSS) 包含应用于网页中的元素的样式规则。 这些样式定义元素的显示方式以及元素在页中的放置位置。 Visual Studio 提供可用于使用 CSS 的工具。
本主题包含以下内容：
方案
CSS 工具的功能
背景
代码示例
类参考
提示
方案
当您编辑网页时，您可以在三个地方创建样式规则： 内联、网页中 <style> 节的内部，或外部样式表的内部。 您可以使用可视辅助查看应用于页面元素的填充和边距， 还可以使用定位工具将元素定位。
返回页首
CSS 工具的功能
Visual Studio 提供了以下工具，可用来创建、应用和管理样式和级联样式表 (CSS)：
**“应用样式”**窗口，用于创建、修改和应用样式。 您还可以链接到或移除外部 CSS。 此窗口可识别样式类型，并显示该样式是否用于当前网页，以及该样式是否由当前选定内容使用。
**“管理样式”窗口，其中的很多功能与“应用样式”窗口中的相同。 但可以使用“管理样式”**窗口将样式从页面中的 <style> 分区移到外部样式表，或反之亦然。 还可以使用此窗口在样式表内移动样式。
**“CSS 属性”**窗口可显示网页中当前选定内容使用的样式。 该窗口还显示样式的优先级别。 此外，该窗口还提供所有 CSS 属性的完整列表。 您就可以向现有样式添加属性、修改已设置的属性及创建新的嵌入式样式。 更多详细信息，请参见如何：使用“CSS 属性”窗口。
如果您正在使用 ASP.NET Web 窗体页 （.aspx 文件），标签选择器允许您在网页中工作时选择HTML标记。 标记选择器栏位于编辑窗口的底部。 当您将光标置于页面中的任何位置时，快速标记选择器栏将显示标明该区域的基础 HTML 标记的那些标记。 您还可以使用 Esc 键上移 HTML 层次结构，以选择嵌套在其他标记内的标记。
返回页首
背景
您不必给页中的特定类型的每个元素都分配格式属性。 相反，您可以创建一个适用于该类型的所有元素的样式规则。 这些规则应用属性值（如格式设置规则）到某个元素的任何实例，或者到具有特定ID或样式类的任何元素）。
在本节中，您可学习 CSS 样式以及如何创建和使用 Visual Studio 应用样式。
.gif "Bb398931.collapse_all(zh-cn,VS.110).gif")
定义 CSS 样式规则
每个 CSS 样式规则（也称为样式）都有两个主要部分：选择器（如 h1）和声明（如 color:blue）。 声明由一个属性 (color) 及其值 (blue) 组成。 样式规则的语法如下：
Selector { property : value ; property2 : value2}
例如，以下 CSS 样式规则指定任何 h1 元素中的文本都居中并使用蓝色的字体。
h1 {text-align:center; color:blue;}
使用不同类型的样式
样式规则应用于元素，具有 class 属性的元素，或具有 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">
备注
在 Visual Studio 中，不根据 .css 文件中定义的类来验证标记中的类名称。这是因为类名称可以被 ECMAScript 代码用作语义描述符、微格式，或者用来标记尚未定义的样式。
基于 ID 的样式
基于 ID 的样式定义您要应用到具有 ID 特定特性的元素的属性。 要为网页中的单个 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>
<html>
<head>
<title>CSS Element Style Example</title>
<style>
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" 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 样式规则（使 h1 文本居中并显示为蓝色）。 但是，它们不会更改所有可用样式，如字体特征。 全局和局部样式规则按上述顺序应用。 结果是，此页上的所有 h1 文本都以格式化为粗体、居中和蓝色的较大字体显示。
代码示例
返回页首
类参考
没有应用于 CSS 工具的类。
返回页首
提示
Visual Studio 可以让用户体验到一些工具中丰富的 CSS 编辑功能，从而可以比以前更加轻松地使用级联样式表 (CSS)。 通过使用 **“CSS 属性”**窗口、 “应用样式” 和 **“管理样式”窗口，可以在 “设计” 视图中完成布局设计和内容样式设置的大部分工作。 您还可以使用 WYSIWYG 可视布局工具在“设计”**视图中更改定位、填充和边距。
返回页首