书写高效得、可维护的、组件化的CSS.ppt

为什么要拆分样式文件? 更易于查找样式规 则.简化维护，方便 管理.还可以针对某 一页面提供特定 的样式. 步骤二 添加一个桥接样式文件 HTML 文档 桥接样式文件 为什么要添加桥接样式？ 你可以随时添加或移除样 式而不需要修改 HTML文档. 步骤三 引入桥接样式文件 HTML 文档 桥接样式文件 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN /TR/html4/strict.dtd html lang=en head meta http-equiv=content-type content=text titlePage title/title link rel=stylesheet href=bridging.css type=text/css” media=screen, projection /head body ... /body /html 为什么要定义两种媒体类型？ NN4不支持@import，故识别 不到桥接样式. 步骤四 将(分离的)CSS文件导入桥接 样式中 HTML 文档 桥接样式文件 @import ‘header.css’; @import ‘content.css’; @import ‘footer.css’; @imports 如何工作? 它将所有CSS规则从一个文 件导入到另外一个文件. @import 不能被老的 浏览器所识别. 概述? HTML 文档 桥接样式文件 对于大型站点来 说，这是一个理 想的概念. Home bridge1 header nav footer home p { margin: 0 0 1em; } p { background: #ddd; } p { color: #666; } 译者注： 对于十六进制颜色值，个人偏向于色值不缩写且英文字 母要大写的方式. 高效的:: p { margin: 0 0 1em; background: #ddd; color: #666; } 使用 简记属性 低效率的:: body { font-size: 85%; font-family: arial, helvetica, sans-serif; background-image: url(image.gif); background-repeat: no-repeat; background-position: 0 100%; margin-top: 1em; margin-right: 1em; margin-bottom: 0; margin-left: 1em; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-style: solid; border-width: 1px; border-color: red; color: #222222; 高效的:: body { font: 85% arial, helvetica, sans-serif; background: url(image.gif) no-repeat 0 100%; margin: 1em 1em 0; padding: 10px; border: 1px solid red; color: #222; } 避免使用 !important 慎用写法:: #news { background: #ddd !important; } 特定情况下可以使用 以下方式提高权重级别:: #container #news { background: #ddd; } body #container #news { background: #ddd; } 那么,如何让(后续)维护你 站点的人更容易理解你的 样式代码呢？ 书写可维护的CSS 在样式表开头添加一个注 释块，用以描述这个样式 表的创建日期、创建者、 标记等备注信息. /* Site: Author: Updated: Site name Name Date and time Updated by: Name */ 包括公用颜色标记 /* COLORS #def455 #fff #333 #00600f #098761 #aaf433 #960 #000 Body background: Container background: Main Text: Links: Visited links: Hover links: H1, H2, H3: H4, H5, H6: */ 给ID和Class进行有意义 的命名 不推荐的