Zving前端开发规范(CSS部分).doc

Zving前端开发规范（CSS部分）为了保持页面规范，避免错误，加快学习和开发效率，以下列出Zving前端开发中CSS的一些规范及注意事项，此规范适用于项目前端页面。（2009年7月31日初稿 2012年11月22日修正） 页面制作最重要的就是CSS，定义合理的CSS命名规范，可以大幅提高页面制作的效率和方便开发及相关人员修改编写。关于CSS的命名我们采用下划线命名法或骆驼式命名法，不要使用中划线命名法。骆驼式命名法：是指混合使用大小写字母来构成变量和函数的名字,即函数名中的每一个逻辑断点都有一个大写字母来标记。例如：mianNav footNav下划线命名法：是指函数名中的每一个单词都用一个下划线来隔开。例如：mian_nav foot_nav1.通用命名规则：1)所有ID或者class字母和数字之间用“_”连接，如: #col_left、#col_right2)或所有ID或者class两个单词之间的链接采用骆驼式命名法，如:mianNav、footNav3)页面主体框架布局命名：lay_left、lay_center、lay_right4)栏目布局容器命名一律采用:col_left、col_right5)栏目标题块命名一律采用title元素标签采用:如：标题6)页面所有图片区域全部采用：pic_banner、pic_logo7)页面文本列表区域全部采用：list_pic、list_item8)页面上按钮采用：btn_submit、btn_search9)广告区域：ad_left,ad_right,ad_top,ad_bottom2.主框架命名规则：1)#header (页面头部)2)#main (页面主体)3)#footer (页面尾部)3.通用命名规则：主 体：main外层：wrap功能条：funcBar主导航：mainNav子导航：subNav友情链接：friendLink版 权：copyright页眉：header页脚：footer标题：title主导航：mainNav子菜单：subMenu注释：note面包屑：breadcrumb容器：container内容：content搜索：search登陆：Login当前状态：current页头：header标志：logo侧栏：sidebar广告：banner导航：nav子导航：subnav菜单：menu子菜单：submenu搜索：search滚动：scroll页面主体：main内容：content标签页：tab文章列表：list信息：msg提示技巧：tips栏目标题：title指南：guide服务：service热点：hot新闻：news下载：download注册：reg（register）状态：status按钮：btn投票：vote4.常用简写命名规则：bd：Bodyhd：Headerfnt：字体nav：导航tb：表格lnk：链接ml/mr：margin-left/margin-rightlst：列表pl / pr / pd：padding-left/-right/paddingcol：栏目frm：表单con：内容inf：信息lg：Logoinp：Inputft：Footerbtn：Buttonmore：更多fl /fr float:left/float:righttit 标题栏spr 空行t / d / mid / l / r：上 / 下/中 / 左 / 右bdr：边w：宽h：高网站布局和样式文件命名1.网站样式文件命名和样式从属关系1)全局布局共用CSS文件：common（s包括cssreset（用来清除默认值）、全局性的一些属性值的定义，还有网站布局容器的共用的CSS部分：页眉、页脚、搜索共用CSS）2)频道私有CSS文件：home.css（当前频道或者页面的CSS独有属性值以及为了兼容不同的浏览器的所采用的hack）2.网站布局：网站采用目前最流行的960宽度布局；布局类型分为3栏和2栏两种方式。分栏宽度参考设计稿，如果没有设计稿就按下面的规则两栏布局：主容器宽度为700px 副容器宽度为240px三栏布局：依次为190px、510px、240px；3.网站栏目：web页面上不同内容的组合方式：图片展示、图文组合、文字列表、标题段落、按钮等几种。所以common样式文件中按照如下规则定义：1)全局框架通用样式2)页眉3)导航4)搜索5)页脚6)内容列表通用样式7)图片通用样式8)表单通用样式4.频道私有CSS文件：针对网站频道不同风格所以各部分需要独自私有定义，但是通用布局不需要再重新设置，只需要设置私有部分。XHTML文档结构1.html基本框架结构1234567891011121314151617181920212223242526272829htmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1title标题/titlelink rel=stylesheet type=text/css href=css/common.css /link rel=stylesheet type=text/css href=css/home.css /headbodydiv id=header class=pageWidth header/divdiv id=main class=pageWidth main/divdiv id=footer class=pageWidth footer/div script src=js/jquery.js type=text/javascript/script/body/html2.HTML5标准的Doctype声明。第一行必须加文档声明不同的文档声明影响页面元素的渲染效果，上例中我们使用HTML 5。以保证在IE6.0以上及非IE的现代浏览器里采用一致的“盒模型”。3.编码声明。默认使用UTF-8编码。web文件的“换行符类型”为“windows换行符-CR/LF”；编码为“UTF-8”或“GBK”（在GBK版本里，或在需要与支持GBK的其他系统/控件交互的情况下，使用“GBK”编码）4.meta，title等处填写相应的关键词和描述。也是必须的，这一句是让IE8及以上版本以最高级内核渲染页面，即使系统里安装有IE8或更高版本，一些以IE为内核的浏览器（如360浏览器），仍然采用IE7的内核渲染，使用上面这一句设置，让IE以最高等级内核渲染页面，减少针对IE7作兼容处理的工作量。关键词 /页面描述 /标题 5.基本结构(考虑到页头页脚将会制作成包含文件，所以区的内容至少要分散到三个独立div内。) 12345678910111213141516171819202122232425262728293031div#headerdiv.globalNava img.logodiv#loginBardiv#mainNavdiv#searchdiv#maindiv#lay_left: (布局容器1)div.col (内容块1)div.col (内容块2)div#lay_right: (布局容器2)div.col (内容块3)div.col (内容块4)div#footer:div.linkdiv.copyrightWeb页面切图和CSS注意事项1.Web页面切图1)Web页面的切图类型可以归纳为背景（bg）、列表项目的符号（li）、内容中插入的图片（pic）、按钮（btn）、图标等几种形式（ico）。2)建议把用CSS背景加载的图片拼合成一张图片。这样可减少对服务器的请求。从而提升页面加载速度。3)除页面头部大图保存格式为jpg外，其他图片一律采用gif格式2.CSS相关事项：1)所有的xhtml代码小写2)每个标签都要有开始和结束，且要有正确的层次,没有结束标签的，标签后加上/。 如：、3)所有的属性必须用引号括起来4)文档类型必须声明，禁止文档类型乱用5)所有和&特殊符号用编码表示6)必须正确使用代码缩进，缩进时使用tab(键盘中的TAB键)，禁止无缩进、乱缩进，禁止使用空格缩进7)CSS加载的背景图片要预定义宽度和高度，路径采用绝对路径可以直接从访问者计算机缓存中加载，提高页面加载速度。8)要尽可能做到表现与结构完全分离，代码中不涉及到表现元素，如style、font、bgColor、border。9)到的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。采用继承方式，否则个性定义就会失效。10)Font的缩写为：样式粗细大小行高字体（font:italic bold 12px/30px “simsun”）11)class和id选择器，尽量使用class选择器，id只能在同一页面中不能重复适用12)给页面的布局和重要的区块加上注释,如：13)给图片加上alt标签，利于搜索引擎的查询。14)所有的标签必须进行合理的嵌套。15)页面的实现过程中出现的问题是有规律的几种：3个像素的bug、双倍浮动空白边距、文字溢出bug。尽可能采用合理布局可以避免不同浏览器下所产生的问题。css的hack应该尽量避免采用。16)尽可能的合理的去用继承，好处是代码结构清晰，方便其他修改人员辨认页面结构、减少css的代码的重复定义。17)网站上经常会出现用户输入一大段字符和字母以至于文字无法正常折行，把版式破坏，这样我们就要参考以下样式：word-wrap:break-word; overflow:hidden; 当然必须得有宽度属性值。18)文字过长要出现省略号样式如下：1white-space: nowrap; text-overflow:ellipsis; overflow:hidden;19)一个完整的表单应该包括：12345fieldsetlegend/legendlabel/labelinput /fieldset20)页面上的列表元素除了ul ol外，我们还可以采用dl dt dd组合。21)合理采用多重样式定义可以有效的增加样式的重用性。22)我们要清楚哪些标签是块状元素和内联元素。一般我们可以把css元素分为block（块状）和inline（内联）。熟悉这些元素属性有利于我们深入理解css。23)按照推荐css属性书写顺序：显示属性：1234567display | visibilitylist-style : list-style-type | list-style-position | list-style-imagepositiontop | right | bottom | leftz-indexclearfloat自身属性：12345678910widthmax-width | min-widthheightmax-height | min-heightoverflow | clipmargin : margin-top | margin-right | margin-bottom | margin-leftpadding : padding-top | padding-right | padding-bottom | padding-leftoutline : outline-color | outline-style | outline-widthborderbackground : background-color | background-image | background-repeat | background-attachment | background-position文本属性：12345678910colorfont : font-style | font-variant | font-weight | font-size | line-height | font-familyfont : caption | icon | menu | message-box | small-caption | status-bartext-overflowtext-aligntext-indentline-heightwhite-spacevertical-aligncursorCSS及HTML编写问题：1）考虑到cms内的文章编辑器内编辑文章时会对正文字体进行大小设置，所以建议前端页面的样式定义里不要对 body,textarea,select,button,之外的标签重新设置字体大小；并且建议不要对body,textarea,td之外的标签重设行高。2）基本的css设定（global.css）可以如下，（仅示例，请视情况修改或扩展）12345678910111213141516171819202122232425262728293031323334353637body background-color:#fff;color: #222;a color: #06a; text-decoration: none; a:hover color: #f90; text-decoration: underline; body,div,q,iframe,form,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p margin: 0; padding: 0;img,fieldsetborder: none 0;body,td,textareaword-break: break-all; line-height:1.5;body,input,textarea,select,buttonmargin: 0; font-size: 12px;font-family: Tahoma, SimSun, sans-serif;div,p,table,th,td font-size:1em; font-family:inherit; line-height:inherit;.tc text-align:center; .tr text-align:right; .tl text-align:left; .fl float:left; .fr float:right; atext-decoration:none;a:hovertext-decoration:underline;3)允许使用css hack，以提高制作效率，如123.fl float:left; _display:inline;.fr float:right; _display:inline;4)页面布局，编写html时尽量不要对元素进行ID命名，亦即尽量少使用css中的ID选择器，对元素ID命名可以在编写js交互脚本时进行5)页使用Dreamweaver CS以上版本：在页面制作时注意清除浮动、及定义浮动元素宽度，可以让页面在Dreamweaver里的“设计视图”下接近最终浏览效果