第 3 章 CSS 样式
【学习目标】 掌握 CSS 样式的概念。 学会 CSS 样式的创建与编辑方法。 学会使用 CSS 样式的常用操作。 【引导案例】 旅游门户网站所包含的信息量大，需要有多个子页，要求整个站点保持视觉的 一致性，即每个网页的样式要一致；另外该网站还需要定时更新显示样式，以便防 止旅友们对网站产生视觉疲劳。CSS 是专门用于定义各种各样的样式的一套规范， 通过它可以非常灵活方便地统一网页样式。 【任务分析】 这是一个中型的网站，需要通过 CSS 网页风格样式的设计与制作，主要采用 CSS 对网页中的文本、超链接等元素进行统一设置，使整个站点保持视觉的一致性。在 网页风格更换时，通过修改 CSS 文件而统一修改网页中的文字及超链接等对象。 【相关知识】3.1 CSS
样式的概念
3.1.1 CSS样式简介CSS（Cascading Style Sheet，层叠样式表或级联样式表）是一组网页元素的格式设置规则， 用于控制网页的外观。通过使用 CSS 样式设置网页页面的格式，可将网页中的内容与表现形 式分离。网页中的内容使用 HTML 文档描述，网页内容的表现形式使用 CSS 规则来定义。CSS 规则可以存放在另一个文件中或插入于 HTML 文档中（通常为文件头部分）。将网页的内容与 表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使 HTML 文档代码更加简练， 缩短浏览器的加载时间。 3.1.2 CSS规则 在说明 CSS 规则前，可以举一个生活中的例子。当我们想描述一个轿车时可以采用以下 这种方式： 上海大众{ 型号:Polo;
颜色:白色; 售价:10 万; } 以上这种描述对象的方式其实包含了三个要素，即对象名称、属性和属性值。通过这种 方式就可以把一个对象的基本情况描述出来了。 CSS 的功能就是设置网页的各个组成部分元素的表现形式。将上面的案例元素替换成描 述网页页面属性表，大致如下： 页面{ 宽:800 像素; 高:1000 像素; 字体:宋体; 大小:12 像素; 背景色:灰色; } 再进一步，如果把上面对网页页面的描述用英语表现出来，即为如下形式： Body{ width:800px; height:1000px; font-family:宋体; font-size：12px； background-color: gray; } 这就是 CSS 代码。可见，CSS 的原理很简单，对于母语是英语的人来说，写 CSS 代码是 和平时说话一样简单的事。对于我们，只要熟悉了这些属性，就可以掌握它。
3.2 Dreamweaver
中使用 CSS
在 Dreamweaver 中使用 CSS，可以使用可视化的方式来编辑。 3.2.1 创建 CSS （1）打开“新建 CSS 规则”对话框。 在 Dreamweaver 中，有 3 种方式可以设置 CSS 样式。 在打开的 HTML 文档中，选择菜单栏中“格式”→“CSS 样式”→“新建”命令。 选择菜单“窗口”→“CSS 样式”命令，确认打开“样式”面板。单击“CSS 样式” 面板底部的“新建 CSS 规则”按钮，如图 3-1（a）所示。 在“CSS 面板”中，单击面板标题栏右端的图标，然后在弹出的菜单中选择“新建” 命令，如图 3-1（b）所示。 使用以上三种方法中的任意一种，都会打开“新建 CSS 规则”对话框，如图 3-2 所示。 在前面提到的 CSS 组成部分中，“对象名称”是很重要的，它指明了对网页中的哪个元素 进行设置。因此，在 CSS 样式中有一个专用的名称：“选择器”。 在“新建 CSS 规则”对话框中有 4 种“选择器类型”可供选择，分别为“类（可应用于 任何 HTML 元素）”、“ID（仅应用于一个 HTML 元素）”、“标签（重定义 HTML 元素）”和“复合内容（基于选择的内容）”。 （a） （b） 图 3-1 新建 CSS 样式的方法 图 3-2 “新建 CSS 规则”对话框 类（可应用于任何 HTML 元素）：用于创建自定义样式。即创建一个可以作为 Class 属 性应用于文本区域或文本块的样式。 ID（仅应用于一个 HTML 元素）：与类选择器很相似，但是 ID 选择器只能在 HTML 页面中使用一次，针对性更强。 标签（重定义 HTML 元素）。对指定的 HTML 标签的默认格式进行重新定义（注意： 使用重定义标签，会改变许多页面的布局）。 复合内容（基于选择的内容）：用于对特定的标签组合进行格式定义。 （2）在对话框中为新样式输入名字、选择标签或者选择标签组合。 样式的名字前边必须要有一个句点。如果没有输入这个句点，Dreamweaver 会自动 输入。名字可以是任何字母和数字的组合，例如：.test。
要重新定义 HTML 标签样式，可以键入一个 HTML 标签或者从弹出菜单中选择 一个。 选择“高级”后，可以输入任何一个有效的表达式（例如，td 或#textStyle），或者从 弹出菜单中选择。可供选择的有：a:active（激活超链接），a:hover（光标位于超链接 上），a:link（超链接没有任何动作时）和 a:visited（访问过的超链接）。 若选择第一项，即使用类选择器，要在“名称”输入框中输入一个名称，注意在名称前 面一定要放置一个点，例如.test，加点的作用是让浏览器知道这是一个样式类（Class），而不 是 HTML 的标签符，如图 3-3 所示。 图 3-3 设置选择器名称 （3）选取要定义的样式出现的位置：定义在某个文件中或仅对本文档。在此，选择“仅 限该文档”。 （4）单击“确定”按钮，出现样式定义对话框，如图 3-4 所示。 图 3-4 “CSS 规则定义”对话框 在这个对话框中可以定义样式的属性。Dreamweaver 把这些属性分成了 8 类，在对话框左
侧的“分类”栏中可以选择某一类属性，然后在右侧对这一类属性进行设置。对于文本样式， 设定前 3 类属性，即“类型”、“背景”和“区块”就足够了。 要注意的是，虽然有很多属性可以设置，但并不是每一个属性设置后就一定有效。例 如有的属性与字体有关，事实上，同一种字体都有不同的样式，如倾斜、加粗等，如果系 统的字库缺少相应的版本，即便设定了某种属性也没有效果。另外，如果访问者的系统没 有相应的字体，也会看不到设定的效果，因此在设定各种属性时应该尽量使用最普通、最 常见的属性。 这里简单介绍一些属性的作用，这些属性都在“类型”、“背景”页中。“区块”页里的属 性也很有用，但通常要和表格与图层共同使用。 （5）“类型”面板如图 3-4 所示。 Font-family（字体）：设置样式的字体。 Font-size（大小）：文本的大小。这里可以精确到以像素为单位设置文本大小，就不 像用“属性”面板那样只有很少的几种固定大小供选择了，方法是在“大小”输入框 中输入数值，并在右边的下拉列表中选择“像素”作为单位。 还可以选择其他单位，如“点数”、“厘米”等。除了这些单位之外，“字母高”（ems）也 很有用，1 个 ems 就是一个字母 m 的宽度，设定时可以用小数，如 1.3ems，即一个字母 m 的 宽度的 1.3 倍。最好使用像素 Pixels 作为单位，这样可以阻止浏览器中的文本变形。
Font-style（样式）：定义字体样式为 Normal（正常）、Italic（斜体）或 Oblique（倾斜）。
Line-height（行高）：设置文本的行高。这个属性很有用，用它就可以设定文本的行 间距。如果选取 Normal，行高是根据字体大小自动计算的，可以自己键入一个精确 的数值并选取一个计量单位。
Text-decoration（修饰）：添加 underline（下划线），overline（上划线），line-through （整行划线），blink（命令文本闪烁）。
Font-weight 粗细：给字体指定粗体字的磅值。Normal 等同于 400；Bold 等同于 700。
Font-variant（变形）：选取字体的变种，例如 small caps（小型大写字母）。
Font-transform（形式）：将选区中每个单词的第一个字母转为大写，或者令单词全部 大写或全部小写以及上标、下标显示。 Color（颜色）：定义文本颜色。 （6）“背景”面板如图 3-5 所示。 Background-color（背景颜色）：设置元素的背景色。 Background-image（背景图像）：设置元素的背景图像。 Background-repeat（重复）：背景图片重复放置的方式，包括“no-repeat（不重复）”、 “repeat（重复）”、“repeat-x（横向重复）”和“repeat-y （纵向重复）”这 4 种方式。 no-repeat 表示图片不平铺，repeat 表示图片在水平和垂直方向均平铺，repeat-x 表示 仅在水平方向平铺，repeat-y 表示仅在垂直方向平铺。 Background-attachment（附件）：确定背景图像是固定在原来位置（fixed）还是随内 容的滚动而滚动（scroll）。 Background-position(X)水平位置和 Background-position(Y)垂直位置：指定背景图像 相对于元素的初始位置。如果这两个选项都选择居中，那么背景图像将在页面中居 中对齐。
图 3-5 “CSS 规则定义”对话框中的“背景”面板 （7）“区块”面板如图 3-6 所示。 图 3-6 “CSS 规则定义”对话框中的“区块”面板 Word-spacing（单词间距）：设置单词间的距离。 Letter-spacing（字母间距）：设置字符间的距离。 Vertical-align（垂直对齐）：指定元素的垂直对齐属性，通常是与它的母元素相比 较而言。 Text-align（文本对齐）：确定文本在元素内如何排列对齐。 Text-indent（文本缩进）：确定段落第一行的缩进值。负值用于将段落第一行向外拉. White-space（空白间距）：确定如何处理元素内的空白间距。 （8）“方框”面板如图 3-7 所示。
图 3-7 “CSS 规则定义”对话框中的“方框”面板 Width/Height（宽度/高度）：设置元素边界宽度与高度。 Float（浮动）：设置元素的对齐方式。 Padding：设置元素内的内容与方框边界的上、右、下、左的距离。 Margin：设置元素边界距其他元素上、右、下、左的距离。 （9）“边框”面板如图 3-8 所示。 图 3-8 “CSS 规则定义”对话框中的“边框”面板 Style（样式）：确定边界框样式。 Width（宽度）：设置边框宽度。 Color（颜色）：设置边界框的颜色。可以分别对每条边界设置颜色。 （10）“列表”面板如图 3-9 所示。
图 3-9 “CSS 规则定义”对话框中的“列表”面板 List-style-type（类型）：确定无序列表或有序列表的外观。 List-style-image（项目图像）：为无序列表指定一幅自定义图像。单击“浏览”按钮 查找图像，或直接输入图像的路径。 List-style-Position（位置）：确定列表项排列是根据缩进量换行（outside），还是根据 页边距换行（inside）。 （11）“定位”面板如图 3-10 所示。 图 3-10 “CSS 规则定义”对话框中的“定位”面板 “定位”面板用于将被选文本的标签或块转到一个使用了默认标签的新层上去。 Position（类型）：确定浏览器定位层的方法： absolute：根据在定位框中所输入的相对于页面左上角的坐标来放置层。 relative：根据在定位框中所输入的相对于文档中对象位置的坐标来放置层。 static：将层置于文本流程中自己的位置。
Visibility（显示）：确定层的最初显示状态。如果没有指定这一属性，在默认情况下 多数浏览器会继承原始的变量值。 Inherit：继承层的载体的显示属性。如果层没有载体，它将是可视的。 Visible：显示层的内容，不管层的载体的属性如何。 Hidden：隐藏层的内容，不管层的载体的属性如何。 Z-Index（Z 轴）：确定层的堆叠顺序。编号较大的层会显示在编号较小的层上边，可 以是正值也可以是负值。 Overflow（溢出）：（仅对 CSS 层有效）确定如果层的内容超出了层的大小时如何处 理。浏览器经常放大文本从而使它与在 Dreamweaver 的 Document 窗口中相比更占 地方。该属性就是控制如何处理这种情况的。 Visible：增加层的大小，从而将层的所有内容显示出来。层的扩大是向下和向右 进行。 Hidden：保持层的大小不变，将超出层的内容剪裁掉。不提供滚动条。 Scroll：不管层的内容是否超出了层，都强制给层添加一个滚动条。 Auto：只有在内容超出层的边界时才显示滚动条。 Placement（定位）：指定层的位置和大小。浏览器如何解释层的位置取决于 Type 的 设置。如果内容超出层的范围，尺寸大小的值就不予考虑了。层的位置和大小的默认 单位是像素。对 CSS 层而言，可以指定下列计算单位：pc（picas，十二点活字）， pt（points，磅值），in（inches，英寸），mm（millimeters，毫米），cm（centimeters， 厘米），ems（与当前字体中的 m 字母宽度比较），exs（与当前字体中的 x 字母高度 比较）或%（percentage of the parent's value，与层中的字母大小的百分比）。单位缩写 必须紧跟着设定值而不能有空格，如 3mm。 Clip（剪辑）：定义层的可视部分。如果指定了剪辑区域，可以使用 JavaScript 之类 的脚本语言读取并通过属性设置创建出特殊的效果（例如：擦去效果）。 （12）“扩展”面板如图 3-11 所示。 图 3-11 “CSS 规则定义”对话框中的“扩展”面板 “扩展”面板是用来控制某些扩展的功能。 分页：在打印的时候强迫在样式控制的对象前后换页。
视觉效果： Cursor（光标）：当光标滑过样式控制的对象时改变光标的图像。 Filter（滤镜）：给由样式控制的对象应用特效，包括模糊和倒置等。 滤镜效果各参数说明如下： Alpha：设置不同的透明度变化效果。 Blur：建立模糊效果。 DropShadow：建立一种偏移的影像轮廓，即投射阴影。 FlipH：水平翻转。 FlipV：垂直翻转。 Glow：为对象的边界增加色彩光效。 Gray：将图片以灰度形式显示。 Invert：将色彩、饱和度以及亮度值完全反转，类似底片效果。 Light：在一个对象上进行灯光投影。 Mask：为一个对象建立彩色透明遮罩。 Shadow：为对象建立轮廓的倒影效果。 Wave：在 X 轴和 Y 轴方向利用正弦波打乱图片。 Xray：只显示对象的轮廓。 3.2.2 应用 CSS （1）在文档中，选择要应用 CSS 样式的文本或其他网页元素。可以执行下列操作之一： 在“CSS 样式”面板中，右击要应用的样式的名称，然后从上下文菜单选择“套用”， 如图 3-12（a）所示。 在属性栏中，从“类”下拉菜单中选择要应用的样式。 在编辑网页时可以给文档附加或链接一个 CSS 样式表来应用样式。当对一个 CSS 样式 表进行了编辑后，所有使用该 CSS 样式表链接的文档都会根据修改进行更新。 （a） （b） 图 3-12 应用 CSS （2）附加外部 CSS 样式表文件。 要附加样式表文件，就要有建立好的样式表文件。建立样式表文件，就是在新建样式时，
选择规则定义的位置，不是“当前文档”而是“新建样式表文件”，如图 3-13 所示。并将样式 作为一个单独的文件保存在网页所在的相应文件夹中，如图 3-14 所示。 图 3-13 新建样式表文件 图 3-14 存储样式表文件 有了样式表文件后就可以给相应的网页元素附加相应的样式表文件了。 选择“窗口”→“CSS 样式”命令，打开“CSS 样式”面板。 在“CSS 样式”面板中，右击窗口，从弹出的菜单中选择“附加样式表”命令。也 可以单击“CSS 样式”面板底部的“附加样式表”图标，如图 3-15 所示。 在弹出的对话框中，选择附加样式标的方式“链接”或“导入”。输入文件名或通过 浏览查找需要附加的样式表文件，如图 3-16 所示。单击“确定”按钮。
（a） （b） 图 3-15 附加样式表 图 3-16 “链接外部样式表”对话框 注意 附加的样式表中不包含仅适用于本文档的样式。 3.2.3 编辑 CSS 1．编辑网页中的样式 （1）打开“CSS 样式”面板。 （2）单击要编辑的样式以选中它。 （3）单击位于“CSS 样式”面板底部的“编辑样式表”按钮。 （4）打开“CSS 样式定义”对话框，进行修改。 （5）修改完毕后，单击“确定”按钮。 所作的更改将立即应用于当前文档。 2．修改 CSS 样式表文件 （1）在“CSS 样式”面板中，单击要编辑的样式表文件，选中要修改的样式的名称。 （2）单击位于“CSS 样式”面板底部的“编辑样式表”按钮，所选 CSS 样式表的样式随 即出现在对话框中。 （3）在对话框中选择要编辑的样式，然后单击“编辑”按钮，出现“CSS 样式定义”对 话框。 （4）根据需要修改样式，然后单击“确定”按钮。
如果修改的样式表文件为多个网页文档使用的 CSS 样式表，所作的更改将反映在相应的 页面中。
3.3 CSS
的应用
3.3.1 使用 CSS 设置文字格式 下面在 Dreamweaver 中通过“CSS 样式”面板给保定旅游网中的首页设置 CSS 样式，主 要是对网页中的字体、字号、颜色、背景色、行高等进行设置。 1．标题文字样式设置 （1）先对网页中的文章标题文字“保定景点介绍”的样式进行设置。在 Dreamweaver 中， 选中“保定景点介绍”标题文字。 （2）选择菜单栏中的“窗口”→“CSS 样式”命令，或单击“属性”面板中的“打开 CSS 面板”按钮，或者按 Shift+F11 组合键，打开“CSS 样式”面板。 （3）“CSS 样式”面板顶部是“全部”和“正在”两个切换按钮，可以在两种模式之间 切换。这里默认的是“正在”模式，现在单击“全部”按钮。 （4）此时的“CSS 样式”面板未做任何设置，单击“CSS 样式”面板底部的“新建 CSS 规则”按钮，准备创建 CSS 规则。 （5）单击“新建 CSS 规则”按钮后，就会弹出“新建 CSS 规则”对话框，在该对话框 中“名称”右边的方框内输入 CSS 样式的名称.title，“定义在”列表处单击“仅对该文档”单 选按钮，如图 3-17 所示。 图 3-17 为文档标题新建 CSS 规则 （6）单击“确定”按钮，弹出“.title 的 CSS 规则定义”对话框。 （7）在“分类选项”列表中默认的是“类型”，这里保持默认，在右边设置区的“字体” 列表中选择要定义的某种字体。 （8）如果“字体”列表中没有所需要的字体，单击“字体”列表中的“编辑字体列表” 选项，就会弹出“编辑字体列表”对话框，从右边的“可选字体”列表中选择字体，单击“向 左”按钮 添加到左边的“选择的字体”列表中。（9）把所有需要的字体都添加到左边的“选择的字体”列表中，如果左边有些字体不需
要，可以将其选中后单击“向右”按钮 ，从列表中删除。
（10）字体添加到“选择的字体”列表后，单击“确定”按钮，添加的字体出现在“字 体”列表中。选择了需要的字体后，设置 Font-family 为“黑体”、Font-size 为 24、Line-height 为：26、Color 为#F33（橘红），如图 3-18 所示。 图 3-18 标题文字样式设置 （11）单击“确定”按钮，至此对文本标题的样式.title 的设置就完成了。 2．网页中标题以外文字样式的设置 现在来设置内容文本样式，设置的方法与设置标题文本样式一样。只是样式名称要另取 一个以便与标题样式区分。例如可以设置为.text。这里可以通过对页面样式设置，设置网页中 除了标题以外的其他文字样式。 （1）新建 CSS 规则，“选择器类型”为“标签（重新定义 HTML 元素）”；“选择器名称” 为 body（对整个页面样式进行设置）；“规则定义”的位置为 lianxi1.css 样式文件中。如图 3-19 所示。 图 3-19 通过 body 样式设置页面文字样式
（2）对 body 中的文字进行设置，如图 3-20 所示。Font-family 为“宋体”；Font-size 为 14px；Line-height 为 25px；color 为“#060（绿色）”。
图 3-20 设置 body 中的文字样式
（3）此时“CSS 样式”面板如图 3-21 所示。有前面例子中建立的.test CSS 规则，还有 lianxi1.css 样式文件，其中有三个样式，分别为.lianxi1 对边框进行设置的 CSS 规则、.title 对 文字标题设置的 CSS 规则、body 对网页中的所有文字设置的 CSS 规则。现在，body 中的对 文字的 CSS 规则已经起了作用。除了使用前面例子中.test 所修饰的文字以外，其他文字均应 用了 body 中的样式。 （4）接着在网页中文档标题使用.title 样式。首先，选中标题，在对应的属性栏中设置“类” 为 title，如图 3-22 所示。 图 3-21 “CSS 样式”面板 图 3-22 CSS 样式应用 （5）删除第一段文字前面应用的.test CSS 规则。选中第一段文字，在属性栏类中选择 “无”，如图 3-23 所示。 最后保存文档，浏览该文档查看效果。 3．编辑样式 通过浏览发现，网页中的文档标题应用了.title 样式。其他文字都应用了 body 样式中定义 的样式。文档中大标题没有居中对齐，每个段落都没有进行首行缩进，而且整个网页靠左显示
（希望居中）。为此要对上面创建的样式文件进行修改。 图 3-23 取消类 CSS 规则应用 （1）在样式面板中选中需要修改的 CSS 样式规则.title，双击或单击“CSS 样式”面板下 方的“修改”按钮 ，如图 3-24 所示。弹出“CSS 规则定义”面板，选择分类中的“区块”， 设置 Text-align 为 center，如图 3-25 所示。 图 3-24 编辑已有样式 图 3-25 编辑 title 的“区块”面板
（2）双击 body 样式，打开 body 的“CSS 规则定义”面板，编辑“区块”面板中的 Text-indent 为 2ems，即首行缩进 2 字符的宽度，如图 3-26 所示。单击“方框”，打开“方框”面板，设 置 Width 为 800px；Padding 项勾选“全部相同”复选框，将 top、right、bottom、left 设置为 5px，即网页中的元素距离 body 区域边框的距离上、右、下、左均为 5 个像素。设置 Margin 项中 Top 与 Bottom 的值为 0px，Right 与 Left 的值为 auto，即使 body 区域与浏览器上下没有 距离，并水平居中，如图 3-27 所示。
此时网页中应用样式的相应元素外观发生了变化，按 F12 键预览，可以看到大标题居中 显示，同时每个段落首行缩进了两个字符，网页内容居中显示，如图 3-28 所示。对 body 样式 的定义也可以同过属性面板中的“页面设置”按钮打开“页面设置”对话框进行设置和编辑网 页中的字体等元素的 CSS 规则，这里不再叙述。
图 3-26 body 样式中区块设置 图 3-27 body 样式中方框设置 图 3-28 文字设置效果 3.3.2 使用 CSS 设置图片格式 1．创建图片样式.p1 接着为首页中的图片设置样式。打开“CSS 样式”面板，新建样式.p1，如图 3-29（a）所 示。在“方框”面板中设置图片的宽和高 Width：300px，Height：100px，设置图片的对齐方 式为左对齐 Float：left；Margin：Top 为 5px；Margin：right 为 20px；Margin：bottom 为 5px，
即设置图片边框与上、下和右边网页元素的距离。设置 Padding 的 Top、Right、Bottom、Left 的值都相同，为 2px，即使得图片边框与图片内容有 2px 的间隔。如图 3-29（b）所示。在“边 框”面板中设置图片上、下、左、右的边框为实线 Style：solid；线条为两个像素宽 Width：4px； 线条颜色设为橘色 Color：#F63，如图 3-29（c）所示。 （a） （b） （c） 图 3-29 .p1 的 CSS 规则设置 2．应用.p1 样式 在 Dreamweaver 中选中要应用样式的图片，在属性栏的“类”中选择要使用的样式，如 图 3-30 所示，网页整体效果如图 3-31 所示。 图 3-30 图片样式应用
图 3-31 图片样式应用效果 3.3.3 使用 CSS 设置超链接格式 下面在 Dreamweaver 中通过“CSS 样式”面板给网页中顶部的“首页”、“景点介绍”、“人 文风情”、“图片浏览”四个超链接设置 CSS 样式。使超链接文字在正常浏览状态下不加下划 线、文字颜色为深绿色、加粗；鼠标经过超链接时文字颜色变为橘色加下划线；单击后使超链 接文字去掉下划线保持橘色。 （1）选中网页顶部的“首页”、“景点介绍”、“人文风情”、“图片浏览”四个文字导航。 打开“CSS 样式”面板。打开“新建 CSS 规则”对话框，将“选择器类型”设置为“复合内 容（基于选择的内容）”，“选择器名称”为 a:link，如图 3-32 所示。 图 3-32 新建超链接 CSS 规则选择器的选择 （2）单击“确定”按钮，弹出“a:link 的 CSS 规则定义”对话框。设置超链接在正常状 态下的文字样式。Font-family（字体）：宋体；Font-size（字号）：14px；Font-weight：bold（粗 体）；Color（字符颜色）：#06f；Text-decoration：none（字符装饰为“无”），如图 3-33 所示。 （3）用同样的方法，设置鼠标经过时超链接文字的样式。新建 CSS 规则，将“选择器类 型”设置为“复合内容（基于选择的内容）”，“选择器名称”为 a:hover，在弹出的对话框中设 置鼠标经过时超链接的样式。Font-family（字体）:宋体；Font-size（字号）：14px；Font-weight： bold（粗体）；Color（字符颜色）：#F63；Text-decoration：underline（字符装饰为“下划线”）， 如图 3-34 所示。
图 3-33 “a:link 类型”面板设置超链接正常状态样式 图 3-34 “a:hover 类型”面板设置鼠标指向超链接文字样式 （4）用同样的方法设置访问后的超链接文字样式。新建 CSS 规则，将“选择器类型”设置 为“复合内容（基于选择的内容）”，“选择器名称”为 a:visited，在弹出的对话框中设置鼠标经过 时超链接的样式。Font-family（字体）：宋体；Font-size（字号）：14px；Font-weight：bold（粗体）； Color（字符颜色）：#F63；Text-decoration：none（字符装饰为“无”），如图 3-35 所示。 图 3-35 “a:visited 类型”面板设置超链接访问过后的样式 3.3.4 同一页内设置不同的超链接 另外，还要给网页文档中的一级标题文字加上超链接，并设置与导航不同的超链接样式。
要求在正常状态文字为橘色并带有下划线，当鼠标指向时文字变为蓝色没有下划线等装饰。当 超链接访问过后文字为黑色，没有下划线等装饰。
此时，当把一级标题文字设置为超链接时，它们均应用了刚才我们针对<a>标记设计的 a:link，a:hover，a:visited 的 CSS 规则。为了区分此时的超链接样式不是刚才的超链接样式， 可以利用复合选择器来实现。即因为网页中文档的一级标题超链接文字对应的标签是包含在 <h4></h4>中的<a></a>,（<h4> <a >一、白洋淀</a></h4>），因此可以通过使用复合选择器 h4 a:link 来区别于 a:link，这种方式就可以区别同一页面中的不同超链接对象，为超链接设计应 用不同的 CSS 样式。 1．设置一级标题的正常状态超链接样式 （1）新建 CSS 规则，将“选择器类型”设置为“复合内容（基于选择的内容）”，“选择 器名称”为“h4 a:link”，如图 3-36 所示。 图 3-36 复合选择器 （2）在弹出的对话框中设置鼠标经过时超链接的样式。Font-family（字体）：宋体；Font-size （字号）：14px；Color（字符颜色）：#F63（橘色）；Text-decoration：underline（加下划线）， 如图 3-36 所示。 图 3-37 设置一级标题的正常状态超链接样式
2．设置一级标题的鼠标指向状态的超链接样式 （1）新建 CSS 规则，将“选择器类型”设置为“复合内容（基于选择的内容）”，“选择 器名称”为“h4 a:hover”。 （2）在弹出的对话框中设置鼠标经过时超链接的样式。Font-family（字体）：宋体；Font-size （字号）：14px；Color（字符颜色）：#06F（蓝色）；Text-decoration：none（字符装饰为“无”）， 如图 3-37 所示。 图 3-38 设置一级标题的鼠标指向状态超链接样式 3．设置一级标题的访问过状态的超链接样式 （1）新建 CSS 规则，将“选择器类型”设置为“复合内容（基于选择的内容）”，“选择 器名称”为“h4 a:visited”。 （2）在弹出的对话框中设置鼠标经过时超链接的样式。Font-family（字体）：宋体；Font-size （字号）：14px；Color（字符颜色）：#000（黑色）；Text-decoration：none（字符装饰为“无”）。 按 F12 键可以预览网页效果，如图 3-39 所示。 图 3-39 超链接效果预览
3.4
实践与运用——“保定旅游网”的设计与制作
通过以上对 CSS 基本概念、CSS 样式的创建、CSS 样式的应用等内容的学习，我们对 CSS 样式的设置与应用有了一个简单的认识。下面通过一个具体的实例，将网页内容设计（html） 与网页表现设置（CSS）等内容综合起来，完成“保定旅游网”的设计与制作。在制作网站之 前，首先对“保定旅游网”任务进行分析。 这是一个中型的网站，需要通过 CSS 网页风格样式的设计与制作，主要采用 CSS 对网页 中的文本、图片、超链接等元素进行统一设置，使整个站点保持视觉的一致性。在网页风格更 换时，通过修改 CSS 文件而统一修改网页中的文字及超链接等对象。 根据以上任务，通过下面几个步骤制作“保定旅游网”。 1．创建本地站点 选择“站点”→“新建站点”命令，在“站点名称”文本框中修改站点名称为“保定旅 游网站”，选择保存网站的路径。在站点文件夹下建立 images 文件夹、CSS 文件夹和子页文件 夹 ZY，将网页所用图片放入 images 文件夹中，网页中的 CSS 样式文件放到 CSS 文件夹中， 网页中的所有子页放到 ZY 文件夹中，如图 3-40 所示。 2．使用 Dreamweaver 设计制作网页 （1）制作网页之前需要确定网页的布局，本网站的所有网页都是按照一种方式布局的， 如图 3-41 所示。主要 banner（使用做好的图片）将网页的主旨显示出来；导航由文字超链 接构成，方便浏览；网页内容区域由图片和文字构成；网页的最下面是版权信息，如图 3-41 所示。 图 3-40 站点文件及文件夹设置 图 3-41 页面布局设置 （2）网页使用表格布局。选择“插入”→“表格”命令。在弹出的“表格”的对话框中， 设置表格为 4 行 1 列、表格宽为 800 像素、边框粗细设为 0，如图 3-42 所示（第 1 行放置 banner 图片，第 2 行放置导航文字，第 3 行放置网页主要内容，第 4 行放置版权信息）。图 3-42 使用表格布局 （3）插入 banner 图片。在表格中第 1 个单元格内插入图片。单击表格内部的第 1 个单元 格，选择“插入”→“图像”命令，先后选择 images 文件中的 banner.jpg。选中图片，在对应 的属性栏中修改图片的大小，设置 banner.jpg 的宽为 800，高为 200，如图 3-43 所示。 图 3-43 网页页头设计 （4）在第 2 个单元格内写入导航文字“首页”、“景点介绍”、“人文风情”、“图片浏览” 并给它们加上超链接。单击第 2 个单元格，在属性栏中设置单元格背景颜色为#333333，如图 3-43 所示。 （5）编辑正文内容，单击第 3 个单元格将正文文字及图片导入，选中正文中的大标题文 字，在属性栏中设置“格式”为标题 1；分别选中正文中的二级标题，在属性栏中设置“格式” 为“标题 4”，并分别给它们设置超链接，使其链接到不同的子页中。另外再给第 3 个单元格 加上背景颜色为#FFFFFF（白色），如图 3-44 所示。
图 3-43 网页导航设计 图 3-44 设置标题及单元格背景色 （6）在表格的第 4 个单元格中插入版权和联系方式等信息，并设置单元背景颜色为深灰 色（#333333），如图 3-45 所示。 图 3-45 网页页脚设计 使用相同的方法创建首页中提到的八个景点相应的子页，在此不再详细叙述。
3．使用 CSS 格式化网页外观 （1）为网页整体设置样式。打开“CSS 样式”面板，单击“新建样式”按钮，打开“新 建 CSS 规则”对话框。“选择器类型”选择“标签（重新定义 HTML 元素）”；“选择器名称” 选择 body；“规则定义”选择“新建样式表文件”；如图 3-46 所示，单击“确定”按钮。 图 3-46 选择 body 标记为样式选择器 （2）打开“将样式表文件另存为”对话框，将其存放在站点根目录下的 CSS 文件夹中， 文件名为 Style.css，如图 3-47 所示，单击“保存”按钮。 图 3-47 “将样式表文件另存为”对话框 （3）在弹出的 body 的“CSS 规则定义”对话框中设置页面样式。在“类型”选项卡中 设置字体 Font-family：宋体；字号 Font-size：14px；字体颜色 Color：#000，如图 3-47（a） 所示。选择“背景”选项卡，设置背景颜色 Background-color 为浅灰色：E8E8E8，如图 3-47 （b）所示。在“区块”选项卡中设置首行缩进 Text-indent 为 2em，如图 3-47（c）所示。
（a） （b） （c） 图 3-47 body 样式设置 （4）给表格的第 1 个单元格设置样式 TD1，将首航缩进 text-indent 的值设置为 0，margin 和 padding 的值设置为 0，使之结合紧密，过渡自然，如图 3-48 所示。
（a） （b） 图 3-48 TD1 第 1 个单元格样式设置 （5）新建正文图片的样式.p1。按照 3.3.2 节中所述的方式，设置图片格式，在此不再详 细介绍。 （6）新建超链接的样式。按照 3.3.3 节和 3.3.4 节中所述的方式分别设计网页中导航文字 超链接样式和正文中一级标题的超链接样式，使其正常状态为黄色，鼠标经过时为橙色加下划 线，访问过后文字颜色为白色；正文中一级标题的超链接正常状态为蓝色并加有下划线，鼠标 经过时为橙色，访问过后为绿色，在此不再详细介绍。 （7）新建网页正文中大标题样式.title 和页脚文字样式.footer。按照 3.3.1 节叙述的方法将 标题样式.title 设置为宋体，24 号，加粗，橙色，居中。将页脚文字样式.footer 设置为宋体， 12 号，白色，居中，在此不再详细叙述。 （8）新建单元格的样式 TD2。使第 2、第 3、第 4 个单元格中的内容与单元格边框上、 下、左、右均保持 5 个像素的距离。打开“新建 CSS 规则”对话框，选择“方框”，如图 3-49 所示。
图 3-49 内容单元格样式 （9）设置子页应用 Style.css 样式文件，统一网页外观。打开相应子页，在“CSS 样式” 面板中单击“附加样式表”按钮 ，弹出“链接外部样式表”对话框，选择文件路径，添加 为“链接”。如图 3-50 所示，使子页中对应的元素应用 Style.css 中的样式。 图 3-50 “链接外部样式表”对话框 4．保存网页 分别保存子页和首页，此时，单击 F12 键就可以预览网站效果了。
复习思考题
一、选择题 1．在“新建 CSS 规则”对话框中，有（ ）种选择器类型可供选择。 A．3 B．4 C．5 D．2 2．在 CSS 中 margin：2px 4px 4px 2px，请问这 4 个值分别属于（ ）方位的。 A．上 右 左 下 B．上 左 下 右 C．左 上 右 下 D．上 右 下 左 3．在 CSS 中，通过（ ）在同一页面上设置不同的超链接。 A．伪类 B．类 C．行内元素 D．对象4．通过 Dreamweaver 设置页面属性窗口可以设置的页面链接属性是（ ）。 A．活动链接的颜色 B．链接的下划线样式 C．图片的颜色 D．默认文本的字体 5．在 Dreamweaver 中，不可对已有的样式进行的操作是（ ）。 A．链接外部样式表 B．修改样式表 C．无 D．删除样式表 二、判断题 1．CSS 样式可以保存为 CSS 样式表，其后缀名为.css。 （ ） 2．CSS 样式表修改后所有应用样式表的网页都会自动更新。 （ ）
