Css样式表规范.docx

哈尔滨工业大学软件工程股份有限公司 Css样式表规范哈尔滨工业大学软件工程股份有限公司UI设计工作室前言：1. 本规范文档是公司公用的样式表规范。2. 本规范文档旨在通过统一的规范，建立样式表的通用规则，提高页面样式批量处理和统一调用的效率。3. 本规范文档是以系统前端设计人员和开发人员及后期维护人员为阅读对象，是指导使用的规范性文档。一、 基本规则：1. 工程文件命名方式制作工程时，要将时间和工程名作为文件夹名称，命名格式如：2016-2-29 XXXXXX工程页文件夹分：psd、素材、客户需求、htmlHTML文件分类： images、css、js 设计稿.psd文件命名由时间和页面名作为名称，命名格式如：2016-2-29 XXXXXX.psd2. 图片输出及文件大小裁切图片格式.png，文件过大时要在压缩网站上进行压缩。网页背景过大的时候可以采用裁切.jpg的方式防止.png图片文件损坏导致网页效果出现问题。3. 样式表一律小写。4. 尽量用英文命名。为了开发后样式名管理方便，大家请用有意义的单词或易懂通用的缩写组合来命名。5. 用字母、- 、数字组成，必须以字母开头，不能为纯数字。6. 遵循：主要的、重要的、特殊的、最外层的盒子用“#”(id)选择符号开头命名，其它都用“.”（class）选择符号开头命名。7. 尽量不要在行内元素中加入CSS，采用外部调用法。如下：8. 使用CSS缩写属性，如：margin、padding、font、background等属性缩写，如：margin:10px 5px; (代替margin-top:10px; margin-bottom:10px; margin-left:5px; margin-right:5px;) 9. 如非必要尽量不要在样式表内部添加注释，可在样式表外部单独编写注释说明文档。二、 css样式表文件的命名1. 主要的 master.css2. 基本共用 base.css3. 版面、框架、布局 layout.css4. 主题 themes.css5. 菜单 menu.css6. 帮助 help.css7. 打印 print.css8. 业务模块 module.css9. 专栏 columns.css 10. 表单 forms.css三、 class的命名1. 颜色:使用颜色的名称或者16进制代码,如.red color: red; .f60 color: #f60; .ff8600 color: #ff8600; 2. 字体大小,直接使用font+字体大小作为名称,如.font-12px font-size: 12px; .font-9pt font-size: 9pt; 3. 对齐样式,使用对齐目标的英文名称,如.left float:left; .bottom float:bottom; 4. 组合样式,使用类别+功能的方式命名,如sidebar-search btn-80px right-10px 四、 id的命名1. 页面结构容器： container /box页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center2. 导航导航：nav主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu菜单内容1：menu1-content菜单容量：menu-container标题：title摘要：summary3. 功能标志：logo广告、标语：banner登陆：login 注册：register搜索：search结果：result功能区：shop下拉：select标题：title数据：data加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg 当前的：current小技巧：tips图标：icon注释：note指南：guide服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner/cooperation友情链接：li