答疑时间：周二下午答疑地点：信息技术系（行政楼 526 ）答疑网址： cc.sbs 李智敏

答疑时间：周二下午答疑时间：周二下午答疑地点：信息技术系（行政楼答疑地点：信息技术系（行政楼 526526 ））答疑网址：答疑网址： http://cc.sbs.edu.cnhttp://cc.sbs.edu.cn

李智敏李智敏

2

HTML 网页要展示的样式在标记内设定 <h2><font color=red> 你好 !</h2>　　样式分散在各个标记中，在更改样式时，需要逐个修改各个标记中的属性。 CSS

把网页展现的样式从网页中独立出来集中管理，如果需要改变网页样式，只需要改变样式设定部分， HTML文件本身无须更改。

5.1.1 CSS5.1.1 CSS 作用作用

5.1 CSS5.1 CSS 简介简介

3

多个网页文件共享样式文件多个样式文件套用在一个网页文件上

HTML文件 1

HTML文件 N

CSS样式文件

CSS样式文件

HTML

CSS样式文件 N

CSS样式文件 N

CSS样式文件 1

CSS样式文件 1

5.1 CSS5.1 CSS 简介简介5.1.25.1.2 样式表的使用结样式表的使用结构构

4

选择符 { 规则 }

例如： h1{ color:Blue;} 选择符 (Selector)

样式要套用的对象，可以是 HTML 标记，如 h1 。在文件 <h1>…</h1> 标记之间的内容将全部继承 h1 的全部规则。

规则 (Rule)

是样式设定的内容，是用 {} 括起来的部分，如{ color:Blue;}

见 P96-97 表 5-1 至 5-4CSS 属性

5.2 5.2 定义样式格式定义样式格式

5

5.3 5.3 应用应用 CSSCSS 样式的样式的 44 种方种方式式【例 5.1 】（ P98 ）选择符的应用

6

ClassClass 和和 idid 的区别：的区别：☺IDID 用来定义页面中大的样式，如栏目划分，顶部，正用来定义页面中大的样式，如栏目划分，顶部，正文，底部等．文，底部等． CLASSCLASS 用来定义一些比较细节的样式，用来定义一些比较细节的样式，如具体的一个菜单，一行文字等．如具体的一个菜单，一行文字等．☺一般一个对象在代码中拥有唯一的属性时建议使用一般一个对象在代码中拥有唯一的属性时建议使用 ID ID

5.3 5.3 应用应用 CSSCSS 样式的样式的 44 种方种方式式

7

语法：<HTML 标记名称 style=“ 样式属性 1 ：属性值 1 ；样式属性 2 ：属性值 2 ；…”

语法：<style type="text/css"></style>见 P98 表 5-5 选择符的定义与使用

5.3 5.3 应用应用 CSSCSS 样式的样式的 44 种方种方式式5.3.1 5.3.1 直接定义直接定义 stylestyle 属属

性性

5.3.2 5.3.2 在在 HTMLHTML 文档内定义内部样文档内定义内部样式表式表

语法语法 :: <link type =<link type =""text/csstext/css"" rel=stylesheet href= "rel=stylesheet href= " 外外

部样式文件名部样式文件名 " " >>

5.3 5.3 应用应用 CSSCSS 样式的样式的 44 种方种方式式5.3.3 5.3.3 嵌入外部样式表嵌入外部样式表

语法语法 ::<style type=<style type=""text/csstext/css"">>--></style></style>

5.3.4 5.3.4 链接外部样式表链接外部样式表

8

9

使用用使用用 CSSCSS 样式的样式的 44 种方式显示界面种方式显示界面

5.4 5.4 样式表应用案例样式表应用案例

10


【例 5.２】（ P99 ）直接在 HTML 标记中插入 style 属性，只能控制该处的样式。

5.4.1 5.4.1 直接定义直接定义 HTMLHTML 标记中的标记中的stylestyle 属性属性

11

把样式定义放在文档头部， <style></style> 标记之间定义，整个页面都以该样式显示。


【例 5.3 】（ P100 ）定义内部样式表的应用

5.4.2 5.4.2 定义内部样式表定义内部样式表

12

当多个网页具有相同样式时，可以使用样式文件（样式文件的后缀是 .css ，）把设定的样式集中起来，并存成独立的样式文件，使多个网页共享该样式文件。也可以将样式分类，使一个网页套用多个样式文件。

5.4 5.4 样式表应用案例样式表应用案例5.4.3 5.4.3 嵌入外部样式表嵌入外部样式表

13

两个样式文件： style1.css 保存文字的颜色 style2.css 保存文字的其它样式 • 建立样式文件 style1.css 文件代码清单： @CHARSET "UTF-8"; h1 { color:green;} style2.css 文件代码清单下： @CHARSET "UTF-8"; h1 { text-align:center; font-style:italic; font-family: 隶书 ; font-size:x-large; }

5.4 5.4 样式表应用案例样式表应用案例【例 5.4 】（ P100 ）定义内部样式表的应用

14

ex5_04.html 文件代码清单下：5.4 5.4 样式表应用案例样式表应用案例

15

在 HTML 文档的文件头中加入语句，建立与外部样式文件的链接。

<link rel=stylesheet type="text/css"

href=" 样式文件的 URL">

5.4.4 5.4.4 链接外部样式表链接外部样式表


16

5.4 5.4 样式表应用案例样式表应用案例【例 5.5 】（ P101 ）链接外部样式文件的 HTML 文件的

页面代码

17

精确地将网页元素定位在页面的某一个位置。定位元素：position 三种设定方式： absolute/relative/static ( 绝对位置 / 相对位置 / 静态位置 ) 。• Absolute ：对象绝对位置，原点窗口左上角 • Relative ：对象与代码中上一个对象相对位置 • Static ：静态位置，默认值，根据源代码位置顺序显示。

left: 元素的左边距。 top: 元素的顶边距。 width ：元素的宽度。 height ：元素的高度。z-index ：定义页面元素在 Z 轴上的位置， Z 轴的定义从后到前。

5.5 5.5 页面定位功能页面定位功能

18

5.5 5.5 页面定位功能页面定位功能【例 5.6 】（ P102 ）制作一个页面，在页面中使文字有

部分重叠<html><head><title> 定位技术的应用 </title><style type="text/css">span{font-size:28pt;font-family:" 隶书 "}span.level2{position:absolute;z-index:2;left:100;top:100;color:green}span.level1{position:absolute;z-index:1;left:103;top:103;color:red}span.level0{position:absolute;z-index:0;left:106;top:106;color:yellow}p.lev1{position:absolute;z-index:2;left:50;top:50;font-size:20pt;color:blue}p.lev2{position:absolute;z-index:-2;left:52;top:52;font-size:20pt;color:darkred}</style></head><body> //<span> 标签被用来组合文档中的行内元素<span class="level2">Web 技术应用基础 </span> <span class="level1">Web 技术应用基础 </span><span class="level0">Web 技术应用基础 </span><p class="lev1"> 欢迎学习 </span><p class="lev2"> 欢迎学习 </span></body></html>

<div><div> 标记与标记与 <span><span> 标记标记☺<div><div> （（ divsiondivsion ）标记是一个区块标记即）标记是一个区块标记即 <div><div> 与与 </</div>div> 之间相当于一个容器，可以容纳段落、标题、表格、图之间相当于一个容器，可以容纳段落、标题、表格、图片乃至章节、摘要和备注等各种片乃至章节、摘要和备注等各种 HTMLHTML 元素。元素。☺<span><span> 标记与标记与 <div><div> 一样，其区别在于一样，其区别在于 <div><div> 是一个块是一个块级（级（ block-levelblock-level ）元素，它包围的元素会自动换行。而）元素，它包围的元素会自动换行。而<span><span> 是一个行内元素（是一个行内元素（ inline elementsinline elements ），在它的前后），在它的前后不会换行。不会换行。☺<span><span> 标记可以包含于标记可以包含于 <div><div> 标记中，成为它的子元素标记中，成为它的子元素，而反之则不成立。，而反之则不成立。

19

5.5 5.5 页面定位功能页面定位功能

20

a:active { text-decoration: none; color: #333333} // 标签：击活状态a:hover { text-decoration: underline; color: #FF3300}// 标签：鼠标经过a:visited { text-decoration: none; color: #0000FF} // 标签：已访问a:link { // 标签：超链接

color: #FF9900; text-decoration: none;} // 相关属性： line-through （中划线）、 none 、 overline （上划线）、 underline.menufontcolor1 { //自定义：菜单栏字体

color: #333333;}.menufontcolor2 {

color: #333333;}.forminput { //自定义：表单输入组件的大小

height: 18px;border: 1px dotted;} //dotted 点线； dashed 是虚线

.formtext { //自定义：表单文本框的字体border: 1px dotted;}

.td { // 标签：单元格大小字体等border: 1px dotted;font-family: "宋体 ";font-size: 12px;color: #333333;text-decoration: none;}

BookshopBookshop 系统中系统中 Maincss.cssMaincss.css 代码清单代码清单（（ P103P103 ））

21

☺ HTNLHTNL 中中 <font face="<font face=" 字体名称字体名称 ">">☺ CSSCSS 中中

字体：字体： P{font-family:黑体 ;Arial;宋体 ;sans-serif;} 文字大小：文字大小： P{font-size:0.5}♥ 绝对单位（其显示大小与浏览器、分辨率无关）：

in （ inch ，英寸） /cm/mm/pt （印刷的点数，在一般的显示器中 1pt 相当于 1/72inch ） ;pc （ pica ， 1pc=12pt）

♥ 相对单位（其显示大小与浏览器有关）： x-small;small;medium;large;x-large;xx-large

♥ 其显示大小与显示器的大小及其分辨率有关： px ； % ；em （一个 em 是网页浏览器的基础文本尺寸的高度，一般来说 1em=16px ）。

文字颜色：文字颜色： h3{color:blue;}h3{color:#00f;}h3{color:#0000ff;}h3{color:rgb(0,0,255);}h3{color:rgb(0%,0%,100%);}

CSSCSS 文字样式文字样式

22

文字粗细文字粗细span{font-size:30px/200/bold/normal;}

文字斜体文字斜体p{font-style:italic/normal/18px/oblique;}

文字的下划线、顶划线和删除线文字的下划线、顶划线和删除线p.one{text-decoration:underline （下划线） /overline （顶划线） /line-through （删除线） /blink （闪烁， IE浏览器中不支持， Firefox支持） ;}

几种效果可以叠加使用，例 p.one{text-decoration:underline overline;}

英文字母大小写英文字母大小写p.two{text-transform:capitalize （单词首字母大写） /uppercase

（全部大写） /lowercase （全部小写） ;}


<html><html><head><head>

<title>CSS<title>CSS 控制控制 Title1</title>Title1</title><style><style>--></style></style></head></head><body><body>

<h1>Super Title CSS</h1><h1>Super Title CSS</h1></body></body></html></html>

23

设置标题设置标题 CSSCSS 样式样式 11


<title>CSS<title>CSS 控制控制 Title2</title>Title2</title><style><style>--></style></style></head></head><body><body>


24



<title>CSS<title>CSS 控制控制 Title3</title>Title3</title><style><style>--></style></style></head></head><body><body>


25



<title>CSS<title>CSS 控制控制 Title4</title>Title4</title><style><style>--></style></style></head></head>

<body><body><h1>Super Title CSS</h1><h1>Super Title CSS</h1>

</body></body></html></html>

26

设置标题设置标题 CSSCSS 样式样式 4 4 （选（选做）做）


<title>CSS<title>CSS 控制控制 Title5</title>Title5</title><style><style>--></style></style></head></head><body><body>

<h1><img src="img/bg.gif" border="0"> Super Title <h1><img src="img/bg.gif" border="0"> Super Title CSS</h1>CSS</h1></body></body></html></html>

27

设置标题设置标题 CSSCSS 样式样式 5 5 （选（选做）做）

☺段落的水平对齐段落的水平对齐P{text-align:left/right/center/justify （两端对齐） ;}

☺段落的垂直对齐方式段落的垂直对齐方式td{vertical-align:top/bottom/middle/10px/-10px;}

☺行间距和字间距行间距和字间距P.second{line-height:1.5em;} /* 行间距，相对数值，可为负数 */

28


29

☺首字放大首字放大<html><html><head><head><title><title> 首字放大首字放大 </title></title><style><style>--></style></style> </head></head><body><body>

<p<p><span>><span> 中中 </span></span> 秋节是远古秋节是远古…………方才大兴。方才大兴。 </p></p><p><p> 北宋北宋…………之欢。之欢。 </p></p>

</body></body></html></html>


☺HTMLHTML 中中<img src="a.jpg" border="5">

☺CSSCSS 中中img.test1{

border-style:solid （实线） /dotted （点画线） /dashed （虚线） ;

border-color:#FF9900; /* 边框颜色 */

border-width:5px; /* 边框粗细 */

}

30

CSSCSS 图片样式图片样式

<html><head><title> 分别设置 4 边框 </title><style></style> </head><body><img src="grape.jpg"></body></html> 31

设置图片设置图片 44 边框（选边框（选做）做）

<html> <head> <title> 合并各 CSS 值 </title><style></style></head><body>

<img src="peach.jpg" class="test1"><img src="peach.jpg" class="test2">

</body></html>

32

合并各合并各 CSSCSS 值（选值（选做）做）

☺图片缩放图片缩放img.test1{ width:70%; /* 相对宽度 */

height:110px; } /* 绝对高度 */

☺图片的对齐图片的对齐☻水平对齐<td style="text-align:left/center/right;"><img src=""></td>☻竖直对齐

♥ <p>竖直对齐 <img src="donkey.jpg" style="vertical-align:5px;"> 方式 : 5px</p>

♥ <p>竖直对齐 <img src="miki.jpg" style="vertical-align:-10px;"> 方式 : -10px</p>

♥ <p>竖直对齐 <img src="donkey.jpg" style="vertical-align:baseline;"> 方式 :baseline</p>

33

CSSCSS 图片样式图片样式

<html><head><title>竖直对齐 </title><style type="text/css"></style> </head>

34

图片竖直对齐（选做）图片竖直对齐（选做）

<body><p>竖直对齐 <img src="donkey.jpg" style="vertical-align:baseline;"> 方式 :baseline<img src="miki.jpg" style="vertical-align:baseline;"> 方式 </p>

<p>竖直对齐 <img src="donkey.jpg" style="vertical-align:bottom;"> 方式 :bottom<img src="miki.jpg" style="vertical-align:bottom;"> 方式 </p>

<p>竖直对齐 <img src="donkey.jpg" style="vertical-align:middle;"> 方式 :middle<img src="miki.jpg" style="vertical-align:middle;"> 方式 </p>

<p>竖直对齐 <img src="donkey.jpg" style="vertical-align:sub;"> 方式 :sub<img src="miki.jpg" style="vertical-align:sub;"> 方式 </p>

<p>竖直对齐 <img src="donkey.jpg" style="vertical-align:super;"> 方式 :super<img src="miki.jpg" style="vertical-align:super;"> 方式 </p>

<p>竖直对齐 <img src="donkey.jpg" style="vertical-align:text-bottom;"> 方式 :text-bottom<img src="miki.jpg" style="vertical-align:text-bottom;"> 方式 </p>

<p>竖直对齐 <img src="donkey.jpg" style="vertical-align:text-top;"> 方式 :text-top<img src="miki.jpg" style="vertical-align:text-top;"> 方式 </p>

<p>竖直对齐 <img src="donkey.jpg" style="vertical-align:top"> 方式 :top<img src="miki.jpg" style="vertical-align:top"> 方式 </p> </body> </html> 35

图片竖直对齐（选做）图片竖直对齐（选做）

<html><head><title> 图文混排 </title><style type="text/css"></style> </head> 36

图文混排（选做）图文混排（选做）

<body><img src="chunjie.jpg" border="0"><p><span> 春 </span> 节古时叫“元旦……流传下

来。 </p><p> 据《诗经》记载，……彻夜无停。” </p><p> 在我国古代……这一习惯称呼。 </p>

</body></html>

37

图文混排（选做）图文混排（选做）

38

网页：八仙过海（选做）网页：八仙过海（选做）

☺背景背景body{background-color:#5b8a00;body{background-color:#5b8a00;

background-image:url(img/a3.jpg);

background-repeat:repeat-x/repeat-y/no-repeat;

background-position:bottom right;

background-attachment:fixed; /*固定背景图片 */

}

☺以上代码可以统一用一句以上代码可以统一用一句 backgroundbackground 属性代替属性代替body{body{

background:#5b8a00; url(img/a3.jpg); repeat-x;fixed; 300px 25px; }

39

用用 CSSCSS 设置网页中的背景设置网页中的背景

40

用用 CSSCSS 设置网页中的背景设置网页中的背景

<style></style>

41

例：添加多个背景图片（选例：添加多个背景图片（选做）做）

42

背景综合应用一：我的个人主页（选背景综合应用一：我的个人主页（选做）做）

43

背景综合应用二背景综合应用二《《念奴娇念奴娇 · · 赤壁怀古赤壁怀古》》

注意：先将文字的背景色及内容删掉，得到文字部分的区域背景，将这部分背景取出，用 Photoshop调整到合适的亮度和颜色，再将此文字部分的背景图片添加到文字块中。

<html><head> <title>念奴娇赤壁怀古 </title><style></style> </head> 44


<body> <div style="height:90px;"></div><div class="content">

大江东去 <br>浪淘尽 <br>千古风流人物 <br> 故垒西边人道是 <br> 三国周郎赤壁 <br> 乱石穿空 <br>惊涛拍岸 <br>卷起千堆雪 <br> 江山如画 <br> 一时多少豪杰 <br>遥想公谨当年 <br>小乔初嫁了 <br>雄姿英发 <br> 羽扇纶巾谈笑间 <br>强虏灰飞烟灭 <br>故国神游 <br> 多情应笑 <br>我早生华发 <br> 人生如梦 <br> 一尊还酹江月 <br>

</div></body></html>

45


<html><head><title>年度收入 </title><style></style> </head><body> <table border="1" class="datalist">…

46

表格样式（选做）表格样式（选做）

.datalist{border:1px solid #0058a3; /* 表格边框 */font-family:Arial;border-collapse:collapse; /* 边框重叠，单线边框 */background-color:#eaf5ff; /* 表格背景色 */font-size:14px; }

.datalist caption{padding-bottom:5px;font:bold 1.4em;text-align:left; }

.datalist th{ border:1px solid #0058a3; /* 行名称边框 */background-color:#4bacff; /* 行名称背景色 */color:#FFFFFF; /* 行名称颜色 */font-weight:bold;padding-top:4px; padding-bottom:4px;padding-left:12px; padding-right:12px;text-align:center; }

.datalist td{ border:1px solid #0058a3; /* 单元格边框 */text-align:left;padding-top:4px; padding-bottom:4px;padding-left:10px; padding-right:10px; }

.datalist tr.altrow{background-color:#c7e5ff;} /* 隔行变色 */47

隔行变色表格（选做）隔行变色表格（选做）

48

隔行变色表格（选做）隔行变色表格（选做）

<html><head> <title>Calendar</title><style></style> </head><body><table class="clmonth">……<tr> <td class="previous">31</td>

<td class="active">1<ul> <li>五棵松摄影城买镜头 </li>

<li>完成微积分作业 </li></ul> </td>……

</tr>……</table></body></html>

50

表格样式表格样式————日历（选做）日历（选做）

51

AlphaAlpha 通道滤镜通道滤镜11<html> <head> <title>alpha滤镜 </title>

<style></style> </head><body><img src="building1.jpg" border="0">  <img src="building1.jpg" border="0" class="alpha"></body></html>

52

AlphaAlpha 通道滤镜通道滤镜 2 2 （选（选做）做）<html> <head> <title>alpha滤镜 </title>

<style></style> </head><body><img src="building2.jpg" border="0">  <img src="building2.jpg" border="0" class="alpha"></body> </html>

53

AlphaAlpha 通道滤镜通道滤镜 3 3 （选（选做）做）<html> <head> <title>alpha滤镜 </title>


margin:10px;}.alpha1{

filter:alpha(opacity=100,finishopacity=0,style=2);/* style 为 2 ，圆形渐变，中间不透明，四周透明 */

}.alpha2{

filter:alpha(opacity=0,finishopacity=80,style=2);}--></style> </head><body> <center><img src="building3.jpg"><br><br><img src="building3.jpg" class="alpha1"><img src="building3.jpg" class="alpha2"></center> </body></html>

54

AlphaAlpha 通道滤镜通道滤镜 44 （选（选做）做）<html> <head> <title>alpha滤镜 </title>


margin:10px;}.alpha1{

filter:alpha(opacity=100,finishopacity=0,style=3);/* style 为 3 ，矩形渐变，中间不透明，四周透明 */

}.alpha2{

filter:alpha(opacity=0,finishopacity=100,style=3);/* 反之 */

}--></style> </head><body> <center><img src="strawberry.jpg"><img src="strawberry.jpg" class="alpha1"><img src="strawberry.jpg" class="alpha2"></center> </body> </html>

<html> <head> <title> 体验 CSS</title><style type="text/css"></style> </head><body><div id="title">CSS简介 </div>

<div id="content"> <img src="bike.jpg" border="0">CSS （ Cascading Style Sheet ），……层出不穷。 </div>

</body></html>

55

AlphaAlpha 通道滤镜通道滤镜 5 5 （选（选做）做）

<html> <head> <title>Blur滤镜 </title><style></style> </head><body><img src="building9.jpg"> <img src="building9.jpg" class="blur"></body></html> 56

模糊（模糊（ BlueBlue ）滤镜）滤镜

<html> <head> <title>MotionBlur滤镜 </title><style></style> </head><body><img src="liuxiang.jpg">  <img src="liuxiang.jpg" class="motionblur"></body> </html> 57

运动模糊（运动模糊（ Motion BlueMotion Blue ）滤镜（选）滤镜（选做）做）

<html> <head> <title>chroma滤镜 </title><style></style> </head><body><img src="tiger.gif">  <img src="tiger.gif" class="chroma"></body></html>

58

透明色（透明色（ ChromaChroma ）滤镜）滤镜

<html> <head> <title>DropShadow阴影效果 </title><style></style> </head><body>

<span>CSS滤镜 </span></body></html>

59

下落的阴影（下落的阴影（ DropshadowDropshadow ）滤镜）滤镜 1 1 （选做）（选做）

<html> <head> <title>DropShadow阴影效果 </title><style></style> </head><body><img src="fishing.gif"> <img src="fishing.gif" class="drop1">   <img src="fishing.gif" class="drop2"></body> </html>

60

下落的阴影（下落的阴影（ DropshadowDropshadow ）滤镜）滤镜 2 2 （选做）（选做）

<html> <head> <title>Flip翻转 </title><style></style> </head><body><img src="building4.jpg"><img src="building4.jpg" class="flip1"><br><img src="building4.jpg" class="flip2"><img src="building4.jpg" class="flip3"></body> </html>

61

翻转变换（翻转变换（ FlipFlip ）滤镜）滤镜

<html> <head> <title>Glow发光特效 </title><style></style> </head><body>

<span>CSS发光滤镜 </span></body> </html>

62

光晕（光晕（ GlowGlow ）滤镜）滤镜 1 1 （选（选做）做）

<html> <head> <title>Glow发光特效 </title><style></style> </head><body>

<img src="girl.gif"><img src="girl.gif" class="glow">

</body></html> 63

光晕（光晕（ GlowGlow ）滤镜）滤镜 2 2 （选（选做）做）

<html> <head> <title>Gray灰度 </title><style></style> </head><body>

<img src="building5.jpg"> <img src="building5.jpg" class="gray">

</body></html></html>

64

灰度（灰度（ GrayGray ）滤镜（选做））滤镜（选做）

<html> <head> <title>Invert反色 </title><style></style> </head><body>

<img src="building6.jpg"> <img src="building6.jpg" class="invert">

</body></html>

65

反色（反色（ InvertInvert ）滤镜（选）滤镜（选做）做）

<html> <head> <title>Mask遮罩 </title><style></style></head><body>

<img src="muma.gif"> <img src="muma.gif" class="mask">

</body></html>

66

遮罩（遮罩（ MaskMask ）滤镜）滤镜

<html> <head> <title>shadow阴影 </title><style></style> </head><body>

<img src="baby.gif"> <img src="baby.gif" class="shadow"> <img src="baby.gif" class="drop">

</body> </html> 67

阴影（阴影（ ShadowShadow ）滤镜（选）滤镜（选做）做）

<html> <head> <title>X-ray滤镜 </title><style></style> </head><body>

<img src="building7.jpg"> <img src="building7.jpg" class="xray"> <img src="building7.jpg" class="gray">

</body> </html> 68

XX 射线（射线（ X-rayX-ray ）滤镜（选）滤镜（选做）做）

<html> <head> <title>浮雕滤镜 </title> <style> </style> </head><body> <span class="emboss" >浮雕 Emboss滤镜 </span>

<span class="engrave">浮雕 Engrave滤镜 </span></body></html>

69

浮雕纹理（浮雕纹理（ EmbossEmboss 和和 EngraveEngrave ）滤镜）滤镜 11（选做）（选做）

70


<html> <head> <title>浮雕滤镜 </title><style> </style> </head>

72

波浪（波浪（ WaveWave ）滤镜（选做））滤镜（选做）

<body><span class="wave1">波浪Wave</span><span class="wave2">波浪Wave</span><span class="wave3">波浪Wave</span>

</body></html>

73

波浪（波浪（ WaveWave ）滤镜（选做））滤镜（选做）

<html> <head> <title> 三个滤镜同时使用 </title><style></style> </head><body>

<img src="lotus.jpg"><br><img src="lotus.jpg" class="three">

</body></html>

74

三种滤镜同时使用三种滤镜同时使用

75

1. CSS 作用、格式 2. 应用 CSS 样式的 4 种方式

（ 1 ）直接定义 style 属性。（ 2 ）在 HTML 文档内定义内部样式表。（ 3 ）嵌入外部样式表。（ 4 ）链接外部样式表。

3. 页面定位功能 4. 样式应用

（ 1 ）文字样式（ 2 ）图片样式（ 3 ）表格样式（ 4 ）滤镜效果

小　结小　结

Documents

答疑时间：周二下午 答疑地点：信息技术系（行政楼 526 ） 答疑网址： cc.sbs 李智敏

答疑时间：周二下午答疑地点：信息技术系（行政楼 526 ）答疑网址： cc.sbs 李智敏