样式表的使用

第四节　CSS样式表的使用

CSS样式是Cascading Style Sheets（层叠样式表）样式的简称，也可以称为“级联样式表”，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。

在CSS样式之前，HTML样式被广泛应用，HTML样式用于控制单个文档中某范围内文本的格式。而CSS样式与之不同，它不仅可以控制单个文档中的多个范围内文本的格式，而且可以控制多个文档中文本的格式。

层叠样式表（CSS）是一组格式设置规则，用于控制 Web 页内容的外观。通过使用 CSS设置页面的格式，可将页面的内容与表示形式分离开。页面内容（即 HTML 代码）存放在 HTML 文件中，而用于定义代码表示形式的 CSS 规则存放在另一个文件（外部样式表）或 HTML 文档的另一部分（通常为文件头部分）中。将内容与表示形式分离可使得从一个位置集中维护站点的外观变得更加容易，因为进行更改时无须对每个页面上的每个属性都进行更新。将内容与表示形式分离还会可以得到更加简练的 HTML代码，这样将缩短浏览器加载时间。

使用 CSS 可以非常灵活并更好地控制页面的确切外观。使用 CSS 可以控制许多文本属性，包括特定字体和字大小，粗体、斜体、下划线和文本阴影，文本颜色和背景颜色，链接颜色和链接下划线等。通过使用CSS控制字体，可以确保在多个浏览器中以更一致的方式处理页面布局和外观。

除设置文本格式外，还可以使用 CSS 控制Web页面中块级元素的格式和定位。块级元素是一段独立的内容，在 HTML 中通常由一个新行分隔，并在视觉上设置为块的格式。例如， h1 标记、p 标记和 div 标记都在网页上生成块级元素。可以对块级元素执行以下操作：为它们设置边距和边框、将它们放置在特定位置、向它们添加背景颜色、在它们周围设置浮动文本等。对块级元素进行操作的方法实际上就是使用 CSS 进行页面布局设置的方法。

一、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规则，使用已定义样式的所有元素的格式设置将自动更新为新样式，示例如图4-11所示。

图4-41　样式应用于多个标记

在 Dreamweaver 中可以定义以下样式类型。

◇ 类样式：可让您将样式属性应用于页面上的任何元素。

◇　HTML标记样式：重新定义特定标记（如 h1）的格式。创建或更改 h1 标记的CSS 样式时，所有用 h1 标记设置了格式的文本都会立即更新。

◇ 高级样式：重新定义特定元素组合的格式，或其他 CSS 允许的选择器表单的格式（例如，每当 h2 标题出现在表格单元格内时，就会应用选择器 td h2）。高级样式还可以重定义包含特定 id 属性的标记的格式（例如，由 #myStyle 定义的样式可以应用于所有包含属性/值对 id="myStyle" 的标记）。

（三）样式存放位置

CSS 规则可以位于以下位置。

◇ 外部CSS样式表：存储在一个单独的外部 CSS（.css）文件（而非 HTML 文件）中的若干组CSS规则。此文件利用文档头部分的链接或@import规则链接到网站中的一个或多个页面。

◇　Internal（或嵌入式）CSS 样式表：若干组包括在 HTML 文档头部的 style 标记中的 CSS 规则。

◇ 内联样式：在整个HTML文档中的特定标记实例内定义。（不建议使用内联样式）

Dreamweaver 可识别现有文档中定义的样式（只要这些样式符合 CSS 样式准则）。Dreamweaver 还会在设计视图中直接呈现大多数已应用的样式。（不过，在浏览器窗口中预览文档将使您能够获得最准确的页面“动态”呈现）有些 CSS 样式在 Microsoft Internet Explorer、Netscape Navigator、Opera、Apple Safari 或其他浏览器中呈现的外观不相同，因此不同浏览器中CSS样式显示效果可能会有显著差异，而有些 CSS 样式目前不受任何浏览器支持。

（四）层叠样式

术语“层叠”是指浏览器最终为网页上的特定元素显示样式的方式。影响最终网页显示效果的因素可能有3个方面：

（1）由页面的作者创建的样式表。

（2）用户的自定义样式。

（3）浏览器本身的默认样式。

作为网页及附加到该页的样式表的作者，可以创建网页的样式，但是，浏览器本身也具有它们自己的默认样式。除此之外，浏览器用户还可以通过选择来调整网页的显示对浏览器进行自定义。网页的最终外观是由所有这三种源的规则共同作用（或者“层叠”）的结果，最后以最佳方式呈现网页。

一个常见标记（段落标记，即 〈p〉 标记）可说明此概念。默认情况下，浏览器自带有为段落文本（即位于 HTML 代码中 〈p〉 标记之间的文本）定义字体和字体大小的样式表。例如在 Internet Explorer 中，包括段落文本在内的所有正文文本都默认显示为Times New Roman 中等字体。

但是作为网页的作者，您可以为段落字体和字体大小创建能覆盖浏览器默认样式的样式表。例如，可以在样式表中创建以下规则：

p {

font.family: Arial;

font.size: small;

}

当用户加载页面时，作者创建的段落字体和字体大小设置将覆盖浏览器的默认段落文本设置。

用户可以选择以最佳方式自定义浏览器显示，以方便他们自己使用。例如在 Internet Explorer 中，如果用户认为页面字体太小，则他们可以选择【查看】〉【文字大小】〉【最大】将页面字体扩展到更易辨认的大小。最终（至少在这种情况下），用户的选择将覆盖段落字体大小的浏览器默认样式和网页作者创建的段落样式。

继承性是层叠的另一个重要部分。网页上大多数元素的属性都是继承而来。例如，段落标记从 body 标记中继承某些属性，项目列表标记从段落标记中继承某些属性等。因此，如果在样式表中创建以下规则：

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常规（非斜体）。从技术上来说，段落标记首先继承为 body 标记设置的属性，但是随后将忽略这些属性，因为它具有本身已定义的属性。换句话说，虽然页面元素通常从上级继承属性，但是直接将属性应用于标记时始终会导致覆盖标准继承公式。

二、CSS样式具体应用

（一）在空白网页中创建CSS规则

在Dreamweaver中，可以创建一个CSS样式，然后将其应用于文档的某个部分，完成文本的格式化。

1. 创建CSS规则

要快速创建CSS样式，可在文档编辑窗口中单击鼠标右键，在弹出的快捷菜单中选择【CSS样式】〉【新建】命令（见图4-42），打开【新建CSS规则】对话框，如图4-43所示。

图4-42　新建CSS样式

图4-43 【新建CSS规则】对话框

而在网页中正规创建和管理CSS规则是在【CSS面板】中进行的。单击【属性】面板中的【CSS】按钮（见图4-44），然后在【新建CSS规则】对话框中设置具体的参数，也能够打开相应的CSS规则定义对话框。

图4-44　CSS面板

2. 选择新建CSS样式的选择器类型

在“选择器类型”区域共有三种选择：

◇ 若要创建可作为 class 属性应用于文本范围或文本块的自定义样式，请选择“类（可用于任何标签）”单击按钮，然后在“名称”文本框中输入样式名称。注意：名称必须以句点开头，并且可以包含任何字母和数字组合（例如，.myhead1）。如果没有输入开头的句点，Dreamweaver 将自动为您输入它。

◇ 若要重新定义特定 HTML 标记的默认格式设置，请选择“标签（重新定义特定标记的外观）”单击按钮，然后在“标签”文本框中输入一个 HTML 标记，或从弹出菜单中选择一个标记。

◇ 若要为具体某个标记组合或所有包含特定 ID 属性的标记定义格式设置，请选择“高级（ID伪类选择器等）”单击按钮，然后在“选择器”文本框中输入一个或多个 HTML标记，或从弹出菜单中选择一个标记。弹出菜单中提供的选择器（称为伪类选择器）有：a:active、a:hover、a:link 和 a:visited。

3. 选择定义样式的位置，然后单击【确定】按钮：

◇ 若要将样式放置到已附加到文档的样式表中，请选择相应的样式表。

◇ 若要创建外部样式表，请选择【新建样式表文件】。

◇ 若要在当前文档中嵌入样式，请选择【仅对该文档】。

（二）直接创建具有CSS规则的网页

在Dreamwaver中，除了可以在空白网页中创建CSS规则外，还可以创建具有CSS样式的网页，操作步骤如下：

（1）选择菜单【文件】〉【新建】，打开【新建文档】对话框，如图4-45所示。

（2）选择【空白页】类别，并选择要创建的【页面类型】，可以通过不同【布局】创建一个已包含CSS布局的页面。Dreamwaver提供了30多个可供用户选择的不同CSS布局。

注意：必须为布局选择 HTML页面类型。例如，可以选择 HTML、ColdFusion、JSP等。不能使用 CSS 布局创建 ActionScript、CSS、库项目、JavaScript、XML、XSLT 或ColdFusion 组件页面。【新建文档】对话框中的“其他”类别中的页面类型也不包括 CSS页面布局。

图4-45　在【新建文档】对话框中选择CSS布局

说明：图4-45中“预览”窗口显示选中的布局，并给出所选布局的简短说明。预设计的 CSS 布局提供了下列类型的列。

◇ 固定：列宽是以像素为单位指定的。列的大小不会根据浏览器的大小或站点访问者的文本设置来调整。

◇ 弹性：列宽是以相对于文本大小的度量单位指定的。如果站点访问者更改了文本设置，该设计将会进行调整，但不会基于浏览器窗口的大小来更改列宽度。

◇ 液态：列宽是以站点访问者的浏览器宽度的百分比形式指定的。如果站点访问者将浏览器变宽或变窄，该设计将会进行调整，但不会基于站点访问者的文本设置来更改列宽度。

◇ 混合：用上述三个选项的任意组合来指定列类型。例如，可能存在两列混合的形式：左侧栏布局有一个根据浏览器大小缩放的主列，右侧有一个根据站点访问者的文本设置大小缩放的弹性列。

（3）从【文档类型】下拉式列表框中选择文档类型。

（4）从“布局 CSS 位置”下拉式列表框中选择布局 CSS 的位置。

◇ 添加到文档头：将布局的 CSS 添加到要创建的页面头中。

◇ 新建文件：将布局的 CSS 添加到新的外部 CSS 样式表，并将这一新样式表添加到将要创建的页面。

◇ 链接到现有文件：可以通过此选项指定已包含布局所需的 CSS 规则的现有CSS 文件。当您希望在多个文档上使用相同的 CSS 布局（CSS 布局的 CSS 规则包含在一个文件中）时，此选项特别有用。

（5）最后请执行下列操作之一：

◇ 如果从“布局 CSS 位置”下拉列表框选择了“添加到文档头”（默认选项），请单击【创建】按钮。

◇ 如果从【布局 CSS 位置】下拉列表框选择了“新建文件”，请单击“创建”按钮，然后在【将样式表文件另存为】对话框中指定新外部文件的名称。

◇ 如果从【布局CSS位置】下拉列表框选择了【链接到现有文件】，请将外部文件添加到【附加CSS文件】文本框中，方法是单击【添加样式表】图标，完成【附加外部样式表】对话框，然后单击“确定”按钮。完成时，在【新建文档】对话框中单击【创建】按钮。

（三）套用CSS样式

当在网页中创建CSS规则后，有可能还需要将其应用到网页中，才能够实现该样式效果。方法是选中要应用该样式的网页元素，然后在【CSS样式】面板中右击创建好的CSS样式，选择【套用】命令即可；或者右击对象标签，选择【设置类】〉【CSS样式名称】命令。这里为文本应用CSS样式，如图4-46所示。

图4-46　套用CSS样式

（四）链接外部CSS样式

外部CSS样式表是一个独立的CSS文件，当在网页中直接创建外部CSS样式时，该样式自动应用到网页中；当在创建空白网页时，通常可以附加已经存在的外部样式表。如果CSS样式文件已经存在，制作网页时可以通过【CSS样式】面板中的【附加样式表】按钮来链接，具体操作如下：

（1）单击【附加样式表】按钮，在打开的【链接外部样式表】对话框（见图4-47）中选择外部CSS文件后，可以通过“链接”或“导入”方式将其应用到当前网页中。

（2）在【添加为】中选择其中的一个选项：

◇ 若要创建当前文档和外部样式表之间的链接，请选择【链接】单击按钮。该选项在 HTML 代码中创建一个 〈link〉标记，并引用已发布的样式表所在的 URL。〈link〉标记必须放在页面的〈head〉区域。Internet Explorer 和 Netscape Navigator 都支持此方法。

◇ 如果希望导入而不是链接到外部样式表，请选择【导入】单击按钮。导入外部样式表是指在内部样式表的〈style〉里导入一个外部样式表，导入时用@import。

注意：不能使用【链接】标记添加从一个外部样式表到另一个外部样式表的引用。如果要嵌套样式表，必须使用【导入】指令。大多数浏览器还能识别页面中（而不仅仅是样式表中）的导入指令。当在链接到页面与导入到页面的外部样式表中存在重叠的规则时，不同浏览器解决冲突属性的方式具有细微的差别。

图4-47　链接外部样式表

（五）浏览器兼容性检查

要执行“浏览器兼容性检查（BCC）”功能，选择【文件】〉【检查页】〉【浏览器兼容性】命令即可。

“浏览器兼容性检查”功能可以帮助您定位在某些浏览器中有问题的 HTML 和CSS 组合。当您在打开的文件中运行 BCC 时，Dreamweaver 扫描文件，并在【结果】面板中报告所有潜在的 CSS 呈现问题。信任评级由四分之一、二分之一、四分之三或完全填充的圆表示，指示了错误发生的可能性（四分之一填充的圆表示可能发生，完全填充的圆表示非常可能发生）。对于它找到的每个潜在的错误，Dreamweaver 还提供了指向有关 Adobe CSS Advisor 错误的文档的直接链接，详述已知浏览器呈现错误的 Web站点以及修复错误的解决方案。浏览器兼容性检查不会以任何方式更改您的文档。

默认情况下，BCC 功能对下列浏览器进行检查：Firefox 1.5、Internet Explorer（Windows）6.0 和 7.0、Internet Explorer（Macintosh）5.2、Netscape Navigator 8.0、Opera 8.0 和 9.0 以及 Safari 2.0。

兼容性检查可能产生三个级别的潜在浏览器支持问题：

（1）错误。表示 CSS 代码可能在特定浏览器中导致严重的、可见的问题，例如导致页面的某些部分消失。（错误默认情况下表示存在浏览器支持问题，因此在某些情况下，具有未知作用的代码也会被误标记为错误。）

（2）警告。表示一段 CSS 代码在特定浏览器中不受支持，但不会导致任何严重的显示问题。

（3）告知。此类信息表示代码在特定浏览器中不受支持，但是没有可见的影响。

三、编辑CSS样式

无论是创建当前网页中的CSS样式，还是创建外部的CSS样式，都只是创建了一个空样式，并没有具体的内容。要想设置更详细的样式内容，需要在创建样式后的【CSS规则定义】对话框中设置 CSS 规则的属性，如文本字体、背景图像和颜色、间距和布局属性以及列表元素外观等。

（一）类型属性设定

使用【CSS 规则定义】对话框中的【类型】类别可以定义 CSS 样式的基本字体和类型设置。下列任何属性若对于样式并不重要，可将其保留为空。

◇ 字体：为样式设置字体系列（或多组字体系列）。浏览器使用用户系统上安装的字体系列中的第一种字体显示文本。为了与 Internet Explorer 3.0 兼容，首先列出Windows 字体。两种浏览器都支持“字体”属性。

◇ 大小：定义文本大小。可以通过选择数字和度量单位选择特定的大小，也可以选择相对大小。使用像素作为单位可以有效地防止浏览器扭曲文本。两种浏览器都支持“大小”属性。

◇ 样式：指定“正常”、“斜体”或“偏斜体”作为字体样式。默认设置是“正常”。两种浏览器都支持“样式”属性。

◇ 行高：设置文本所在行的高度。习惯上将该设置称为行高。选择“正常”自动计算字体大小的行高，也可输入一个确切的值后选择一种度量单位。两种浏览器都支持“行高”属性。

◇ 修饰：向文本中添加下划线、上划线或删除线，或使文本闪烁。常规文本的默认设置是“无”。链接的默认设置是“下划线”。将链接设置为“无”时，可以通过定义一个特殊的类去除链接中的下划线。两种浏览器都支持“修饰”属性。

◇ 粗细：对字体应用特定或相对的粗体量。“正常”等于 400；“粗体”等于 700。两种浏览器都支持“粗细”属性。

注：CSS规范把绝对粗细定义为九级，对应于整数值100（最细）到900（最粗），每级相差100。实际中由这些数字表示的粗细程度随字体的不同而不同，但这种尺度保证了大值比小值粗或一样粗。因此500比400粗或一样粗。

◇ 变体：设置文本的小型大写字母变体。Dreamweaver 不在【文档】窗口中显示此属性。Internet Explorer 支持【变体】属性，但 Netscape Navigator 不支持。

◇ 大小写：将所选内容中的每个单词的首字母大写或将文本设置为全部大写或小写。两种浏览器都支持“大小写”属性。

◇ 颜色：设置文本颜色。两种浏览器都支持“颜色”属性。

【CSS规范定义】对话框中【类型】选项卡如图4-48所示，设置CSS样式并应用于所选文字后，能够快速批量改变文字的各种字体属性。

图4-48 【类型】选项卡

（二）背景属性设定

使用【CSS 规则定义】对话框的【背景】选项卡可以定义 CSS 样式的背景设置。可以对网页中的任何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如添加在文本、表格、页面等的后面。还可以设置背景图像的位置。下列任何属性若对于样式并不重要，可将其保留为空。

◇ 背景颜色：设置元素的背景颜色。两种浏览器都支持“背景颜色”属性。

◇ 背景图像：设置元素的背景图像。两种浏览器都支持“背景图像”属性。

◇ 重复：确定是否以及如何重复背景图像。两种浏览器都支持重复属性。

■“不重复”只在元素开始处显示一次图像。

■“重复”在元素的后面水平和垂直平铺图像。

■“横向重复”和“纵向重复”分别显示图像的水平带区和垂直带区。图像被剪辑以适合元素的边界。

注：使用“重复”属性重定义 body 标记并设置不平铺、不重复的背景图像。

◇ 附件：确定背景图像是固定在其原始位置还是随内容一起滚动。注意，某些浏览器可能将“固定”选项视为“滚动”。Internet Explorer 支持该选项，但 Netscape Navigator 不支持。

◇ 水平位置和垂直位置：指定背景图像相对于元素的初始位置。这可以用于使背景图像与页面中心垂直和水平对齐。如果附件属性为“固定”，则位置相对于“文档”窗口而不是元素。Internet Explorer 支持该属性，但 Netscape Navigator 不支持。

切换到【背景】选项卡，选定背景图片，并设定为固定、不重复、水平居中，将其应用于整个页面或〈body〉标记，可以为网页添加固定居中的背景图案，如图4-49所示。

图4-49 【背景】选项卡

（三）区块属性设定

使用【CSS 规则定义】对话框的“区块”选项卡可以定义标记和属性的间距及对齐方式。

下列任何属性若对于样式并不重要，可将其保留为空。

◇ 单词间距：设置字词的间距。若要设置特定的值，请在下拉列表框中选择“值”，然后输入一个数值。在第二个下拉列表框中，选择度量单位（例如像素、点等）。

注：可以指定负值，但显示方式取决于浏览器。Dreamweaver 不在【文档】窗口中显示此属性。

◇ 字母间距：增加或减小字母或字符的间距。若要减小字符间距，请指定一个负值（例如−4）。字母间距设置覆盖对齐的文本设置。Internet Explorer 4 和更高版本以及Netscape Navigator 6 支持“字母间距”属性。

◇ 垂直对齐：指定应用此属性的元素的垂直对齐方式。Dreamweaver 仅在将该属性应用于 〈img〉 标记时，才在【文档】窗口中显示它。

◇ 文本对齐：设置文本在元素内的对齐方式。两种浏览器都支持“文本对齐”属性。

◇ 文字缩进：指定第一行文本缩进的程度。可以使用负值创建凸出，但显示方式取决于浏览器。仅当相应的标记应用于块级元素时，Dreamweaver 才会在“文档”窗口中显示此属性。两种浏览器都支持“文字缩进”属性。

◇ 空格：确定如何处理元素中的空格。从三个选项中进行选择：“正常”，收缩空白；“保留”，其处理方式与文本被括在 pre 标记中一样（即保留所有空白，包括空格、制表符和回车）；“不换行”，指定仅当遇到 br 标记时文本才换行。Dreamweaver 不在【文档】窗口中显示此属性。Netscape Navigator 和 Internet Explorer 5.5 支持“空白”属性。

◇ 显示：指定是否以及如何显示元素。“无”指定到某个元素时，它将禁用该元素的显示。

打开【CSS规则定义】对话框的【区块】选项卡，按图4-50设置各项参数，并应用于所选诗词，能够设定诗词的对齐方式、字符缩进、间距等。

（四）方框属性设定

使用【CSS 规则定义】对话框的【方框】选项卡可以为用于控制元素在页面上的放置方式的标记和属性定义设置。可以在应用填充和边距设置时将设置应用于元素的各个边，也可以使用【全部相同】设置将相同的设置应用于元素的所有边。下列任何属性若对于样式并不重要，可将其保留为空。

◇ 宽和高：设置元素的宽度和高度。

◇ 浮动：设置其他元素（如文本、AP Div、表格等）在围绕元素的哪个边浮动。其他元素按通常的方式环绕在浮动元素的周围。两种浏览器都支持“浮动”属性。

图4-50 【区块】选项卡

◇ 清除：定义不允许 AP 元素的边。如果清除边上出现 AP 元素，则带清除设置的元素将移到该元素的下方。两种浏览器都支持“清除”属性。

◇ 填充：指定元素内容与元素边框之间的间距（如果没有边框，则为边距）。取消选择“全部相同”选项可设置元素各个边的填充。

◇ 边界：指定一个元素的边框与另一个元素之间的间距（如果没有边框，则为填充）。仅当该属性应用于块级元素（段落、标题、列表等）时，Dreamweaver 才会在【文档】窗口中显示它。取消选择【全部相同】复选框可设置元素各个边的边距。

◇ 全部相同：为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的填充或边距属性。

在空网页文档中添加一个一行一列的表格，在表格中再嵌套一个一行一列的内表格。然后为内表格套用如图4-51所示的CSS样式规则，将限制内表格的大小、边框宽度及对齐方式，详细效果见图4-51。

（五）边框属性设定

使用【CSS 规则定义】对话框的“边框”选项卡可以定义元素周围的边框的设置（如宽度、颜色和样式）。下列任何属性若对于样式并不重要，可将其保留为空。

◇ 样式：设置边框的样式外观。样式的显示方式取决于浏览器。Dreamweaver 在【文档】窗口中将所有样式呈现为实线。两种浏览器都支持“样式”属性。取消选择【全部相同】复选框可设置元素各个边的边框样式。

◇ 宽度：设置元素边框的粗细。两种浏览器都支持“宽度”属性。取消选择“全部相同”复选框可分别设置元素各个边的边框宽度。

图4-51 “方框”选项卡

◇ 颜色：设置边框的颜色。可以分别设置每条边的颜色，但显示方式取决于浏览器。取消选择“全部相同”复选框可分别设置元素各个边的边框颜色。

◇ 全部相同：为应用此属性的元素的“上”、“右”、“下”和“左”设置相同的边框样式、边框宽度或边框颜色属性。

打开【边框】选项卡，设置参数如图4-52并应用于选定对象，可为选定对象添加橙色中等宽度虚线边框。

图4-52 “边框”选项卡

（六）列表属性设定

【CSS 规则定义】对话框的【列表】选项卡为列表标记定义列表设置（如项目符号大小和类型）。下列任何属性若对于样式并不重要，可将其保留为空。

◇ 类型：设置项目符号或编号的外观。两种浏览器都支持“类型”属性。

◇ 项目符号图像：可以为项目符号指定自定义图像。单击【浏览】按钮（Windows）或“选择”按钮（Macintosh）选择图像，或直接键入图像的路径。

◇ 位置：设置列表项文本是否换行并缩进（外部），或者文本是否换行到左边距（内部）。

切换到【列表】选项卡（见图4-53），通过设置项目符号图像，可以选定更美观的外部图片代替HTML默认的项目符号图标，提高网页的观赏性。

图4-53 【列表】选项卡

（七）定位属性设定

“定位”样式属性确定与选定的 CSS 样式相关的内容在页面上的定位方式。下列任何属性若对于样式并不重要，可将其保留为空。

◇ 类型：确定浏览器应如何来定位选定的元素，有以下4个可选项。

■ 绝对：使用【定位】框中输入的、相对于最近的绝对或相对定位上级元素的坐标（如果不存在绝对或相对定位的上级元素，则为相对于页面左上角的坐标）来放置内容。

■ 相对：使用【定位】框中输入的、相对于区块在文档文本流中的位置的坐标来放置内容区块。例如，若为元素指定一个相对位置，并且其上坐标和左坐标均为20px，则将元素从其在文本流中的正常位置向右和向下移动 20px。也可以在使用（或不使用）上坐标、左坐标、右坐标或下坐标的情况下对元素进行相对定位，以便为绝对定位的子元素创建一个上下文。

■ 固定：使用【定位】框中输入的坐标（相对于浏览器的左上角）来放置内容。当用户滚动页面时，内容将在此位置保持固定。

■ 静态：将内容放在其在文本流中的位置。这是所有可定位的 HTML 元素的默认位置。

◇ 显示：确定内容的初始显示条件。如果不指定显示属性，则默认情况下内容将继承父级标记的显示属性值。body 标记的默认显示是可见的。可以选择以下显示选项之一：

■ 继承：（默认）继承内容的父级可见性属性。

■ 可见：将显示内容，而与父级的可见性无关。

■ 隐藏：将隐藏内容，而与父级的可见性无关。

◇ Z 轴：确定内容的堆叠顺序。Z 轴值较高的元素显示在 Z 轴值较低的元素（或根本没有 Z 轴值的元素）的上方。值可以为正，也可以为负。如果已经对内容进行了绝对定位，则可以轻松使用“AP 元素”面板来更改堆叠顺序。

◇ 溢出：确定当容器（如 DIV 或 P）的内容超出容器的显示范围时的处理方式。这些属性按以下方式控制扩展。

■ 可见：将增加容器的大小，以使其所有内容都可见。容器将向右下方扩展。

■ 隐藏：保持容器的大小并剪辑任何超出的内容，不提供任何滚动条。

■ 滚动：将在容器中添加滚动条，而不论内容是否超出容器的大小。明确提供滚动条可避免滚动条在动态环境中出现和消失所引起的混乱。该选项不显示在【文档】窗口中。

■ 自动：将使滚动条仅在容器的内容超出容器的边界时才出现。该选项不显示在【文档】窗口中。

◇ 定位：指定内容块的位置和大小。浏览器如何解释位置取决于【类型】设置。如果内容块的内容超出指定的大小，则将改写大小值。 位置和大小的默认单位是像素。还可以指定以下单位：pc（皮卡）、pt（点）、in（英寸）、mm（毫米）、cm（厘米）、em（全方）、（ex）或%（父级值的百分比）。缩写必须紧跟在值之后，中间不留空格。例如，3mm。

◇ 剪辑：定义内容的可见部分。如果指定了剪辑区域，可以通过脚本语言（如JavaScript）访问它，并操作属性以创建像擦除这样的特殊效果。使用“改变属性”行为可以设置擦除效果。

切换至【定位】选项卡，按图4-54设定相应参数，可以把选定的文字限定在指定长宽、坐标的矩形区域内显示，并添加双滚动条进行拖动浏览。

（八）扩展属性设定

扩展属性包括滤镜、分页和指针选项。

注：Dreamweaver 中提供了许多其他扩展属性，但必须使用【CSS 样式】面板才能访问这些属性。您可以轻松查看Dreamweaver提供的扩展属性的列表，方法是：打开【CSS样式】面板（【窗口】〉【CSS 样式】），单击该面板底部的【显示类别视图】按钮，然后展开【扩展】类别。

图4-54 “定位”选项卡

下列任何属性若对于样式并不重要，可将其保留为空。

◇ 分页：在打印期间在样式所控制的对象之前或者之后强行分页。在下拉列表框中选择要设置的选项。此选项不受任何IE4.0 版本浏览器的支持，但可能受未来的浏览器的支持。

◇ 光标：当指针位于样式所控制的对象上时改变鼠标指针图像。在下拉列表框中选择要设置的选项（见表4.2）。Internet Explorer 4.0 和更高版本以及 Netscape Navigator 6支持该属性。

表4.2 光标效果说明

续表

◇ 过滤器：对样式所控制的对象应用特殊效果（包括模糊和反转）。从下拉列表框中选择一种效果，可选效果如表4.3所示。

表4.3 常用滤镜名称及效果说明

续表

续表

切换到【扩展】选项卡，通过在下拉列表框中选择，修改光标为help和滤镜参数为FlipV，可以做出如图4-55所示的颠倒字及问号鼠标效果。

图4-55 【扩展】选项卡

本章核心概念

网页元素、CSS样式表。

本章小结

1. 本章从实用角度出发介绍了Dreamweaver网页制作软件的工作环境设置、网页元素和CSS样式表等概念。

2. 从实际操作的角度，重点讲述了最常用的网页元素添加和CSS样式表的使用。

3. 本章的概念和知识都是今后网页制作常用到的，是一定要熟练掌握的内容。

思考题

1. 如何设置文字的对齐方式？

2. 项目列表的作用是什么？有哪几种方式？怎样改为自定义图片？

3. 在网页中插入Flash Video视频的优势有哪些？

4. 邮件链接的目标格式是什么？

5. 网页中怎样才能输入连续的多个空格？

6. 在没有选中文本的情况下是否可以创建超级链接？

7. 如何输入化学符号H₂O?

8. 在网页中插入背景音乐有几种方式？分别是什么？

9. 怎样才能为一张图片上的不同区域设置2个不同的超级链接？

上机练习

1. 准备两幅尺寸相同的图片，通过【插入】〉【图像】〉【鼠标经过图像】命令，在网页中插入具有鼠标经过效果的动画图片。效果类似图4-56。

图4-56　鼠标经过图像

2. 制作如图4-57所示的项目列表。

图4-57　数字列表

3. 在网页中添加文字内容、锚点及锚点链接，要求锚点名为end且置于该页面最下端，锚点链接位于页面顶端，单击锚点链接跳到命名锚点end位置。

4. 使用Flash文本制作网页导航条。可以任意设置文本颜色，这样就不必担心因为文本添加链接而使文本颜色与整个网页色调不符。制作与图4-58类似的Flash文本导航条效果。

图4-58　Flash文本导航条

5. 制作如图4-59所示的竖排诗歌效果。要制作竖排效果，除设置CSS【类型】、【区块】选项外，还需要手工在源代码中加入参数writing-mode:tb-rl。

图4-59　竖排诗歌

源代码如下：

〈head〉

〈meta http-equiv="Content-Type" content="text/html; charset=utf-8" /〉

〈title〉竖排诗歌〈/title〉

〈style type="text/css"〉

.sp{

〈p class="sp"〉 长干行〈br /〉李白〈br /〉

〈strong〉妾发初覆额，折花门前剧。 〈br /〉

郎骑竹马来，绕床弄青梅。 〈br /〉

同居长干里，两小无嫌猜。 〈br /〉

十四为君妇，羞颜未尝开。 〈br /〉

低头向暗壁，千唤不一回。 〈br /〉

十五始展眉，愿同尘与灰。 〈br /〉

常存抱柱信，岂上望夫台。 〈br /〉

十六君远行，瞿塘滟预堆。 〈br /〉

五月不可触，猿声天上哀。 〈br /〉

门前迟行迹，一一生绿苔。 〈br /〉

苔深不能扫，落叶秋风早。 〈br /〉

八月蝴蝶黄，双飞西园草。 〈br /〉

感此伤妾心，坐愁红颜老。 〈br /〉

早晚下三巴，预将书报家。 〈br /〉

相迎不道远，直至长风沙。〈/strong〉〈br /〉

〈/p〉

〈/body〉

〈/html〉

6. 重新定义网页中的所有链接效果，使链接不显示下划线，颜色为黑色。（提示：使用CSS样式表重新定义链接标记a:link，a:visited，a:hover的显示效果）

7. 在网页中使用样式表制作空心（边沿发光）文字特效，效果如图4-60所示。（提示：把文字颜色设置为背景色，然后用特效

图4-60　空心文字特效

shadow设置边沿阴影效果即可）。

源代码如下：

〈html〉

〈head〉

〈meta http-equiv=content-type content="text/html; charset=gb2312"〉

〈title〉HTML/CSS字体特效〈/title〉