UI框架HTMLSS编写规范.docVIP

甘肃万维信息科技有限公司 - 、CSS编写规范（交流测试版） 2013 须知 本文档尽为测试交流版本，非后期完善版本，其中必有疏漏， 如有意见或建议，请发送意见至吉兴佳公司邮箱，或连博公司0A邮 箱。 目录 TOC \o 1-5 \h \z —.胃规书蹦范肪法 4 梢要求规范 5 选择 DOCTYPE : 5 指定语言及字符集 5 辅助图片用背影图处理 5 结构与样式分离： 5 id 和 class 名 5 id和class的命名风格 6 块内容缩进 6 属性值前増加个空格 6 分割选择器 7 —行只有一个css属性，二个规则间有一个空行 7 尽量不适用次级选择器 7 側页序规范 8 二 书挪范 9 .棚 ： 9 .整段 ： 10 HYPERLINK \l bookmark5 \o Current Document \h 样式属性代码缩写 10 属性为o io 雜选择器 10 龍 11 颜色 11 Margin/ Padding/Border ll 文字 12 歹帱 12 HYPERLINK \l bookmark1 \o Current Document \h hack书写规范 13 HYPERLINK \l bookmark7 \o Current Document \h UI框架结构及命額求 14 HYPERLINK \l bookmark8 \o Current Document \h UI框架CSS文件结构 14 HYPERLINK \l bookmark10 \o Current Document \h (1) 初始化样式表(reset.css ) 14 HYPERLINK \l bookmark11 \o Current Document \h (2 )框架布局样式(layout-布局名.css ) 14 HYPERLINK \l bookmark12 \o Current Document \h (3 )皮肤样式表(skin-皮肤名.css ) 15 HYPERLINK \l bookmark13 \o Current Document \h (4)开发端新增样式表(other.css ) 15 HYPERLINK \l bookmark14 \o Current Document \h CSS框架命名标准及实例 15 DIV+CSS命名参考表： 21 常规书写规范及方法 书写要求规范 (1)选择 DOCTYPE : 使用 5最新的头部声明方式 !DOCTYPE 指定语言及字符集 为文档设定语言编码 meta charset:utf-8 辅助图片用背影图处理 #logo {background: url(images/logo.jpg) #FEFEFE no-repeat right bottom;} 1:1结构与样式分离： 1:1 里写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表 来实现结构与样式的分离。 id 和 class 名 使用富有含义和通用的id和class名。使用功能性和通用性的命名方式减少文 档或模板的不必要的改动。 不推荐的写法： /*推荐使用：具体的词V #gallery {} #login {} .video {} /*推荐使用：通用的词语7 ?aux {} ?alt {} ⑹id和class的命名风格 id和class的命名在保持语义性的同时尽可能的短。 推荐的写法： #nav {} ?author {} 可以缩写单词，但缩写后务必能让人明白其含义。比如author缩写成atr就非 常费解。 块内容缩进 缩进所有的块状内容。 @media all and (min-width:400px) { { background: #fff; color: #444; } } 属性值前增加个空格 推荐的写法： h3{ font-weight: bold; } 分割选择器 推荐的写法： hl, h2, h3 { font-weight: normal; line-height: 1.2; } —行只有一个css属性，二个规则间有一个空行 { background: #fff; } body { margin: auto; width: 50%; 尽量不使用次级选择器 #example {} 不使用次级选择器，除了循环过多的元素可以使用两级选择器，因为这会影响性 不使用次级选择器，除了循环过多的元素可以使用两级选择器，因为这会影响性 ?error {} .from td{} .list li{} 书写顺序规范 书写顺序 不强制书写顺序。但应该养成良好的习惯，让看代码的人更易理解。易读对 于团队协作来说是非常重要的:框架为先，细节次之比如写