第11章CSS样式表.pptVIP

第11章 CSS样式表 厦门软件学院熊锡义 2007年3月 课前复习 本章要点 CSS样式面板 创建新的 CSS 规则 CSS 样式设置 应用类样式 编辑 CSS 规则 编辑 CSS样式表 11.1 CSS样式表的基本概念 11.1.1 什么是CSS 层叠样式表 (CSS)是 Cascading Style Sheets(层叠样式表单)的简称，它是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，可将内容与表现形式分开。页面内容（即 HTML 代码）驻留在 HTML 文件自身中，而用于定义代码表现形式的 CSS 规则驻留在另一个文件（外部样式表）或 HTML 文档的另一部分（通常为文件头部分）中。使用 CSS 可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。 CSS 允许控制 HTML 无法独自控制的许多属性。例如，可以为选定的文本指定不同的字体大小和单位（像素、磅值等）。通过使用 CSS 以像素为单位设置字体大小，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。 除设置文本格式外，还可以使用 CSS 控制 Web 页面中块级别元素的格式和定位。例如，可以设置块级元素的边距和边框、其他文本周围的浮动文本等。 11.1.2 CSS 格式规则 CSS 格式设置规则由两部分组成：选择器和声明。选择器是标识格式元素的术语（如 P、H1、类名或 ID），声明用于定义元素样式。 属性名 　属性名说明 属性值 属性值说明 font-family 字体　　　 “宋体” 文本字体为宋体 font-size 大小 　 16px　　　　 文本大小为16象素 font-weight 样式 bold 文本使用粗体字 style type=＂text/css＂ !-- h1 { font-family: ＂宋体＂; font-size: 16px; font-weight: bold; } -- /style 11.1.3样式类型 1. 类样式 自定义 CSS 规则（也称为类样式）可以将样式属性应用于任何文本范围或文本块。 .pst { font-family: ＂宋体＂; font-size: 14px; font-style: italic; text-decoration: underline;} 2. 标签样式重定义特定标签 HTML 标签样式重定义特定标签（如 h1）的格式。创建或更改 h1 标签的 CSS 样式时，所有用 h1 标签设置了格式的文本都会立即更新。 h1 { font-family: ＂宋体＂; font-size: 16px; font-style: italic; font-weight: bold;} 3. 选择器样式 11.1.4CSS 规则位置 1)外部 CSS 样式表是一系列存储在一个单独的外部 CSS (.css) 文件（并非 HTML 文件）中的 CSS 规则。利用文档文件头部分中的链接，该文件被链接到 Web 站点中的一个或多个页面。 2) 内部（或嵌入式）CSS 样式表是一系列包含在 HTML 文档文件头部分的 style 标签内的 CSS 规则。 3) 内联样式是在标签的特定实例中在整个 HTML 文档内定义的。 11.2使用层叠样式表设置文本格式 默认情况下，Dreamweaver 使用层叠样式表 (CSS) 设置文本格式。使用＂属性＂检查器或菜单命令应用于文本的样式将创建 CSS 规则，这些规则嵌入在当前文档的头部。CSS 样式使可以更加灵活并更好地控制页面外观――从精确的布局定位到特定的字体和文本样式。 还可以使用＂CSS 样式＂面板创建和编辑 CSS 规则和属性。＂CSS 样式＂面板是一个比属性检查器强大得多的编辑器，它显示为当前文档定义的所有 CSS 规则，而不管这些规则是嵌入在文档的头部还是在外部样式表中。Macromedia 建议使用＂CSS 样式＂面板（而不是＂属性＂检查器）作为创建和编辑 CSS 的主要工具。这样，代码将更清晰，更易于维护。 除了所创建的样式和样式表外，还可以使用 Dreamweaver 附带的样式表对文档应用样式。 11.3CSS样式面板 11.3.1 使用“CSS 样式”面板 可以使用“CSS 样式”面板查看、创建、编辑和删除 CSS 样式，并且可以将外部样式表附加到文档。 1.选择“窗口”“CSS 样式”。或按 Shift+F11 键。 或