网站设计与Web应用开发技术 ch05

网站设计与WebWebWebWeb应用开发技术清华大学出版社2011201120112011年9999月24242424日第5章层叠样式表(CSS)教学目标教学重点教学过程第2222页网站设计与WebWebWebWeb应用开发技术清华大学出版社教学目标�理解CSSCSSCSSCSS与网页制作之间的关系�掌握在网页中使用CSSCSSCSSCSS的基本方法�掌握CSSCSSCSSCSS滤镜的用法�了解在DreamweaverDreamweaverDreamweaverDreamweaver中应用CSSCSSCSSCSS第3333页网站设计与WebWebWebWeb应用开发技术清华大学出版社教学重点�在网页中使用CSSCSSCSSCSS的基本方法�CSSCSSCSSCSS滤镜的用法第4444页网站设计与WebWebWebWeb应用开发技术清华大学出版社教学过程�CSSCSSCSSCSS概述�为网页添加CSSCSSCSSCSS�用CSSCSSCSSCSS定义样式�CSSCSSCSSCSS的滤镜及其应用�在DreamweaverDreamweaverDreamweaverDreamweaver中使用CSSCSSCSSCSS�典型用法实例第5555页网站设计与WebWebWebWeb应用开发技术清华大学出版社5.1CSS5.1CSS5.1CSS5.1CSS概述�是CascadingStyleSheet的简称，中文翻译为：层叠样式表；为网页设计者提供更大的网页空间应用弹性；将网页的文字内容与版面设计分开处理�几乎所有的浏览器都支持�可取代以前一部分必须通过专门的图像处理软件实现的图片特效功能�更易于管理样式，方便编排，简化管理成本�便于统一风格第6666页网站设计与WebWebWebWeb应用开发技术清华大学出版社5.25.25.25.2为网页添加CSSCSSCSSCSS�要想使用CSSCSSCSSCSS，首先要让浏览器识别并调用，通常添加样式的方式有如下四种：�内嵌样式�内部样式表�链入外部样式表�导入外部样式表�请注意这四种方式的各自特点和适用场合，并理解当几种方式同时出现时，按照优先级高低来决定哪个生效第7777页网站设计与WebWebWebWeb应用开发技术清华大学出版社5.35.35.35.3用CSSCSSCSSCSS定义样式�CSSCSSCSSCSS的定义是由三个部分构成：选择符、属性和属性的取值，定义方法如下：selector{property:value}selector{property:value}selector{property:value}selector{property:value}如：body{color:black}body{color:black}body{color:black}body{color:black}p{text-align:center;color:red}p{text-align:center;color:red}p{text-align:center;color:red}p{text-align:center;color:red}pppp{{{{text-align:center;text-align:center;text-align:center;text-align:center;color:black;color:black;color:black;color:black;font-family:font-family:font-family:font-family:arialarialarialarial}}}}此处定义的是：段落排列居中，段落中文字为黑色，字体是arialarialarialarial。第8888页网站设计与WebWebWebWeb应用开发技术清华大学出版社5.35.35.35.3用CSSCSSCSSCSS定义样式HTMLHTMLHTMLHTMLHEADHEADHEADHEADSTYLESTYLESTYLESTYLEPPPP{{{{text-align:center;text-align:center;text-align:center;text-align:center;color:black;color:black;color:black;color:black;font-family:font-family:font-family:font-family:arialarialarialarial}}}}/STYLE/STYLE/STYLE/STYLE/HEAD/HEAD/HEAD/HEADBODYBODYBODYBODYH3align=rightH3align=rightH3align=rightH3align=rightcolor=bluecolor=bluecolor=bluecolor=blue利用HTMLHTMLHTMLHTML标签很复杂/H1/H1/H1/H1PPPP利用CSSCSSCSSCSS更简单/P/P/P/P/BODY/BODY/BODY/BODY/HTML/HTML/HTML/HTML第9999页网站设计与WebWebWebWeb应用开发技术清华大学出版社5.35.35.35.3用CSSCSSCSSCSS定义样式�选择符组�为了减少样式的重复定义，可将相同属性和值的选择符组合起来书写，使用逗号分隔，如：h1,h2,h3,h4,h5,h6{color:green}h1,h2,h3,h4,h5,h6{color:green}h1,h2,h3,h4,h5,h6{color:green}h1,h2,h3,h4,h5,h6{color:green}�类选择符�可将相同的元素分类定义为不同的样式，定义时，在自定义类名前加点号，如：P.rightP.rightP.rightP.right{text-align:right}{text-align:right}{text-align:right}{text-align:right}P.centerP.centerP.centerP.center{text-align:center}{text-align:center}{text-align:center}{text-align:center}第10101010页网站设计与WebWebWebWeb应用开发技术清华大学出版社5.35.35.35.3用CSSCSSCSSCSS定义样式�IDIDIDID选择符�由HTMLHTMLHTMLHTML代码中的IDIDIDID参数指定单独的样式，和类选择符类似。如：#intro{font-size:150%;}#intro{font-size:150%;}#intro{font-size:150%;}#intro{font-size:150%;}�包含选择符�一种单独针对某种元素包含关系而定义的样式表，如：tablea{font-size:32px}tablea{font-size:32px}tablea{font-size:32px}tablea{font-size:32px}第11111111页网站设计与WebWebWebWeb应用开发技术清华大学出版社5.35.35.35.3用CSSCSSCSSCSS定义样式�样式表的层叠性�层叠性指的是继承性，样式表的继承规则是外部的元素样式继承给这个元素所包含的其他元素�实际上，所有嵌套在元素中的元素都会继承外层元素已指定的属性值，有时会把很多层次所嵌套的样式叠加在一起，除非另外设置div{color:red;font-size:9pt}div{color:red;font-size:9pt}div{color:red;font-size:9pt}div{color:red;font-size:9pt}……………………divdivdivdivpppp这个段落的文字为红色9999号字/p/p/p/p/div/div/div/divPPPP中内容会继承DIVDIVDIVDIV所定义的样式。但当样式表继承遇到冲突时，总是以最后定义的样式为准第12121212页网站设计与WebWebWebWeb应用开发技术清华大学出版社5.35.35.35.3用CSSCSSCSSCSS定义样式�伪类�伪类和伪元素的选择符，是一组基于预定义性质的选择符，HTMLHTMLHTMLHTML元素可占有这些预定义性质selector:pseudoselector:pseudoselector:pseudoselector:pseudo-class{property:value}-class{property:value}-class{property:value}-class{property:value}�锚的伪类参考实例：ex5_10.htmlex5_10.htmlex5_10.htmlex5_10.html�伪类和类选择符参考实例：ex5_11.htmlex5_11.htmlex5_11.htmlex5_11.html第13131313页网站设计与WebWebWebWeb应用开发技术清华大学出版社5.35.35.35.3用CSSCSSCSSCSS定义样式�伪对象�即虚拟元素，它们是根据内容创建的，与基本元素相关的；共有4444个�其中伪元素:before:before:before:before和:after:after:after:after用于插入已产生的内容�:first-letter:first-letter:first-letter:first-letter和:first-line:first-line:first-line:first-line可以对元素的首字或首行设定不同的样式第14141414页网站设计与WebWebWebWeb应用开发技术清华大学出版社5.35.35.35.3用CSSCSSCSSCSS定义样式�注释�可以在CSSCSSCSSCSS中插入注释来说明代码的含义，注释有利于自己或别人今后在编辑和更改代码时理解代码的含义�在浏览器中，注释是不显示的�注意与HTMLHTMLHTMLHTML中的注释方式的区别，此处只能以““““////****””””开头，以““““****////””””结尾第15151515页网站设计与WebWebWebWeb应用开发技术清华大学出版社5.4CSS5.4CSS5.4CSS5.4CSS的滤镜及其应用�使用CSSCSSCSSCSS的滤镜，可以利用客户端的计算资源对图片生成各种类似于PhotoshopPhotoshopPhotoshopPhotoshop特效滤镜的效果�CSSCSSCSSCSS滤镜属性的标识符是filterfilterfilterfilterfilterfilterfilterfilter：filtername(parametersfiltername(parametersfiltername(parametersfiltername(parameters))))�界面滤镜(ProceduralSurfaces)(ProceduralSurfaces)(ProceduralSurfaces)(ProceduralSurfaces)�静态滤镜(Staticfilters)(Staticfilters)(Staticfilters)(Staticfilters)�转换滤镜(Transitions)(Transitions)(Transitions)(Transitions)第16161616页网站设计与WebWebWebWeb应用开发技术清华大学出版社5.4CSS5.4CSS5.4CSS5.4CSS的滤镜及其应用界面滤镜�界面滤镜是一个显示在对象内容和对象背景之间彩