HTML+CSS编写规范教材.docxVIP

HTML+CSS编写规范 在任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展。由于Web项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。 第一节 CSS样式文件的命名 建立样式表文件时，分类编写样式到下列样式表文件中，并统一放在【CSS】文件夹里： 主要main.css文字样式font.css表格table.css主题themes.css打印print.css补丁mend.css在项目初期，会把不同类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便，在项目后期会为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件，必要时可压缩。 第二节 CSS选择符的命名 所 有选择符必须有小写英文字母或“_”下划线组成，样式名必须是表示该样式的大概含义（禁止出现如Div1、div2、Style1……），参考后面的“样 式命名参考”。对CSS选择器的使用只允许派生选择器、类选择器和属性选择器，以及它们的组合使用，严禁使用ID选择器（ID是用于JavaScript 的编写）。 如：li span {…}td.fancy {…}input[type=text]{…} 当定义的样式名比较复杂时用下划线把层次分开，比如：dcrm_logo{ …} dcrm_logo_ico{…} 第三节 图片的命名与书写 图片的命名原则小写英文字母名称放在头尾两部分，用“_”下划线隔开，头部表示此图片的大类性质例如广告、标志、菜单、按钮等等；尾部表示图片的概念。设计人员在PS中保存图片时，请使用“文件”à“存储为Web和设备所用的格式”。 广告banner标志logo链接的小图片button装饰图pic 标题的图片title??banner_sohu.png 、banner_sina.png、 menu_about_us.png、menu_job.png、 title_news.gif、 logo_police.gif、 logo_national.gif 、pic_people.jpg第四节 CSS注释书写规范 4.1 提示和标签信息注释 这是注释最常用的途径，可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。这种应用简洁性最为重要。 .search{ border:1px solid #fff; /*Border Color*/ }注意：注释内容和前面样式语句间有3个空格，后面1个空格 4.2 修改样式注释（时间和相关人员） /*__Styles Updated: Thu 4.8.08 @ 5:15 p.m. Author: hour */4.3 文档结构 /*__Header */ .search{ border:1px solid #fff; /*Border Color*/ color:#333; /*Color*/} /*__Menu */ .menul_ul{ border:1px solid #fff; /*Border Color*/}注意：相对独立的2段内容之间空1行。 第五节 CSS布局编码标准和建议 5.1 建立样式表索引 样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息，它一般是一段格式化的CSS注释文本写在 main.css中。给出该CSS文件作者的相关信息；定义站点的布局，记录文件版本号（利于多作者协作及将来更新） /* *Filename: main.css *Description: Global CSS *Version: 1.0.0(2009-12-28)YYYY-MM-DD *Website: ==STRUCTURE:=================================== == ==== ===== *Page width: 980px *Number of columns: 2 */5.2 命名锚点 的使用 命 名锚点是用来规划整个CSS文件结构的（就好像书签一样），从而使整个CSS文件获得良好的组织。命名锚点一般也是书写在样式表头部的索引注释中。CSS 本身没有内部的锚点系统，所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点，并在整个文档中查找，从而获取该CSS节。 *==STRUCTURE:=============================================== $__header Header Definitions $__menu Global Site $__conte