CSS设计(代码)规范.doc

UI设计（代码）规范一 目录结构与命名规则（1）目录结构规范1、 目录建立的原则：以最少的层次提供最清晰简洁的页面结构。2、 根目录一般只存放index.htm以及其他系统必须的文件 3、 在根目录中应该按照系统的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用来放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。根目录下的images用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片 4、 所有JS,ASP,PHP等脚本存放在根目录下的scripts目录5、 所有CGI程序存放在根目录下的cgi-bin目录6、 所有CSS文件存放在根目录下style目录 7、 每个语言版本存放于独立的目录。例如：简体中文gb 8、 所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录9、 temp 子目录放客户提供的各种文字图片等等原始资料，以时间为名称开设目录，将客户陆续提供的资料归类整理。（2）文件和目录命名规范1、 文件命名的原则：以最少的字母达到最容易理解的意义。 2、 每一个目录中包含的缺省html 文件，文件名统一用index.htm3、 文件名称统一用小写的英文字母、数字和下划线的组合，不得包含汉字、空格和特殊字符4、尽量按单词的英语翻译为名称。例如：feedback(信息反馈)，aboutus(关于我们) 不到万不得已不要以拼音作为目录名称 5、 多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。例如：news_01.htm。注意，数字位数与文件个数成正比，不够的用0补齐。例如共有200条新闻，其中第18条命名为news_018.htm（3）图片的命名规范1、 名称分为头尾两两部分，用下划线隔开。2、 头部分表示此图片的大类性质。例如： 放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ；标志性的图片我们取名为：logo ；在页面上位置不固定并且带有链接的小图片我们取名为button ；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu ；装饰用的照片我们取名：pic ；不带链接表示标题的图片我们取名：title 依照此原则类推。3、 尾部分用来表示图片的具体含义，用英文字母表示。例如：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.（4）css的命名规范1，全局定义/*（大括号）内为空时，除ul元素外，其他均自己定义*/body,ul,ol,p,span,dd,dt,h1,h2,h3,h4,h5,h6 margin:0px; padding:0px;/*初始化元素的内联及外联*/div overflow:hiddenbody,body a color:#000; font:Arial, Helvetica, sans-serif 12px; text-decoration:nonebody a:link text-decoration:none;body a:hoverbody a:visited/*全局文字属性结束*/ol,li list-style:none;/*如需居内则为list-style:inside*/p text-indent:2em/*首行缩进两字符宽度，无需更改，使用时可按“” 设置进一步样式*/*以上均为全局属性,一般无需修改*/ 2，hx样式，如颜色不同请自行增加,根据实际情况进行简写h1 font:宋体 16px bold; line-height:30px; text-align:center; border-bottom:1px dashed #ccc;/*设置默认H1样式*/h2 font:宋体 14px bold; line-height:26px; text-align:left; border-bottom:1px solid #ccch3h5h43，/*新闻列表/.fontnews.fontnews li.fontnews li a.fontnews li a:hover/*例：.fontnews.fontnews li height:14px; padding:4px 0px; border-bottom:1px dashed #ccc;.fontnews li a text-decoration:none; font:12px; color:#000;.fontnews li a:hover color:#ff0000*/4，图片列表.piclist.piclist div/*图片列表*/*例：.piclist overflow:hidden; padding:10px;/*piclist全局.piclist div padding-right:10px; overflow:hidden; float:left;/*使用嵌套思维，piclist下的所有div的属性，如有不同，请用#+ID号来区别，此方法可解决IE6下piclist无法解析高度的情况。不需任何hack.piclist a color:#cc0000; line-height:22px; font-weight:bold; font-size:12px;/*piclist下文字a及链接属性简单版。.piclist a:hover color:#000; /文字及链接鼠标状态*/5，页码列表.fontview/*view页*/*例.fontview padding:10px; line-height:26px; font:14px; color:#555; text-decoration:none;*/6，通用型01，浮动与内联.gm.gmfl float:left;/*左浮动*/.gmfr float:right;/*右浮动*/.gmpadding10px padding:10px;/* 内联10px*/.gmflpadding10px padding:10px; float:left/*内联10px并左浮动*/.gmfrpadding10px padding:10px; float:right/*内联10px并右浮动*/*/02，图片定义.img例:.img padding:2px; border:2px solid #ccc; background:#fff;内联2px,背景白色,直线边框粗1px;03，select/表单/下拉等.select.input/*输入文本框*/.search/*搜索*/.insearch/*搜索内*/.searchselect/*搜索条*/.serachbuttom/*搜索按钮*/04，table.listbox/*表格整体框架*/.listbox-table/*表格的宽度*/.listbox-header/*表格头部文字样式*/.listbox-entry/*表格正文文字样式*/*table*/05，清除浮动项clear clear:both;.clearleft clear:left.clearright clear:right7，开始布局layout设置#wrapper/*整体大框架*/#inwrapper/*大框架内*/.top/*顶部及banner*/.intop/*顶部及banner内*/.logo/*logo*/.inlogo/*logo内*/.banner/*banner*/.menu/*导航：*/.inmenu/*导航内*/.Menuul/*/.Menuul li/*/.Menuul li a/*/.inmenu_xiala/*下拉菜单*/.Inmenu_xialaul/*/.Inmenu_xialaul li/*/.Inmenu_xialaul li a/*/.mainWrapper/*主体内容*/.inmainwrapper/*主体内容内*/.sideleft/*左侧拦*/.insideleft/*左侧内*/.sideright/*右侧栏*/.insideright/*右侧内*/.sidecenter/*中间*/.insidecenter/*中间内*/.foot/*底部*/.infoot/*底部内*/*注:一些简单便捷的方法.虽然ID具有唯一性,但如果把clear或gm设置成#ID的形式,那么同class标签来限制DIV的普通样式,ID来实现一些小的而又有很多DIV都有的属性,比如padding,clear,margin等.*/二 代码常规书写规范和方法我们应该有一个脚本整体风格一致的概念，意思是一个月后和一个月前的你写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致，因为我们不可能永远孤立的开发，你随时都有可能和三个月前的自己合作（你的客户要求改版），亦或不同开发人员之间的合作。1. Html 文件的通用模板： 文档标题 其他meta 标 记样式表定义客户端javascript 函数定义及初始化操作 补充：为了保证网站能够与下一代的web 语言xml 标准兼容，所有的HTML 标签的属性都要用单引号或者双引号括起，即我们应该写 而不 是 .2. 选择DOCTYPE： ;PLby= O XHTML 1.0 提供了三种DTD声明可供选择： 6o J Jdn 过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下： *!.1J:YJ( e#1 6,a-o 严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如。完整代码如下： f v %w G5Uc j3 框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下： Ym !Ia& n c t, p?Q理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。3. 指定语言及字符集： Y m0Xl(Se 为文档指定语言： V &NO p J k af 为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如： V.m;ETu 常用的语言定义： tjO | |I m, $M 标准的XML文档语言定义： 1 l c !L- .bve! 针对老版本的浏览器的语言定义： &| Z:8P lXL e (ow 为提高字符集，建议采用“utf-8”。4. 允许全文检索的页面（为了使Internet上的搜索引擎能够有效检索，在栏目首页的html的之间应该加入Keywords 和Description 元标记）例如 ：Q=w )qJ U*v/WbH 5. 调用样式表： qOq :l$ s 外部样式表调用： 8R8J./i .K 页面内嵌法：就是将样式表直接写在页面代码的head区。 如： p;B d zV Og 5 0 - 外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。 qV8 ;&8r pS hSK R g 在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。6. CSS 文件的格式样例代码 ：p text-indent: 2em; body font-family: 宋体; font-size: 9pt; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0pxtable font-family: 宋体; font-size: 9pt; line-height: 20px; color: #000000a:link font-size: 9pt; color: #FFFFFF; text-decoration: nonea:visited font-size: 9pt; color: #99FFFF; text-decoration: nonea:hover font-size: 9pt; color: #FF9900; text-decoration: nonea:active font-size: 9pt; color: #FF9900; text-decoration: nonea.1:link font-size: 9pt; color: #3366cc; text-decoration: nonea.1:visited font-size: 9pt; color: #3366cc; text-decoration: nonea.1:hover font-size: 9pt; color: #FF9900; text-decoration: nonea.1:active font-size: 9pt; color: #FF9922; text-decoration: none.blue font-family: 宋体; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em这里尤其要注意的是a:link a:visited a:hover a:actived 的排列顺序一定要严格照上面的样例代码，否则或多或少会出问题。另外我们规定重定义的最先，伪类其次，自定义最后，便于自己和他人阅读！ 为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。7 互相嵌套时，严格按照的规范对于单独的一个来说，对齐， 缩进两个半角空格， 如果还有嵌套的表格，也缩进两个半角空格，如果中没有任何嵌套的表格， 结束标记应该与 处于同一行，不要换行，如我们注意在源代码中不应有这样的代码：而应该是这样的：这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写： 属于同一个级别 的 一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px 的单元格应该 在 和 之间写一个如果高度小于12px, 则应该 在 和 之间插入一个1*1 大小的透明的gif 图片，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在DW3中可以通过command-apply souce formatting进行重新整理！8. Width 和height 的写法统一的规范一般情况下只有一列的表格，width 写在 的标签内，只有一行的表格，height 写在 的标签内，多行多列的表格，width 和height 写在第一行或者第一列的 标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height 和width, 保证任何一个width 和height 都是有效的，也就是你改动代码中任何一个width 和height 的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考。9.布局一 般原则1. 在排布表格之前，要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免 两个标记，经验表明，这两个标记会带来许多麻烦。2. 一个页面要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张页面是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的页面内容同时出现。如果必须这样做，请使用 标记，以便能够使这个大表格分块显示。3. 排版中我们经常会遇到需要进行首行缩进的处理，不要使用 或者全角空格来达到效果，规范的做法是在样式表中定义 p text-indent: 2em; 然后给每一段加上 标记，注意，一般情况下，请不要省略 结束标记 。4. 原则上，我们禁止用 来人为干预图片显示的尺寸，而且建议 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当页面还未加载图片时，不会留出图片的站位大小，可能会造成页面在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致页面抖动的情况会发生时，请大家务必在最后给 附上 width 和 height 属性。5. 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用 来人工干预分段。6. 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。7. 所有的字号都应该用样式表来实现，禁止在页面中出现 标记。8. 请不要在页面中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。9. 中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。10. 行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.11. 网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样： 而应该这样：12. 嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。13.“页面大小”定义为页面的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，页面大小保持在34K以下为合适。 y# x? %m 10、文档的结构化书写： .&-; 页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如： htMsS4Kvd j3C p o x 4 -Z i K M 首页 -s0 z 介绍 , # gA(B # 服务 0N_Ma ) i ?n ? Ep D &nZ=w # _ 7I (Sa?D: /*=主导航=*/ 7 82NiV ed #mainMenu XZ Z Ml width:100%; !_l W#fe R height:30px; -;C l0O% background:url(images/mainMenu_bg.jpg) repeat-x; rgu C#Xt!4 x SS&b #mainMenu ul li 2 qO; j s float:left; ra n Q_ line-height:30px; Mf/zSQ k+ margin-right:1px; Ol)U;, cursor:pointer; : -8Vo7 F9671 2 /*=主导航结束=*/ Hv R24 # 11、选用恰当的元素： -: c SI 根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。例如，使用P元素来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span； QH /UnV避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式； eqU EdC尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视； B2W P jhzD 12、派生选择器： burEo .= 可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如： c h * / .mainMenu ul li background:url(images/bg.gif;) eV1O#FLbi 13、辅助图片用背影图处理： C HN! o9 f 这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如： #logo background:url(images/logo.jpg) #FEFEFE no-repeat right bottom; P DrU ND 14、结构与样式分离： nU) ! E 在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。 BYWu : w H2E!A2 m 15、鼠标手势： J0C, K U ( 在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer;” azS *#r616注释书写规范 C. Z5BwS 01、行间注释： FxTO c 直接写于属性值后面，如： ,=m|z9k .search Pi 40 w +/ border:1px solid #fff;/*定义搜索输入框边框*/ )7t !02、整段注释： T Vh|_s 分别在开始及结束地方加入注释，如： _ o 8i l3 /*=搜索条=*/ 2o/WSSk .search Yc! 0e$ border:1px solid #fff; N FDi2LBa background:url(./images/icon.gif) no-repeat #333; 4hg#7#?boW Be 6 8 Fu0 /*=搜索条结束=*/ /VgA %y 03协助注释 S#/ C b 非作者维护时所加入的表示修改时间、修改人等标识信息。 + t(: E 在区域注释或单行注释的基础上加上修改人和修改时间等信息。 A Mp f%X 例(区域注释)： )YaW cI /pre/pre./pre/pre/pre/*=S 注释内容修改人和修改时间*/pre.class/pre./pre/pre.class/pre./pre/pre/*=E 注释内容修改人和修改时间*/pre例(单行注释)：/pre/pre/pre./pre/pre.class/pre/*注释内容修改人和修改时间*/pre./pre/pre17样式属性代码缩写 +/3=!oy d 1、不同类有相同属性及属性值的缩写： by R|L:L 对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。如： / yk #mainMenu 9YS &RBJu background:url(./images/bg.gif); d #9 Ul& border:1px solid #333; 78&ja w*1A width:100%; Pzb LbH8A height:30px; _ywCacr overflow:hidden; Bj5_= oo+d eT * )r #subMenu EY .?Mg background:url(./images/bg.gif); .213.bp/q border:1px solid #333; 8j&,dl width:100%; 7(| q2ib height:20px; ig| o l* overflow:hidden; f y&vo4i; )r X = 2，两个不同类的属性值有重复之处，刚可以缩写为： ? VVtEmI N #mainMenu,#subMenu , .X qb background:url(./images/bg.gif); q=Cc2| Ve border:1px solid #333; aN nURR width:100%; *O?=6p overflow:hidden; B )iBf Z gKyY B r #mainMenu height:30px; y Mz%s=rh #subMenu height:20px; Hrz #S o3，同一属性的缩写： ShFC )TUKv T& .search 0Yh Mwg? background:#333 url(./images/icon.gif) no-repeat 50% 50%; QL_vWG - )qyJw N 4，内外侧边框的缩写： Kbb4% P+h 在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如： 2WJ;FJ .btn mj T/ WF margin-top:10px; ()T l margin-right:8px; Q sXy(w# F margin-bottom:12px; 4l Vvs(W? margin-left:5px; zp 4aiMn1F padding-top:10px; Zk= 3Y padding-right:8px; #yK CA; padding-bottom:12px; u V|%idC padding-left:8px; # ; +ABV ;Yf K G8(0 则可缩写为： C gH G .btn Dt 3Q d0 Margin:10px 8px 12px 5px; 9 kO 0 54 Padding:10px 8px 12px 5px; eoGGWW o9JZ -b iH w vnuEo8 而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如： .btn 0 u=GD% margin-top:10px; a* N margin-left:5px; OG GuV Y 3x6:s iqA ME% m 缩写为： .btn margin:10px 5px; qC Un. mI 而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如： sR*. i?lN .btn IuOY .c2.u margin-top:10px; R7zv cu& margin-right:10px; fb3HOTJ margin-bottom:10px; 4FKZ1+R margin-left:10px; 0!(BbQ nWI xm4?6 缩写为： =j$ !N# L .btnmargin:10px; GT(n W|v 5，颜色值的缩写： 1 u Y 当RGB三个颜色值数值相同时，可缩写颜色值代码。如： MD q Ul: .menu color:#ff3333; 2 eVeO9 可缩写为: N -9qNL SP .menu color:#f33; W xR18hack书写规范 M! nwcxB! 因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css 的hack来进行调整，当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。 v?S =$.01、 IE6、IE7、Firefox之间的兼容写法： j & 5s 写法一： 5#/ !LX) IE都能识别*;标准浏览器(如FF)不能识别*； 5PXo1n8T IE6能识别*，但不能识