网页设计与制作 Dreamweaver CS6 标准教程 第7章 CSS样式 网页设计与制作 Dreamweaver CS6 标准教程

本章学习的主要内容： 1. CSS样式构造规则及意义 2. 利用CSS样式面板创建各种样式 3. 利用CSS样式面板创建文本导航条

7.1 CSS样式 CSS（Cascading Style Sheet）样式称为层叠 样式表，也称级联样式表。CSS样式是描述网页 元素格式的一组规则，用于设置和改变HTML语 言网页的外观。

7.1 CSS样式 7.1.1 CSS样式标准 7.1.2 CSS样式构造规则 7.1.3 CSS样式种类 7.1.4 CSS样式应用范围

7.1.1 CSS样式标准 CSS样式是W3C组织定义的HTML语言网页外观 描述的方法。 CSS样式将HTML语言网页中的标签（或元素）外 观特性分离出来，形成独立于HTML语言的样式。 采用CSS样式不仅可以对一个网页的布局、字体、 图像、背景及其它元素外观进行精确控制，还可 以对一个网站的所有网页进行有效的统一控制。

7.1.2 CSS样式构造规则 CSS样式是由三个要素对象、属性和属性值构 成的。对象是CSS样式所作用和控制的网页元 素，属性是CSS样式描述和设置对象性质的项 目，属性值是属性的一个实例。 Body { font-family：宋体； font-size：15px； color：red； text-decoration：underline； } 页面文字 { 字体：宋体； 大小：15像素； 颜色：红色； 装饰：下划线 }

7.1.3 CSS样式种类 根据CSS样式所控制的网页元素不同，可以将 样式分为四种形式。 当所控制的网页元素是HTML语言中的某一个 特定的标签时，为此标签设置的CSS样式，称 为标签样式。 当把网页中或网站中若干元素归为一类，作为 一个整体来看待，为此类元素设置一个CSS样 式，称为类样式。

7.1.3 CSS样式种类 一个标签或元素在网站中的不同网页中，或在 一个网页中的不同位置上，外观效果不同，则 需要先为该特定标签赋予一个唯一的ID号，然 后，再为具有该ID号的标签设置样式，称此样 式为ID样式。 当设置若干个内容相同而名称不同样式时，或 者设置超级链接样式时，则可以使用复合样式。

7.1.4 CSS样式应用范围 应用CSS样式涉及到两个范围，一是在一个网页中， 另一个是在整个网站中。

7.2 CSS样式控制面板 在CSS样式控制面板中，包含了实现CSS样式的各 种功能。 如选择器选择样式类型，规则定义位置确定样式 应用范围，规则定义对话框定义样式的属性和属 性值。

7.2 CSS样式控制面板 7.2.1 CSS样式选择器 7.2.2 课堂案例-美好摄影 7.2.3 CSS样式的使用 7.2.4编辑样式

7.2.1 CSS样式选择器 1.重建HTML标签样式，自动更新。 2.创建类样式，先应用后更新。 3.创建ID样式，自动更新。 4.复合样式

7.2.2 课堂案例-美好摄影 案例学习目标：学习使用各种CSS样式。 案例知识要点：在【CSS样式】面板中，选择 【新建CSS规则】按钮 ，打开【新建CSS规则】 对话框，设置ID表格样式、类样式和复合样式， 以及它们的存储位置；在【CSS规则定义】对 话框中，完成属性的简单设置。 素材所在位置：光盘/案例素材/ch07/课堂案 例-美好摄影。 案例效果如图7-7和7-8所示。

7.2.3 CSS样式的使用 1. 定义内部样式 2. 移动CSS规则 3. 定义外部样式 4. 附加样式表

7.2.4编辑样式 打开样式编辑对话框有三种方法： （1）双击样式。 （2）使用【编辑样式】按钮。 （3）使用面板菜单。

7.3 CSS属性 CSS属性是CSS样式的主要内容，它控制和 改变网页元素的格式和外观，包括九大类： 类型、背景、区块、方框、边框、列表、定 位、扩展和过度。

7.3 CSS属性 7.3.1课堂案例-走进台湾 7.3.2类型 7.3.3背景 7.3.4区块 7.3.5方框和边框 7.3.6列表 7.3.7定位 7.3.8扩展 7.3.9过渡

7.3.1课堂案例-走进台湾 案例学习目标：学习设置CSS文字导航条。 案例知识要点：在【CSS规则定义】对话框中， 灵活使用样式【类型】、【背景】、【区块】、 【方框】和【边框】等中的CSS样式属性，完 成网页元素的属性设置。 素材所在位置：光盘/案例素材/ch07/课堂案 例-台湾之旅。 案例效果如图7-48所示。

7.3.5方框和边框

7.4过滤器 7.4.1课堂案例-养生美容 7.4.2 CSS静态过滤器 7.4.3 CSS动态过滤器

7.4.1课堂案例-养生美容 案例学习目标：学习使用CSS过滤器。 案例知识要点：在【CCS样式】面板中，打开 【CSS规则定义】对话框，使用【分类】栏中 的【扩展】，完成CSS过滤器的设置。 素材所在位置：光盘/案例素材/ch07/课堂案 例-养生美容。 案例效果如图7-77所示。

7.4.2 CSS静态过滤器 1．Alpha滤镜 2．DropShadow滤镜 3．shadow滤镜 4．blur滤镜 5．wave滤镜 6．glow滤镜 7．gray滤镜

7.4.3 CSS动态过滤器 动态过滤器也称转换过滤器，为网页切换提供 各种动态效果。 1．BlendTrans过滤器 2．RevealTrans过滤器

7.5练习案例 7.5.1练习案例-航空旅游 7.5.2练习案例-狗狗俱乐部 7.5.3练习案例-鲜花店

7.5.1练习案例-航空旅游 案例练习目标：练习使用各种CSS样式。 案例操作要点： 1．打开文档index1.html，在导航条单元格 中插入表格：行数列数均为1，宽度为100%， ID标识为navi，并输入导航条文字“网站首 页 旅游计划 服务中心 联系我们（中间留空 格）”。 2．设置导航条复合样式#navi a:link， #navi a:visited属性，字体大小: 12px，颜 色为#666；设置#navi a:hover属性，颜色 为#999。

7.5.1练习案例-航空旅游 3．直接输入标题文字“》推荐旅游景点”，设置 类样式.title属性，字体为仿宋体，大小19px，颜 色为#597FB4，文本缩进40px，字体粗细bolder。 4．插入内容表格：行数为4，列数为1，宽度为 100%，ID标识为content，插入两段文字。 5．设置ID表格样式#content属性，大小12px， 颜色#666。 6．将文档index1.html的内部样式移动到样式表 文件travel中，再将外部样式附加到文档 index2.html中，并完成样式的应用。 素材所在位置：光盘/案例素材/ch07/练习案例- 航空旅游，效果如图7-84所示。

7.5.2练习案例-狗狗俱乐部 案例练习目标：练习设置CSS文字导航条。 案例操作要点： 1. 创建样式表文件dogclub并将所有CSS样 式存放其中。 2. 在导航条单元格中插入表格：行数列数均 为1，宽度为100%，ID标识为navi。输入导 航条文字“俱乐部介绍 会员注册 服务内容 图片展示 联系我们（中间留空格）”。

7.5.2练习案例-狗狗俱乐部 3．设置#navi a:link，#navi a:visited属性：字 体为黑体，大小为16px，颜色为#FFF，没有下划 线，文本对齐center，内边距上下为7px，左右 为25px，右边框为线型为solid，宽度为1px，颜 色为#FFF。 4．设置#navi a:hover属性，背景颜色为#900。 5．导航条制作完成后，删除导航条文字之间的空 格。 素材所在位置：光盘/案例素材/ch07/练习案例- 狗狗俱乐部，效果如图7-85所示。

7.5.3练习案例-鲜花店 案例练习目标：练习使用CSS过滤器。 案例操作要点： 1．定义类样式.img1，选择shadow滤镜，设置 参数：color=#b1b1b1，direction=135，结果 保存到index1.html中。 2．定义类样式.img2，选择DropShadow滤镜， 设置参数：color=#b1b1b1，offX=5，offY=5， positive=50，结果保存到index2.html中。 素材所在位置：光盘/案例素材/ch07/练习案例- 鲜花店，效果如图7-86所示。