-DW排版(第三节)讲解.ppt

在样式表定义一个样式的时候，可以定义id也可以定义class。 1、在CSS文件里书写时，ID加前缀#；CLASS用. 2、id一个页面只可以使用一次；class可以多次引用。 3、ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服； 4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。 目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。 2、盒子模型 2、css权重（优先级） display:inline 1. 设置宽度width 无效。 2. 设置高度height 无效，可以通过line-height来设置。 3. 设置margin 只有左右margin有效，上下无效。 4. 设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的 display:inline-block 简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 5、IE浏览器的haslayout 兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：触发IE浏览器的haslayout解决ie下的浮动，margin重叠等一些问题。 加红色的那里就可以在IE6、IE7、IE8正常显示效果了。 css中的zoom的作用1、检查页面的标签是否闭合 不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕 竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。 　　2、样式排除法 有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。 　　对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。 　　3、模块确认法有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。 　　 4、检查是否清除浮动其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用 无额外 HTML 标签的清除浮动的方法（尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动，会有太多的限制性）。 　　5、检查 IE 下是否触发 haslayout很 多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的 《On having layout》（如果无法翻越穿越伟大的 GFW，可阅读 蓝色上的转帖 ）快捷提示：如果触发了 haslayout，IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。 　　6、边框背景调试法故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试 CSS BUG 的方法之一，对于复杂 BUG 依旧适用。经济实惠还环保^^最后想强调一点的是，养成良好的书写习惯，减少额外标签，尽量语义，符合标准，其实可以为我们减少很多额外的复杂 CSS BUG，更多的时候其实是我们自己给自己制造了麻烦。希望你远离 BUG ，生活越来越美好。 6、简单的css3 CSS3，IE不再打酱油 标题有点夸张，实际上这里讲的是让 IE6、7、8 也支持一些常用 CSS3 属性，比如圆角（border-radius）、阴影（box-shadow）、背景渐变（linear-gradient）。虽然 IE678 不支持 CSS3 属性，但微软还是给自己留了后路——VML向量绘图技术。维基百科可以看到：Vector Markup Language（VML）是一种XML语言用于绘制向量图形（vector graphics）。1998年VML建议书由微软、Macromedia等向W3C提出审核。VML 遭到拒绝，因为Adobe、Sun等提出了 PGML 计划书。这两套标准后来合并成更具潜力的SVG。 尽管VM