使用本主题了解 CSS 规则、选择器、继承等 CSS 基本概念。 此外，还可了解在 Dreamweaver 中如何才能将 CSS 与网页关联。
关于层叠样式表
级联样式表 (CSS) 是一组控制网页内容外观的格式设置规则。使用 CSS 样式来格式化页面可以将内容与呈现分离。您的页面内容（HTML 代码）存储在 HTML 文件中，而定义代码呈现方式的 CSS 规则存储在另一个文件（外部样式表）或 HTML 文档的另一个部分（通常是 head 部分）中。将内容与表示分离使您能够更轻松地从中央位置维护地点外观，因为每当您想要进行更改时，不需要更新每个页面上的每个属性。将内容与表现形式分离还可以生成更简洁、更干净的 HTML 代码，从而缩短浏览器加载时间，并为有无障碍访问需求的用户（例如使用屏幕阅读器的用户）简化导航。
CSS 为您提供了对页面确切外观的极大灵活性和控制权。使用 CSS，您可以控制许多文本属性，包括特定字体和字体大小、粗体、斜体、下划线和文本阴影、文本颜色和背景颜色、链接颜色和链接下划线等等。通过使用 CSS 来控制您的字体，您还可以确保在多个浏览器中对页面布局和外观进行更一致的处理。
除了文本格式设置之外，您还可以使用 CSS 来控制网页中块级元素的格式和定位。块色阶元素是独立的内容片段，通常在 HTML 中由新行分隔，并在视觉上格式化为块。例如，h1 标记、p 标记和 div 标记都会在网页上产生块级元素。您可以为块级元素设置边距和边框，将它们定位在特定位置，为它们添加背景颜色，让文本环绕它们等等。操纵块色阶元素本质上是您使用 CSS 布局页面的方式。
关于 CSS 规则
CSS 格式设置规则由两个部分组成：选择器和声明（或在大多数情况下，声明块）。选择器是标识格式化元素的术语（例如 p、h1、类名或 id），声明块用于定义样式属性。在以下示例中，h1 是选择器，大括号 ({}) 之间的所有内容都是声明块：
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
单个声明由两个部分组成：属性（例如 font-family）和值（例如 Helvetica）。在之前的 CSS 规则中，已为 h1 标记创建了特定样式：关联到此样式的所有 h1 标记的文本将为 16 像素大小、Helvetica 字体和粗体。
样式（来自规则或规则集合）存在于与其格式化的实际文本分离的位置，通常在外部样式表中，或在 HTML 文档的头部分中。因此，h1 标记的一个规则可以同时应用于许多标记（在外部样式表的情况下，该规则可以同时应用于许多不同页面上的许多标记）。通过这种方式，CSS 提供了极其轻松的更新功能。当您在一个地方更新 CSS 规则时，使用 已定义样式的所有元素的格式会自动更新为新样式。
您可以在 Dreamweaver 中定义以下样式类型：
类样式允许您将样式属性 应用于页面上的任何元素。
HTML 标记样式重新定义 特定标记的格式，例如 h1。当您为 h1 标记创建或 更改 CSS 样式时，所有使用 h1 标记格式化 的文本都会立即更新。
高级样式重新定义 特定元素组合的格式，或 CSS 允许的其他选择器形式 （例如，选择器 td h2 在 h2 标题出现在表格单元格内时应用。）高级样式还可以重新定义包含特定 id 属性 的标记的格式 （例如，由 #myStyle 定义的样式适用于 包含属性值对 id="myStyle" 的所有标记）。
CSS 规则可以位于以下位置：
外部 CSS 样式表
CSS 规则的集合，存储在单独的外部 CSS\n(.css) 文件中（不是 HTML 文件）。此文件通过链接或在文档头部分中的 @import 规则与网站中的一个或多个页面关联。
内部（或嵌入式）CSS 样式表
包含在 HTML 文档头部分中的 style 标记内的 CSS 规则集合。
内联样式
在整个 HTML 文档中的特定标签实例内定义。 （不建议使用内联样式。）
只要符合 CSS 样式准则，Dreamweaver 就能识别现有文档中定义的样式。Dreamweaver 还能在设计视图中直接渲染大部分应用的样式。（但是，在浏览器窗口中预览文档可以为您提供最准确的页面"实时"渲染效果。）一些\nCSS 样式在 Microsoft Internet Explorer、\nNetscape、Opera、Apple Safari 或其他浏览器中的渲染方式不同，\n有些样式目前任何浏览器都不支持。
关于层叠样式
层叠一词是指浏览器最终为网页上的特定元素显示样式的方式。三个不同的来源负责您在 web 页面上看到的样式：\n页面作者创建的样式表、用户的自定义样式选择（如有）以及浏览器\n本身的默认样式。前面的主题介绍了如何以网页作者和附加到该页面的样式表作者的双重身份为网页创建样式。但是浏览器也有自己的\n默认样式表，用于决定 web 页面的渲染，除此之外，用户还可以\n通过选择调整 web 页面显示的方式来自定义其浏览器。web 页面的最终外观\n是所有这三个来源的规则汇集（或"层叠"）在一起的结果，\n以最佳方式渲染 web 页面。
一个常见标记（段落标记或 <p> 标记）阐释了 这个概念。默认情况下，浏览器附带样式表，用于定义 段落文本（即 HTML 代码中位于 <p> 标记之间的文本）的字体和字体大小。例如，在 Internet Explorer 中，默认所有正文文本（包括段落文本） 都以 Times New Roman Medium 字体显示。
但是，作为网页的作者，您可以创建样式 表来覆盖浏览器对段落字体 和字体大小的默认样式。例如，您可以在 样式表中创建以下规则：
p {
font-family: Arial;
font-size: small;
}
当用户加载页面时，您作为作者设置的段落字体和字体大小设置将覆盖浏览器的默认段落文本设置。
用户可以进行选择，以最适合自己使用的方式自定义浏览器显示。例如，在 Internet Explorer 中，如果用户认为字体太小，可以选择"查看">"文字大小">"最大"来将页面字体显示为更易读的大小。最终（至少在这种情况下），用户的选择会同时覆盖浏览器的默认段落字体大小样式和网页作者创建的段落样式。
继承性是层叠的另一个重要部分。 web 页面上大多数元素的属性都具有继承性，例如，段落标记继承正文标记的某些属性，span 标记继承段落标记的某些属性，等等。因此，如果您在样式表中创建以下规则：
body {
font-family: Arial;
font-style: italic;
}
网页上的所有段落文本（以及从段落标签继承属性的文本）都会是 Arial 斜体，因为段落标签从 body 标签中继承了这些属性。 但是，您可以使您的规则更具体，并创建一些能覆盖标准继承公式的样式。 例如，如果在样式表中创建以下规则：
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
所有正文文本都将使用 Arial 斜体，但段落 （及其继承的）文本除外，该文本将显示为 Courier 正常（非斜体）。 从技术上讲，段落标记首先继承为正文标记 设置的属性，但随后会忽略这些属性，因为 它有自己定义的属性。换句话说，虽然页面 元素通常从上方继承属性，但直接将 属性应用于标记始终会导致覆盖标准 继承公式。
上面讨论的所有因素的组合，加上其他 因素，如 CSS 特异性（为特定类型的 CSS 规则赋予 不同权重的系统）以及 CSS 规则的顺序，最终 创建了一个复杂的级联，其中优先级较高的项目会覆盖 优先级较低的属性。有关管理级联、继承和特异性的 规则的更多信息，请访问 www.w3.org/TR/CSS2/cascade.html。
关于文本格式设置和 CSS
默认情况下，Dreamweaver 使用层叠样式表 (CSS) 设置文本格式。 您使用属性检查器或菜单命令应用于文本的样式将创建 CSS 规则，这些规则嵌入在当前文档的头部。
您还可以使用“CSS Designer”创建和编辑 CSS 规则和属性。 “CSS Designer”是一个比属性检查器强大得多的编辑器，它会显示为当前文档定义的所有 CSS 规则（无论这些规则是嵌入在文档头中还是在外部样式表中）。 Adobe 建议使用“CSS Designer”（而不是属性检查器）作为创建和编辑 CSS 的主要工具。 这样，您的代码将更清晰，更易于维护。
有关 CSS Designer 的更多信息，请参阅使用 CSS Designer 布局页面。
除了所创建的样式和样式表外，还可以使用 Dreamweaver 附带的样式表对文档应用样式。
有关使用 CSS 格式化文本的教程，请参阅 www.adobe.com/go/vid0153。
关于速记 CSS 属性
CSS 规范允许使用一种称为简写 CSS的缩写语法来创建样式。简写 CSS 让您可以使用单个声明指定多个属性的 值。例如，font 属性 允许您在单行中设置 font-style、font-variant、font-weight、font-size、line-height 和 font-family 属性。
使用简写 CSS 时需要注意的一个关键问题是，简写 CSS 属性中省略的值 会被指定为其默认值。当两个或更多 CSS 规则指定给同一个标记时，这可能导致页面 显示不正确。
例如，下面显示的 h1 规则使用完整的 CSS 语法。请注意，font-variant、font-stretch、font-size-adjust 和 font-style 属性已被指定为其 默认值。
h1 {
font-weight: bold;
字体大小：16pt；
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
重写为单个简写属性时，同一规则可能如下所示：
h1 { font: bold 16pt/18pt Arial }
使用简写符号书写时，省略的值会自动分配其默认值。因此，前面的简写示例省略了 font-variant、font-style、font-stretch 和 font-size-adjust 标记。
如果您在多个位置定义了样式（例如，既嵌入在 HTML 页面中，又从外部样式表导入），同时使用 CSS 语法的简写和长写形式，请注意简写规则中省略的属性可能会覆盖（或 cascade）另一条规则中明确设置的属性。
因此，Dreamweaver 默认使用 CSS 标记的长写形式。这可以防止简写规则覆盖长写规则而引起的问题。如果您在 Dreamweaver 中打开使用简写 CSS 语法编码的网页，请注意 Dreamweaver 将使用长写形式创建任何新的 CSS 规则。您可以通过在"偏好设置"对话框的"CSS 样式"类别中更改 CSS 编辑偏好设置来指定 Dreamweaver 创建和编辑 CSS 规则的方式（Windows 中的"编辑">"偏好设置"；Macintosh 上的"Dreamweaver">"偏好设置"）。
Dreamweaver 和 CSS
在 Dreamweaver 中，您可以通过多种方式使用 CSS：
- 您可以使用 CSS Designer 以最小编码构建 CSS。 有关更多信息，请参阅使用 CSS Designer 布局页面。
- 您还可以手动编写 CSS。 有关 Dreamweaver 提供的编码功能的更多信息，请参阅 Dreamweaver 中的编码环境。
- 如果您希望使用 Sass、Scss 或 Less 文件，您可以在 Dreamweaver 中使用您偏好的句法编码文件并使用它。 有关更多信息，请参阅 CSS 预处理器。
