8-表格布局与过滤器-CSS 2.1(5)

渤海大学信息科学与工程学院第8课表格布局与过滤器CSS2.1(5)要点说明。•当绝对定位块较多时，注意重叠位置。•伪类hover指向显示时，被包含块一定在包含块内。•用类选择器时，一般设定样式是相同的。预习检查•表格的结构和构成•CSS表格布局•掌握CSS表格布局•掌握常用CSS过滤器•掌握IEBUG修复本节目标内容布局—CSS表格CSSTable属性•CSS表格属性允许设置表格的布局。属性描述border-collapse设置是否把表格边框合并为单一的边框。border-spacing设置分隔单元格边框的距离。（仅用于separatedborders模型）caption-side设置表格标题的位置。empty-cells设置是否显示表格中的空单元格。（仅用于separatedborders模型）table-layout设置显示单元、行和列的算法。内容布局—CSS表格•CSSborder-collapse属性•设置表格的边框是否被合并为一个单一的边框，还是象在标准的HTML中那样分开显示。•可能的值•为表格设置合并边框模型：table{border-collapse:collapse;}值描述separate默认值。边框会被分开。不会忽略border-spacing和empty-cells属性。collapse如果可能，边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性。内容布局—CSS表格•CSSborder-spacing属性•border-spacing属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。•该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。•可能的值值描述lengthlength规定相邻单元边框之间的距离。不允许使用负值。如果定义一个length参数，那么定义的是水平和垂直间距。如果定义两个length参数，那么第一个设置水平间距，而第二个设置垂直间距。内容布局—CSS表格边框控制•用CSS控制表格的最大便利是能够灵活控制表格的边框。tabletrtd /tdtd /tdtd /td/trtrtd /tdtd /tdtd /td/trtrtd /tdtd /tdtd /td/tr/table内容布局—CSS表格边框控制•所有表格都把表格边框合并为单一的边框。table{border-collapse:collapse;/*合并相邻边框*/}•细边框细线表格tabletd{border:#0001pxsolid;}•粗边框细线表格table{border:#0003pxsolid;}内容布局—CSS表格•虚线表格tabletd{border:#0001pxdashed;}•双线表格table{border:#0003pxdouble;}•宫字表格table{border-collapse:separate;border-spacing:10px;/*定义表格内单元格之间的间距*/}•单线表格table{border-top:#0001pxsolid;}tabletd{border-bottom:#0001pxsolid;}内容布局—CSS表格用CSS来改善表格显示样式，使其达到一定效果，一般采用下述原则：•标题行与数据行要的区分，可以通过不同的背景色来实现。•标题与正文的文本显示效果要有区别，通过定义字体、大小、粗细等文本属性来区别。•为了避免读错行现象，可以适当增加行高，或交替定义不同背景色来实现。•用col或colgroup来组织不同列。内容布局—CSS表格tableclass=table1width=100%caption表的名称/captiontrth标题/tdth标题/tdth标题/tdth标题/td/trtrclass=r1td内容/tdtd内容/tdtd内容/tdtd内容/td/trtrclass=r2td内容/tdtd内容/tdtd内容/tdtd内容/td/tr……/table内容布局—CSS表格•定义样式。.table1{border-collapse:collapse;/*合并相邻边框*/border:1px#000solid;}.table1caption{font-size:18px;line-height:60px;font-weight:bold;}.table1th{background:#000;color:#FFF;}内容布局—CSS表格•定义样式。.table1.r1{/*交替定义不同行背景色*/background:#BBB;}.table1.r2{/*交替定义不同行背景色*/background:#CCC;}.table1tr:hover{/*通过伪类定义mouse经过时行背景改变达到动态效果*/background:#DDD;}内容布局—CSS过滤器•在开发Web应用程序时，为了兼容各个厂家的浏览器，有时需要采用CSS过滤器和招数来实现不同的浏览器表现相同的策略。•CSS过滤器(filter)是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。过滤器根据浏览器中的缺陷，比如解析bug以及未实现或错误地实现的CSS，对浏览器显示或隐藏规则。–•CSS招数是(hack)一种让浏览器表现得符合自己希望的并不完美的解决方法。CSS招数通常用来解决特定的浏览器bug，比如IE的专有框模型。内容布局—CSS过滤器•当浏览器的bug在未来的版本中得到修复之后，某些招数会失效或者会有怪异的表现，而且可能无法通过CSS最新版本的检验。在设计浏览器的表现时，能够不使用招数的时候尽量不要使用。CSS招数只是CSS规范的一种解决问题的手段，但不可对这种技术产生依赖。在使用CSS招数的时候，要确定表现是否因为bug的原因，会不会有其他方面的原因，比如HTML，或CSS本身的代码错误。内容布局—CSS过滤器IE有条件注释•有条件注释是一种专门的（因为是非标准的）、对常规(X)Html注释的Microsoft扩展。顾名思义，有条件注释使你能够根据条件（比如浏览器版本）显示代码块。因为使非标准的，但是有条件注释对于其他所有浏览器作为常规注释出现，因此本质上是无害的。有条件注释在Windows上的IE5中首次出现，并且得到了Windows浏览器的所有后续版本的支持。•这种办法极其有效，而且非常容易记住。主要的缺点是这些注释需要放在HTML中，而不是放在CSS中。内容布局—CSS过滤器•只有IE才能识别!--[ifIE]styletype=text/cssdiv.content{color:red;}/style![endif]--•只有特定版本才能识别!--[ifIE7]styletype=text/cssdiv.content{color:red;}/style![endif]--内容布局—CSS过滤器•只有不是特定版本才能识别!--[if!IE7]styletype=text/cssdiv.content{color:red;}/style![endif]--•只有高于特定版本才能识别!--[ifgtIE7]styletype=text/cssdiv.content{color:red;}/style![endif]--内容布局—CSS过滤器•只有低于特定版本的才能识别!--[ifltIE7]styletype=text/cssdiv.content{color:red;}/style![endif]--•等于或者低于特定版本的才能识别!--[iflteIE7]styletype=text/cssdiv.content{color:red;}/style![endif]--内容布局—CSS过滤器•等于或者高于特定版本的才能识别!--[ifgteIE7]styletype=text/cssdiv.content{color:red;}/style![endif]--内容布局—CSS过滤器过滤单独的规则和声明•最安全的过滤器依赖于未实现的CSS，而不是浏览器Bug。因为这些过滤器使用有效的CSS选择器来应用有效的声明，所以严格地说，他们根本不是过滤器。他们仅仅是某些浏览器所不能理解的有效CSS规则。内容布局—CSS过滤器子选择器招数•body{font:11pxVerdana,Geneva,sans-serif;padding:10px;background:url(images/background-image.jpg)no-repeattopright;}•htmlbody{background:url(images/background-image.png)no-repeattopright;}内容布局—CSS过滤器属性选择器招数•body{font:11pxVerdana,Geneva,sans-serif;padding:10px;background:url(images/background-image.jpg)no-repeattopright;}•body[class=content]{background:url(images/background-image.png)no-repeattopright;}内容布局—CSS过滤器星号HTML招数•*htmlbody{background:url(images/background-image.jpg)no-repeattopright;}•*+htmlbody{background:url(images/background-image.png)no-repeattopright;}内容布局—CSS过滤器转义属性招数div.content{background:#cf0;border:1pxsolidblack;padding:50px;width:302px;w\idth:200px;}•IE6及其以下不支持“\”。内容布局—CSS过滤器!important和下划线招数body.content{background:url(images/background-image.png)no-repeattopright!important;background:url(images/background-image.jpg)no-repea