HTML语言教学课件

《HTML语言教学课件》由会员分享，可在线阅读，更多相关《HTML语言教学课件（362页珍藏版）》请在金锄头文库上搜索。

1、HTML语言语言一一 HTML入门入门1.1 1.1 网络的基本概念网络的基本概念 n n计算机网络就是利用通讯线路将分布在不同地点的具有独计算机网络就是利用通讯线路将分布在不同地点的具有独立功能的多台计算机系统相互连接，按照网络协议进行通立功能的多台计算机系统相互连接，按照网络协议进行通信和实现资源共享的系统。信和实现资源共享的系统。n n网络协议：网络中进行通信的规则或约定网络协议：网络中进行通信的规则或约定什么是网页和网站什么是网页和网站 n n什么是网页n n什么是网站 什么是网页什么是网页 网页是由网页是由HTMLHTML（超级文本超级文本标识语言）或者标识语言）或者其他语言编写的，

2、其他语言编写的，通过通过IEIE浏览器编浏览器编译后供用户获取译后供用户获取信息的页面，它信息的页面，它又称为又称为WebWeb页，页，其中可包含文字、其中可包含文字、图像、表格、动图像、表格、动画和超级链接等画和超级链接等各种网页元素。各种网页元素。 什么是网站什么是网站 网站就是一个或多个网页的集合。从广义上讲，网站就是当网页发布到Internet上以后，能通过浏览器在Internet上访问的页面 。n n职能网站n n专业网站n n个人网站 n n门户网站网页的分类网页的分类 n n按所处位置分类 n n按表现形式分类 按所处位置分类按所处位置分类 按网页在网站中所处的位置可将网页分为主

3、页和子页两类。按表现形式分类按表现形式分类 按网页的表现形式可将网页分为静态网页、动态网页和交互式网页。静态网页：只能静态网页：只能观看，不能与网观看，不能与网页交流页交流按表现形式分类按表现形式分类 按网页的表现形式可将网页分为静态网页、动态网页和交互式网页。动态网页：可以实动态网页：可以实时地发生变化，也时地发生变化，也可以根据用户的操可以根据用户的操作发生一定的变化作发生一定的变化交互式网页：一方面用户可以提供一定的信息给网站，网交互式网页：一方面用户可以提供一定的信息给网站，网站根据实际需要，保留用户的信息，如网上注册，另一方站根据实际需要，保留用户的信息，如网上注册，另一方面，网站可

4、以自动收集用户的浏览信息面，网站可以自动收集用户的浏览信息网页中的常用术语网页中的常用术语 n n万维网（www） n n浏览器 n n统一资源定位符（URL） n n文件传输协议（FTP） n nIP地址 n n域名 n n超级链接 n n超级文本标记语言（HTML） 万维网（万维网（wwwwww） 万维网（www）是World Wide Web的中文简称，也称为3W网，它的本质是一种基于超级文本技术的交互式信息浏览检索工具，是Internet提供的应用最普及、功能最丰富、使用方法最简便的信息服务，用户可通过它在Internet上浏览、编辑、传递超文本格式的文件（即.html格式文件）。浏览

5、器浏览器 浏览器是用于阅读网页中信息的一种软件工具，就像使用电脑必须有操作系统一样。 n nInternet Explorer（IE） n nNetscape Navigator（NE） n n腾讯TT浏览器 统一资源定位符（统一资源定位符（URLURL） URL（Uniform Resource Locator）主要是用来指定协议（如HTTP或FTP）以及对象、文档、万维网网页或其他目标在Internet的位置和存取方式。 n n通信协议 n n主机名n n所要访问的网页路径及名称 文件传输协议（文件传输协议（FTPFTP） FTP（File Transfer Protocol）是一种广泛使

6、用的文件传输协议，是快速、高效和可靠的信息传输方法。 FTP是基于客户/服务器模型的TCP/IP的应用，所以只要在客户端和服务器之间建立了TCP/IP连接，无论两台电脑的位置远近、连接方式的异同以及使用的操作系统的异同，都能通过FTP协议进行文件的传输。 IPIP地址地址 IP地址用来标识连接到Internet上电脑的指定编号，每一个IP地址对应一台电脑，这与用电话号码标识电话网络中的电话相同。 电脑识别的IP地址由32位二进制数值组成，电脑上以十进制数值来显示，一组数值分为4部分，每一部分均不能大于255，中间用“.”分隔，如61.139.2.69。 域名域名 域名就是常说的网址，它也具有惟

7、一性，如百度的网址、网易的网址等就是一个域名，域名由汉语拼音或英文字符加上数字表示，在访问网络时，域名将通过域名服务器转换成IP地址，这种转换是在后台完成的。超级链接超级链接 超级链接是网页中最常用的元素之一，网页就是通过无数的超级链接才能组成一个网站。 超级链接可以链接到网站内部页面、对象，也可以链接到其他网站，大大方便了用户在各个页面对象之间实现跳转。 1.3 HTML简介1.3.11.3.1什么是什么是HTMLHTMLn nHTML (HTML (HyperTextMark-upLanguageHyperTextMark-upLanguage) )称为超文本标记语言，称为超文本标记语言，

8、目前版本为目前版本为4.0. HTML4.0. HTML语言用于描述超文本中内容的显示语言用于描述超文本中内容的显示方式方式, ,是一种描述性的语言是一种描述性的语言, ,而不是一种编程语言而不是一种编程语言, ,利用利用HTML HTML 标记来控制文字的大小、颜色、图片的尺寸、位置标记来控制文字的大小、颜色、图片的尺寸、位置等等 1.3.2 1.3.2 创建创建HTMLHTML文件文件 HTMLHTML文件的本质是一个文本文件，是扩展名为文件的本质是一个文本文件，是扩展名为”. .htmhtm”或或”.html”.html”的文本文件的文本文件, ,因此可以利用文本编辑软件创建、因此可以利

9、用文本编辑软件创建、编辑。最简单的文本编辑软件就是记事本，可以在记事本编辑。最简单的文本编辑软件就是记事本，可以在记事本中编写中编写HTMLHTML代码代码 创建第一个创建第一个HTMLHTML文件文件htmlhtml文件文件HTMLHTML欢迎你！欢迎你！ 1.3.3 HTML1.3.3 HTML文件结构文件结构 , , , , , , , HTML HTML 文件的正文写在这里文件的正文写在这里. . . n n格式说明：格式说明：HtmlHtml语言使用标志对的方法编写文件，既简单又方便，它通语言使用标志对的方法编写文件，既简单又方便，它通常使用常使用 来表示标志的开始和结束来表示标志的

10、开始和结束( (例如例如标志对标志对) )，因此在，因此在HtmlHtml文档中这样的标志对文档中这样的标志对都必须是成对使用的都必须是成对使用的 1.1.html 标志用于标志用于HtmlHtml文档的最前边，用来标识文档的最前边，用来标识HtmlHtml文档的开始。而文档的开始。而标志恰恰相反，它放在标志恰恰相反，它放在HtmlHtml文档的最后边，用来标识文档的最后边，用来标识HtmlHtml文档的结束，两个标志必须文档的结束，两个标志必须一块使用。一块使用。 2 2. 和和构成构成HtmlHtml文档的开头部分，在此文档的开头部分，在此标志对之间可以使用标志对之间可以使用、等等标志对，

11、这些标志对都是描述等等标志对，这些标志对都是描述HtmlHtml文档相关文档相关信息信息的标志对，的标志对，标志对之间标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。一块使用。 3 3. 是是HtmlHtml文档的主体部分，在此标文档的主体部分，在此标志对之间可包含志对之间可包含、等等等众多的标志，它们所定义的文本、图像等将会在浏览器等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。的框内显示出来。两个标志必须一块使用。4 4. 浏览器窗口最上边蓝色部分显示的文本浏览器窗口最上边蓝色部

12、分显示的文本信息信息, ,是网页的是网页的“主题主题”, ,要显示网页的主题很简单，只要在要显示网页的主题很简单，只要在标志对之间加入您要显示的文本即可。标志对之间加入您要显示的文本即可。注意：注意：标志对只能放在标志对只能放在标标志对之间。志对之间。 n n例：例： HtmlHtml文档中基本标志的使用文档中基本标志的使用显示在浏览器最上边的标题显示在浏览器最上边的标题 body =red text=blue红色背景、蓝色文本红色背景、蓝色文本 n n热身运动热身运动例例1 1：注释标记：注释标记注释标记注释标记!-正文正文 n n例例2 2：标题标记：标题标记标题标记标题标记以下为标题样式

13、：以下为标题样式：H1H1标题大小标题大小H2H2标题大小标题大小H3H3标题大小标题大小H4H4标题大小标题大小H5H5标题大小标题大小H6H6标题大小标题大小h7h7标题大小标题大小 n n例例3 3：设置文字颜色：设置文字颜色字体颜色标记字体颜色标记这是蓝色文字这是蓝色文字 n n例例4 4：蓝色粗斜字体：蓝色粗斜字体蓝色粗斜字体蓝色粗斜字体注意这里文字字体样式注意这里文字字体样式注意：标记的相互嵌套，共同控制最里面的文字的显示方式注意：标记的相互嵌套，共同控制最里面的文字的显示方式 n n例例5 5：插入图片标记：插入图片标记插入图片标记插入图片标记我也要学习制作网页我也要学习制作网页

14、img =01.jpg随时注视时代前沿，把握今天迈向明天随时注视时代前沿，把握今天迈向明天 说明说明:图片插入标记图片插入标记( (单个标记单个标记) )，& &代表图片的代表图片的路径或直接是图片名路径或直接是图片名, ,图片名扩展名也要加上图片名扩展名也要加上二、二、 HTML中文字的使用中文字的使用n n2.1 2.1 对文字的编排对文字的编排例例1 1：文字的普通显示：文字的普通显示文字编排文字编排子曰子曰: :“学而时习之，不亦说乎？学而时习之，不亦说乎？ 有朋自远方来，不亦乐乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？人不知而不愠，不亦君子乎？”说明：说明：一般在一般在H

15、TMLHTML文件里，无论输入多少空格（按空格键）都将被视为文件里，无论输入多少空格（按空格键）都将被视为一个空格，任何回车操作（按一个空格，任何回车操作（按EnterEnter键）都是无效的，因为浏览器不能识键）都是无效的，因为浏览器不能识别输入的空格或回车，它只能按照别输入的空格或回车，它只能按照HTMLHTML标记来执行标记来执行 例例2 2：空格和换行的显示：空格和换行的显示文字的空格、回车等使用文字的空格、回车等使用&   nbsp;  ;子曰子曰: :“学而时习之，不亦说乎？学而时习之，不亦说乎？有朋自远方来，不亦乐乎？有朋自远方来，不亦乐乎？ 人不知而

16、不愠，不亦君子乎？人不知而不愠，不亦君子乎？”说明：说明：&  nbsp: :空格符号，输入显示一个空格空格符号，输入显示一个空格:换行标记，将文字换行显示，是一个单个使用的标记，换行标记，将文字换行显示，是一个单个使用的标记，效果同效果同 按按“Enter”Enter”键键 n nP P标记换行标记换行文字的空格、回车等使用文字的空格、回车等使用&   nbsp;  ;子曰子曰:“学而时习之，不亦说乎？学而时习之，不亦说乎？ 有朋自远方来，不亦乐乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？人不知而不愠，不亦君子乎？”说明：说明：；段落标记，除同段

17、落标记，除同一样换行外，还用一空白行一样换行外，还用一空白行间隔，效果如同按连续按两下间隔，效果如同按连续按两下“Enter”Enter”。标记也可单标记也可单独使用独使用, ,但不建议用但不建议用 n n例例3:3:文字单行显示文字单行显示强制不换行强制不换行子曰子曰: :“学而时习之，不亦说乎？学而时习之，不亦说乎？有朋自远方来，不亦乐乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？人不知而不愠，不亦君子乎？” 子曰子曰: :“学而时习之，不亦说乎？学而时习之，不亦说乎？有朋自远方来，不亦乐乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？人不知而不愠，不亦君子乎？”/ 说明说明

18、: :默认情况下默认情况下, ,文字随浏览器窗口大小变化换行显示文字随浏览器窗口大小变化换行显示, ,采用采用 标记标记, ,不管窗口大小如何变动不管窗口大小如何变动, ,文字都以一行显示文字都以一行显示 n n例例4:4:文字居中显示文字居中显示居中显示居中显示凉州曲凉州曲 王翰王翰葡萄美酒夜光杯，葡萄美酒夜光杯，欲饮琵琶马上催。欲饮琵琶马上催。醉卧沙场君莫笑，醉卧沙场君莫笑，古来征战几人回。古来征战几人回。说明说明: :居中标记居中标记作用是将文字以居中对齐方式显示作用是将文字以居中对齐方式显示 n n例例5:5:文字段落的缩进文字段落的缩进文字的缩进文字的缩进凉州曲凉州曲 王翰王翰葡萄美

19、酒夜光杯，葡萄美酒夜光杯， 欲饮琵琶马上催。欲饮琵琶马上催。/ 醉卧沙场君莫笑，醉卧沙场君莫笑， 古来征战几人回。古来征战几人回。/ 说明说明: : 右缩进标记右缩进标记, ,将某段文字向右缩进方式显示将某段文字向右缩进方式显示, ,同同时用空白行间隔时用空白行间隔. .注意注意: :不能与不能与标记嵌套使用标记嵌套使用 n n标记属性的应用标记属性的应用例例1:1:段落位置的控制段落位置的控制段落对齐方式段落对齐方式居中段落居中段落靠左段落靠左段落靠右段落靠右段落说明说明说明说明: : : :alignalign属性名属性名, ,控制文字的显示位置控制文字的显示位置,”center”,”ce

20、nter”、”left”left”、”right”right”为属性的属为属性的属性值性值 n n一般来讲，一般来讲，htmlhtml的标记有下列三种表示方法：的标记有下列三种表示方法：1)1) 文件或超文本文件或超文本 2)2)文本成超文本文本成超文本 3)3) 第三种写法仅用于一些特殊的标记第三种写法仅用于一些特殊的标记, ,比如分段标记比如分段标记P P，它仅仅通知它仅仅通知wwwwww浏览器在此处分段，因而不需要界定作用浏览器在此处分段，因而不需要界定作用范围，范围， 所以它没有结尾链接签。所以它没有结尾链接签。 n n另外：另外：大多数大多数HTMLHTML标记中都可以加入属性控制，

21、其作用是帮标记中都可以加入属性控制，其作用是帮HTMLHTML标标记进一步控制记进一步控制HTMLHTML文件的内容，一个标记可以有多个属性，文件的内容，一个标记可以有多个属性，属性及其属性值不分大小写属性及其属性值不分大小写 格式：格式： 2”.多个属性间用空格隔开多个属性间用空格隔开, ,不同的标记可以使用相同的属性不同的标记可以使用相同的属性 n n例例2:2:标题文字的位置控制标题文字的位置控制多标记同一属性多标记同一属性 这些是标题这些是标题 居中标题居中标题11 靠左标题靠左标题22 靠右标题靠右标题33 n n例例3:3:设置网页的背景设置网页的背景主体标记的属性主体标记的属性b

22、ody 小孩与大人小孩与大人说明说明说明说明:background:background控制网页背景图片控制网页背景图片, ,属性值为图片路径与图属性值为图片路径与图片名片名 n n标志中还可以有以下属性：标志中还可以有以下属性：属性用途示例设置背景颜色。红色背景设置文本颜色。蓝色文本设置链接颜色。链接为蓝色设置已使用的链接的颜色。设置正在被击中的链接的颜色。 说明:以上各个属性可以结合使用，如。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色，如#ff0000对应的是红色。此外，还可以使用Html语言所给定的常量名来表示颜色： Black, Olive, Te

23、al, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, Green, Purple, Silver, Yellow, Aqua ，如表示标志对中的文本使用蓝色显示在浏览器的框内。 n n例例4: 4: 水平分割线的设置水平分割线的设置水平分割线水平分割线body =yellow 秋歌秋歌 曾子曰：曾子曰： 慎终，追远，民德归矣。慎终，追远，民德归矣。 说明说明: :水平分割线水平分割线,单个使用单个使用, ,用来在网页上画出一条水用来在网页上画出一条水平线平线, ,用以分割不同的文字或其它网页组件用以分割不同的文字或其它网页组件：可设置水平线粗细可设

24、置水平线粗细, #, #为数字为数字, ,以像素为单位以像素为单位：设置水平线宽度，像素或百分比设置水平线宽度，像素或百分比 #=left, right,center #=left, right,center：对齐方式对齐方式hr :设置为实心线条设置为实心线条：设置水平线颜色设置水平线颜色NoshadeNoshade: :不显示水平线的立体阴影不显示水平线的立体阴影 n n例例5:noshade5:noshade属性的使用属性的使用 水平分割线水平分割线 hr size=10 width=300 align=center n n例例6:6:属性的就近原则属性的就近原则就近显示就近显示body

25、 观察文字颜色观察文字颜色font 观察文字颜色观察文字颜色说明说明: :当出现两个属性同时控制网页中相同的组件时当出现两个属性同时控制网页中相同的组件时, ,组件离组件离哪个标记近哪个标记近, ,就由哪个标记的属性控制就由哪个标记的属性控制 n n2.22.2 多种多样的网页文字多种多样的网页文字文字字体、颜色的设置文字字体、颜色的设置字体的大小、颜色字体的大小、颜色font =6凉州曲凉州曲font=green size=4王翰王翰&   nbsp;  ;葡萄美酒夜光杯，葡萄美酒夜光杯，&   nbsp;  ;欲饮琵琶马上催。欲饮琵琶

26、马上催。&   nbsp;  ;醉卧沙场君莫笑，醉卧沙场君莫笑，&   nbsp;  ;古来征战几人回。古来征战几人回。 n n说明；说明； . . #=#=字体名字体名 . . #=#=BlackBlack, , OliveOlive, , TealTeal, , RedRed, , BlueBlue, , MaroonMaroon, , NavyNavy, , GrayGray, , LimeLime, , FuchsiaFuchsia, White, , White, GreenGreen, , PurplePurple, , Si

27、lverSilver, , YellowYellow, , AquaAqua . . 设置字体大小设置字体大小 #=1, 2, 3, 4, 5, 6, 7 or +#, -#=1, 2, 3, 4, 5, 6, 7 or +#, -# n n物理字体物理字体(Physical Style)(Physical Style)粗体粗体 斜体斜体下划线下划线 打字机风格字体打字机风格字体上标上标 下标下标文字中间画线文字中间画线文字中间画线文字中间画线n n逻辑字体逻辑字体(Logical Style)(Logical Style) 强调的文本强调的文本 加重的文本加重的文本 编码的字体编码的字体 引

28、用的文本引用的文本 小号字体小号字体 大号字体大号字体 n n2.3 2.3 特殊字符的显示特殊字符的显示专业符号专业符号& <lt; p &; p >gt; ; 为段落标记为段落标记& & nbspnbsp; ;为空字符为空字符 说明说明: : 特殊字符特殊字符“& <lt;”;”代表符号代表符号“”,“&”,“&”,“&”代表符号代表符号”&” ,&” ,这些字符都以这些字符都以“&”&”开头开头, ,以分号以分号”;”;”结尾结尾 n n上下标标记的使用上下标标记的使用如要在网页中显示如要在网页中显示: :(6 3 + 3 6) 2 1 = ?

29、(6 3 + 3 6) 2 1 = ?结果以结果以 表示。表示。 H 2 + O 2 H 2 + O 2 H 2 O H 2 OHTMLHTML代码代码: :运算式运算式(6 3 + 3 6) ÷ 2 &(6 3 + 3 6) ÷ 2 ±plusmn; 1 = ; 1 = ?结果以结果以 & &permilpermil; ; 表示。表示。H 2 + O 2 &H 2 + O 2 &hArrhArr; H 2 O; H 2 O n n说明说明: :上标标记上标标记:下标标记下标标记÷÷代表符号代表符号& ±plusm

30、n; ;代表符号代表符号& &permilpermil; ;代表符号代表符号& &harrharr; ;代表代表”WordWord中没有该字符中没有该字符” n n2.3 滚动字幕例例1 1：滚动字滚动字幕幕啦啦啦，我会移动耶！啦啦啦，我会移动耶！例例2 2：文字移动属性的设置文字移动属性的设置文字移动属性的设置文字移动属性的设置 方向方向 #=left, right #=left, right滚动字滚动字幕幕啦啦啦，我从右向左啦啦啦，我从右向左移！移！ 啦啦啦，我从左向啦啦啦，我从左向右移！右移！ 例例3 3：方式方式方式方式 #=scroll, slide, alternate #=scr

31、oll, slide, alternate滚动字滚动字幕幕marquee 啦啦啦，我一圈一圈绕啦啦啦，我一圈一圈绕着走！着走！ marquee 啦啦啦，我只走一次就歇啦啦啦，我只走一次就歇了！了！ marquee 啦啦啦，我来回走耶！啦啦啦，我来回走耶！ 例例4 4：方式方式方式方式 循环循环 #= #=次数；若未指定则循环不止次数；若未指定则循环不止(infinite)(infinite)滚动字滚动字幕幕啦啦啦，我只走啦啦啦，我只走 3 3 趟哟！趟哟！ 啦啦啦啦，我只走啦啦，我只走 3 3 趟哟！趟哟！ marquee loop=3 width=50% behavior=alternate

32、啦啦啦，我只走啦啦啦，我只走 3 3 趟哟！趟哟！ 例例5 5：滚动字滚动字幕幕 =1 loop=-1滚动字幕内容第一行滚动字幕内容第一行滚动字幕内容第二行滚动字幕内容第二行滚动字幕内容第三行滚动字幕内容第三行 n n说明说明: :滚动标记滚动标记, ,控制文字的滚动控制文字的滚动AlignAlign: :设置字幕的对齐方式设置字幕的对齐方式, ,值可以为值可以为leftleft、rightright、centercenter、toptop、bottombottomBgcolorBgcolor: :设置字幕背景颜色设置字幕背景颜色, ,属性值为颜色的英文名称属性值为颜色的英文名称Directi

33、onDirection: :设置文字滚动方向设置文字滚动方向, ,值可以为值可以为left,right,up,downleft,right,up,downBehaviorBehavior: :设置文字滚动方式设置文字滚动方式, ,属性值有属性值有3 3个个,scroll,scroll表示一端表示一端滚到另一端滚到另一端,slide,slide表示从一端快速滑动到另一端且不再重表示从一端快速滑动到另一端且不再重复复,alternate,alternate表示在两端来回滚动表示在两端来回滚动HeightHeight: :设置字幕宽度设置字幕宽度, ,属性值为数值属性值为数值( (像素像素) )Wi

34、dthWidth: :字幕长度字幕长度, ,属性值为数值属性值为数值 HspaceHspace: :设置字幕左右方向空白区域的宽度设置字幕左右方向空白区域的宽度, ,属性值为数值属性值为数值( (像像素素) )vspacevspace: :设置字幕上下方向空白区域的宽度设置字幕上下方向空白区域的宽度, ,属性值为数值属性值为数值( (像像素素) )scrolldelayscrolldelay: :设置滚动两次之间的延迟时间设置滚动两次之间的延迟时间, ,属性值为数值属性值为数值, ,数数字越大字越大, ,延迟时间越长延迟时间越长ScrollamountScrollamount: :设定滚动速度

35、设定滚动速度, ,属性值为数值属性值为数值, ,数字越大数字越大, ,滚动速滚动速度越快度越快LoopLoop: :用于设定滚动的次数用于设定滚动的次数, ,属性值为数值属性值为数值,-1,-1表示一直滚动下表示一直滚动下去去, ,直到页面更新直到页面更新例例6 6：空白空白(Margins)(Margins)=# 滚动字滚动字幕幕*嗨嗨,marquee , align=middle啦啦啦，我会移啦啦啦，我会移动耶！动耶！大家好！大家好！* * n n2.4 2.4 文字列表的使用文字列表的使用例例1:1:编号列表编号列表11提纲标题提纲标题 大体构思大体构思 初步设计初步设计 完善设计完善设

36、计 开始制作开始制作 反复修改反复修改 / 说明说明: : 编号列表的结构编号列表的结构 内容一内容一 内容二内容二 内容三内容三/ 编号列表标记编号列表标记 n n例例2:2:更改序列号样式更改序列号样式编号列表编号列表22提纲标题提纲标题 type=A 大体构思大体构思 初步设计初步设计 完善设计完善设计 开始制作开始制作 反复修改反复修改/ 说明说明:type:type属性用于设置序号的样式属性用于设置序号的样式, ,如如type=1type=1或或a a或或A A或或I I或或i i(I(I表示大写罗马数字表示大写罗马数字,i,i表示小写罗马数字表示小写罗马数字) ) n n例例3:3

37、:从特定序列号开始从特定序列号开始编号的开始顺序编号的开始顺序提纲标题提纲标题 type=A start=3 大体构思大体构思 初步设计初步设计 完善设计完善设计 开始制作开始制作 反复修改反复修改/ 说明说明:start:start控制序号的开始位置控制序号的开始位置. .其结构为其结构为start=n,nstart=n,n为数字为数字或字母或字母 n n例例4:4:非序列提纲非序列提纲 非编号列表非编号列表新闻标题新闻标题 戴尔将在印度增加戴尔将在印度增加20002000员工员工 将其设为开发中心将其设为开发中心 微软微软XBOXXBOX亮相软交会亮相软交会 将要正式登陆中国？将要正式登陆

38、中国？ 中芯国际预计第二季芯片出货量增中芯国际预计第二季芯片出货量增16-18%16-18% 惠普联手富士通日立希捷惠普联手富士通日立希捷 开发新一代储存硬盘开发新一代储存硬盘 松下发布电池工作松下发布电池工作1212小时笔记本电脑小时笔记本电脑/ 说明说明: :编号列表的结构编号列表的结构 内容一内容一 内容二内容二 内容三内容三/ 非编号列表标记非编号列表标记, ,使用同编号列表标记一样使用同编号列表标记一样 n n例例5:5:更改标号样式更改标号样式非编号列表非编号列表新闻标题新闻标题 type=circle 戴尔将在印度增加戴尔将在印度增加20002000员工员工 将其设为开发中心将其

39、设为开发中心 微软微软XBOXXBOX亮相软交会亮相软交会 将要正式登陆中国？将要正式登陆中国？ 中芯国际预计第二季芯片出货量增中芯国际预计第二季芯片出货量增16-18%16-18% 惠普联手富士通日立希捷惠普联手富士通日立希捷 开发新一代储存硬盘开发新一代储存硬盘 松下发布电池工作松下发布电池工作1212小时笔记本电脑小时笔记本电脑/ n n说明说明: :TypeType属性属性: :Circle:Circle:Disc:Disc:Square:Square: n n说明式列表标记说明式列表标记说明式标记的使用说明式标记的使用 大体构思大体构思 对网页的一个初步构想，不要求对网页的一个初步构

40、想，不要求有什么实质性的东东，反正就是随意。有什么实质性的东东，反正就是随意。 初步设计初步设计 有了大体构思以后，开始画一些有了大体构思以后，开始画一些草图，并不断修改完善。草图，并不断修改完善。 n n格式格式: : 项目一项目一 说明内容说明内容1 1 项目项目2 2 说明内容说明内容2 2.三三 HTML文件中图片的使用文件中图片的使用n n3.1 3.1 图象文件格式图象文件格式图象文件格式有多种，如图象文件格式有多种，如BMPBMP、JPEGJPEG、TGATGA、GIFGIF、PNGPNG等，但等，但在在webweb页中通常使用的只有页中通常使用的只有3 3种种JPEGJPEG格

41、式格式：用于摄影或连续色调图象的高级格式，包含数百：用于摄影或连续色调图象的高级格式，包含数百万种颜色万种颜色GIFGIF格式格式：图形交换格式，文件最多使用：图形交换格式，文件最多使用256256种颜色，适合显种颜色，适合显示色调不连续或具有大面积单一色彩的图象，如导航条、示色调不连续或具有大面积单一色彩的图象，如导航条、按钮、图标或其它具有统一色彩和色调的图象按钮、图标或其它具有统一色彩和色调的图象PNGPNG格式格式：可移植网络图形格式，具有较大的灵活性，文件：可移植网络图形格式，具有较大的灵活性，文件较小，对于几乎任何类型的较小，对于几乎任何类型的WebWeb图形都适合，但图形都适合，

42、但IE4.0IE4.0或更或更高版本只能支持部分高版本只能支持部分PNGPNG图象的显示图象的显示 n n例例1:1:图片的插入图片的插入图片的插入图片的插入 说明说明:标记的作用是导入图片标记的作用是导入图片,src,src属性指定图片的保存属性指定图片的保存位置和名称位置和名称 n n例例2:2:图片的大小控制图片的大小控制图片的大小控制图片的大小控制img img img n n说明说明: :WidthWidth控制图片的宽度控制图片的宽度,height,height控制图片的高度控制图片的高度, ,当图片只设当图片只设置了其中一个属性置了其中一个属性( (如只设置了如只设置了width

43、)width)时时, ,图片的高度就以图片的高度就以图片原始的长宽比表示图片原始的长宽比表示语法结构语法结构: :img width=nm%img height=nm%N N为数值为数值, ,单位像素单位像素,m,m代表代表0 0到到100100的数的数, ,即即0%0%到到100%,100%,图片将以图片将以相对于当前窗口的大小显示相对于当前窗口的大小显示 n n例例2:2:图片的边框设置图片的边框设置图片的边框图片的边框img img img 说明说明:,n:,n为数值为数值,0,0到到99,99,单位像素单位像素 n n3.2 3.2 图片与文字的结合图片与文字的结合图片的左右区域图片的

44、左右区域图片的水平间隔图片的水平间隔img =30此图水平空白区域为此图水平空白区域为3030 img =60此图水平空白区域为此图水平空白区域为6060 img =80此图水平空白区域为此图水平空白区域为8080 说明说明: :hspacehspace属性控制图片左右两边的空白区域属性控制图片左右两边的空白区域, , hspacehspace=n,n=n,n为数值为数值, ,单位像素单位像素 图片的上下区域图片的上下区域 图片的垂直间隔图片的垂直间隔此图垂直空白区域为此图垂直空白区域为3030img src=pic/05.jpg height=50 =30此图垂直空白区域为此图垂直空白区域为

45、2020img src=pic/06.jpg height=50 =20此图垂直空白区域为此图垂直空白区域为1010img src=pic/05.jpg height=50 =10说明说明: :vspacevspace属性控制图片上下两边的空白区域属性控制图片上下两边的空白区域, , vspacevspace=n,n=n,n为数值为数值, ,单位像素单位像素 图片和文字的位置关系图片和文字的位置关系浏览器默认显示样式浏览器默认显示样式文字居左显示文字居左显示img =pic/05.jpg height=150文字居右显示文字居右显示说明说明: :默认情况下默认情况下, ,图片和文字的显示按照组

46、件输入的先后图片和文字的显示按照组件输入的先后, , 文字只显示在图片的两侧文字只显示在图片的两侧, ,并且居于图片基线的下方并且居于图片基线的下方 图片相对文字基线对齐图片相对文字基线对齐img 花花img align=center又是花又是花img 还是花还是花 n n说明说明:align:align属性控制了图片和文字的相对位置属性控制了图片和文字的相对位置图象和文字的对齐图象和文字的对齐AlignAlign属性值属性值:top(:top(上对齐上对齐),middle(),middle(居中对齐居中对齐),bottom(),bottom(下对下对齐齐) )图象在页面中的对齐图象在页面中的

47、对齐AlignAlign属性值属性值: left(: left(左对齐左对齐) right() right(右对齐右对齐) ) n n例例: :图片居左显示图片居左显示图片居左显示图片居左显示img =pic/05.jpg height=150 align=left文字显示文字显示 n n例例: :图片居右显示图片居右显示图片居右显示图片居右显示img =pic/05.jpg height=150 align=right文字居左显示文字居左显示 n n图片居中显示图片居中显示并不能在所有浏览器中产生效果并不能在所有浏览器中产生效果, ,若要若要将图片居中将图片居中, ,则要将该段所有内容居中则

48、要将该段所有内容居中. n n例例: :低分辨率显示图片低分辨率显示图片图片显示速度图片显示速度img =01.jpg width=30%img =02.jpg width=30%img width=30% n n例例: :文字代替图片的显示文字代替图片的显示有时浏览器不能显示指定的图片有时浏览器不能显示指定的图片, ,可以让浏览器显示一段文可以让浏览器显示一段文字说明该图片字说明该图片, ,这是利用这是利用altalt属性完成的属性完成的文字代替图片文字代替图片img src=pic/06.jpg width=40% 文字代替图片文字代替图片 n n图片的滚动图片的滚动图片从右向左滚动图片从

49、右向左滚动marquee align=center =1 loop=-1img =pic/07.jpg width=120img =pic/08.jpg width=120img =pic/09.jpg width=120 四四 超链接的建立超链接的建立n n4.1 4.1 路径问题的引出路径问题的引出相对路径和绝对路径相对路径和绝对路径img =1.jpg width=200 n n相对路径和绝对路径相对路径和绝对路径相对路径相对路径: :以要引用的文件所在的位置为参考点而建立起以要引用的文件所在的位置为参考点而建立起来的路径来的路径, ,所以所以, ,当不同的网页以相对路径引用同一个文件当

50、不同的网页以相对路径引用同一个文件时时, ,所使用的路径是不一样的所使用的路径是不一样的绝对路径绝对路径: :以服务器的硬盘架构以及所在的根目录为参考以服务器的硬盘架构以及所在的根目录为参考点建立起来的路径点建立起来的路径, ,所以所以, ,当不同的文件以绝对路径引用一当不同的文件以绝对路径引用一个文件时个文件时, ,其路径是一样的其路径是一样的 n n4.2 4.2 超链接的建立超链接的建立文字的超链接文字的超链接超链接超链接点击点击a =1.html这里这里连接到一个图片网页连接到一个图片网页说明说明:之间的内容为超链接名称之间的内容为超链接名称, ,hrefhref设置超链接的设置超链接

51、的目标目标, ,可以是本机上的某个可以是本机上的某个HTMLHTML文件文件, ,也可以是也可以是urlurl地址地址 文字链接颜色的设置文字链接颜色的设置链接颜色的变化链接颜色的变化body text=blue 注意注意a =1.html颜色颜色的变化的变化说明说明: :Link:Link:从未单击过的链接的文字颜色从未单击过的链接的文字颜色AlinkAlink: :设置单击时的超链接文字的颜色设置单击时的超链接文字的颜色VlinkVlink: :设置单击过后的文字的颜色设置单击过后的文字的颜色 特定目标的链接特定目标的链接特定链接特定链接古诗鉴赏古诗鉴赏单击单击 春宫怨春宫怨/h3单击单击

52、 登科居登科居/ h3 春宫怨春宫怨昨夜风开露井桃，昨夜风开露井桃，未央前殿月轮高。未央前殿月轮高。平阳歌舞新承宠，平阳歌舞新承宠，帘外春寒赐锦袍。帘外春寒赐锦袍。 登科居登科居昔日齷齪不足夸，昔日齷齪不足夸，今朝放荡思无崖。今朝放荡思无崖。春风得意马蹄疾，春风得意马蹄疾，一日看尽长安花。一日看尽长安花。 n n说明说明: :a 链接名称链接名称指网页要跳转到哪个目标名称的位置上指网页要跳转到哪个目标名称的位置上a name= 链接名称链接名称设置相应的特定目标设置相应的特定目标注意注意:”#”:”#”属性的目标名称和属性的目标名称和”name”name”属性的目标名称要一属性的目标名称要一致

53、致 图片的超链接图片的超链接图片的超链接图片的超链接a border=0点击该图片放大点击该图片放大说明说明: :在建立图片超链接时在建立图片超链接时, ,浏览器会自动在图片的周围加上浏览器会自动在图片的周围加上一个边框可以设置一个边框可以设置border=0border=0取消边框取消边框 以新窗口显示链接页面以新窗口显示链接页面只要在只要在标记中设置标记中设置targettarget属性值为属性值为_blank_blank即可即可以新窗口方式打开以新窗口方式打开以以a =1.html target=_blank新窗口新窗口方式打一个方式打一个网页网页 n n4.3 4.3 超链接的其它应用

54、超链接的其它应用HTTPHTTP协议的链接协议的链接各协议的链接各协议的链接点击这里，将链接到点击这里，将链接到a 新新浪浪网站。网站。说明说明: :urlurl链接的格式链接的格式:a : FTPFTP站点的链接站点的链接各协议的链接各协议的链接点击这里，将连接到点击这里，将连接到a =ftp:/192.168.47.64/作业作业FTPFTP站点。站点。说明说明:ftp:ftp链接的格式链接的格式:a : BBSBBS站点的链接站点的链接各协议的链接各协议的链接点击这里，将连接到点击这里，将连接到a 中科大中科大BBSBBS站点。站点。说明说明: :bbsbbs链接的格式链接的格式:a :

55、 电子邮件的链接电子邮件的链接邮件的链接邮件的链接点击这里，将打开点击这里，将打开a 邮邮件传送件传送说明说明: :邮件链接的格式邮件链接的格式:a : 网页自动更新网页自动更新网页的自动更新网页的自动更新, ,即根据预先设定好的链接目标以及更新时即根据预先设定好的链接目标以及更新时间自动切换到另一个网页间自动切换到另一个网页, ,这是利用这是利用标记完成标记完成meta http-equiv=refresh 自动更新自动更新body 本页将本页将5 5秒后自动连接到新浪网站。秒后自动连接到新浪网站。 n n说明说明: :标记只有两个属性标记只有两个属性:http-equiv:http-equ

56、iv属性和属性和contentcontent属性属性http-equivhttp-equiv属性设为属性设为”refresh”,refresh”,作用是自动更新作用是自动更新ContentContent设置更新时间以及更新要显示的网页设置更新时间以及更新要显示的网页meta meta 的的 用用 法法 1 1、 语语 法：法： 2 2、 参参 数数 解解 析：析：1 1） name name 项：项： 常常 用用 的的 选选 项项 有有 keywords, keywords, description, author description, author 等。等。 2 2） http-equi

57、v http-equiv 项：项： 可可 用用 于于 代代 替替 name name 项，项， 常常 用用 的的 选选 项项 有有 creation-date, refresh creation-date, refresh 等。等。 3 3） content content 项：项： 根根 据据 name name 项项 或或 http-equiv http-equiv 项项 的的 定定 义义 来来 决决 定定 此此 项项 填填 写写 什什 么么 样样 的的 字字 符符 串。串。 2 2、 举举 例：例： meta name=keywords content=China Travel, Bei

58、jing Travel, China Beijing meta name=author content=Beijing Co. Ltd. meta http-equiv=Creation-date content=23-Sept- 98, 18:28:33 GMT meta http-equiv=refresh content=10 meta http-equiv=Content-Type content=text/html; =gb2312meta name=description content= /meta name=Keywords content=/meta name=author

59、content=/meta name=Copyright content=/五五 表格的应用表格的应用n n5.1 5.1 表格的建立表格的建立表格的建立利用表格的建立利用3 3个最基本的个最基本的HTMLHTML标记来完成，分别是标记来完成，分别是标记、标记、 标记、标记、标记标记 n n例例1 1：一个最简单的表格一个最简单的表格单元格单元格 这是一个单元格这是一个单元格/ n n说明说明：标记：用于标识一个表格标记：用于标识一个表格 标记：用于标识表格的一行，用来建立一行表格，代码标记：用于标识表格的一行，用来建立一行表格，代码中有多少对中有多少对 标记，就表示有多少行标记，就表示有多少

60、行标记：用于标识表格的一列，也就是建立一个单元格，标记：用于标识表格的一列，也就是建立一个单元格，一对一对 标记内有多少个标记内有多少个标记就表示这行有多标记就表示这行有多少列，或者多少个单元格少列，或者多少个单元格 n n例例2 2：创建多单元表格创建多单元表格单元格单元格 姓名姓名成绩成绩/ 陈浩陈浩8080/ 董利董利8585/ n n5.2 5.2 各种表格样式各种表格样式例例1 1：表格边框的设置：表格边框的设置表格的边框属性表格的边框属性 单元格单元格11单元格单元格22/ ） n n说明说明：控制表格边框的属性：控制表格边框的属性：BorderBorder：设置表格的外边框粗细，

61、值为数字，单位像素设置表格的外边框粗细，值为数字，单位像素CellspacingCellspacing：设置表格的内边框粗细，值为数字设置表格的内边框粗细，值为数字, ,单位像素单位像素CellpaddingCellpadding：设置文字到单元格内边框的距离，值为数字，设置文字到单元格内边框的距离，值为数字，单位像素单位像素 例例2 2：表格高宽的控制表格高宽的控制表格的长宽表格的长宽 课程课程教室教室/ 静态网页静态网页A304A304/ n n说明说明：语法结构为：语法结构为table width=n m%、 table m%，n n为数值，单位像素（为数值，单位像素（pxpx），），m

62、 m代表代表0 0到到100100的数，即的数，即0%0%到到100%100%，表格相对于当前窗口大小的百分，表格相对于当前窗口大小的百分比来显示比来显示注意：这里的高宽设置的整个表格的高宽设置注意：这里的高宽设置的整个表格的高宽设置 例例3 3：表格相关颜色的设置表格相关颜色的设置( (表格边框及背景颜色的设置表格边框及背景颜色的设置) )表格的颜色设置表格的颜色设置 课程课程教室教室/ 语文语文东楼东楼1-11-1/ 英语英语）/ n n说明：说明：BordercolorBordercolor：设置表格的边框颜色，包括表格的外框颜色设置表格的边框颜色，包括表格的外框颜色和单元格的外框颜色。

63、格式和单元格的外框颜色。格式table BgcolorBgcolor：设置表格的背景颜色。设置表格的背景颜色。table table border=10 =black 单元格单元格11单元格单元格22/ 说明：说明：table =“” ：设置边框明亮部分的颜色设置边框明亮部分的颜色( (当当borderborder的值大于等于的值大于等于1 1时才有用时才有用) )。 table = ：设置边框昏暗部分的颜色设置边框昏暗部分的颜色( (当当borderborder的值大的值大于等于于等于1 1时才有用时才有用) )。 例例4 4：表格水平位置的控制表格水平位置的控制表格的水平位置表格的水平位置

64、table border=3 课程课程教室教室/ table border=3 静态网页静态网页A304A304/ table border=3 英语英语A401A401/ 说明：说明：alignalign属性控制表格的水平位置，属性控制表格的水平位置，table align=leftright分别控制左对齐、居中、右对齐分别控制左对齐、居中、右对齐 n n5.3 5.3 表格行的控制表格行的控制n n例例1 1：表格单行高度的设置表格单行高度的设置单行的高度设置单行的高度设置 =red课程课程教室教室/ =yellow语文语文A303A303/ =green英语英语B302B302/ n n

65、说明：说明：可以单独设置每一行的高度、边框颜色以及背景颜色可以单独设置每一行的高度、边框颜色以及背景颜色 标记相关属性设置：标记相关属性设置：HeightHeight：控制单行高度，数字（以像素或百分比为单位）控制单行高度，数字（以像素或百分比为单位）BordercolorBordercolor：设置边框的颜色，颜色英文名称设置边框的颜色，颜色英文名称BgcolorBgcolor：设置背景颜色，颜色英文名称设置背景颜色，颜色英文名称AlignAlign：控制单行内文字的水平位置，控制单行内文字的水平位置，leftleft或或centercenter或或rightrightValignValig

66、n：控制单行内文字的控制单行内文字的 垂直位置，垂直位置，toptop或或middlemiddle或或bottombottom注意：注意： 标记里一般不进行标记里一般不进行widthwidth属性的设置，每一行的属性的设置，每一行的总宽度总是由各个总宽度总是由各个来决定的，即由这一行里的所有单来决定的，即由这一行里的所有单元格的宽度之和来决定的元格的宽度之和来决定的 例例2 2：利用利用alignalign属性控制每一行中内容的水平位置属性控制每一行中内容的水平位置单行表格中文字的水平位置单行表格中文字的水平位置 height=40课程课程教室教室/ height=40 align=cente

67、r语文语文东楼东楼1-11-1/ height=40 align=right英语英语西楼西楼1-11-1/ 例例3 3：利用利用valignvalign属性控制每一行中内容的垂直位置属性控制每一行中内容的垂直位置 =top课程课程教室教室/ 语文语文东楼东楼1-11-1/ =bottom英语英语西楼西楼1-11-1/ 说明：说明：如果没有设置如果没有设置valignvalign属性，文字以居中方式显示属性，文字以居中方式显示 n n5.4 5.4 单元格的设置单元格的设置例例1 1：分别设置单元格的边框以及背景颜色分别设置单元格的边框以及背景颜色 td =red课程课程td =blue教室教室

68、/ td 网页网页td A303=silverA303/ td =purple英语英语td B302=aquaB302/ n n说明：说明：标记的属性标记的属性WidthWidth：控制单元格的宽度，数字，像素或百分比为单位控制单元格的宽度，数字，像素或百分比为单位BordercolorBordercolor：单元格边框颜色，颜色英文名称单元格边框颜色，颜色英文名称BgcolorBgcolor：单元格背景颜色，颜色英文名称单元格背景颜色，颜色英文名称AlignAlign：单元格内文字的水平位置，单元格内文字的水平位置，leftleft或或centercenter或或rightrightVali

69、gnValign：设置单元格内文字的垂直位置，设置单元格内文字的垂直位置，toptop或或middlemiddle或或bottombottom注意：单元格的高度都统一由注意：单元格的高度都统一由 的的heightheight属性来设置，所属性来设置，所以以一般不设置一般不设置heightheight属性属性 例例2 2：利用利用alignalign、valignvalign属性控制每一单元格中属性控制每一单元格中 内容的内容的水平和垂直位置水平和垂直位置 课程课程td 教室教室/ 语文语文东楼东楼1-11-1/ 英语英语td 西楼西楼1-11-1/ n n5.5 5.5 标题标记标题标记为表格

70、设置名称和表格内容以标题文字进行显示为表格设置名称和表格内容以标题文字进行显示课程表课程表 height=40 width=40课堂课堂/ width=60教室教室/ / height=40英语英语B302B302/ n n说明：说明： :标记为标题单元格标记，这个标记可以和标记为标题单元格标记，这个标记可以和标记相互替换标记相互替换但但 是以标题文字的形式显示单元格里的文字，并是以标题文字的形式显示单元格里的文字，并居中显示居中显示:表格标题标记，用来建立整个表格的表格标题标记，用来建立整个表格的标题标题 n n5.6 5.6 表格中单元格的合并表格中单元格的合并例例1 1：水平合并相邻的两

71、个单元格水平合并相邻的两个单元格 课表课表/ 课程课程教室教室/ 语文语文东楼东楼1-11-1/ 英语英语西楼西楼1-11-1/ n n说明：说明：标记的标记的colspancolspan属性，用来合并单元格，属性，用来合并单元格，td =n，n n为整数，是单元格水平合并的单元格数，为整数，是单元格水平合并的单元格数，td =2等于合并为一个跨两列的单元格等于合并为一个跨两列的单元格 例例2 2：垂直合并相邻的垂直合并相邻的3 3个单元格个单元格 某某某某系系课程课程教室教室/ 语文语文东楼东楼1-11-1/ 英语英语西楼西楼1-11-1/ n n说明：说明：标记的标记的 属性，用来垂直合并

72、单元格。属性，用来垂直合并单元格。td ,n=n,n为一整数，为表格行的垂直合并的表格行数，为一整数，为表格行的垂直合并的表格行数，td =3等于合并为一个跨等于合并为一个跨3 3行的单元格行的单元格 例例3 3：水平、垂直合并单元格的混合使用水平、垂直合并单元格的混合使用单元格的水平和垂直套用单元格的水平和垂直套用课程表课程表 计计算算pp机机 课程安排如下：课程安排如下：/ 课程课程教室教室/ 语文语文东楼东楼1-11-1/ 英语英语西楼西楼1-11-1/ align=center某某学院某某学院/ n n5.7 5.7 表格中图片的应用表格中图片的应用例例1:1:在单元格中插入图片以及设

73、置单元格的背景图象在单元格中插入图片以及设置单元格的背景图象表格中的图片插入表格中的图片插入 td =green登记表登记表/ =green 类别类别/ 照片照片/ / td 老虎老虎td =01.jpg/ 猫猫td / 熊猫熊猫td =03.jpg/ n n5.8 5.8 表格的嵌套表格的嵌套某高校某高校 某学年上学期课程表某学年上学期课程表 height=40 width=50课堂课堂/ width=60教室教室/ / height=40语文语文东楼东楼1-11-1/ / n n5.9 5.9 利用表格来布局网页利用表格来布局网页 空字符的存在空字符的存在 height=30单元格单元格1

74、1单元格单元格22/ height=30单元格单元格33单元格单元格44/ =greentd &=2 nbsp;/ 思考：将思考：将 =green改为改为 =green看是否有变化？看是否有变化？ n n说明：说明：由于表格可以根据所要显示的内容而自动延伸，而空字符的由于表格可以根据所要显示的内容而自动延伸，而空字符的高度大于高度大于4 4像素，将表格高度像素，将表格高度“顶顶”了起来，因此看到的了起来，因此看到的是这个空字符的高度，而不是是这个空字符的高度，而不是4 4像素的高度，要看到像素的高度，要看到4 4像素像素的高度，只要将空字符的高度，只要将空字符“&  nbsp;

75、”;”删除即可删除即可六六 窗口框架的应用窗口框架的应用n n6.1 6.1 窗口框架的建立窗口框架的建立例例1:1:将窗口水平分为两部分将窗口水平分为两部分窗体分割窗体分割 n n说明说明: :1.1.使用使用标记时不能加标记时不能加, , 若将若将标记加在标记加在标记中将无法正常使用标记中将无法正常使用2.2.标记单个使用标记单个使用, ,用来定义一个子窗口用来定义一个子窗口, ,有几个有几个标记就标记就 有有几个子窗口几个子窗口3.3.窗口框架的分割方式有两种窗口框架的分割方式有两种, ,一种是水平分割一种是水平分割, ,一种是垂直分割一种是垂直分割, ,主要是主要是标记中的标记中的ro

76、wsrows属性和属性和colscols属性控制窗口的分割方式属性控制窗口的分割方式4.Rows4.Rows属性的使用方法是属性的使用方法是,其中其中n1n1表示表示子窗口一的高度子窗口一的高度, ,以像素或百分比作单位以像素或百分比作单位,n2,n2表示子窗口二的高度表示子窗口二的高度, ,以以像素或百分比作单位像素或百分比作单位,”*”,”*”表示分配给前面所有窗口后剩下的高度表示分配给前面所有窗口后剩下的高度, ,如如,则则”*”*”代表代表50%50%的高度的高度5.Cols5.Cols属性的使用方法和属性的使用方法和rowsrows完全一样完全一样 例例2:2:将窗口垂直分为三部分将

77、窗口垂直分为三部分窗体分割窗体分割 frameset rows=20%,40%,* 例例3:3:窗口的水平及垂直混合分割窗口的水平及垂直混合分割窗口的水平和分割窗口的水平和分割 frameset cols=30%,* n n6.2 6.2 子窗口的边框设置子窗口的边框设置例例1:1:将窗口边框加粗将窗口边框加粗窗口框架的粗细窗口框架的粗细说明说明: :格式格式,n,n为一整数为一整数, ,单位像素单位像素思考思考: :如何隐藏框架如何隐藏框架, ,是否设置是否设置border=0border=0就就OK ?OK ? 例例2:2:隐藏所有边框隐藏所有边框窗口框架的隐藏窗口框架的隐藏framese

78、t cols=30%,* frame =07.htmframe =08.htm 例例3:3:隐藏子窗口边框隐藏子窗口边框窗口框架的隐藏窗口框架的隐藏frame =07.htmframe =0frame =09.htm说明说明: :frameset =0可以隐藏窗口框架的所有可以隐藏窗口框架的所有子窗口边框子窗口边框,frame ,=0则能控制该标记所代则能控制该标记所代表的子窗口表的子窗口. .frameorderframeorder=0=0或或1,01,0代表不显示代表不显示,1,1代表显示代表显示, ,不设置则默认显示不设置则默认显示 n n6.3 6.3 子窗口的设置子窗口的设置例例1:

79、1:在子窗口中插入网页在子窗口中插入网页图片在分割框中的应用图片在分割框中的应用frame =01.htmframe =02.htm说明说明: :在子窗口中显示网页格式在子窗口中显示网页格式frame 例例2:2:窗口滚动条的设置窗口滚动条的设置滚动条的限定滚动条的限定frame =01.htm scrolling=yesframe =03.htm scrolling=no说明说明: :设置滚动条设置滚动条frame scrolling=yes,yesauto,yes代代表显示表显示,no,no代表不显示代表不显示,auto,auto代表自动设置代表自动设置, ,如果不设置则如果不设置则默认为

80、自动设置默认为自动设置 n n6.4 6.4 窗口的导航显示窗口的导航显示例例1:1:在子窗口中加入显示导航信息的网页在子窗口中加入显示导航信息的网页子窗口的网页连接子窗口的网页连接frame frame n n04.htm04.htm的代码如下的代码如下: :0404 bodya =02.htm target=main连接一连接一a 连接二连接二a 连接三连接三/body n n02.htm02.htm的代码如下的代码如下: :0202 n n01.htm01.htm的代码如下的代码如下: : 0101 例例2:2:在上层窗口中显示网页在上层窗口中显示网页上层的网页显示上层的网页显示fram

81、e frame n n2.htm2.htm如下如下: :10_110_1第一个窗口第一个窗口n n3.htm3.htm代码如下代码如下: :10_210_2frame frame n n4.htm4.htm代码如下代码如下: :10_310_3第二个窗口第二个窗口n n5.Htm5.Htm代码如下代码如下: :10_410_4a 连接一连接一a 连接二连接二 n n6.5 6.5 神奇的神奇的iframeiframe标记标记利用利用iframeiframe标记标记, ,可以配合表格随意地在网页中的任何位置可以配合表格随意地在网页中的任何位置插入窗口插入窗口, ,即在窗口中再创建窗口即在窗口中再

82、创建窗口例例1:1:在在iframeiframe窗口中显示所链接的网页窗口中显示所链接的网页IFRAMEIFRAME窗口的任意应用窗口的任意应用a 央视网站央视网站a 新浪网站新浪网站a 搜狐网站搜狐网站 n n说明说明: : 的属性的属性Width:Width:控制窗口的宽度控制窗口的宽度, ,数字数字( (像素或百分比单位像素或百分比单位) )height:height:控制窗口的高度控制窗口的高度, ,数字数字( (像素或百分比单位像素或百分比单位) )FrameborderFrameborder: :控制是否显示边框控制是否显示边框,yes,yes或或nono或或autoautoScr

83、olling:Scrolling:控制是否显示滚动条控制是否显示滚动条,yes,yes或或nonoSrc:Src:设置插入的网页或图片设置插入的网页或图片 例例2:2:在在iframeiframe窗口中直接显示网页窗口中直接显示网页IFRAMEIFRAME窗口中直接显示网页或图片窗口中直接显示网页或图片 例例3:3:在在iframeiframe窗口中播放窗口中播放flashflash文件文件在在IFRAMEIFRAME窗口中播放窗口中播放FLASHFLASH电影文件电影文件 td width=50 =yellow td width=50 =yellow/ 七七 HTML中多媒体文件的使用中多媒

84、体文件的使用n n7.1 7.1 音乐文件格式音乐文件格式 可播放的教为普遍的音乐文件格式有可播放的教为普遍的音乐文件格式有MP3MP3、MIDMID、WAVWAV等，可等，可播放的较为普遍的影视文件格式有播放的较为普遍的影视文件格式有MOVMOV、AVIAVI、ASFASF、MPEGMPEG等。在网页中链接多媒体同样使用的等。在网页中链接多媒体同样使用的标记，但链接的标记，但链接的时候浏览器自动调用时候浏览器自动调用Windows Media PlayerWindows Media Player播放多媒体文播放多媒体文件，若安装了件，若安装了Real PlayerReal Player，则调

85、用则调用Real PlayerReal Player播放播放 例例1 1：音乐文件及影视文件的链接音乐文件及影视文件的链接多媒体的连接多媒体的连接body =yellow单击单击 .mp3“绿光绿光播放音乐播放音乐单击单击a IT IS MY LIFEIT IS MY LIFE播放影视播放影视 例例2 2：音乐文件的嵌入：音乐文件的嵌入多媒体的镶入多媒体的镶入body =yellow n n说明：说明：利用利用标记将多媒体文件嵌入到网页中标记将多媒体文件嵌入到网页中, ,可以一边下载可以一边下载一边播放一边播放SrcSrc属性：嵌入的多媒体文件的名称属性：嵌入的多媒体文件的名称, ,后缀名不能

86、省略后缀名不能省略WidthWidth属性属性: :设置嵌入的多媒体文件的宽度设置嵌入的多媒体文件的宽度heightheight属性属性: :设置嵌入的多媒体文件的高度设置嵌入的多媒体文件的高度AutostartAutostart: :值为值为truetrue时时, ,一打开网页就会自动播放多媒体一打开网页就会自动播放多媒体, ,设设置为置为falsefalse时时, ,需要单击需要单击”播放播放”按钮才能播放按钮才能播放Loop:Loop:设置播放次数设置播放次数,true,true时会无限制地重复播放时会无限制地重复播放, ,而为而为falsefalse时时, ,就只播放一次就只播放一次,

87、 ,默认值默认值falsefalseHidden :HIDDEN=TRUE,Hidden :HIDDEN=TRUE,隐藏播放控件面板隐藏播放控件面板 例例3:3:影视文件的嵌入影视文件的嵌入多媒体的镶入多媒体的镶入body =yellowembed src=true loop=true 例例4:4:网页背景音乐网页背景音乐ex4ex4body =yellow这是网页的背景音乐这是网页的背景音乐 .mp3 loop=-1说明说明: :srcsrc用来指定要播放的音乐名用来指定要播放的音乐名;loop;loop设置播放的次数设置播放的次数, ,设置值为数字设置值为数字, ,值为值为2 2表示播放表

88、示播放2 2次停止次停止, ,若要无限制地重复播放若要无限制地重复播放, ,只需设置值为只需设置值为-1-1表单表单 表单在表单在WebWeb网页中用来给访问者填写信息，从而能获得用户网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。一般是将表单设计在一个信息，使网页具有交互的功能。一般是将表单设计在一个HtmlHtml文档中，当用户填写完信息后做提交文档中，当用户填写完信息后做提交(submit)(submit)操作，于是表单操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP ASP 或或 C

89、GI CGI 等处理程序处理后，再将用户所需信息传送回客户等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性端的浏览器上，这样网页就具有了交互性1.1.1.1. 标志对用来创建一个表单，也即定义表单的开标志对用来创建一个表单，也即定义表单的开始和结束位置，在标志对之间的一切都属于表单的内容。始和结束位置，在标志对之间的一切都属于表单的内容。标志具有标志具有actionaction、methodmethod和和targettarget属性。属性。action action ：actionaction的值是的值是处理程序的程序名处理程序的程序名( (包括网络路径包括网

90、络路径: :网网址或相对路径址或相对路径) )，如：，如：form “，当用户提交当用户提交表单时，服务器将执行网址表单时，服务器将执行网址http:/http:/ /上的上的名为名为counter.cgicounter.cgi的的CGICGI程序。程序。targettarget ：targettarget属性用来属性用来指定目标窗口或目标帧指定目标窗口或目标帧表单标签的格式表单标签的格式: FORM action: . target=_blank. methodmethod ：methodmethod属性用来定义属性用来定义处理程序从表单中获得信息处理程序从表单中获得信息的方式的方式，可取值

91、为，可取值为 GET GET 和和 POST POST 的其中一个。的其中一个。GETGET方式是处方式是处理程序从当前理程序从当前HtmlHtml文档中获取数据，然而这种方式传送的数文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在据量是有所限制的，一般限制在1KB1KB以下。以下。POSTPOST方式与方式与GETGET方方式相反，它是当前的式相反，它是当前的Html Html cgicgi的的CGICGI程序。程序。2.2.2.2. 标志用来定义一个用户输入区，用户可在标志用来定义一个用户输入区，用户可在其中输入信息。此标志必须放在其中输入信息。此标志必须放在标志对之间。标

92、志对之间。标志中共提供了八种类型的输入区域，具标志中共提供了八种类型的输入区域，具体是哪一种类型体是哪一种类型, ,随随TypeType类型的不同而分文本输入框，密码类型的不同而分文本输入框，密码输入框，单选输入框，单选/ /复选框，提交复选框，提交/ /重置按钮等重置按钮等输入类型是输入类型是texttext，这是我们见的最多也是使用最多的，比这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。这也是住址等等。这也是InputInput的默认类型。的默认类型。 参数参数namename：表示该文本输入

93、框名称。表示该文本输入框名称。 参数参数sizesize：输入框的长度大小。输入框的长度大小。 参数参数maxlengthmaxlength：输入框中允许输入字符的最大数。输入框中允许输入字符的最大数。 参数参数valuevalue：输入框中的默认值输入框中的默认值 特殊参数特殊参数readonlyreadonly：表示该框中只能显示，不能添加、修表示该框中只能显示，不能添加、修改。改。如：如：input type=TEXT size= =1 1 1 1，type=texttype=texttype=texttype=text又如：又如： your name: your name: input

94、 type=text name= 20 input type=text name= 2 2 2 2，type=passwordtype=passwordtype=passwordtype=password 密码输入框，最大的区别就是当在此输入框输入信息时显密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。示为保密字符。 参数和参数和“type=text”type=text”相类似。相类似。 属性有：属性有：(1)name (1)name 定义控件名称定义控件名称(2)value (2)value 指定控件初始值指定控件初始值, ,该值就是浏览器被打开时在文该值就是浏览器被打开时在

95、文本框中的内容本框中的内容(3)size (3)size 指定控件宽度指定控件宽度, ,表示该文本输入框所能显示的最大表示该文本输入框所能显示的最大字符数。字符数。(4)maxlegnth (4)maxlegnth 表示该文本输入框允许用户输入的最大字符表示该文本输入框允许用户输入的最大字符数。数。如：如： your password: your password: input type=password name=15 value=123456密码长度小于密码长度小于15 15 3 3 3 3，type=buttontype=buttontype=buttontype=button 标准的一

96、标准的一windowswindows风格的按钮，当然要让按钮跳转到某个页风格的按钮，当然要让按钮跳转到某个页面上还需要加入面上还需要加入JavaScriptJavaScript代码代码 your button: your button: input type=button name= ) 4.type=submit4.type=submit4.type=submit4.type=submit 提交到服务器的按钮提交到服务器的按钮, ,当这个按钮被点击时当这个按钮被点击时, ,就会连接到表就会连接到表单单formform属性属性actionaction指定的指定的urlurl地址。地址。5 5

97、5 5，type=resettype=resettype=resettype=reset重置按钮重置按钮, ,单击该按钮可将表单内容全部清除单击该按钮可将表单内容全部清除, ,重新输入数重新输入数据。据。如：如： input type=text name= input type=submit value= input type=reset value= 这三个按钮有下面共同的属性：这三个按钮有下面共同的属性：(1)name (1)name 指定按钮名称指定按钮名称(2)value (2)value 指定按钮表面显示的文字指定按钮表面显示的文字(3)onclick (3)onclick 指定单击

98、按钮后要调用的函数指定单击按钮后要调用的函数(4)onfocus (4)onfocus 指定按钮接受焦点时要调用的函数指定按钮接受焦点时要调用的函数6.type=checkbox6.type=checkbox6.type=checkbox6.type=checkbox复选框，常见于注册时选择爱好、性格等信息。有以下属复选框，常见于注册时选择爱好、性格等信息。有以下属性性: :(1) name (1) name 定义控件名称定义控件名称(2) value (2) value 定义控件的值（提交到处理页的也就是定义控件的值（提交到处理页的也就是valuevalue）(3) checked (3)

99、checked 设定控件初始状态是被选中的设定控件初始状态是被选中的(4) (4) onclickonclick 定义控件被选中时要执行的函数定义控件被选中时要执行的函数(5) (5) onfocusonfocus 定义控件为焦点时要执行的函数定义控件为焦点时要执行的函数如：如： a:input type=checkbox name=a: checked b:input type=checkbox name=b: value=b c:input type=checkbox name=c: value=c namename值可以不一样，但不推荐值可以不一样，但不推荐 a:input type=c

100、heckbox name=checkit1 a: value=a checked b:input type=checkbox name=checkit2 b: value=b c:input type=checkbox name=checkit3 c: value=c 7. type=RADIO7. type=RADIO7. type=RADIO7. type=RADIO即单选框，出现在多选一的页面设定中。参数同样有即单选框，出现在多选一的页面设定中。参数同样有name,valuename,value及特别及特别参数参数checked. checked. 不同于不同于checkboxcheck

101、box的是，的是，namename值一定要相同，否则就不能多选一。当然提值一定要相同，否则就不能多选一。当然提交到处理页的也还是交到处理页的也还是valuevalue值。值。 a:input type=radio name=a: value=a checked b:input type=radio name=b: value=b c:input type=radio name=c: value=c 下面是下面是namename值不同的一个例子，就不能实现多选一的效果了值不同的一个例子，就不能实现多选一的效果了 a: a: b: b: c: c: 8.8.8.8.菜单下拉列表框菜单下拉列表框菜单

102、下拉列表框菜单下拉列表框 标志对用来创建一个下拉列表框或可以复标志对用来创建一个下拉列表框或可以复选的列表框。此标志对用于选的列表框。此标志对用于标志对之间。标志对之间。具有具有multiplemultiple、namename和和sizesize属性。属性。multiplemultiple属性属性: :不用赋值，直接加入标志中即可使用，加入了此不用赋值，直接加入标志中即可使用，加入了此属性后列表框就成了可多选的了属性后列表框就成了可多选的了NameName: :是此列表框的名字是此列表框的名字Size Size : :用来设置列表的高度，缺省时值为用来设置列表的高度，缺省时值为1 1，若没设

103、置，若没设置( (加入加入)multiple)multiple属性，显示的将是一个弹出式的列表框属性，显示的将是一个弹出式的列表框：用来指定列表框中的一个选项，它放在用来指定列表框中的一个选项，它放在标志对之间。此标志具有标志对之间。此标志具有selectedselected和和valuevalue属性，属性，selectedselected用来指定默认的选项，用来指定默认的选项，valuevalue属性用来给属性用来给指定的那一个选项赋值，这个值是要传送到服务器上指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用的，服务器正是通过调用区域的名字和区域的名字和valueval

104、ue属性来获属性来获得该区域选中的数据项的得该区域选中的数据项的 如：如：form action= method=post 请选择最喜欢的男歌星请选择最喜欢的男歌星: : option value=刘德华刘德华 option value= selected张学友张学友 option value=郭富城郭富城 黎明黎明 又如：又如：form action= method=post 请选择最喜欢的女歌星请选择最喜欢的女歌星: : option value=张曼玉张曼玉 option value= selected王菲王菲 option value=田震田震 option value=那英那英 9.

105、9.9.9.多行的文本框多行的文本框多行的文本框多行的文本框. 用来创建一个可以输入多行的用来创建一个可以输入多行的文本框，此标志对用于文本框，此标志对用于标志对之间。标志对之间。 具有具有namename、colscols和和rowsrows属性。属性。colscols和和rowsrows属属性分别用来设置文本框的列数和行数，这里列与行是以性分别用来设置文本框的列数和行数，这里列与行是以字符数为单位的字符数为单位的如：如：form action= method=post 您的意见对我很重要您的意见对我很重要: : =20 rows=5 请将意见输入请将意见输入此区域此区域 /八八 CSS初步

106、初步n n8.1 CSS8.1 CSS的概念的概念CSSCSS全称全称Cascading Style Sheet,Cascading Style Sheet,译为层叠样式表译为层叠样式表. .样式即网页的内容该以什么样的形式显示样式即网页的内容该以什么样的形式显示, ,如文字的大小、如文字的大小、颜色、图片的大小、插入位置；层叠，即当颜色、图片的大小、插入位置；层叠，即当HTMLHTML文件引用文件引用CSSCSS文件的时候，如果文件的时候，如果CSSCSS所定义的样式发生冲突，将依据所定义的样式发生冲突，将依据层次的先后来处理网页中内容的样式层次的先后来处理网页中内容的样式 n nCSSCS

107、S的引入的引入HTMLHTML不仅控制着网页的内容，还控制着网页内容的样式，而不仅控制着网页的内容，还控制着网页内容的样式，而CSSCSS就是让内容和样式分离，让就是让内容和样式分离，让HTMLHTML标记只控制网页的内标记只控制网页的内容，至于内容的样式交由容，至于内容的样式交由CSSCSS来控制来控制 n n8.2 CSS8.2 CSS的应用的应用例例1 1：CSSCSS的样式声明的样式声明CSSCSS的使用一的使用一style type=text/!-/* /* 以上是以上是CSSCSS的定义的定义 * */ /这是斜体的标题文字这是斜体的标题文字这是红色的标题文字这是红色的标题文字 n

108、 n说明：说明：1.1.标记的语法结构标记的语法结构style type=“text/”!标记标记11样式属性样式属性: :属性值属性值 样式属性样式属性: :属性值属性值.标记标记22样式属性样式属性: :属性值属性值 样式属性样式属性: :属性值属性值.标记通常放在标记通常放在标记之间标记之间2.2.越过标记越过标记3./* */3./* */注释标记注释标记, ,浏览器不显示该标记内的内容浏览器不显示该标记内的内容 例例2: 2: CSSCSS样式的选择性使用样式的选择性使用CSSCSS的使用二的使用二style type=text/!-/* /* 以上是以上是CSSCSS的定义的定义

109、* */ /这是正常的标题文字这是正常的标题文字这是斜体的标题文字这是斜体的标题文字这是红色的标题文字这是红色的标题文字这是红色的斜体标题文字这是红色的斜体标题文字 n n说明说明: :这里利用的是这里利用的是IDID属性的选择性功能属性的选择性功能语法结构语法结构: :style type=“text/”!# #标记标记11样式属性样式属性: :属性值属性值 样式属性样式属性: :属性值属性值.# #标记标记22样式属性样式属性: :属性值属性值 样式属性样式属性: :属性值属性值.注意注意:#:#不能省略不能省略九九 文字的设置文字的设置n n9.1尺度单位在在CSSCSS中当我们使用到属

110、性值的时候，通常值是有一个度量中当我们使用到属性值的时候，通常值是有一个度量依据的，也就是说值是有单位的依据的，也就是说值是有单位的. .值的尺度单位主要分为值的尺度单位主要分为两种类型两种类型: :相对类型和绝对类型相对类型和绝对类型相对类型相对类型: :要有一个参考基础要有一个参考基础,相对于该参考基础而设置的相对于该参考基础而设置的尺度单位尺度单位, ,如如pxpx和和ememPxPx: :像素像素, ,它会根据显示设备的分辨率的多少而代表不同的长它会根据显示设备的分辨率的多少而代表不同的长度度, ,如在如在800600800600的分辨率中设置的的分辨率中设置的100px100px比在

111、比在10247681024768的分辨率下设置的的分辨率下设置的100px100px大大, ,所代表的长度不同所代表的长度不同EmEm: :这是设置以目前字符的高度为单位这是设置以目前字符的高度为单位, ,如如 font-size: 2em,font-size: 2em,以目前字符的两倍高度显示以目前字符的两倍高度显示 绝对类型绝对类型: :无论显示设置的分辨率是多少无论显示设置的分辨率是多少, ,都代表相同的长度都代表相同的长度, ,绝对类型绝对类型的尺度单位有的尺度单位有:in(:in(英寸英寸),cm,mm,),cm,mm,Pt(Pt(点数点数),pc(),pc(印刷单位印刷单位) )在

112、网页中在网页中, ,默认以像素为单位默认以像素为单位, ,可根据需要选用其它的单位可根据需要选用其它的单位( (数值和尺度单位间不用加上空格数值和尺度单位间不用加上空格),),如如:10em,5in,6cm,20pt:10em,5in,6cm,20pt等等 n n9.2 9.2 设置文字设置文字n n1. 1. 文字的字体设置文字的字体设置例例1:1:同时设置多种字体同时设置多种字体font-familyfont-family属性的应用属性的应用style type=text/p font-family:p font-family:黑体，宋体，幼圆黑体，宋体，幼圆 这是这是CSSCSS控制的文

113、字字体控制的文字字体 n n说明说明: :Font-familyFont-family属性的结构为属性的结构为”font-family:font-family:字体一字体一, ,字体二字体二,”,”,这样定义好几种这样定义好几种, ,当浏览器不支持第一种字体的当浏览器不支持第一种字体的时候时候, ,就显示第二中字体就显示第二中字体, ,依次类推依次类推, ,若都不支持若都不支持, ,就显示默就显示默认字体认字体. .使用英文字体名的时候使用英文字体名的时候, ,要注意英文字体名的单词要注意英文字体名的单词之间之间 有空格有空格, ,如如:Times New Roman,:Times New R

114、oman,同时使用单引或双引同时使用单引或双引将其括起来将其括起来 例例2:2:文字的字体效果文字的字体效果font-stylefont-style属性的应用属性的应用style type=text/ p font-style:oblique p font-style:oblique这是这是CSSCSS控制的斜体字控制的斜体字这是这是htmlhtml标记直接作用的斜体字标记直接作用的斜体字 n n说明说明: :CSSCSS利用利用font-stylefont-style属性设置斜体属性设置斜体Font-styleFont-style属性的设置值有属性的设置值有: :Normal:Normal:

115、正常体正常体Italic:Italic:斜体斜体Oblique:Oblique:歪斜体歪斜体歪斜体较斜体倾斜角度更大歪斜体较斜体倾斜角度更大 n n2. 2. 文字的粗细控制文字的粗细控制例例: :控制文字的粗细控制文字的粗细font-weightfont-weight属性的应用属性的应用style type=text/ #w1 font- #w1 font-weight:normallweight:normall #w2 font-weight:bold #w2 font-weight:bold #w3 font-weight:bolder #w3 font-weight:bolder #w

116、4 font-weight:lighter #w4 font-weight:lighter #w5 font-weight:900 #w5 font-weight:900 这是这是htmlhtml标记直接作用的斜体字标记直接作用的斜体字这是这是CSSCSS控制的字体粗细控制的字体粗细这是这是CSSCSS控制的字体粗细控制的字体粗细这是这是CSSCSS控制的字体粗细控制的字体粗细这是这是CSSCSS控制的字体粗细控制的字体粗细这是这是CSSCSS控制的字体粗细控制的字体粗细 n n说明说明: :可以使用可以使用font-weightfont-weight属性来定义文字的粗细属性来定义文字的粗细,

117、 ,其属其属性设置值有性设置值有: :Normal:Normal:正常粗细正常粗细Bold:Bold:粗体粗体Bolder:Bolder:加粗体加粗体Lighter:Lighter:比正常字体稍细比正常字体稍细100-900:100-900:共有共有9 9个层次个层次(100,200,300,),(100,200,300,),数字越大数字越大字体越粗字体越粗 n n3. 3. 文字的大小控制文字的大小控制例例1:1:文字大小文字大小font-sizefont-size属性的应用属性的应用style type=text/ #s1 font-size:xx-small #s1 font-size:

118、xx-small #s2 font-size:x-small #s2 font-size:x-small #s3 font-size:small #s3 font-size:small #s4 font-size:medium #s4 font-size:medium #s5 font-size:large #s5 font-size:large #s6 font-size:x-large #s6 font-size:x-large #s7 font-size:xx-large #s7 font-size:xx-large #s8 font-size:10pt #s8 font-size:10

119、pt #s9 font-size:15pt #s9 font-size:15pt #s10 font-size:30 #s10 font-size:30 这是这是CSSCSS控制的不同大小文字控制的不同大小文字这是这是CSSCSS控制的不同大小文字控制的不同大小文字这是这是CSSCSS控制的不同大小文字控制的不同大小文字这是这是CSSCSS控制的不同大小文字控制的不同大小文字这是这是CSSCSS控制的不同大小文字控制的不同大小文字这是这是CSSCSS控制的不同大小文字控制的不同大小文字这是这是CSSCSS控制的不同大小文字控制的不同大小文字这是这是CSSCSS控制的不同大小文字控制的不同大小文

120、字这是这是CSSCSS控制的不同大小文字控制的不同大小文字这是这是CSSCSS控制的不同大小文字控制的不同大小文字 n n说明说明: :Font-sizeFont-size属性的设置值属性的设置值: :Xx-small:Xx-small:极小极小X-small:X-small:较小较小Small:Small:小小Medium:Medium:标准大小标准大小Large:Large:大大X-large:X-large:较大较大Xx-large:Xx-large:极大极大数值数值:(:(常用常用) )可以使用所有尺度单位可以使用所有尺度单位 例例2:2:设置粗斜体设置粗斜体fontfont属性应用属

121、性应用style type=text/ p font-style:oblique;font-weight:bold p font-style:oblique;font-weight:bold这是这是CSSCSS控制的粗斜体字控制的粗斜体字这是这是htmlhtml标记直接作用的粗斜体字标记直接作用的粗斜体字注意注意: :多个多个fontfont类属性一起控制文字的样式时类属性一起控制文字的样式时, ,属性与属性之间必须用属性与属性之间必须用; ;隔隔开开 n n4. 4. 文字的加线效果文字的加线效果例例: :text-decorationtext-decoration属性的应用属性的应用sty

122、le type=text/ #t1 text-decoration:underline #t1 text-decoration:underline #t2 text-decoration:line-through #t2 text-decoration:line-through #t3 text- #t3 text-decoration:overlinedecoration:overline CSSCSS对线可以有对线可以有3 3种效果种效果在下面在下面在中间面在中间面在上面在上面HTMLHTML对线可以只有对线可以只有2 2种效果种效果在下面在下面在中间在中间 n n说明说明: text-d

123、ecoration: text-decoration属性的设置值属性的设置值None:None:正常显示正常显示Underline:Underline:为文字加下划线为文字加下划线Line-through:Line-through:为文字加删除线为文字加删除线OverlineOverline: :为文字加顶线为文字加顶线Blink:Blink:文字闪烁文字闪烁 n n4. 4. 英文字母的大小写转换英文字母的大小写转换例例1:1:text-transformtext-transform属性的应用属性的应用style type=text/ #tr1 text-transform:capitali

124、ze #tr1 text-transform:capitalize #tr2 text-transform:uppercase #tr2 text-transform:uppercase #tr3 text-transform:lowercase #tr3 text-transform:lowercase每个英文单词的开头字母转化为大写每个英文单词的开头字母转化为大写hello!welcome to hello!welcome to csscss.所有英文单词转化为大写所有英文单词转化为大写hello!welcome to hello!welcome to csscss.所有英文单词转化为小写

125、所有英文单词转化为小写HELLO!WELCOME TO CSS.HELLO!WELCOME TO CSS. n n说明说明: :text-transformtext-transform属性的设置值属性的设置值: :None :None :正常显示正常显示CapiticalCapitical: :将每个英文单词的首字母大写将每个英文单词的首字母大写Uppercase:Uppercase:将所有的英文字母大写将所有的英文字母大写Lowercase:Lowercase:将所有的英文字母小写将所有的英文字母小写 例例2:2:小写字母转换为大写字母小写字母转换为大写字母font-variantfont-

126、variant属性的应用属性的应用style type=text/p font-variant:small-capsp font-variant:small-capshello!welcome to hello!welcome to csscss.小写英文小写英文 hello!welcome to hello!welcome to csscss.小写英文字母转化为大写小写英文字母转化为大写 n n说明说明: :font-variantfont-variant属性设置值只有两个属性设置值只有两个:normal,:normal,表示正常显示表示正常显示;small-caps,;small-caps

127、,只能将小写的英文字母转换为大写且字体较只能将小写的英文字母转换为大写且字体较小小 n n9.3 9.3 精细排版精细排版例例1:1:控制段落首行缩进控制段落首行缩进首行缩进首行缩进style type=text/#in1 text-indent:25#in1 text-indent:25#in2 text-indent:45#in2 text-indent:45#in3 text-indent:65#in3 text-indent:65樊迟御，子告之曰：樊迟御，子告之曰： 孟孙问孝於我，我对曰，无违孟孙问孝於我，我对曰，无违 樊迟曰：樊迟曰： 何谓也？何谓也？ 子曰：子曰： 生，事之以礼；死

128、，葬之以礼，祭之以礼。生，事之以礼；死，葬之以礼，祭之以礼。樊迟御，子告之曰：樊迟御，子告之曰： 孟孙问孝於我，我对曰，无违孟孙问孝於我，我对曰，无违 樊迟曰：樊迟曰： 何谓也？何谓也？ 子曰：子曰： 生，事之以礼；死，葬之以礼，祭之以礼。生，事之以礼；死，葬之以礼，祭之以礼。樊迟御，子告之曰：樊迟御，子告之曰： 孟孙问孝於我，我对曰，无违孟孙问孝於我，我对曰，无违 樊迟曰：樊迟曰： 何谓也？何谓也？ 子曰：子曰： 生，事之以礼；死，葬之以礼，祭之以礼。生，事之以礼；死，葬之以礼，祭之以礼。 n n说明说明: :text-indenttext-indent设置值为数值设置值为数值, ,表示缩进

129、多少距离表示缩进多少距离, ,单位可以是单位可以是所有的尺度单位所有的尺度单位 例例2:2:控制首行凸出控制首行凸出首行凸出首行凸出style type=text/ #ma1 text-indent:-30; margin-left:30 #ma1 text-indent:-30; margin-left:30 #ma2 text-indent:-20; margin-left:50 #ma2 text-indent:-20; margin-left:50 #ma3 text-indent:-10; margin-left:70 #ma3 text-indent:-10; margin-lef

130、t:70 季康子问：季康子问： 使民敬、忠以勤，如之何？使民敬、忠以勤，如之何？ 子曰：子曰： 临之以庄，临之以庄，则敬；孝慈，则忠；举善而教不能，则勤。则敬；孝慈，则忠；举善而教不能，则勤。 季康子问：季康子问： 使民敬、忠以勤，如之何？使民敬、忠以勤，如之何？ 子曰：子曰： 临之以庄，临之以庄，则敬；孝慈，则忠；举善而教不能，则勤。则敬；孝慈，则忠；举善而教不能，则勤。 季康子问：季康子问： 使民敬、忠以勤，如之何？使民敬、忠以勤，如之何？ 子曰：子曰： 临之以庄，临之以庄，则敬；孝慈，则忠；举善而教不能，则勤。则敬；孝慈，则忠；举善而教不能，则勤。 n n说明说明: :Text-inde

131、ntText-indent属性设置为负值属性设置为负值, ,代表首行向左凸出以及凸出的代表首行向左凸出以及凸出的距离距离,margin-left,margin-left属性控制文字段落向右移动的距离属性控制文字段落向右移动的距离, ,以以达到首行凸出的效果达到首行凸出的效果 例例3:3:控制字符间距控制字符间距字符间距字符间距style type=text/ #sp1 letter-spacing:10 #sp1 letter-spacing:10 #sp2 letter-spacing:5 #sp2 letter-spacing:5 #sp3 letter-spacing:-5 #sp3 l

132、etter-spacing:-5 学而不思则罔，思而不学则殆。学而不思则罔，思而不学则殆。学而不思则罔，思而不学则殆。学而不思则罔，思而不学则殆。学而不思则罔，思而不学则殆。学而不思则罔，思而不学则殆。学而不思则罔，思而不学则殆。学而不思则罔，思而不学则殆。 n n说明说明: :Letter-spacingLetter-spacing属性设置值为正负数都可以属性设置值为正负数都可以, ,为正数时为正数时, ,如如”letter-spacing:5”,letter-spacing:5”,表示加宽表示加宽5px;5px;为负数时为负数时, ,如如” ” letter-spacing:-5”,let

133、ter-spacing:-5”,表示紧缩表示紧缩5px5px 例例4:4:段落行距段落行距行距行距style type=text/ #h1 line-height:2 #h1 line-height:2 #h2 line-height:4 #h2 line-height:4 子谓子贡曰：子谓子贡曰： 女与回也孰愈？女与回也孰愈？ 对曰：对曰： 赐也何敢望回？回也闻一以知十，赐也闻一知二。赐也何敢望回？回也闻一以知十，赐也闻一知二。 子曰：子曰： 弗如也；吾与女弗如也。弗如也；吾与女弗如也。子谓子贡曰：子谓子贡曰： 女与回也孰愈女与回也孰愈？ 对曰：对曰： 赐也何敢望回？回也闻一以知十，赐也闻一

134、知赐也何敢望回？回也闻一以知十，赐也闻一知二。二。 子曰：子曰： 弗如也；吾与女弗如也。弗如也；吾与女弗如也。子谓子贡曰：子谓子贡曰： 女与回也孰愈女与回也孰愈？ 对曰：对曰： 赐也何敢望回？回也闻一以知十，赐也闻一知赐也何敢望回？回也闻一以知十，赐也闻一知二。二。 子曰：子曰： 弗如也；吾与女弗如也。弗如也；吾与女弗如也。 n n说明说明: :Line-heightLine-height属性控制段落行距属性控制段落行距, ,该属性的设置值不能为负数该属性的设置值不能为负数, ,可以是可以是长度长度: :数值数值倍数倍数:font-size:font-size属性设置值倍数属性设置值倍数百分比

135、百分比: :相对于相对于font-sizefont-size的百分比的百分比如如:”line-height:2;font-size:10pt”,:”line-height:2;font-size:10pt”,则行距就为则行距就为20pt, 20pt, 如如”line-height:150%;font-size:10pt”,line-height:150%;font-size:10pt”,行距就是行距就是15pt15pt 例例5:5:控制段落水平位置控制段落水平位置段落水平位置段落水平位置style type=text/ #a1 text-align:center #a1 text-align:

136、center #a2 text-align:justify #a2 text-align:justify 子谓子夏曰：子谓子夏曰： 女为君子儒！无为小人儒！女为君子儒！无为小人儒！宰我问曰：宰我问曰： 仁者，虽告之曰，仁者，虽告之曰， 井有仁焉。井有仁焉。 其从之也？子曰：其从之也？子曰： 何为其然也？君子可逝也，不可陷也；可欺也，何为其然也？君子可逝也，不可陷也；可欺也，不可罔也。不可罔也。子谓子夏曰：子谓子夏曰： 女为君子儒！无为小人儒女为君子儒！无为小人儒！宰我问曰：宰我问曰： 仁者，虽告之曰，仁者，虽告之曰， 井有仁焉。井有仁焉。 其从之也？子曰：其从之也？子曰： 何为其然也？君子可逝

137、也，不可陷也；可欺也，何为其然也？君子可逝也，不可陷也；可欺也，不可罔也。不可罔也。 n n说明说明: :段落的水平位置上通过段落的水平位置上通过text-aligntext-align属性来控制的属性来控制的, ,其设置值其设置值有有: :Left(Left(左对齐左对齐) right) right（右对齐）、右对齐）、 centercenter（居中）、居中）、 justifyjustify（左右对齐）左右对齐）CenterCenter控制段落每一行都居中对齐，控制段落每一行都居中对齐，justifyjustify控制整个段落控制整个段落的居中的居中 例例6 6：控制段落垂直位置：控制段落

138、垂直位置段落垂直位置段落垂直位置style type=text/ #v1 vertical-align:top #v1 vertical-align:top #v2 vertical-align:middle #v2 vertical-align:middle #v3 vertical-align:bottom #v3 vertical-align:bottom id=v1文字居上文字居上/ id=v2文字居中文字居中/ id=v3文字居下文字居下/ n n说明说明：段落的垂直位置设置利用的是段落的垂直位置设置利用的是vertical-alignvertical-align属性，其设置属性，其

139、设置值有：值有：Baseline:Baseline:浏览器默认的对齐方式浏览器默认的对齐方式TopTop：垂直靠上对齐垂直靠上对齐MiddleMiddle：垂直居中对齐垂直居中对齐BottomBottom：在垂直靠下对齐在垂直靠下对齐 利用利用vertical-alignvertical-align属性可以控制文字的上、下标显示属性可以控制文字的上、下标显示文字的上、下标显示文字的上、下标显示style type=text/ #v1 vertical-align:sub;font-size:6 #v1 vertical-align:sub;font-size:6 #v2 vertical-al

140、ign:super;font-size:6 #v2 vertical-align:super;font-size:6H2+O2=Hfont H2+O2=H2Oid=v12O a2+b2=cfont a2+b2=c2id=v22 n n9.4 9.4 矩形模块化矩形模块化在在csscss中中, ,可以利用可以利用marginmargin类属性、类属性、borderborder类属性、类属性、paddingpadding类属性来建立类属性来建立模块模块n n1.1.模块边界的设置模块边界的设置例例1:1:分别设置模块周围的空白区域分别设置模块周围的空白区域marginmargin属性的应用属性的应

141、用style type=text/ p margin-top:30;margin-right:30;margin-bottom:30;margin- p margin-top:30;margin-right:30;margin-bottom:30;margin-left:30;left:30; 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。曾子言曰：曾子有疾，孟敬子问之。曾子言曰： 鸟之将死，其鸣也哀；人之将鸟之将死，其鸣也哀；人之将死，其言也善。君子所贵乎道者三：动容貌，斯远暴慢矣；正颜色，死，其言也善。君子所贵乎道者三：动容貌，斯远暴慢矣；正颜色，斯近信笑；出辞气，斯远

142、鄙倍矣。笾豆之事，则有司存。斯近信笑；出辞气，斯远鄙倍矣。笾豆之事，则有司存。 例例2:2:统一设置模块周围的空白区域统一设置模块周围的空白区域marginmargin属性的应用属性的应用style type=text/p margin:30 20 40 10p margin:30 20 40 10曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。曾子言曰：曾子有疾，孟敬子问之。曾子言曰： 鸟之将死，其鸣也哀；人之将鸟之将死，其鸣也哀；人之将死，其言也善。君子所贵乎道者三：动容貌，斯远暴慢矣；正颜色，死，其言也善。君子所贵乎道者三：动容貌，斯远暴慢矣；正颜色，斯近信笑；出辞气，

143、斯远鄙倍矣。笾豆之事，则有司存。斯近信笑；出辞气，斯远鄙倍矣。笾豆之事，则有司存。 n n说明说明: :直接利用直接利用marginmargin属性属性, ,可以同时设置可以同时设置4 4个边界的空白距离个边界的空白距离, ,其其顺序为上、右、下、左，如果只设置一个值，如顺序为上、右、下、左，如果只设置一个值，如“margin:30”,margin:30”,那么那么4 4个边界都将调用这个值个边界都将调用这个值, ,如果只设置如果只设置两个值两个值, ,如如”margin:30 50”,margin:30 50”,则上下边界调用前面的值则上下边界调用前面的值. .左右边界调用后面的值左右边界调

144、用后面的值 n n2 2. . 模块边框的设置模块边框的设置BorderBorder类属性中共有类属性中共有3 3个属性个属性, ,分别是分别是: :Border-width:Border-width:控制模块的四边边框宽度控制模块的四边边框宽度Border-color:Border-color:模块的边框颜色模块的边框颜色Border-style:Border-style:控制边框的样式控制边框的样式 例例1:1:模块边框宽度的设置模块边框宽度的设置border-widthborder-width属性的应用属性的应用style type=text/ #w1 border-top-width:

145、10 #w1 border-top-width:10 #w2 border-right-width:20 #w2 border-right-width:20 #w3 border-bottom-width:15 #w3 border-bottom-width:15 #w4 border-left-width:5 #w4 border-left-width:5 #w5 border-width:10 20 15 5 #w5 border-width:10 20 15 5 body 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之

146、。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ n n说明说明: :Border-widthBorder-width属性的设置值属性的设置值: :Thin:Thin:细细Medium:Medium:标准标准Thick:Thick:粗粗数值数值: :以尺度单位以尺度单位, ,可以是可以是pt,cm.empt,cm.em等等 例例2:2:模块边框颜色的设置模块边框颜色的设置: : html border-colorborder-color属性的应用属性的应用style type=text/ #c1 border-top-c

147、olor:red;border-top-width:10 #c1 border-top-color:red;border-top-width:10 #c2 border-right-color:green;border-right-width:20 #c2 border-right-color:green;border-right-width:20 #c3 border-bottom-color:blue;border-bottom-width:15 #c3 border-bottom-color:blue;border-bottom-width:15 #c4 border-left-colo

148、r:black;border-left-width:5 #c4 border-left-color:black;border-left-width:5 #c5 border-color:red green blue black;border-width:10 20 15 #c5 border-color:red green blue black;border-width:10 20 15 55 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，

149、孟敬子问之。曾子有疾，孟敬子问之。/ 说明说明: : 利用利用border-colorborder-color属性的设置方法为属性的设置方法为: :Border-top-colorBorder-top-color、 Border-right-colorBorder-right-color、 Border-Border-bottom-colorbottom-color、 Border-left-colorBorder-left-color属性分别设置模块的属性分别设置模块的上、右、左、下边框的颜色，也可以利用上、右、左、下边框的颜色，也可以利用border-colorborder-color属属

150、性来统一设置模块的四边边框的颜色，只要各个颜色名之性来统一设置模块的四边边框的颜色，只要各个颜色名之间以空格间隔就可以了，如果只设置可一个或两个值，就间以空格间隔就可以了，如果只设置可一个或两个值，就与与marginmargin属性的统一设置方法是一样的属性的统一设置方法是一样的 例例3 3：模块边框样式的设置：模块边框样式的设置border-styleborder-style属性的应用属性的应用style type=text/ #c1 border-top-color:red;border-top-width:5;border-top- #c1 border-top-color:red;bo

151、rder-top-width:5;border-top-style:dottedstyle:dotted #c2 border-right-color:green;border-right-width:5;border- #c2 border-right-color:green;border-right-width:5;border-right-style:ridgeright-style:ridge #c3 border-bottom-color:blue;border-bottom-width:5;border- #c3 border-bottom-color:blue;border-bo

152、ttom-width:5;border-bottom-style:doublebottom-style:double #c4 border-left-color:black;border-left-width:5;border-left- #c4 border-left-color:black;border-left-width:5;border-left-style:groovestyle:groove #c5 border-color:red green blue black;border-width:5 5 5 5; #c5 border-color:red green blue bla

153、ck;border-width:5 5 5 5;border-style:dotted ridge double grooveborder-style:dotted ridge double groove 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ n n说明：说明：1.1.利用利用border-styleborder-style属性的设置方法为属性的设置方法为: :Border-top-styleB

154、order-top-style、 Border-right-styleBorder-right-style、 Border-Border-bottom-stylebottom-style、 Border-left-styleBorder-left-style属性分别设置模块的属性分别设置模块的上、右、左、下边框的样式，也可以利用上、右、左、下边框的样式，也可以利用border-styleborder-style属属性来统一设置模块的四边边框的颜色，只要各个颜色名之性来统一设置模块的四边边框的颜色，只要各个颜色名之间以空格间隔就可以了，如果只设置可一个或两个值，就间以空格间隔就可以了，如果只设置

155、可一个或两个值，就与与marginmargin属性的统一设置方法是一样的属性的统一设置方法是一样的 2.border-style2.border-style属性的设置值属性的设置值None:None:浏览器默认方式显示浏览器默认方式显示Dotted:Dotted:小点虚线小点虚线Dashed:Dashed:大点虚线大点虚线Solid :Solid :实线实线Double:Double:双实线双实线Groove:3DGroove:3D凹线凹线Ridge:3DRidge:3D凸线凸线Inset:3dInset:3d框入线框入线Outset:3DOutset:3D隆起线隆起线 3. 3. 可以利用可

156、以利用borderborder属性统一设置上面的属性统一设置上面的3 3个属性个属性, ,或者利用或者利用border-topborder-top属性、属性、border-rightborder-right属性属性、border-leftborder-left属性属性分别设置这分别设置这3 3个属性。个属性。BorderBorder属性的设置格式为属性的设置格式为“border:border:模块边框宽度模块边框宽度 模块边框颜色模块边框颜色 模块边框样式模块边框样式”, ,每个属性每个属性设置都以空格隔开设置都以空格隔开, ,设置没有先后顺序设置没有先后顺序 例例4 4：模块边框的同意设置：

157、模块边框的同意设置borderborder属性的应用属性的应用style type=text/ #c1 border-top:10 green dotted #c1 border-top:10 green dotted #c2 border-right:10 blue inset #c2 border-right:10 blue inset #c3 border-bottom:10 green double #c3 border-bottom:10 green double #c4 border-left:10 blue solid #c4 border-left:10 blue solid

158、#c5 border:5 green dotted #c5 border:5 green dotted 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ n n3.3.模块内边界的设置模块内边界的设置PaddingPadding属性用来控制模块的内边界属性用来控制模块的内边界, ,即模块中内容与模块边即模块中内容与模块边框的距离框的距离, ,可以用可以用padding padding 属性来统一设置内边框属

159、性来统一设置内边框, ,也可以也可以通过通过padding-toppadding-top属性、属性、 padding-rightpadding-right属性、属性、 padding-padding-bottombottom属性、属性、 padding-leftpadding-left属性分别设置模块的内边框属性分别设置模块的内边框 例例1 1：设置模块边界与模块内容的间距：设置模块边界与模块内容的间距paddingpadding属性的应用属性的应用style type=text/ #p1 padding-top:30 #p1 padding-top:30 #p2 padding-right:

160、20 #p2 padding-right:20 #p3 padding-bottom:10 #p3 padding-bottom:10 #p4 padding-left:30 #p4 padding-left:30 #p5 padding:30 20 10 20 #p5 padding:30 20 10 20 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ 曾子有疾，孟敬子问之。曾子有疾，孟敬子问之。/ n n9.5 9.5 列表中的图象符号列表中的图

161、象符号例例1 1：图象符号图象符号style type=text/#in list-style:url(0001.jpg) inside; color:red#in list-style:url(0001.jpg) inside; color:red#out list-style:url(0001.jpg) outside; color:blue#out list-style:url(0001.jpg) outside; color:blue id=in 颜渊问颜渊问 仁仁 。子曰：。子曰： 克己复礼，为仁。一日克己复礼，天下归仁焉。克己复礼，为仁。一日克己复礼，天下归仁焉。为仁由己，而由仁乎

162、哉？为仁由己，而由仁乎哉？ 颜渊曰：颜渊曰： 请问其目？请问其目？ 子曰：子曰： 非礼勿视，非礼勿听，非礼勿言，非非礼勿视，非礼勿听，非礼勿言，非礼勿动。礼勿动。 颜渊曰：颜渊曰： 回虽不敏，请事斯语矣！回虽不敏，请事斯语矣！ / id=out 仲弓问仲弓问 仁仁 。子曰：。子曰： 出门如见大宾；使民如承大祭；己所不欲，勿出门如见大宾；使民如承大祭；己所不欲，勿施於人；在邦无怨，在家无怨。施於人；在邦无怨，在家无怨。 仲弓曰：仲弓曰： 雍虽不敏，请事斯语矣！雍虽不敏，请事斯语矣！ 子贡问子贡问 政政 。子曰：。子曰： 足食，足兵，民信之矣。足食，足兵，民信之矣。 / n n说明：利用说明：利用

163、list-stylelist-style属性来设置列表样式，属性来设置列表样式，list-stylelist-style属性可以分为属性可以分为3 3个属性，一个是个属性，一个是list-style-typelist-style-type属性，用属性，用来设置列表的符号，二是来设置列表的符号，二是list-style-typelist-style-type属性，用来设属性，用来设置列表的图片符号，三是置列表的图片符号，三是list-style-positionlist-style-position属性，用属性，用来设置列表符号是否缩进来设置列表符号是否缩进 例例2 2：设置各种序列符号：设置各

164、种序列符号列表符号列表符号style type=text/ #l1 list-style-type:lower-roman;color:red #l1 list-style-type:lower-roman;color:red #l2 list-style-type:upper-alpha;color:blue #l2 list-style-type:upper-alpha;color:blue #l3 list-style-type:decimal;color:green #l3 list-style-type:decimal;color:green id=l1 颜渊问颜渊问 仁仁 。子曰：

165、。子曰： 克己复礼，为仁。一日克己复礼，天下归仁焉。克己复礼，为仁。一日克己复礼，天下归仁焉。为仁由己，而由仁乎哉？为仁由己，而由仁乎哉？ 子贡问子贡问 政政 。子曰：。子曰： 足食，足兵，民信之矣。足食，足兵，民信之矣。 / id=l2 颜渊问颜渊问 仁仁 。子曰：。子曰： 克己复礼，为仁。一日克己复礼，天下归仁焉。克己复礼，为仁。一日克己复礼，天下归仁焉。为仁由己，而由仁乎哉？为仁由己，而由仁乎哉？ 子贡问子贡问 政政 。子曰：。子曰： 足食，足兵，民信之矣。足食，足兵，民信之矣。 / id=l3 颜渊问颜渊问 仁仁 。子曰：。子曰： 克己复礼，为仁。一日克己复礼，天下归仁焉。克己复礼，为

166、仁。一日克己复礼，天下归仁焉。为仁由己，而由仁乎哉？为仁由己，而由仁乎哉？ 子贡问子贡问 政政 。子曰：。子曰： 足食，足兵，民信之矣。足食，足兵，民信之矣。 / n n说明：说明：1.List-style-image1.List-style-image属性的设置值属性的设置值:none,:none,不使用图片符号不使用图片符号; ;urlurl, ,图片的名称或路径图片的名称或路径2.list-style-position2.list-style-position属性的设置值属性的设置值:inside,:inside,列表符号向列表符号向内缩进内缩进;outside,;outside,列表符

167、号不向内缩进列表符号不向内缩进( (默认默认) )3.3.统一设置格式统一设置格式:”list-style:”list-style:列表符号或列表图象符号列表符号或列表图象符号 列表符号缩进方式列表符号缩进方式”, ,同样同样, ,设置没有先后顺序设置没有先后顺序十十 背景的设置背景的设置n n10.1 10.1 颜色的设置方法颜色的设置方法以颜色名称设置以颜色名称设置以颜色的英文名称来设置颜色以颜色的英文名称来设置颜色以十六进制数设置以十六进制数设置每种颜色的光强度都是由每种颜色的光强度都是由0 0到到255,255,当颜色的光强度为当颜色的光强度为0 0时就是时就是黑色黑色, ,当颜色的光

168、强度为当颜色的光强度为255255时就是白色时就是白色. .用十六进制数来用十六进制数来设置颜色是因为每两个数设置颜色是因为每两个数( (字母字母) )能表达出能表达出0 0到到255255的数值的数值, ,因而能表达一种颜色因而能表达一种颜色, ,如如rrrr表示红色表示红色, ,gggg表示绿色表示绿色,bb,bb表示表示蓝色蓝色,00,00表示表示0,ff0,ff表示表示255.255.在完全表示颜色的时候就是井在完全表示颜色的时候就是井号号”#”#”加上十六进制数就可加上十六进制数就可, ,如如:#ff0000:#ff0000表示红色表示红色,#00ff00,#00ff00表示绿色表示

169、绿色以以RGBRGB函数设置函数设置 n n10.2 10.2 背景颜色的设置背景颜色的设置例例1:1:文字的颜色设置文字的颜色设置文字颜色文字颜色style type=text/font color:redfont color:red这是红色的文字这是红色的文字 例例2:2:设置文字背景设置文字背景文字的背景颜色文字的背景颜色style type=text/font background-color:yellowfont background-color:yellowbody background-color:redbody background-color:red#f color:blue

170、#f color:blue这是红色的网页背景，但文字背景是黄色的这是红色的网页背景，但文字背景是黄色的这是红色的网页背景，但文字是蓝色，背景是黄色的这是红色的网页背景，但文字是蓝色，背景是黄色的 n n说明说明: :n nBackground-colorBackground-color属性的设置为属性的设置为” ” Background-Background-color:red” color:red” 、” ” Background-color:#ff0000” Background-color:#ff0000” 、” ” Background-color:rgb(255,0,0)” Back

171、ground-color:rgb(255,0,0)” n n10.3 10.3 背景图片的设置背景图片的设置例例1 1：设置网页的图片背景及文字的图片背景：设置网页的图片背景及文字的图片背景背景图片背景图片style type=text/font background-image:url(02.gif)font background-image:url(02.gif)body background-image:url(01.gif)body background-image:url(01.gif)网页背景为一个漂亮的图案，但文字背景是另一种图案网页背景为一个漂亮的图案，但文字背景是另一种图案

172、例例2 2：背景图片的横向平铺：背景图片的横向平铺图片的横向并排图片的横向并排style type=text/font background-image:url(02.gif)font background-image:url(02.gif)body background-image:url(01.jpg);background-repeat:repeat-xbody background-image:url(01.jpg);background-repeat:repeat-x网页背景为一个漂亮的图案，但文字背景是另一种图案网页背景为一个漂亮的图案，但文字背景是另一种图案 n n说明：说明：B

173、ackground-repeatBackground-repeat属性的设置值：属性的设置值：Repeat:Repeat:背景图片铺满全页面背景图片铺满全页面Repeat-x:Repeat-x:背景图片以横向并排背景图片以横向并排Repeat-y:Repeat-y:背景图片以纵向并排背景图片以纵向并排No-repeat:No-repeat:背景图片不以并排方式显示背景图片不以并排方式显示 例例3:3:背景图片的纵向平铺背景图片的纵向平铺图片的纵向并排图片的纵向并排style type=text/font background-image:url(02.gif)font background-i

174、mage:url(02.gif)body background-image:url(01.jpg);background-repeat:repeat-ybody background-image:url(01.jpg);background-repeat:repeat-y网页背景为一个漂亮的图案，但文字背景是另一种图案网页背景为一个漂亮的图案，但文字背景是另一种图案 例例4:4:只显示单个背景图片只显示单个背景图片图片单显示图片单显示style type=text/font background-image:url(02.gif)font background-image:url(02.gif

175、)body background-image:url(01.jpg);background-repeat:no-repeatbody background-image:url(01.jpg);background-repeat:no-repeat网页背景为一个漂亮的图案，但文字背景是另一种图案网页背景为一个漂亮的图案，但文字背景是另一种图案 n n例例5:5:固定背景图片固定背景图片图片的固定图片的固定style type=text/font background-image:url(02.gif)font background-image:url(02.gif)body background

176、-image:url(01.jpg);background-body background-image:url(01.jpg);background-repeat:no-repeat;background-attachment:fixedrepeat:no-repeat;background-attachment:fixed 孔子谓季氏：孔子谓季氏： 八佾舞于庭，是可忍也，孰不可忍也八佾舞于庭，是可忍也，孰不可忍也？佾，音逸。季氏，鲁大夫季孙氏也。佾，舞列也，天子八、佾，音逸。季氏，鲁大夫季孙氏也。佾，舞列也，天子八、诸侯六、大夫四、士二。诸侯六、大夫四、士二。每佾人数，如其佾数。或曰：每佾人

177、数，如其佾数。或曰： 每佾八人。每佾八人。 未详孰是。未详孰是。季氏以大夫而僭用天子之乐，孔子言其此事尚忍为之，则何季氏以大夫而僭用天子之乐，孔子言其此事尚忍为之，则何事不可忍为。事不可忍为。或曰：或曰： 忍，容忍也。忍，容忍也。 盖深疾之之辞。盖深疾之之辞。范氏曰：范氏曰： 乐舞之数，自上而下，降杀以两而已，故两之间，乐舞之数，自上而下，降杀以两而已，故两之间，不可以毫发僭差也。不可以毫发僭差也。孔子为政，先正礼乐，则季氏之罪不容诛矣。孔子为政，先正礼乐，则季氏之罪不容诛矣。 谢氏曰：谢氏曰： 君子于其所不当为不敢须臾处，不忍故也。君子于其所不当为不敢须臾处，不忍故也。而季氏忍此矣，则虽弒父

178、与君，亦何所惮而不为乎？而季氏忍此矣，则虽弒父与君，亦何所惮而不为乎？ n n说明说明:background-attachment:background-attachment属性的设置值属性的设置值:fixed,:fixed,设置设置背景图片固定不动背景图片固定不动;scroll,;scroll,设置背景图片跟着移动设置背景图片跟着移动( (默认默认) ) 例例6:6:图片的定位设置图片的定位设置背景图片的水平位置背景图片的水平位置style type=text/#p1 background-image:url(02.jpg);background-repeat:no-repeat;#p1 b

179、ackground-image:url(02.jpg);background-repeat:no-repeat;background-position:0% 0%background-position:0% 0%#p2 background-image:url(02.jpg);background-repeat:no-repeat;#p2 background-image:url(02.jpg);background-repeat:no-repeat;background-position:50% 50%background-position:50% 50%#p3 background-ima

180、ge:url(02.jpg);background-repeat:no-repeat;#p3 background-image:url(02.jpg);background-repeat:no-repeat;background-position:100% 100%background-position:100% 100% 子张曰子张曰 士见危致命，见得思义，祭思敬，丧士见危致命，见得思义，祭思敬，丧思哀，其可已矣。思哀，其可已矣。/ 子张曰子张曰 士见危致命，见得思义，祭思敬，丧士见危致命，见得思义，祭思敬，丧思哀，其可已矣。思哀，其可已矣。/ 子张曰子张曰 士见危致命，见得思义，祭思敬，丧

181、士见危致命，见得思义，祭思敬，丧思哀，其可已矣。思哀，其可已矣。/ n n说明说明: :Background-positionBackground-position属性的长度设置值属性的长度设置值: :X(X(数值数值):):设置网页的横向位置设置网页的横向位置, ,单位可以上所有尺度单位单位可以上所有尺度单位;y;y( (数值数值),),设置网页的纵向位置设置网页的纵向位置, ,单位可以是所有尺度单位单位可以是所有尺度单位百分比设置值百分比设置值 关键字设置值关键字设置值十一十一 美化网页美化网页n n11.1 11.1 超链接的多样化超链接的多样化a a属性的设置值：属性的设置值：a:li

182、nk a:link 尚未链接过的文字颜色尚未链接过的文字颜色, ,各种颜色设置方式各种颜色设置方式a:visited a:visited 已链接过的文字颜色已链接过的文字颜色, ,各种颜色设置方式各种颜色设置方式a:active a:active 当当 鼠标点击时的文字颜色鼠标点击时的文字颜色, ,各种颜色设置方式各种颜色设置方式a:hover a:hover 当鼠标移动到链接上方时的文字颜色当鼠标移动到链接上方时的文字颜色, ,各种颜色各种颜色设置方式设置方式 例例1:1:链接颜色的设置链接颜色的设置不同的链接颜色不同的链接颜色style type=text/a:link color:red

183、a:link color:reda:visited color:bluea:visited color:bluea:active color:yellowa:active color:yellowa:hover color:greena:hover color:greena 新浪新浪 例例2:2:链接字体的变化链接字体的变化链接的文字效果链接的文字效果style type=text/a:link color:reda:link color:reda:visited color:bluea:visited color:bluea:active color:yellowa:active color

184、:yellowa:hover color:green;font-family:a:hover color:green;font-family:楷体楷体;font-size:20;font-size:20a 新浪新浪 例例3:3:链接的下划线设置链接的下划线设置无下划线的链接无下划线的链接style type=text/a text-decoration:nonea text-decoration:nonea:link color:reda:link color:reda:visited color:bluea:visited color:bluea:active color:yellowa:a

185、ctive color:yellowa:hover color:green;font-family:a:hover color:green;font-family:楷体楷体;font-size:20;font-size:20a 新浪新浪a XX1=#XX1a XX2=#XX2说明说明:”:”hrefhref=#”=#”中的中的”#”#”代表空链接代表空链接; ;使用使用” ” a text-a text-decoration:none”decoration:none”来控制所有的超链接不加下划线来控制所有的超链接不加下划线n n11.2 11.2 华丽的滚动条华丽的滚动条例例: :多彩的滚动条

186、多彩的滚动条style type=text/body scrollbar-face-body scrollbar-face-color:lightgreencolor:lightgreen; ; scrollbar-shadow-color:purple;scrollbar-highlight-color:purple;scrollbar-shadow-color:purple;scrollbar-highlight-color:purple;scrollbar-track-color:yellow;scrollbar-3dlight-color:blue; scrollbar-track-c

187、olor:yellow;scrollbar-3dlight-color:blue; scrollbar-scrollbar-darkshadow-color:blue;scrollbar-arrow-color:reddarkshadow-color:blue;scrollbar-arrow-color:red n n说明说明: : scrollbar-face-color scrollbar-face-color：控制滚动条以及三角按钮的表控制滚动条以及三角按钮的表面颜色面颜色 scroll-shadow-colorscroll-shadow-color：控制滚动条以及三角按钮边缘阴控制滚动

188、条以及三角按钮边缘阴影的颜色影的颜色 scrollbar-highlight-colorscrollbar-highlight-color：控制滚动条以及三角按钮控制滚动条以及三角按钮边框的颜色边框的颜色 scrollbar-3dlight-colorscrollbar-3dlight-color：控制滚动条以及三角按钮边控制滚动条以及三角按钮边框的框的3D3D光影颜色光影颜色 scrollbar-scrollbar-darkshadow-coordarkshadow-coor：控制滚动条以及三角按钮控制滚动条以及三角按钮边框的边框的3D3D阴影颜色阴影颜色 scrollbar-track-c

189、olor:scrollbar-track-color:控制滚动区域的颜色控制滚动区域的颜色 scrollbar-arrow-colorscrollbar-arrow-color：控制三角按钮中小三角形的颜控制三角按钮中小三角形的颜色色 n n11.3 11.3 代表不同意义的光标样式代表不同意义的光标样式变换光标样式变换光标样式光标样式光标样式style type=text/A:link color:yellowA:link color:yellowA:visited color:redA:visited color:redA:active color:greenA:active color:

190、greenA:hover color:blue;cursor:help A:hover color:blue;cursor:help a =#空链接空链接 n n说明说明: :cursorcursor属性设置值属性设置值: :十二十二 区域与层的概念区域与层的概念n n层简介层简介利用层可以分区域地设置网页的样式利用层可以分区域地设置网页的样式标记就是区域标记标记就是区域标记, ,用来定义网页上的一个特定区域用来定义网页上的一个特定区域, ,在这个特定区域里可以包含文字、图片、和表格等各种网在这个特定区域里可以包含文字、图片、和表格等各种网页组件。因此可以用区域来划分网页组件，各区域间上彼页组

191、件。因此可以用区域来划分网页组件，各区域间上彼此独立的此独立的 n n12.1 12.1 区域的定义区域的定义例例1 1：制作制作3 3个相邻的区域个相邻的区域区域的概念区域的概念style type=text/ #d1 background-color:red;font-size:20;width:400;height=100 #d1 background-color:red;font-size:20;width:400;height=100 #d2 background-color:blue;font-size:20;width:300;height=80 #d2 background-c

192、olor:blue;font-size:20;width:300;height=80 #d3 background-color:green;font-size:20;width:200;height=50 #d3 background-color:green;font-size:20;width:200;height=50 n n12.2 12.2 区域的定位区域的定位例例1:1:区域的定位区域的定位区域的位置区域的位置style type=text/ div font-size:20;width:300;height:100 div font-size:20;width:300;height

193、:100 #d1 background- #d1 background-color:red;color:red;position:absolute;top:0;left:0position:absolute;top:0;left:0 #d2 background- #d2 background-color:blue;color:blue;position:absolute;top:50;left:50position:absolute;top:50;left:50 #d3 background- #d3 background-color:green;color:green;position:a

194、bsolute;top:100;left:100position:absolute;top:100;left:100 n n说明说明: :1.position1.position属性用来控制采用什么方式设定区域位置属性用来控制采用什么方式设定区域位置,left,left属性和属性和toptop属性分别设置区域的左边缘到网页最左端的距属性分别设置区域的左边缘到网页最左端的距离和区域的上边缘到网页最顶端的距离离和区域的上边缘到网页最顶端的距离,left,left和和toptop属性值属性值可以使用百分比单位设置可以使用百分比单位设置, ,也可以使用尺度单位设置也可以使用尺度单位设置2.Positi

195、on2.Position属性的设置值属性的设置值 Absolute:Absolute:区域位置区域位置 以网页的左上角为基准来设置以网页的左上角为基准来设置 Relative:Relative:区域位置以其原始的位置来设置区域位置以其原始的位置来设置 Static:Static:区域位置以区域位置以HTML HTML 默认的位置来设置默认的位置来设置 例例2:2:区域的相对位置区域的相对位置区域的相对位置区域的相对位置style type=text/ div width:150;height=50 div width:150;height=50 #d1 background-color:red

196、; #d1 background-color:red;position:relative;top:0;left:0position:relative;top:0;left:0 #d2 background-color:blue;position:relative;top:20;left:20 #d2 background-color:blue;position:relative;top:20;left:20 #d3 background-color:green;position:relative;top:50;left:50 #d3 background-color:green;positio

197、n:relative;top:50;left:50 例例3:3:区域的默认位置区域的默认位置区域的默认位置区域的默认位置style type=text/ div width:150;height=50 div width:150;height=50 #d1 background-color:red;position:static;top:0;left:0 #d1 background-color:red;position:static;top:0;left:0 #d2 background-color:blue;position:static;top:50;left:50 #d2 backgr

198、ound-color:blue;position:static;top:50;left:50 #d3 background-color:green;position:static;top:100;left:100 #d3 background-color:green;position:static;top:100;left:100 n n说明说明: :采用采用staticstatic时时, ,不管不管leftleft属性和属性和toptop属性设置为多少值属性设置为多少值, ,区域区域的位置都是一样的的位置都是一样的, ,并不受值的影响并不受值的影响 n n12.3 12.3 网页中组件的分段

199、管理网页中组件的分段管理例例1:1:分段显示不同的文字字体分段显示不同的文字字体区域的分段管理区域的分段管理style type=text/ #d1 color:red;font-family: #d1 color:red;font-family:宋体宋体;font-;font-size:10;width:500;height:100size:10;width:500;height:100 #d2 color:blue;font-family: #d2 color:blue;font-family:幼圆幼圆;font-;font-size:10;width:400;height:80size:

200、10;width:400;height:80 #d3 color:green;font-family: #d3 color:green;font-family:隶书隶书;font-;font-size:10;width:300;height:50size:10;width:300;height:50 子游曰：子游曰： 子夏之门人小子，当洒扫，应对，进退，则可矣。抑末也；本之子夏之门人小子，当洒扫，应对，进退，则可矣。抑末也；本之则无，如之何？则无，如之何？ 子夏闻之曰：子夏闻之曰： 噫！言游过矣！君子之道，孰先传焉噫！言游过矣！君子之道，孰先传焉/ 孰後倦焉？譬诸草木，区以别矣。君子之道，焉可

201、诬也？有始有卒者，孰後倦焉？譬诸草木，区以别矣。君子之道，焉可诬也？有始有卒者，其惟圣人乎！其惟圣人乎！/ 子游曰：子游曰： 子夏之门人小子，当洒扫，应对，进退，则可矣。抑末也；本之子夏之门人小子，当洒扫，应对，进退，则可矣。抑末也；本之则无，如之何？则无，如之何？ 子夏闻之曰：子夏闻之曰： 噫！言游过矣！君子之道，孰先传焉噫！言游过矣！君子之道，孰先传焉/ 孰後倦焉？譬诸草木，区以别矣。君子之道，焉可诬也？有始有卒者，孰後倦焉？譬诸草木，区以别矣。君子之道，焉可诬也？有始有卒者，其惟圣人乎！其惟圣人乎！/ 子游曰：子游曰： 子夏之门人小子，当洒扫，应对，进退，则可矣。抑末也；子夏之门人小子，

202、当洒扫，应对，进退，则可矣。抑末也；本之则无，如之何？本之则无，如之何？ 子夏闻之曰：子夏闻之曰： 噫！言游过矣！君子之道，孰先传噫！言游过矣！君子之道，孰先传焉焉/ 孰後倦焉？譬诸草木，区以别矣。君子之道，焉可诬也？有始孰後倦焉？譬诸草木，区以别矣。君子之道，焉可诬也？有始有卒者，有卒者，其惟圣人乎！其惟圣人乎！/ 例例2:2:分段显示不同的文字背景分段显示不同的文字背景区域的分段管理区域的分段管理style type=text/ #d1 color:red;font-family: #d1 color:red;font-family:宋体宋体;font-size:15;font-;font

203、-size:15;font-style:italic;background-image:url(01.jpg)style:italic;background-image:url(01.jpg) #d2 color:blue;font-family: #d2 color:blue;font-family:幼圆幼圆;font-size:13;font-;font-size:13;font-weight:bold;background-image:url(02.jpg)weight:bold;background-image:url(02.jpg) #d3 color:green;font-fami

204、ly: #d3 color:green;font-family:隶书隶书;font-size:12;background-;font-size:12;background-image:url(03.jpg)image:url(03.jpg) 孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可

205、忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓

206、季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？ 孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不

207、可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？孔子谓季氏，孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可

208、忍也？孔子谓季氏孔子谓季氏， 八佾舞於庭，是可忍也，孰不可忍也？八佾舞於庭，是可忍也，孰不可忍也？ n n12.4 12.4 层的概念层的概念一个区域可以把它看作是一个层一个区域可以把它看作是一个层, ,是一个总处于统一平面中是一个总处于统一平面中的层的层例例1:1:区域的重叠区域的重叠层的重叠层的重叠style type=text/ #z1 background- #z1 background-color:red;width:300;height:250;position:absolute;top:30;leftcolor:red;width:300;height:250;position:

209、absolute;top:30;left:30:30 #z2 background- #z2 background-color:blue;width:250;height:200;position:absolute;top:30;lefcolor:blue;width:250;height:200;position:absolute;top:30;left:60t:60 #z3 background- #z3 background-color:green;width:200;height:150;position:absolute;top:30;lecolor:green;width:200;

210、height:150;position:absolute;top:30;left:30ft:30 例例2:2:改变区域的重叠顺序改变区域的重叠顺序层的概念层的概念style type=text/ #z1 background- #z1 background-color:red;width:300;height:250;position:absolute;top:30;leftcolor:red;width:300;height:250;position:absolute;top:30;left:30;:30;z-index:1z-index:1 #z2 background- #z2 back

211、ground-color:blue;width:250;height:200;position:absolute;top:30;lefcolor:blue;width:250;height:200;position:absolute;top:30;left:60;t:60;z-index:3z-index:3 #z3 background- #z3 background-color:green;width:200;height:150;position:absolute;top:30;lecolor:green;width:200;height:150;position:absolute;to

212、p:30;left:30;ft:30;z-index:2z-index:2 n n说明说明: :Z-indexZ-index属性等于三维空间中的属性等于三维空间中的Z Z坐标坐标, ,设置区域的上下层关设置区域的上下层关系系, ,设置值为整数设置值为整数, ,整数值越大整数值越大, ,区域层次就越是处于上层区域层次就越是处于上层, ,反之反之, ,区域层次越上处于下层区域层次越上处于下层, ,上层覆盖下一层的内容上层覆盖下一层的内容, ,所所以利用以利用z-indexz-index属性属性, ,可以让区域的显示更加多元次多层次可以让区域的显示更加多元次多层次化化 n n三维空间的建立三维空间的

213、建立1. 1. 图片和文字的层次建立图片和文字的层次建立三维空间的建立三维空间的建立style type=text/ #z1 position:absolute;top:25;left:45;z-index:1 #z1 position:absolute;top:25;left:45;z-index:1 #z2 position:absolute;top:30;left:50;font-family: #z2 position:absolute;top:30;left:50;font-family:楷书楷书;font-;font-size:30;color:red;z-index:3size:

214、30;color:red;z-index:3 #z3 position:absolute;top:40;left:60;font-family: #z3 position:absolute;top:40;left:60;font-family:隶书隶书;font-;font-size:40;color:blue;z-index:2size:40;color:blue;z-index:2img =05.jpg网网页页设设计计HELLO!CSSHELLO!CSS 2. 2. 文字的立体效果文字的立体效果立体文字立体文字style type=text/ #z1 font-size:60pt; col

215、or:white; font-family: #z1 font-size:60pt; color:white; font-family:楷体楷体; ; position:absolute; top:2cm; left:2cm; z-index:2 position:absolute; top:2cm; left:2cm; z-index:2 #z2 font-size:60pt; color:gray font-family: #z2 font-size:60pt; color:gray font-family:楷体楷体; ; position:absolute; top:2.05cm; le

216、ft:2.05cm; z-index:1 position:absolute; top:2.05cm; left:2.05cm; z-index:1网页制作网页制作网页制作网页制作说明说明: :立体文字的制作立体文字的制作, ,首先是制作两个层首先是制作两个层, ,一个在上一个在上, ,显示主颜色显示主颜色, ,一个在一个在下下, ,显示暗颜色显示暗颜色, ,然后两个层的位置稍微错开一点即可然后两个层的位置稍微错开一点即可 3. 3. 文字的阴影效果文字的阴影效果阴影文字阴影文字style type=text/ #z1 font-size:60pt; color:blue; font-fami

217、ly: #z1 font-size:60pt; color:blue; font-family:楷体楷体; ; position:absolute; top:2cm; left:2cm; z-index:3 position:absolute; top:2cm; left:2cm; z-index:3 #z2 font-size:60pt; color:gray; font-family: #z2 font-size:60pt; color:gray; font-family:楷体楷体; ; position:absolute; top:1.93cm; left:1.93cm; z-index

218、:2 position:absolute; top:1.93cm; left:1.93cm; z-index:2 #z3 font-size:60pt; color:aqua; font-family: #z3 font-size:60pt; color:aqua; font-family:楷体楷体; ; position:absolute; top:2.06cm; left:2.06cm; z-index:1 position:absolute; top:2.06cm; left:2.06cm; z-index:1 网页制作网页制作网页制作网页制作网页制作网页制作说明说明: :制作三个层制作

219、三个层, ,一个在上一个在上, ,显示主颜色显示主颜色, ,一个在中间一个在中间, ,显示显示文字的光亮效果文字的光亮效果, ,一个在下一个在下, ,显示暗颜色显示暗颜色,3,3个层的位置稍微个层的位置稍微错开一点错开一点, ,就形成文字的阴影效果就形成文字的阴影效果十三十三 CSS与与HTML的结合方式的结合方式n n13.1 HTML13.1 HTML的内部定义的内部定义在在HTMLHTML文件内部可以直接定义文件内部可以直接定义csscss样式样式, ,常用于一些样式统一而简单的的常用于一些样式统一而简单的的网页中网页中例例1:1:在标记内直接定义在标记内直接定义HTMLHTML标记内的

220、直接定义标记内的直接定义; color:red“此行文字将被定义为红色楷体的字体此行文字将被定义为红色楷体的字体; color:green此行文字将被定义为绿色黑体的字体此行文字将被定义为绿色黑体的字体 n n说明说明: :1.1.利用这种方式定义样式利用这种方式定义样式, ,只能控制该标记的显示样式只能控制该标记的显示样式, ,并一并一影响其它标记的样式影响其它标记的样式2.2.结构方式结构方式 ;” 例例2:2:对标记的直接定义对标记的直接定义对对HTMLHTML标记直接定义标记直接定义style type=text/ h1 font-family:h1 font-family:楷体楷体;

221、 color:yellow; color:yellow h2 font-family: h2 font-family:黑体黑体; color:blue; color:blue此行文字为黄色楷体的字体此行文字为黄色楷体的字体此行文字为蓝色黑体的字体此行文字为蓝色黑体的字体 n n说明说明: :对对HTMLHTML标记进行直接定义后标记进行直接定义后, ,只要用到这个标记只要用到这个标记, ,就能显示同就能显示同样的样式效果样的样式效果, ,这样就比使用这样就比使用stylestyle属性的方法来定义样式属性的方法来定义样式方便方便, ,不必每次用到该标记时都要定义一次不必每次用到该标记时都要定义

222、一次 例例3:3:利用利用classclass属性的选择性定义属性的选择性定义CLASSCLASS定义样式的使用定义样式的使用style type=text/ p.a1 font-family:p.a1 font-family:楷体楷体; color:red; color:red *.a2 font-family: *.a2 font-family:黑体黑体; color:green; color:green此行文字为红色楷体的字体此行文字为红色楷体的字体此行文字为浏览器默认的字体样式此行文字为浏览器默认的字体样式此行文字为绿色黑体的字体样式此行文字为绿色黑体的字体样式 n n说明说明: :1

223、.1.利用利用classclass的选择性定义的选择性定义, ,可以使某些标记显示已定义的样可以使某些标记显示已定义的样式式, ,其它的标记则不显示该样式其它的标记则不显示该样式, ,即不是所有的标记采用了即不是所有的标记采用了classclass属性后都可以显示样式属性后都可以显示样式, ,如如,该标记所该标记所控制的文字也同样是浏览器默认的样式控制的文字也同样是浏览器默认的样式, ,这是因为在前面这是因为在前面的样式定义中的样式定义中,”p.a1”,”p.a1”代表的是只有代表的是只有标记使用该标记使用该classclass属性时才有用属性时才有用, ,其它标记使用其它标记使用”a1”a1

224、”都不起作用都不起作用, ,而而”*”*.a2”.a2”代表所有标记使用代表所有标记使用该该classclass属性都可以属性都可以 2.Class2.Class属性的语法结构属性的语法结构style type=“text/”*.*.样式名样式名11样式属性样式属性: :样式值样式值; ;样式属性样式属性: :样式值样式值;*.*.样式名样式名22样式属性样式属性: :样式值样式值; ;样式属性样式属性: :样式值样式值;或是或是style type=“text/”标记名标记名1.1.样式名样式名11样式属性样式属性: :样式值样式值; ;样式属性样式属性: :样式值样式值;标记名标记名2.2

225、.样式名样式名22样式属性样式属性: :样式值样式值; ;样式属性样式属性: :样式值样式值;其中其中, ,样式名是可以随便定义的样式名是可以随便定义的, ,里面的里面的”*”*.”,.”,就等同于就等同于idid属性里的属性里的”#”,#”,其中其中”*”*”是可以省略的是可以省略的 例例4:4:利用利用idid属性的选择性定义属性的选择性定义IDID定义样式的使用定义样式的使用style type=text/ p#a1 font-family:p#a1 font-family:楷体楷体; color:red; color:red #a2 font-family: #a2 font-fami

226、ly:黑体黑体; color:green; color:green 此行文字为红色楷体的字体此行文字为红色楷体的字体 此行文字为浏览器默认的字体样式此行文字为浏览器默认的字体样式 此行文字为绿色黑体的字体样式此行文字为绿色黑体的字体样式 n n说明说明: :这里和上面这里和上面classclass属性定义样式方式的效果是一样的属性定义样式方式的效果是一样的, ,只是使只是使用的用的是是idid属性属性. .实际上实际上,class,class属性和属性和idid属性在应用过程中属性在应用过程中是没有太大区别的是没有太大区别的 例例5:5:结构化定义结构化定义结构化选择符的使用结构化选择符的使用

227、style type=text/ h1.q font-family:h1.q font-family:楷体楷体; color:red; color:red h1.w1 font-family: h1.w1 font-family:黑体黑体; color:green; color:green此行文字为红色楷体的字体此行文字为红色楷体的字体此行文字为黑体绿色的字体此行文字为黑体绿色的字体 n n13.2 HTML13.2 HTML的外部定义的外部定义除了可以在除了可以在htmlhtml文件中进行文件中进行csscss的样式定义外的样式定义外, ,还可以先制作还可以先制作一个一个csscss文件文件

228、, ,然后通过然后通过htmlhtml文件来调用这个文件来调用这个csscss文件文件, ,这样这样, ,只要定义一个只要定义一个csscss文件文件, ,就可以定义该就可以定义该csscss文件的所有网页文件的所有网页的样式的样式 例1:以嵌入方式调用css文件嵌入外部样式表嵌入外部样式表style type=text/import url(01.css);import url(01.css);body 欢迎光临欢迎光临前沿工作室前沿工作室欢迎光临欢迎光临 n n01.css01.css文件内容如下文件内容如下: : center.text font-family: center.text

229、font-family:楷体楷体; color:red; font-size:25; color:red; font-size:25 i color:green; font-size=50pt i color:green; font-size=50pt img height:100 img height:100 n n说明说明: :嵌入式外部样式表语法结构为嵌入式外部样式表语法结构为: : import import urlurl(“(“外部样式表名或路径外部样式表名或路径”););CssCss文件的扩展名为文件的扩展名为”. .csscss” 例例2:2:以链接方式调用以链接方式调用cssc

230、ss文件文件链接外部样式表链接外部样式表link type=text/=01.cssbody 欢迎光临欢迎光临前沿工作室前沿工作室欢迎光临欢迎光临 n n说明说明: :这是链接外部样式表这是链接外部样式表, ,其语法结构为其语法结构为: :link type=“text/ n n13.3 13.3 csscss的调用顺序的调用顺序当同时出现几种当同时出现几种htmlhtml与与csscss的结合方式时的结合方式时, ,浏览器的选择顺序浏览器的选择顺序: :直接利用直接利用stylestyle属性在属性在htmlhtml标记内的直接定义最为优先标记内的直接定义最为优先, ,至于其它的定义方式至于

231、其它的定义方式, ,浏览器选择最后定义的样式来显示浏览器选择最后定义的样式来显示网页内容网页内容 例例1:css1:css的调用顺序的调用顺序CSSCSS的调用顺序的调用顺序link type=text/=01.cssstyle type=text/ import url(02.css); import url(02.css); i color:blue; font-size=40 i color:blue; font-size=40 body 欢迎光临欢迎光临前沿工作室前沿工作室欢迎光临欢迎光临 n n01.css01.css文件内容如下文件内容如下 center.text font-fam

232、ily:center.text font-family:楷体楷体; color:red; font-; color:red; font-size:25size:25 i color:green; font-size=50pt i color:green; font-size=50pt img height:100 img height:100 n n02.css02.css文件内容如下文件内容如下: : center.text font-family: center.text font-family:隶书隶书; color:blue; font-; color:blue; font-size:

233、20size:20 i color:red; font-size=60 i color:red; font-size=60 img height:100 img height:100 n n13.4 13.4 csscss中的继承性质中的继承性质继承继承, ,即被包含的样式标记除显示本身的样式效果外即被包含的样式标记除显示本身的样式效果外, ,还会显还会显示包含它的样式效果示包含它的样式效果 例例1:1:包含继承包含继承CSSCSS的继承性质的继承性质style type=text/ h1 color:blue h1 color:blue body 欢迎光临欢迎光临前沿工作室前沿工作室欢迎光临

234、欢迎光临 n n说明说明: :虽然只定义了虽然只定义了标记的颜色样式属性标记的颜色样式属性, ,而没有定义而没有定义标记标记, ,但由但由标记所控制的标记所控制的”前沿工作室前沿工作室”也显示蓝颜色也显示蓝颜色, ,并且并且是斜体样式是斜体样式, ,这就是继承这就是继承,标记包含在标记包含在标记中标记中, ,从而从而继承了继承了标记的样式标记的样式 例例2:2:定义冲突定义冲突CSSCSS的继承性质的继承性质style type=text/ h1 color:blue h1 color:blue i color:red i color:red body 欢迎光临欢迎光临前沿工作室前沿工作室欢迎

235、光临欢迎光临 n n说明说明: :同时对同时对标记和标记和标记进行了颜色的样式属性定义标记进行了颜色的样式属性定义, ,这是这是以被包含的样式为主以被包含的样式为主 例例3:3:标记中的相互继承标记中的相互继承相互继承性质相互继承性质style type=text/ h1 i color:blue h1 i color:blue 此为蓝色斜体标题文字样式此为蓝色斜体标题文字样式此为浏览器文默认标题文字样式此为浏览器文默认标题文字样式此为浏览器默认斜体文字样式此为浏览器默认斜体文字样式 n n说明说明: :1.1.统一对统一对标记和标记和标记进行了样式属性的定义标记进行了样式属性的定义, ,在在

236、部分部分 也同也同时使用可这两个标记时使用可这两个标记, ,这样文字的显示样式就同时是蓝色的标题文字这样文字的显示样式就同时是蓝色的标题文字, ,而且又是斜体字体而且又是斜体字体, ,即即标记和标记和标记相互继承了对方的样式属性标记相互继承了对方的样式属性2.2.注意注意: :首先首先, ,定义的时候两个标记要一起定义定义的时候两个标记要一起定义, ,标记间加空格间隔标记间加空格间隔; ;其次其次, ,使用的时候使用的时候, ,两个标记一起使用两个标记一起使用 例例4:4:一次定义一次定义3 3组标记组标记多标记相互继承性质多标记相互继承性质style type=text/ h1 i,i u,

237、i bcolor:blue h1 i,i u,i bcolor:blue body 此为蓝色斜体标题文字样式此为蓝色斜体标题文字样式此为蓝色斜体带下划线文字样式此为蓝色斜体带下划线文字样式此为蓝色粗斜体文字样式此为蓝色粗斜体文字样式 十四十四 CSSCSS中的滤镜中的滤镜 概述概述好了，下面我们将进入好了，下面我们将进入CSSCSS的最精彩的部分的最精彩的部分-滤镜，它滤镜，它将把我们带入绚丽多姿的多媒体世界。正是有了滤镜属性，将把我们带入绚丽多姿的多媒体世界。正是有了滤镜属性，页面才变得更加漂亮。页面才变得更加漂亮。CSSCSS的滤镜属性的标识符是的滤镜属性的标识符是filterfilter

238、。为了使您对它有为了使您对它有个整体的印象，我们先来看一下它的书写格式：个整体的印象，我们先来看一下它的书写格式： filterfilter：filternamefiltername（parametersparameters） FilterFilter是滤镜属性选择符是滤镜属性选择符, ,也就是说，只要您进行滤镜也就是说，只要您进行滤镜操作，就必须先定义操作，就必须先定义filterfilter；filternamefiltername是滤镜属性名，是滤镜属性名，这里包括这里包括alphaalpha、blurblur、chromachroma等等多种属性等等多种属性 14.1 alpha14.

239、1 alpha滤镜滤镜例例1:1:圆形透明渐层效果圆形透明渐层效果 alphaalpha滤镜滤镜 原始图片原始图片图片加入圆形透明的渐层效果图片加入圆形透明的渐层效果/ img src=01.jpg / n n说明:1.alpha1.alpha是来设置透明度的。语法格式是来设置透明度的。语法格式: :filterfilter：alphaalpha（opacity=opacity=opcityopcity，finishopacityfinishopacity= =finishopacityfinishopacity，style=stylestyle=style，startXstartX= =st

240、artXstartX，startYstartY= =startYstartY，finishXfinishX= =finishXfinishX，finishYfinishY= =finishYfinishY）2.Opacity2.Opacity代表开始时的透明度，可选值从代表开始时的透明度，可选值从0 0到到100100，0 0代表完代表完全透明，全透明，100100代表完全不透明代表完全不透明, ,值越大值越大, ,透明度越低透明度越低; ; FinishopacityFinishopacity是一个可选项，用来设置结束时的透明是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值

241、也是从度，从而达到一种渐变效果，它的值也是从0 0到到100100。 StyleStyle参数指定了透明区域的形状特征。其中参数指定了透明区域的形状特征。其中0 0代表统一形状；代表统一形状；1 1代表线形；代表线形；2 2代表放射状；代表放射状；3 3代表长方形。代表长方形。StartXStartX和和StartYStartY代表渐变透明效果的开始坐标代表渐变透明效果的开始坐标, ,单位为图片单位为图片宽度的百分比宽度的百分比finishXfinishX和和finishYfinishY代表渐变透明效果的结束坐标。代表渐变透明效果的结束坐标。 例例2:2:矩形透明渐变效果矩形透明渐变效果alp

242、haalpha滤镜中滤镜中stylestyle参数的使用参数的使用 原始图片原始图片渐层形状为均匀渐层形状为均匀, ,透明度为透明度为5050渐层形状为直线渐层形状为直线/ img src=01.jpg style=filter:alpha(style=0,opacity=50)img src=01.jpg / 渐层形状为圆形渐层形状为圆形渐层形状为矩形渐层形状为矩形/ img src=01.jpg img src=01.jpg / 例例3:3:多参数的混合使用多参数的混合使用alphaalpha滤镜的各透明渐变效果滤镜的各透明渐变效果 原始图片原始图片开始透明度渐变开始透明度渐变11开始透明

243、度渐变开始透明度渐变22/ img src=01.jpg )img src=01.jpg tX=0,startY=0,finishX=50,finishY=50)/ 14.2 Blur14.2 Blur滤镜滤镜动态模糊效果动态模糊效果 原始图片原始图片显示原来的图片显示原来的图片, ,以以270270度的方向模糊度的方向模糊/ / 原始图片原始图片不显示原来的图片不显示原来的图片, ,以以225225度的方向模糊度的方向模糊/ img src=05.jpg style=filter:blur(add=0,direction=225,strength=15)/ n n说明说明: :1.1.语法结

244、构语法结构 filterfilter：blurblur（add=addadd=add，directiondirection，strength=strengthstrength=strength）2. blur2. blur属性有三个参数：属性有三个参数：addadd、directiondirection、strengthstrength。 AddAdd参数有两个参数值：参数有两个参数值：1 1和和0 0。指定原始图片是否被显示。指定原始图片是否被显示。 0 0表示不显示，表示不显示，1 1表示显示（浏览器默认）表示显示（浏览器默认）; Direction; Direction参参数用来设置模糊

245、的方向。模糊效果是按照顺时针方向进行数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中的。其中0 0度代表垂直向上，每度代表垂直向上，每4545度一个单位，默认值是度一个单位，默认值是向左的向左的270270度度; Strength; Strength参数值只能使用整数来指定，它参数值只能使用整数来指定，它代表动态模糊的效果。默认值是代表动态模糊的效果。默认值是5 5像素。值不宜过大，否像素。值不宜过大，否则图片模糊不清则图片模糊不清 14.3 14.3 FlipHFlipH、FlipVFlipV属性属性FlipFlip是是CSSCSS滤镜的翻转属性，滤镜的翻转属性，FlipHFlip

246、H代表水平翻转，代表水平翻转，FlipVFlipV代代表垂直翻转。它们的表达式很简单，分别是：表垂直翻转。它们的表达式很简单，分别是： FilterFilter：FlipHFlipH FilterFilter：FlipVFlipV 例例: :翻转图片翻转图片 原始图片原始图片水平翻转水平翻转180180度度/ img src=01.jpg style= 垂直翻转垂直翻转180180度度同时水平及垂直翻转同时水平及垂直翻转180180度度/ img src=01.jpg style=img src=01.jpg style=/ 14.4 invert14.4 invert滤镜滤镜InvertIn

247、vert是能制作出类似底片效果的滤镜是能制作出类似底片效果的滤镜, ,底片效果实际上是底片效果实际上是将图片的颜色饱和度和亮度完全反转过来将图片的颜色饱和度和亮度完全反转过来, ,该滤镜没有参该滤镜没有参数数表达式：表达式：FilterFilter：InvertInvert 例例: :底片效果底片效果invertinvert滤镜滤镜 原始图片原始图片呈现底片效果呈现底片效果/ / 14.5 gray滤镜GrayGray滤镜可以让彩色图片去掉色彩后而成为黑白图片滤镜可以让彩色图片去掉色彩后而成为黑白图片, ,该滤该滤镜没有参数镜没有参数语法格式语法格式: : filter:grayfilter:

248、gray例例: :黑白图片黑白图片 原始图片原始图片图片的灰度效果图片的灰度效果/ / 14.6 14.6 XrayXray滤镜滤镜这种属性产生的效果就是使对象看上去有一种这种属性产生的效果就是使对象看上去有一种X X光片的感觉光片的感觉语法格式语法格式: :FilterFilter：XrayXray 例例:X:X光效果光效果 原始图片原始图片呈现呈现X X光片效果光片效果/ img src=01.jpg style=/ 例：黑白效果、底片效果、例：黑白效果、底片效果、X X光效果的相互比较光效果的相互比较 GrayGray滤镜的效果滤镜的效果InvertInvert滤镜的效果滤镜的效果Xra

249、yXray滤镜的效果滤镜的效果/ img src=01.jpg style=/ 14.7 Wave14.7 Wave滤镜滤镜WaveWave滤镜能让图片产生垂直的波浪效果滤镜能让图片产生垂直的波浪效果例：波浪效果例：波浪效果 原始图片原始图片波浪效果波浪效果11波浪效果波浪效果22/ img src=01.jpg )img src=01.jpg hase=100)/ n n说明：说明：1.1.语法格式：语法格式：FilterFilter：WaveWave（Add=TrueAdd=True（FalseFalse），），Freq=Freq=频频率，率，LightStrengthLightStren

250、gth= =增强光效，增强光效，Phase=Phase=偏移量，偏移量，Strength=Strength=强度）强度）2. Add2. Add是否显示原来的图片是否显示原来的图片,0,0表示不显示表示不显示,1,1显示显示( (默认默认);freq);freq设置图片上的波浪数目设置图片上的波浪数目, ,以整数设置以整数设置;strength;strength设置设置波浪强度的大小波浪强度的大小, ,以整数设置以整数设置, ,数字越大数字越大, ,波浪越大波浪越大; ;lightstrengthlightstrength, ,波浪的光照强度波浪的光照强度, ,设置从设置从0 0到到100,1

251、00,数字越数字越大大, ,光照强度越大光照强度越大;phase,;phase,波浪的起始位置波浪的起始位置, ,设置从设置从0 0到到100100 n n14.8 14.8 chromachroma滤镜滤镜ChromaChroma属性可以设置一个对象中指定的颜色为透明色，其表达式如下：属性可以设置一个对象中指定的颜色为透明色，其表达式如下： n nFilterFilter：ChromaChroma（color=colorcolor=color）设置透明色设置透明色 原始图片原始图片将飞机颜色设置为透明色将飞机颜色设置为透明色/ img src=04.gif style=red)/ n n说明

252、说明: :适用适用gifgif格式的图片格式的图片如果同时把两种以上的颜色设为透明如果同时把两种以上的颜色设为透明, ,则需要多个则需要多个chromachroma滤滤镜的结合镜的结合, ,如如”style=“style=“filter:chroma(colorfilter:chroma(color=blue) =blue) chroma(colorchroma(color=red)”=red)” 14.8 14.8 dropshadowdropshadow滤镜滤镜DropShadowDropShadow滤镜是为了添加对象的阴影效果滤镜是为了添加对象的阴影效果表达式表达式: :FilterFi

253、lter：DropShadowDropShadow（Color=colorColor=color，OffxOffx= =OffxOffx，OffyOffy= =offyoffy，Positive=positivePositive=positive）说明说明 ： 该属性一共有四个参数：该属性一共有四个参数： ColorColor代表投射阴影的颜色。代表投射阴影的颜色。 OffxOffx和和offyoffy分别分别X X方向和方向和Y Y方向阴影的偏移量。偏移量必须方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数，代表用整数值来设置。如果设置为正整数，代表X X轴的右方向轴的右方向和和

254、Y Y轴的向下方向。设置为负整数则相反。轴的向下方向。设置为负整数则相反。 PositivePositive参数有两个值：参数有两个值：TrueTrue为任何非透明像素建立为任何非透明像素建立可见的投影，可见的投影，FalseFalse为透明的像素部分建立可见的投影。为透明的像素部分建立可见的投影。 例例: :阴影效果阴影效果 原始图片原始图片/ 文字的阴影颜色为银灰色文字的阴影颜色为银灰色img src=05.gif =1)/ 文字的阴影颜色为淡黄色文字的阴影颜色为淡黄色img src=05.gif 5,positive=1)/ 14.9 glow14.9 glow滤镜、滤镜、maskmas

255、k滤镜、滤镜、shadowshadow滤镜滤镜例例1:1:光晕效果光晕效果 原始图片原始图片/ 光晕颜色为绿色光晕颜色为绿色img src=05.gif style=filter:glow(color=green,strength=5)/ 光晕颜色为蓝色光晕颜色为蓝色img src=05.gif style=filter:glow(color=blue,strength=30)/ n n说明：说明：GlowGlow滤镜的作用是使图片中的对象产生边缘光晕的模糊效果滤镜的作用是使图片中的对象产生边缘光晕的模糊效果表达式：表达式：FilterFilter：GlowGlow（Color=colorCo

256、lor=color，Strength=strengthStrength=strength）其中，其中， ColorColor是指定发光的颜色，是指定发光的颜色，StrengthStrength指定发光的强度，指定发光的强度，参数值从参数值从1 1到到255255 例例2 2：MaskMask滤镜滤镜MaskMask滤镜的作用是让图片中的对象产生遮盖效果，可以做出滤镜的作用是让图片中的对象产生遮盖效果，可以做出像印章一样的效果像印章一样的效果语法格式：语法格式：FilterFilter：MaskMask（Color=Color=颜色）颜色）只有一个只有一个ColorColor参数，用来指定使用什

257、么颜色作为掩膜参数，用来指定使用什么颜色作为掩膜 maskmask滤镜滤镜 原始图片原始图片/ 外围颜色为红色外围颜色为红色img src=05.gif style=/ 例例3 3：shadowshadow滤镜滤镜shadowshadow滤镜能制作出阴影动态的效果，可以在指定的方向建滤镜能制作出阴影动态的效果，可以在指定的方向建立物体的投影立物体的投影语法格式：语法格式： FilterFilter：ShadowShadow（Color=colorColor=color，Direction=directionDirection=direction） ShadowShadow有两个参数值：有两个参数值：ColorColor参数用来指定投影的颜色；参数用来指定投影的颜色；DirectionDirection参数用来指定投影的方向参数用来指定投影的方向 原始图片原始图片/ 左下角呈动态绿色阴影效果左下角呈动态绿色阴影效果/ 右上角呈动态黄色阴影效果右上角呈动态黄色阴影效果img src=05.gif style=filter:shadow(color=yellow,direction=45)/