css应用规范.docVIP

版 本：1.0 CSS应用规范 文件建立/修改记录 序号 版本 建立 或修改 建立/修改人 日期 审核人 日期 批准人 日期 1 1.0 建立 杜春兰 刘涛 目录 1. CSS环境规范 3 1.1. 环境构建 3 1.1.1. CSS规范原则 3 1.1.2. 独立CSS文件 3 1.1.3. CSS编码 3 1.1.4. CSS文件引入 4 1.1.5. 建议 4 2. CSS工具规范 4 2.1.1. 开发工具 4 2.1.2. 调试工具 4 2.1.3. 代码检查 4 3. CSS编码规范 5 3.1. 命名规范 5 3.1.1. 原则 5 3.1.2. 常用命名 5 3.2. 书写规范 7 3.2.1. 书写顺序 7 3.2.2. 书写格式 8 3.2.3. css注释 8 4. CSS常用优化技巧 8 4.1.1. 按CSS匹配原则规范代码 8 4.1.2. 常见优化原则 9 4.1.3. 10 5. CSS浏览器兼容性总结 10 5.1.1. web标准 10 5.1.2. W3C在线验证工具 11 5.1.3. 常见css hack 11 CSS环境规范 环境构建 CSS规范原则 CSS分层开发，CSS样式与页面文件分离：JSP、HTML等页面文件链接外部css文件。 遵循web标准(w3c) CSS规范统一化(命名、注释、语法统一) 独立CSS文件 CSS样式与页面内容完全分开，如非必要，尽量不要往页面写CSS样式。 对于比较特殊的样式，可以直接以行内样式的形式写在页面内容中，但尽量避免，以方便日后代码维护。 CSS编码 CSS文件编码统一使用UTF-8 CSS文件引入 CSS文件作为外部链接，在页面的head区链接调用，位置在元标记结束下一行，JS调用的上一行。视情况可以在页面中书写内联样式style/style，用于定义此页面特殊的样式和覆盖CSS样式库中一定需要更改覆盖的样式，位置在外部链接样式表的下一行；微软Expression Web 调试工具 firefox的插件Firebug 代码检查 1、在线检查css代码是否符合W3C标准：/css-validator/。 CSS编码规范 命名规范 原则 命名不能含有中文以及特殊的字符，由字母和数字组成，数字放在最后，尽量使用英文命名原则不用加中杠和下划线尽量不缩写，除非一看就明白的单词id和class命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如: mainNav（主导航/main + Nav)CSS样式表各区块用注释说明常用命名，但不绝对 说明 通用部分 #wrapper #container 容器 #header 页头部分 #mainNav 主导航 #menu 菜单 .submenu 子菜单 #sidebar, #sidebarA 左边栏或右边栏 #main 页面主体 #crumb 站点位置导航 #content 内容部分 #contentMain 主要内容区域 #footer 页脚部分 .tag 标签 #msg #message 提示信息 .tips 小技巧 .title 标题 .summary 摘要 .subNav 二级导航 #search 搜索 .searchInput 搜索输入框搜索 .searchOutput 输出和搜索结果相似 #searchResults 搜索结果 #logo LOGO 网站常用 .vote 投票 .friendlink 友情连接 #copyright 版权信息 #branding 商标 #siteinfo 网站信息 #siteinfoLegal 法律声明 #joinus 加入我们 #partner 合作伙伴 #service 服务 #regsiter 注册 .hot 热点 其他举例 .products 产品 .function 功能 .download 下载 .related 相关项 .publisher 生产商 .screenshot 缩略图 .faqs 常见问题 .keyword 关键词 .blog 博客 .forum 论坛 书写规范 书写顺序 书写顺序：布局定位属性–自身属性–文本属性–其他属性.?此条可根据自身习惯书写,?但尽量保证同类属性写在一起.?布局定位属性包括:?margin