网页设计与制作
3．CSS样式的应用
本章练习题
1. 选择题 （1）CSS样式选择器的类型有（ ）。 A．标签、类、文本 B．类、标签、图像 C．类、标签、高级 D．FLASH、类、ID （2）在“页面属性”设置中，不能设置的样式为（ ）。 A．背景颜色 B．背景图像 C．字体大小 D．图像边
框 （3）对特定ID的属性设置CSS样式时，选择器命名时，在
效果 ❖ Xray－设置X光效果
5.3.6 CSS样式进阶
利用CSS＋DIV进行网页布局的实例
利用CSS样式还可以代替表格进行网页布局，本小节讲解 【例5.5】如何利用DIV标签和CSS样式的定义进行网页的排版。 制作过程如下： 1、分析架构，如图所示。 2、模块拆分
一个总的DIV标签，它包含了4个DIV标签。Container最大 的容器，将所有内容包含在内。Width：778px。Header网 站头部图标，包含了一幅广告横幅，Width：778px， Height110px。 Leftnav左侧导航条，Width：200，浮动为左对齐。 Content网站的主要内容。 Width: 480px。Footer 网站底 栏，包含版权信息等。
5.3.4 样式表的实例应用4：动态链接样式
简单的CSS链接样式可以在页面属性中的“链接” 选项卡中设置，5.1节中已经讲过。
在【例5.6】中，建立较为复杂的CSS链接样式， 当鼠标经过链接文字时，文字颜色会变色、字体 样式变粗、出现背景颜色、文字修饰有下划线等。 这里还讲解两个重要的知识点：如何建立CSS链 接样式和如何调用外部CSS样式表。
该实例主要采用了div标签＋css样式，涉及到的知识点 有以下几点： ❖ 分析构架：画出构架图； ❖ 模块拆分：分别定义Div的CSS样式； ❖ 在网页中插入Div标签，在Div中填充网页内容； ❖ 总体调整：色彩及内容调整，适当修改CSS样式。
5.2 使用CSS样式表
❖ 5.2.1 CSS样式表概述
5.3.5 样式的实例5：滤镜效果的应用
CSS滤镜并不是浏览器的插件，也不符合CSS标准，而 是微软公司为增强浏览器功能而特意开发的并整合在IE浏 览器中的一类功能集合。由于浏览器IE有着广泛的使用范 围，因此CSS滤镜也被广大设计者所喜爱。
CSS滤镜可以为样式控制的对象指定特殊效果。
✿注意：CSS滤镜只能作用于有区域限制的对象，如表格、 单元格、图片等，而不能直接作用于文字，所以把所需要 增加特效的文本事先放在单元格或层中，然后对单元格或 层应用CSS样式。
【例5.6】应用式设计出图文混排效果， 如图所示。
此实例所涉及到的知识点是CSS样式的创建和 应用，主要包括以下几个方面：
背景样式、文本及列表样式、方框与边框样式、 动态链接样式；
建立单独的CSS文件，应用于多个网页。
5.3.1 样式表的应用实例1：背景样式 的应用
在【例5.6】中，上方桔黄色的横条其实是重定义了 body标签的网页背景图像，背景图像横向重复，网页元 素与页边距也进行了设置，其操作步骤如下：
1、样式表的使用 CSS样式表的使用常用的方法有以下两种： 页面内嵌法。将样式表代码直接写在HTML标签的 head区。 外部链接法。将样式表写在一个独立的后缀名为CSS 文件中，在需要应用CSS样式的网页中链接该文件，在 页面<head>和</head>之间用以下代码调用。 <link href="css/master.css" rel="stylesheet" type="text/css" />
3.定义页面属性和定义特定 Id 属性的DIV标签的CSS样 式。
4.插入网页元素和调整页面结构
最后，保存网页，浏览网页效果。
本章小结
本章主要介绍了CSS样式的创建与应用，通过CSS样式 的使用，使得网页样式更加丰富多彩。
1．CSS的概念： CSS样式、样式的分类、CSS的语法结 构等
2．CSS样式的创建
在【例5.6】中，插入一幅图像，通过CSS样式的应用， 实现了图文混排的效果。该实例中主要设置了方框的浮动 和边界及填充的距离，实现了图像与文本之间的环绕，还 设置了边框，添加了一个虚线边框修饰图像。这里首先定 义了一个类的CSS规则，然后将此类应用于某个图像上。 ❖ 图像边距的设置 ❖ 图像的边框的设置
面板，单击右下角的“新建CSS规则”按钮，或选择 “文本”菜单｜“CSS样式”｜“新建”命令，弹出 “新建CSS规则”对话框.
5.2.2 在Dreamweaver中定义CSS
选择器类型有以下三种： （1） 类
自定义 CSS 规则，它的特点是灵活多变，可以重复 将样式应用于网页元素。在应用时，它会在HTML标签内 加入一个类（class）的定久来规定标签中的格式。比如 将类的样式mystyle定义于某个标题，那么代码为： <h1 class=”mystyle”>标题1应用自定义的样式 </h1> （2） 标签
1.建立链接CSS样式
单击“CSS样式”面板中的“新建CSS规则”按钮，选 择器类型：高级，单击“选择器”下拉列表，分别选择 a:llink（链接后效果）、a:visited（访问后效果）、 a:hover（鼠标经过效果），分别定义其样式。
2. 调用CSS样式文件
其它网页要应用刚才建立的CSS样式文件，如何 调用呢？单击“CSS样式”面板中的“附加样式 表”按钮，弹出“链接外部样式表”的对话框， 在“文件/URL”文本框中输入外部CSS文件路径 和文件名，添加为选择“链接”选项，将新建的 样式文件链接到此文件，如图所示。
❖ Alpha—透明效果 ❖ Blur—模糊效果 ❖ Chroma—将指定的颜色
设置成透明 ❖ Dropshadow—投影效果 ❖ FlipH—进行水平翻转 ❖ FlipV－进行垂直翻转 ❖ Glow－发光效果
❖ Grayscale－产生灰阶 ❖ Invert－反转底片效果 ❖ Light－灯光投影 ❖ Mask－遮罩 ❖ Shadow－阴影效果 ❖ Wave－水平与垂直波动
《网页设计与制作》
第五章 CSS 样式表
5.1 CSS 样式的应用 5.2 使用CSS样式表 5.3 使用CSS 样式表的网页实例
CSS（Cascading Style Sheet），中文译为层 叠样式表。是用于控制网页样式并允许将样式信息 与网页内容分离的一种标记性语言。
【本章学习目的】 本章通过多个CSS样式的应用实例，重点介绍了
重新定义指定标签的外观，例如：创建或更改 h1 标 签的 CSS 样式时，所有用 h1 标签设置了格式的文本都 会立即更新，实现了批量快速更改格式的特点。
5.2.2 在Dreamweaver中定义CSS
（3） 高级
在CSS 选择器中，它的功能最为强大，可以定义超链接 的特效，定义特定元素组合的格式设置（例如： body,table,td，用逗号隔开），定义嵌套的样式（td img 空格隔开），定义包含特定 id 属性的标签的格式 设置。
定义的位置有以下三种情况： •选择“仅为该文档”，此时CSS样式的代码会嵌套 在网页<head>和</head>标签中。 •选择“新建样式表文件”，则弹出“保存样式表文 件为”对话框，如图5.5所示，选择样式文件的存储 路径和文件名，单击“保存”按钮，将CSS样式代 码单独存放在一个CSS文件。 •选择“已有的某CSS文件”，将新建的CSS规则写 入已有的css文件中。 比如：选择定义在“仅对该文档”，单击“确定” 按钮后，弹出“H1的CSS规则定义”对话框，如图 所示，在对话框中进行各项的格式设置，然后单击 “确定”按钮。
使用CSS样式表的另一个优点是可以利用同一个样式 表对整个站点的具有相同性质的网页元素进行格式修饰， 当需要更改样式设置时，只要在这个样式表中修改，而不 用对每个页面逐个进行修改，简化了格式化网页的工作。
5.1 利用CSS 样式表的网页实例
【例5.5】利用CSS样式还可以代替表格进行网页布局， 这是目前较为流行页面排版方式，如图所示。
2.编辑和删除CSS样式
创建CSS样式后，如果要修改CSS样式，在 “CSS样式”面板中，单击“CSS样式”面板右下 角的“编辑”按钮，进入“CSS规则定义”的对话 框，可进行修改。
某个CSS样式不再需要时，在“CSS样式”面板 中，首先选中某个样式，单击CSS样式面板右下角 的“删除”按钮。
5.3 CSS 样式的应用
步骤１ 单击“窗口”菜单｜“CSS样式”命令，打开 “CSS样式”面板，单击右下角的“新建CSS规则”按钮， 弹出“CSS规则定义”的对话框，选择“选择器类型”为 “标签”，在“标签”下拉列表中选择body，定义在： 选择“仅为该文档”，单击“确定”按钮，弹出 “body 的CSS规则定义”的对话框， 单击“背景”选项卡，设置背景图像为：images/bg.gif， 单击“重复”下拉列表，选择“横向重复”命令。
CSS样式表功能、定义CSS规则的方法，应用内嵌 式样式表和链接外部样式表的方法等，通过本章的 学习，读者应了解CSS样式表的用途，掌握创建和 应用CSS样式表的方法，学会用CSS样式表进行网 页的美化和网页布局。
5.1 利用CSS 样式表的网页实例
CSS样式表是由一系列样式选择器和CSS属性组成， 它支持字体属性、颜色和背景属性、文本属性、边框属性、 列表属性以及精确定位网页元素属性等，增强了网页的格 式化功能。
1、字体的样式设置 在“CSS规则定义”对话框的“类型”选项卡中设置
。 2、文本段落的样式设置 在“CSS规则定义”对话框的“区块”选项卡，设置。 3、列表的样式设置 类型：设置项目符号或编号的外观。 项目符号图像：指定图像替代项目符号的样式，美
化项目符号。 重定义项目列表（标签为UL)。
5.3.3 样式表的实例应3：方框和边框 样式的应用
