第10章CSS的使用精品.pptVIP

第10章 CSS的使用 本章内容 了解层叠样式表 关于“CSS 样式”面板 使用“CSS 样式”面板 创建新的 CSS 规则 应用类样式 导出样式以创建 CSS 样式表 链接到或导出外部 CSS 样式表 编辑 CSS 规则 编辑 CSS 样式表 CSS滤镜的使用 术语专解 层叠样式表 (CSS) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容（HTML 代码）位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位于另一个文件（外部样式表）或 HTML 文档的另一部分（通常为 head 部分）中。使用 CSS 可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。 CSS 使您可以控制许多仅使用 HTML 无法控制的属性。例如，您可以为所选文本指定不同的字体大小和单位（像素、磅值等）。通过使用 CSS 从而以像素为单位设置字体大小，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。 CSS语法 CSS 格式设置规则由两部分组成：选择器和声明。选择器是标识已设置格式元素（如 P、H1、类名称或 ID）的术语，而声明则用于定义样式元素。在下面的示例中，H1 是选择器，介于大括号 ({}) 之间的所有内容都是声明： H1 {font-size:16 pixels;font-family:Helvetica;font-weight:bold;} 声明由两部分组成：属性（如 font-family）和值（如 Helvetica）。上述示例为 H1 标签创建了样式：链接到此样式的所有 H1 标签的文本都将是 16 像素大小并使用 Helvetica 字体和粗体。 CSS最大优点 术语“层叠”是指对同一个元素或 Web 页面应用多个样式的能力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个规则来应用边距，然后将两者应用于一个页面中的同一文本。所定义的样式“层叠”到您的 Web 页面上的元素，并最终创建您想要的设计。 CSS 的主要优点是容易更新；只要对一处 CSS 规则进行更新，则使用该定义样式的所有文档的格式都会自动更新为新样式。 CSS样式的分类 自定义 CSS 规则（也称为“类样式”）使您可以将样式属性应用到任何文本范围或文本块。所有类样式均以句点 (.) 开头。例如，您可以创建称为 .red 的类样式，设置规则的 color 属性为红色，然后将该样式应用到一部分已定义样式的段落文本中。 HTML 标签规则重定义特定标签（如 p 或 h1）的格式。创建或更改 h1 标签的 CSS 规则时，所有用 h1 标签设置了格式的文本都会立即更新。 CSS 选择器规则（高级样式）重定义特定元素组合的格式，或其它 CSS 允许的选择器形式的格式（例如，每当 h2 标题出现在表格单元格内时，就应用选择器 td h2）。高级样式还可以重定义包含特定 id 属性的标签的格式（例如，由 #myStyle 定义的样式可以应用到所有包含属性/值对 id=myStyle 的标签）。 自定义 CSS 规则 类名称必须以句点开头，并且可以包含任何字母和数字组合（例如.myhead1）。如果您没有输入开头的句点，Dreamweaver 将自动为您输入。 类样式需要手工运用到对象。 语法：class=“类名称” 重定义 HTML 标签 若要重定义特定 HTML 标签的默认格式设置，请选择“标签”选项，然后在“标签”文本框中输入一个 HTML 标签，或从弹出式菜单中选择一个标签。 重定义标签必须使用内置HTML标签，不能发明第三方标签，否则无效； 重定义标签会自动运用到对象，不需要手工运用； 容器越小，优先级越高； CSS 选择器规则 若要为具体某个标签组合或所有包含特定 Id 属性的标签定义格式设置，请选择“高级”选项，然后在“选择器”文本框中输入一个或多个 HTML 标签，或从弹出式菜单中选择一个标签。弹出式菜单中提供的选择器（称作伪类选择器）包括 a:active、a:hover、a:link 和 a:visited。 注：伪类选择器是专用来控制超链接的四种状态，且顺序必须为a:linka:visiteda:hovera:active; 注：每一个页面的ID必须唯一； 导出样式以创建 CSS 样式表 可以从文档中导出样式以创建新的 CSS 样式表。然后，可链接到其他文档以应用这些样式。 若要从文档中导出 CSS 样式并创建 CSS 样式表，请执行以下操作： 选择“文件”“导出”“CSS 样式”或选择“文本”“CSS 样式”“导出”。 出现“导出样式为 CSS 文件”对话框。 输入样式表的名称，然后单击