模块化CSS.ppt

它能系统化的管理你的CSS …developed over time延长开发时间 … after lots of tears(不知道是不是俚语,我也不懂:经过千山万水?) 它怎么运作? 第一步建立HTML HTML 文档 第二步建立CSS HTML 文档 Master CSS file /* container styles */ #container { } /* header styles */ #header { } #header h1 { } /* content styles */ #content { } #content h2 { } /* footer styles */ #footer { } #footer p { } 主CSS文档 第三步分离你的 CSS HTML 文档 container.css header.css content.css #container { } #header { } #header h1 { } #content { } #content h2 { } #footer { } #footer p { } 新的 CSS 文档 container styles header styles content styles footer styles 问题为什么要分离CSS文档??方便查找样式? More than one developer at a time(节省时间?)? 随时可以调用或者关闭不需要的样式 第四步添加一个负责桥接的CSS文档（类似于中转站） HTML 文档 Bridging CSS file 问题为什么需要一个桥接文件?? 在一个导入链接内包含所有的样式文件? 可以任意对CSS文档进行更改而无需更给HTML? 任意增删 第五步链接到桥接文件 HTML 文档 Bridging CSS file HTML 文件 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN” /TR/html4/strict.dtd html head titleModular CSS/title link rel=stylesheet href=bridging.css type=text/css” media=screen, projection /head body … 问题为什么需要多种媒体声明?? 桥接文件使用@import? NN4不支持 @import ? NN4会忽略多媒体类型? NN4 同时会忽略桥接文件 Netscape 4你没有CSS! HTML 文档 Bridging CSS file NN4 第六步导入CSS HTML 文档 Bridging CSS file @import container.css; @import header.css; @import content.css; @import footer.css; 负责桥接的 CSS 文档 问题@import如何工作??从一个文档内导入所有的样式到另一个文档内 Imports all rules from one file into other? 就像在写其他文档一样Exactly as if written in other file?各个样式文件的顺序以及位置很重要(会影响到样式的执行)?旧版本的浏览器不能识别@import 旧版本的浏览器同样也没有CSS! HTML 文档 Bridging CSS file NN4 IE4 IE3 mac/ie5 第七步 - 方法一在Mac/IE下隐藏掉样式 HTML 文档 Bridging CSS file @import container.css; @import header.css; @import content.css; @import footer.css; @import hide-from-mac-ie5.css; 负责桥接的 CSS 文档 问题它如何工作?? 在一个独立的文档中设置特定的样式 ?为 @import 使用单引号? Mac/IE 将会忽略单引号? 将会忽略选择样式Mac/IE will ignore chosen rules 第七步- 方法二隐藏所有样式Hide all from Mac/IE HTML 文档 Bridging CSS file @import ‘container.css’; @import ‘header.css’; @import ‘content.css’; @import ‘footer.css’; 负责桥接的