网站设计与Web应用开发技术(第四版)（微课版）ch04 层叠样式表(CSS).ppt

第*页习题1.为网页添加相同的样式表是有多种不同层次的，在实际制作过程中该如何灵活应用？2.为整个网页添加背景色很容易实现，但若希望给一部分文字添加背景色该如何定义呢？3.在定义动态链接时，页面中所有的链接效果都会改变，如果想在一个页面中定义两组以上的链接效果，该如何定义？4.如何给某部分网页元素添加圆角边框？5.简述display:none与visibility:hidden这两种用法之间的异同。网站设计与Web应用开发技术(第四版) 网站设计与Web应用开发技术(第四版) *第4章层叠样式表(CSS)教学目标教学重点教学过程第*页教学目标理解CSS与网页制作之间的关系掌握在网页中加入CSS的基本方法理解CSS选择器及盒子模型掌握CSS滤镜的用法CSS典型案例第*页教学重点在网页中使用CSS的基本方法CSS选择器及盒子模型第*页教学过程CSS概述将CSS引入网站用CSS定义样式CSS选择器及盒子模型CSS的滤镜应用CSS典型用法实例第*页4.1CSS概述是CascadingStyleSheet的简称，中文翻译为：层叠样式表；为网页设计者提供更大的网页空间应用弹性；将网页的文字内容与版面设计分开处理几乎所有的浏览器都支持可取代以前一部分必须通过专门的图像处理软件实现的图片特效功能更易于管理样式，方便编排，减少管理成本便于统一风格第*页4.2将CSS引入网站要想使用CSS来进行样式的设定和管理，首先需要定义CSS，再让浏览器识别并调用。通常添加样式的方式有如下四种：内嵌样式内部样式表链入外部样式表导入外部样式表请注意这四种方式的各自特点和适用场合，并理解当几种方式同时出现时，按照优先级高低来决定哪个生效第*页4.2将CSS引入网站内嵌样式pstyle=color:blue;font-size:10pt;CSS样式表/p内部样式表在headsytle下设置：p{color:blue;font-size:10pt;}链入外部样式表在单独的CSS文件中定义，之后在网页head中添加：linkrel=stylesheethref=aDefinedCSS.csstype=text/css导入外部样式表在单独的CSS文件中定义，之后在网页headsytle下添加：@importaDefinedCSS.css第*页4.2将CSS引入网站CSS的定义是由三个部分构成：选择符、属性和属性的取值，定义方法如下： selector{property:value} 如：body{color:black} p{text-align:center;color:red}p{text-align:center;color:black;font-family:arial}此处定义的是：段落排列居中，段落中文字为黑色，字体是arial。第*页4.3CSS选择器!doctypehtmlhtmlheadstylep{text-align:center;color:black;font-family:arial;}/style/headbodyh3align=rightcolor=blue利用HTML标签很复杂/h1p利用CSS更简单/p/body/html标签选择器第*页4.3CSS选择器类别选择符类别选择器是根据类名来选择应用样式的，因此用它可以将相同的元素分类定义为不同的样式。实现时是通过在自定义类名前加点号，如： P.right{text-align:right} P.center{text-align:center}第*页4.3CSS选择器ID选择器由HTML代码中的ID参数指定单独的样式，和类选择符类似。如：#intro{font-size:150%;}第*页4.3CSS选择器通用选择器用*来表示匹配任何标签。如：*{font-size:12px;}表示所有的元素的字体大小都是12px第*页4.3CSS选择器后代选择器一种单独针对某种元素包含关系而定义的样式表，如：tablea{font-size:32px}第*页4.3CSS选择器交集选择器