应技大计算机网络实验10探究.pdf

计算机网络应用基础实验指导 实验 10 CSS 基础（Dreamwaver8） 第 1 页 实验 10 CSS 基础（Dreamwaver8） 一、实验目的 1. 了解 HTML 式样和 CSS 式样。 2. 学会在 Dreamwaver8 创建 CSS 式样。 3. 在 Dreamwaver8 中应用自定义的 CSS 式样。 4. 学会用 CSS 式样修饰网页。 二、实验理论 1. HTML 式样和 CSS 式样 所谓 HTML 式样和 CSS 式样是针对文本的排版格式而言的。 HTML 是使用文本标记符号进行文本格式进行排版。文本的排版格式 主要涉及在文字中插入一些特殊的内容，如空格、特殊字符、日期、 水平线等等；在文字和段落中设置字体式样、文字对齐和缩进、文字 颜色、项目列表等等。大多数的 HTML 式样可以使用编辑属性方式 进行，如图 10-1 所示。在 Dreamwaver8 中的也有“属性”框，方便 （a） （b） 图 10-1 HTML 的首选参数 用户对文字进行设置。在菜单栏还提供了“文本”项菜单，方便用户 计算机网络应用基础实验指导 实验 10 CSS 基础（Dreamwaver8） 第 2 页 对文字编辑。如图 10-2 所示。 图 10-2 “文本”编辑菜单 CSS 是英文 Cascading Style Sheet 的缩写，中文译为“层叠样式 表”，它是一系列格式设置的规则，用来控制网页内容的各种显示风 格。使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页 面内容（HTML 代码）位于自身的 HTML 文件中，而定义代码表现 形式的 CSS 规则位于另一个文件（外部样式表）或 HTML 文档的 另一部分（通常为 head 部分）中。使用 CSS 可以非常灵活并更 好地控制页面的外观，从精确的布局定位到特定的字体和样式等。 CSS 还可以控制许多仅使用 HTML 无法控制的属性。例如，为所选 文本指定不同的字体大小和单位（像素、磅值等），以确保在多个浏 览器中以更一致的方式处理页面布局和外观。 CSS 格式设置规则由两部分组成：选择器和声明。选择器是标 识已设置格式元素（如 P、H1、类名称或 ID）的术语，而声明则用 于定义样式元素。在下面的示例中，H1 是选择器，介于大括号 ({}) 之间的所有内容都是声明： H1 { font-size:16 pixels; font-family:Helvetica; font-weight:bold; } 计算机网络应用基础实验指导 实验 10 CSS 基础（Dreamwaver8） 第 3 页 声明由两部分组成：属性（如 font-family）和值（如 Helvetica）。 上述示例为 H1 标签创建了样式：链接到此样式的所有 H1 标签的 文本都将是 16 像素大小并使用 Helvetica 字体和粗体。 术语“层叠”是指对同一个元素或 Web 页面应用多个样式的能 力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个规则来 应用边距，然后将两者应用于一个页面中的同一文本。所定义的样式 “层叠”到您的 Web 页面上的元素，并最终创建您想要的设计。 CSS 的主要优点是容易更新；只要对一处 CSS 规则进行更新， 则使用该定义样式的所有文档的格式都会自动更新为新样式。 在 Dreamweaver 中可以定义以下规则类型： (1) 自定义 CSS 规则（也称为“类样式”）使您可以将样式属性应用 到任何文本范围或文本块。所有类样式均以句点 (.) 开头。例如，您 可以创建称为 .red 的类样式，设置规则的 color 属性为红色，然后 将该样式应用到一部分已定义样式的段落文本中。 (2) HTML 标签规则重定义特定标签（如 p 或 h1）的格式。创建 或更改 h1 标签的 CSS 规则时，所有用 h1 标签设置了格式的文本 都会立即更新。 (3) CSS 选择器规则（高级样式）重定义特定元素组合的格式，或 其它 CSS 允许的选择器形式的格式（例如，每当 h2 标题出现在表 格单元格内时，就应用选择器 td h2）。高级样式还可以重定义包含特 定 id 属性的标签的格式（例如，由 #myStyle 定义的样式可以应用 到所有包含属性/值对