HTMLCSS前端编码规范

《HTMLCSS前端编码规范》由会员分享，可在线阅读，更多相关《HTMLCSS前端编码规范（7页珍藏版）》请在装配图网上搜索。

1、HTML CSS编码规范2012-05-08目录CSS样式文件的命名2CSS选择符的命名2常用CSS选择符命名参考2Id和class的区别3CSS的优先级4不需要重复定义可继承的值4多重CSS样式定义，属性追加重复最后优先原则4导入(Import)和隐藏CSS5CSS链接规范5CSS hack5JS调用规范5HTML+CSS页面布局6HTNL代码书写规范6字体规范7图片的分类及命名规则7任何一个项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展。由于web 项目开发的分散性、独立性、整合的交互性等，所以定制一套完整的约定和规则显得尤为重要。CSS样式

2、文件的命名简历样式表文件时看，分类编写样式到下列样式表文件中，并统一放在【CSS】文件夹里：主要main.css文字样式font.css表格table.css主题themes.css打印print.css链接link.css普通样式(全局，文字)Css.css框架布局layout.css在项目初期，会把不同的类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便，在项目后期会为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件。CSS选择符的命名所有选择符必须有小写英文字母或“_”下划线组成，必须以字母开头，不能为纯数字。为了开发后样式名管理方便，要用有意义的单词或缩写组合来命名，

3、让人看命知其意，节省查找样式的时间。样式名必须是表示样式的大概含义（禁止出现如Div1、Div2、Style1.），参考下面的“样式命名参考”。对CSS选择器的使用只允许派生选择器、类选择器和属性选择器，以及它们的组合使用，严禁使用ID选择器（ID是用于javascript的编写）。如：li span td.fancy inputtype=text 当定义的样式名比较复杂时用下划线把层次分开，比如：dcrm_logo dcrm_logo_ico 常用CSS选择符命名参考导航nav头 部header容 器Container/box底 部footer滚动scroll页面主体main主导航mainn

4、av内容content顶导航topnav标签页tab子导航subnav版权copyright菜单menu登录login子菜单submenu列 表list子菜单内容subMenuContent侧 边 栏sidebar标志logo搜索search广告banner图 标icon页面中部mainbody表格table小技巧tips列 定 义olumn_1of3 (三列中的第一列)加入joinus标题title注册regsiter指南guid新闻news下载download按钮button状态status服务service投票vote注释note友情链接friendlink提示信息msg注意：命名方式使

5、用“类别_功能”的方式（.bar_news .bar_product）。Id和class的区别 1、 在样式表中定义一个样式的时候，可以定义id也可以定义class。id一个页面只可以使用一次，class可以多次引用。2、 Id是一个标签，用于区分不同的结构和内容，就像你的名字，如果一个屋子有2个人同名，就会出现混淆。3、 class是一个样式，可以套在任何结构和内容上。4、 概念上说是不一样的，Id是先找到结构/内容，在给它定义样式、class是先定义好样式，再套给多个结构/内容。也就是说建议在写xhtml+css时，如果唯一的结构定位的就用id，否则就用class。5、 ID方法：#tes

6、tcolor:#333333，在页面中调用内容6、 ID方法：#testcolor:#333333，在页面中调用内容CSS的优先级1、 行内样式(inline style) ID选择符 样式（class），伪类(psenudo-class)和属性（attribute）选择符 类别(type) ，伪对象(pseudo-element)解释：1).内嵌样式(inline style):元素的style属性，比如，其中的color:red;就是行内样式。2).ID选择符，元素的id属性，比如 可以用ID选择符# content。3).伪类(psenudo-class):最常见的是锚（a）伪类，比如a

7、:link,a:visited.4).属性选择符(attribute selectors)：比如divclass=demo，含有class 的div 元素。5).类别选择器（type selector）：HTML标签选择，比如div .demo，div元素下好友class的demo的元素。6).伪对象选择器（pseudo=element selector）：比如div:first-letter，div元素下的第一个单词。不需要重复定义可继承的值CSS中，子元素自动继承父元素的属性值，像颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义，除非是为了更变当前样式不使用父元

8、素的属性值，但是要注意，浏览器肯用一些默认值覆盖你的定义。多重CSS样式定义，属性追加重复最后优先原则一个标签可以同时定义多个class，也可以是同一个class中重复定义属性。例如：先定义两个样式在页面代码中，可以这样调用：这样的最终效果是这个div样式是什么呢？重复的是以那一个未准呢？应用到的样式如下：width:200px;border:10px solid #000;因为，当应用两个或多个以上样式时，浏览器所应用的样式根据是属性追加重复最后优先原则，就是说两个或多个或重复的样式名定义，浏览器所应用的样式是按先后顺序的，如果定义了重复的属性值，一最后定义的为准，如果应用了两个或多个样式名

9、，里面不重复定义的属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。导入(Import)和隐藏CSS因为老版本浏览器不支持CSS，一个通常的做法是使用import技巧来把CSS隐藏起来。例如：import url(main.css);然而，这个方法对IE4不起作用。用这样的写法：import main.css;这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解import语法的详细说明，可以看这里centricles css filter chart。CSS链接规范1、 所有的css 尽量采用外部调

10、用 2、 代码较长的首页和重要栏目首页可直接内嵌CSS，避免调用事件太长，使页面未及时调用CSS风格而显得凌乱。3、 书写时重定义的最先，伪类其次，自定义最后（其中 a:link a:visited a:hover a:actived 要按照顺序写） 便于自己和他人阅读。CSS hack有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的JS调用规范所有的javascript 脚本尽量采用外部调用HTML+CSS页面布局Table布局由于代码冗余已经

11、过时，所以HTML页面普遍采用代码简洁的DIV+CSS布局，HTML页面大体可分为top、main和bottom，在main中有可分为left和right，这些CSS的名必须是有意义的名字。如下面的代码： 目前table经常用来展示数据列表，反正在页面中尽量少用table。HTNL代码书写规范页面的HTML代码书写必须符合XHTML规范，XHTML可以被所有的支持XML的设备读取，同时在其余的浏览器升级至支持XML之前，XTHML是我们有能力编写出拥有良好结构的文档，这些文档可以很好地工作于所有的浏览器，并且可以向后兼容。XHTML与HTML的不同：1、 XHTML元素必须被正确的嵌套。2、

12、XHTML元素必须被关闭。3、 标签名必须用小写字母。4、 XHTML文档必须拥有根元素。对于第1点：最有肯发生错误是在与标签的结合，的直接子元素只能为：、和，而、和的直接子元素只能为：，而的直接子元素只能为和才可以放其它标签。此外相类似的标签有：、。某些标签不推荐使用：如：、，因为这些标签有些是可以用css去统一控制的，还有一些是不常使用的；某些标签是有特殊意义的，如：.，这些标签是专门用于内容标题的，本人也希望只允许使用.来表示内容标题。在编写HTML代码是注意缩进。字体规范1、 为了保证不同浏览器上字号保持一致，字号建议用点数pt和像数px来定义，pt一般使用中文宋体的9pt和11pt，

13、px一般使用中文宋体12px和14px，这是经过优化的字号，黑体字或者宋体字加粗时，一般选用 11pt 和 14.7px的字号比较合适。2、 大小为9pt时，行距为120%; 信息类最终页面采用弹出方式，标题及正文字体规定为11pt，行距为140%，所有页面字体大小建议不要超过11pt3、 考虑字体大小的兼容性，避免使用size=2的方式定义，尽量使用 pt 或者 px 并用css 定义4、 文字颜色与页面配色协调，不使用与背景相近的颜色5、 非图像设计的字体一律采用windows 标准宋体。（如果做特殊效果需做成图）要加粗文字用 Blod，不要用strong。6、 页面文字不使用下划线方式，也尽量少采用粗体显示。图片的分类及命名规则1、 名称分为头尾两两部分，用下划线隔开。2、 头部表示此图片的大类性质，例如公司Logo、标志、菜单、按钮等等。3、 一般来说：放置在页面顶部的广告、装饰图案等长方形的图片我们取名为：banner标志性的图片我们取名为：logo在页面上位置不固定并且带有链接的小图片我们取名为：button在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu装饰用的照片我们取名:pic不带链接表示标题的图片我们取名:title依照此原则类推.