8-表格布局与过滤器-CSS 21(5).ppt

1、第8课,表格布局与过滤器,CSS 2.1(5),知识回顾,实验7要点说明。 当绝对定位块较多时，注意重叠位置。 伪类hover指向显示时，被包含块一定在包含块内。 用类选择器时，一般设定样式是相同的。,预习检查,表格的结构和构成 CSS表格布局,掌握CSS表格布局 掌握常用CSS过滤器 掌握IE BUG修复,本节目标,CSS内容布局CSS表格,CSS Table 属性 CSS 表格属性允许设置表格的布局。,CSS内容布局CSS表格,CSS border-collapse 属性 设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 可能的值 为表格设置合并边框模型

2、： tableborder-collapse:collapse;,CSS内容布局CSS表格,CSS border-spacing 属性 border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。 该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。 可能的值,CSS内容布局CSS表格,边框控制 用CSS控制表格的最大便利是能够灵活控制表格的边框。 ,CSS内容布局CSS表格,边框控制 所有表格都把表格边框合并为单一的边框。 tableborder-collapse:collapse;/*合并相邻边框*/ 细边框

3、细线表格 table tdborder:#000 1px solid; 粗边框细线表格 tableborder: #000 3px solid;,CSS内容布局CSS表格,虚线表格 table tdborder:#000 1px dashed; 双线表格 tableborder: #000 3px double; 宫字表格 tableborder-collapse:separate; border-spacing:10px;/*定义表格内单元格之间的间距*/ 单线表格 tableborder-top:#000 1px solid; table tdborder-bottom:#000 1px

4、solid;,CSS内容布局CSS表格,用CSS来改善表格显示样式，使其达到一定效果，一般采用下述原则： 标题行与数据行要的区分，可以通过不同的背景色来实现。 标题与正文的文本显示效果要有区别，通过定义字体、大小、粗细等文本属性来区别。 为了避免读错行现象，可以适当增加行高，或交替定义不同背景色来实现。 用col或colgroup来组织不同列。,CSS内容布局CSS表格, 表的名称 标题 标题 标题 标题 内容 内容 内容 内容 内容 内容 内容 内容 ,CSS内容布局CSS表格,定义样式。 .table1 border-collapse:collapse;/*合并相邻边框*/ border:

5、1px #000 solid; .table1 caption font-size:18px; line-height:60px; font-weight:bold; .table1 th background:#000; color:#FFF;,CSS内容布局CSS表格,定义样式。 . table1 .r1/*交替定义不同行背景色*/ background:#BBB; .table1 .r2/*交替定义不同行背景色*/ background:#CCC; .table1 tr:hover/*通过伪类定义mouse经过时行背景改变达到动态效果*/ background:#DDD;,CSS内容布局

6、CSS过滤器,在开发Web应用程序时，为了兼容各个厂家的浏览器，有时需要采用CSS过滤器和招数来实现不同的浏览器表现相同的策略。 CSS过滤器(filter)是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。过滤器根据浏览器中的缺陷，比如解析bug以及未实现或错误地实现的CSS，对浏览器显示或隐藏规则。 CSS招数是(hack)一种让浏览器表现得符合自己希望的并不完美的解决方法。CSS招数通常用来解决特定的浏览器bug，比如IE的专有框模型。,CSS内容布局CSS过滤器,当浏览器的bug在未来的版本中得到修复之后，某些招数会失效或者会有怪异的表现，而且可能无法通过CSS最新版本的检验。

7、在设计浏览器的表现时，能够不使用招数的时候尽量不要使用。CSS招数只是CSS规范的一种解决问题的手段，但不可对这种技术产生依赖。在使用CSS招数的时候，要确定表现是否因为bug的原因，会不会有其他方面的原因，比如HTML，或CSS本身的代码错误。,CSS内容布局CSS过滤器,IE有条件注释 有条件注释是一种专门的（因为是非标准的）、对常规(X)Html注释的Microsoft扩展。顾名思义，有条件注释使你能够根据条件（比如浏览器版本）显示代码块。因为使非标准的，但是有条件注释对于其他所有浏览器作为常规注释出现，因此本质上是无害的。有条件注释在Windows 上的IE5中首次出现，并且得到了Wi

8、ndows浏览器的所有后续版本的支持。 这种办法极其有效，而且非常容易记住。主要的缺点是这些注释需要放在HTML中，而不是放在CSS中。,CSS内容布局CSS过滤器,只有IE才能识别 div.content color:red; 只有特定版本才能识别 div.content color:red; ,CSS内容布局CSS过滤器,只有不是特定版本才能识别 div.content color:red; 只有高于特定版本才能识别 div.content color:red; ,CSS内容布局CSS过滤器,只有低于特定版本的才能识别 div.content color:red; 等于或者低于特定版本的才

9、能识别 div.content color:red; ,CSS内容布局CSS过滤器,等于或者高于特定版本的才能识别 div.content color:red; ,CSS内容布局CSS过滤器,过滤单独的规则和声明 最安全的过滤器依赖于未实现的CSS，而不是浏览器Bug。因为这些过滤器使用有效的CSS选择器来应用有效的声明，所以严格地说，他们根本不是过滤器。他们仅仅是某些浏览器所不能理解的有效CSS规则。,CSS内容布局CSS过滤器,子选择器招数 body font:11px Verdana, Geneva, sans-serif; padding:10px; background:url(im

10、ages/background-image.jpg) no-repeat top right; html body background:url(images/background-image.png) no-repeat top right;,CSS内容布局CSS过滤器,属性选择器招数 body font:11px Verdana, Geneva, sans-serif; padding:10px; background:url(images/background-image.jpg) no-repeat top right; bodyclass=content background:url

11、(images/background-image.png) no-repeat top right;,CSS内容布局CSS过滤器,星号HTML招数 *html body background:url(images/background-image.jpg) no-repeat top right; *+html body background:url(images/background-image.png) no-repeat top right; ,CSS内容布局CSS过滤器,转义属性招数 div.content background:#cf0; border:1px solid black

12、; padding:50px; width:302px; width:200px; IE6及其以下不支持“”。,CSS内容布局CSS过滤器,!important和下划线招数 body.content background:url(images/background-image.png) no-repeat top right !important; background:url(images/background-image.jpg) no-repeat top right; div.content background:#cf0; width:500px; *width:200px;/*IE

13、*/ _width:300px;/*IE*/ ,CSS内容布局IE BUG,错误的扩展 .box-model-01 width:300px; height:100px; border:1px solid black; padding:10px; background:#cf0; line-height:180%; 当盒模型或块内容超出高度时，IE6会自动扩展块的高度。 IE文本模式有两种： Quirks mode（怪异模式）。 Strict mode（标准模式）。,CSS内容布局IE BUG,当早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的

14、解析方式被称之为Quirks mode（怪异模式），但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式叫做Strict mode（标准模式） 。 浏览器采用doctype声明判断用哪种方式解析CSS。对没有doctype声明的网页采用Quirks mode解析。对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http:/hsivonen.iki.fi/doctype/ 。,CSS内容布局IE BUG,如何判断当前浏览器使用什么模式？ document对象有个属性compatMode，它有两个值： Bac

15、kCompat：对应quirks mode。 CSS1Compat：对应strict mode。 通过脚本进行判断。 if(patMode!=BackCompat)document.write(标准模式);else document.write(诡异模式);,CSS内容布局IE BUG,错误的扩展解决方式 .box-model-01width:300px; height:auto !important; height:100px; min-height:100px;/*IE6不支持*/ border:1px solid black; padding:10px; background:#cf0;

16、 line-height:180%;,CSS内容布局IE BUG,相对容器中的绝对定位 .box-model-01 position:relative; border:1px solid black; background:#cf0; padding:10px; .box-model-02 width:100px; height:100px; border:1px solid black; background:#fc0; padding:10px; position:absolute; right:10px; bottom:10px; 当类box-model-01块相对定位后，成为包含块，但没有指定高度，类box-model-02块绝对定位时IE6出现错误。,CSS内容布局IE BUG,相对容器中的绝对定位解决方式 * html .box-model-01height:1%; * html .box-model-01height:200px;,CSS内容布局IE BU