UI框架HTML、CSS编写规范

《UI框架HTML、CSS编写规范》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、甘肃万维信息科技有限公司2013年UI框架标准—HTML、CSS编写规范（交流测试版）21须知本文档尽为测试交流版本，非后期完善版本，其中必有疏漏，如有意见或建议，请发送意见至吉兴佳公司邮箱，或连博公司OA邮箱。21目录一．常规书写规范及方法41.书写要求规范5(1)选择DOCTYPE：5(2)指定语言及字符集5(3)辅助图片用背影图处理5(4)结构与样式分离：5(5)id和class名5(6)id和class的命名风格6(7)块内容缩进6(8)属性值前增加个空格6(9)分割选择器7(10)一行只有一个css属性，二个规则间有一个空行7(11)尽量不

2、适用次级选择器72.书写顺序规范8二．注释书写规范91.行间注释：92.整段注释：10三．样式属性代码缩写10211.属性为0102.移除选择器103.背景114.颜色115.Margin/Padding/Border116.文字127.列表12四．hack书写规范13五．UI框架结构及命名要求141.UI框架CSS文件结构14（1）初始化样式表（reset.css）14（2）框架布局样式（layout-布局名.css）14（3）皮肤样式表（skin-皮肤名.css）15（4）开发端新增样式表（other.css）152.CSS框架命名标准及实例15

3、六、DIV+CSS命名参考表：21一．常规书写规范及方法211.书写要求规范(1)选择DOCTYPE：使用HTML5最新的头部声明方式(2)指定语言及字符集为文档设定语言编码(3)辅助图片用背影图处理#logo{background:url(images/logo.jpg)#FEFEFEno-repeatrightbottom;}(4)结构与样式分离：页面里写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。(5)id和class名使用富有含义

4、和通用的id和class名。使用功能性和通用性的命名方式减少文档或模板的不必要的改动。不推荐的写法：/*推荐使用:具体的词*/#gallery{}#login{}.video{} /*推荐使用:通用的词语*/21.aux{}.alt{}(6)id和class的命名风格id和class的命名在保持语义性的同时尽可能的短。推荐的写法：#nav{}.author{}可以缩写单词，但缩写后务必能让人明白其含义。比如author缩写成atr就非常费解。(7)块内容缩进缩进所有的块状内容。@mediaalland(min-width:400px){  html{

5、background:#fff;color:#444;} }(8)属性值前增加个空格推荐的写法：h3{21font-weight:bold;}(9)分割选择器推荐的写法：h1,h2,h3{  font-weight:normal;  line-height:1.2;}(10)一行只有一个css属性，二个规则间有一个空行html{  background:#fff;} body{  margin:auto;  width:50%;}(11)尽量不使用次级选择器21不使用次级选择器，除了循环过多的元素可以使用两级选择器，因为这会影响性能#example{

6、}.error{}.fromtd{}.listli{}2.书写顺序规范1.书写顺序不强制书写顺序。但应该养成良好的习惯，让看代码的人更易理解。易读对于团队协作来说是非常重要的：框架为先，细节次之比如写一个浮动容器的样式，我们应该先让这个容器的框架被渲染出来，让大家看到基本的网站框架。然后再再去渲染容器里面的内容。最终呈现给用户.通常像colorfontpadding之类的，写在后面。例子：.selector{float:left;width:300px;height:200px;font-size:14px;color:#f36;}2.有因才有果比如

7、想使用”图片替换文字“21技术，通常要使用的text-indent。如果我们使用标签的是span：这个文字将被图片替换我们应该是先将span变成”块级元素“（使用display:block，虽然他永远不是块级元素），再将文字indent。而不是先indent再变成块级的：.thepic{display:block;text-indent:-9999em;}又如我们，如果想让一个span使用margin,那么我们应该这样写:span{display:block;margin-bottom:10px;

8、}而非span{margin-bottom:10px;display:block;}因为没有display之