CSS设计(代码)规范.doc

1、UI 设计（代码）规范一 目录结构与命名规则（1）目录结构规范1、 目录建立的原则：以最少的层次提供最清晰简洁的页面结构。2、 根目录一般只存放 index.htm 以及其他系统必须的文件 3、 在根目录中应该按照系统的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个 images 和 media 的子目录用来放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。根目录下的 images 用于存放各页面都要使用的公用图片，子目录下的 images 目录存放本栏目页面使用的私有图片 4、 所有 JS,ASP,PHP 等脚

2、本存放在根目录下的 scripts 目录5、 所有 CGI 程序存放在根目录下的 cgi-bin 目录6、 所有 CSS 文件存放在根目录下 style 目录 7、 每个语言版本存放于独立的目录。例如：简体中文 gb 8、 所有 flash, avi, ram, quicktime 等多媒体文件存放在根目录下的 media 目录9、 temp 子目录放客户提供的各种文字图片等等原始资料，以时间为名称开设目录，将客户陆续提供的资料归类整理。（2）文件和目录命名规范1、 文件命名的原则：以最少的字母达到最容易理解的意义。 2、 每一个目录中包含的缺省 html 文件，文件名统一用 index.ht

3、m3、 文件名称统一用小写的英文字母、数字和下划线的组合，不得包含汉字、空格和特殊字符4、尽量按单词的英语翻译为名称。例如：feedback(信息反馈) ，aboutus(关于我们) 不到万不得已不要以拼音作为目录名称 5、 多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。例如：news_01.htm。注意，数字位数与文件个数成正比，不够的用 0 补齐。例如共有 200 条新闻，其中第 18 条命名为 news_018.htm（3）图片的命名规范1、 名称分为头尾两两部分，用下划线隔开。2、 头部分表示此图片的大类性质。例如： 放置在页面顶部的广告、装饰图案等长方形的图片我们取名

4、：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 pi

5、c_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:visit

6、ed/*全局文字属性结束*/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-hei

7、ght: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:#ff

8、0000*/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:bo

9、ld; 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;/* 内联 10

10、px*/.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/*搜索条

11、*/.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/

12、*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/*右

13、侧内*/.sidecenter/*中间*/.insidecenter/*中间内*/.foot/*底部*/.infoot/*底部内*/*注:一些简单便捷的方法.虽然 ID 具有唯一性 ,但如果把 clear 或 gm 设置成#ID 的形式,那么同 class 标签来限制 DIV的普通样式,ID 来实现一些小的而又有很多 DIV 都有的属性,比如 padding,clear,margin 等.*/二 代码常规书写规范和方法我们应该有一个脚本整体风格一致的概念，意思是一个月后和一个月前的你写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致，因为我们不可能永远孤立的开发，你随

14、时都有可能和三个月前的自己合作（你的客户要求改版） ，亦或不同开发人员之间的合作。1. Html 文件的通用模板：文档标题 其他 meta 标 记样式表定义客户端 javascript 函数定义及初始化操作 补充：为了保证网站能够与下一代的 web 语言 xml 标准兼容，所有的 HTML 标签的属性都要用单引号或者双引号括起，即我们应该写 而不 是 .2. 选择 DOCTYPE： XHTML 1.0 提供了三种 DTD 声明可供选择：过渡的(Transitional):要求非常宽松的 DTD，它允许你继续使用 HTML4.01 的标识(但是要符合 xhtml 的写法)。完整代码如下：严格的(

15、Strict):要求严格的 DTD，你不能使用任何表现层的标识和属性，例如。完整代码如下：框架的(Frameset): 专门针对框架页面设计使用的 DTD，如果你的页面中包含有框架，需要采用这种 DTD。完整代码如下：理想情况当然是严格的 DTD，但对于我们大多数刚接触 web 标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择( 包括本站，使用的也是过渡型 DTD)。因为这种 DTD 还允许我们使用表现层的标识、元素和属性，也比较容易通过 W3C 的代码校验。3. 指定语言及字符集：为文档指定语言：为了被浏览器正确解释和通过 W3C 代码校验，所有的

16、 XHTML 文档都必须声明它们所使用的编码语言；如：常用的语言定义：标准的 XML 文档语言定义：针对老版本的浏览器的语言定义：为提高字符集，建议采用“utf-8”。4. 允许全文检索的页面（为了使 Internet 上的搜索引擎能够有效检索，在栏目首页的 html 的之间应该加入 Keywords 和 Description 元标记）例如 ：5. 调用样式表：外部样式表调用：页面内嵌法：就是将样式表直接写在页面代码的 head 区。 如：外部调用法：将样式表写在一个独立的.css 文件中，然后在页面 head 区用类似以下代码调用。在符合 web 标准的设计中，推荐使用外部调用法，可以不修

17、改页面只修改.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: #000

18、000a: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-decor

19、ation: 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: 5e

20、m这里尤其要注意的是 a:link a:visited a:hover a:actived 的排列顺序一定要严格照上面的样例代码，否则或多或少会出问题。另外我们规定重定义的最先，伪类其次，自定义最后，便于自己和他人阅读！为了保证不同浏览器上字号保持一致，字号建议用点数 pt 和像素 px 来定义，pt 一般使用中文宋体的 9pt 和 11pt，px 一般使用中文宋体 12px 和 14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用 11pt 和 14.7px 的字号比较合适。7 互相嵌套时，严格按照的规范对于单独的一个来说， 对齐， 缩进两个半角空格， 如果还有嵌套的表格，也缩

21、进两个半角空格，如果中没有任何嵌套的表格，结束标记应该与 处于同一行，不要换行，如我们注意在源代码中不应有这样的代码：而应该是这样的：这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：属于同一个级别 的 一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于 12px 的单元格应该 在 和 之间写一个如果高度小于12px, 则应该 在 和 之间插入一个 1*1 大小的透明的 gif 图片，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在 DW3 中可以通过command-a

22、pply souce formatting 进行重新整理！8. Width 和 height 的写法统一的规范一般情况下只有一列的表格，width 写在 的标签内，只有一行的表格， height 写在 的标签内，多行多列的表格，width 和 height 写在第一行或者第一列的 标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的 height 和 width, 保证任何一个 width 和 height 都是有效的，也就是你改动代码中任何一个 width 和 height 的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考。9.布局一 般原则1. 在排

23、布表格之前，要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免 两个标记，经验表明，这两个标记会带来许多麻烦。2. 一个页面要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张页面是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的页面内容同时出现。如果必须这样做，请使用 标记，以便能够使这个大表格分块显示。3. 排版中我们经常会遇到需要进行首行缩进的处理，不要使用 或者全角空格来达到效果，规范的做法是在样式表中定义 p text-indent:

24、2em; 然后给每一段加上 标记，注意，一般情况下，请不要省略 结束标记 。4. 原则上，我们禁止用 来人为干预图片显示的尺寸，而且建议 标签中不要带上 width 和 height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当页面还未加载图片时，不会留出图片的站位大小，可能会造成页面在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象） ，尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致页面抖动的情况会发生时，请大家务必在最后给 附上 width 和 h

25、eight 属性。5. 为了最大程度的发挥浏览器自动排版的功能 ，在一段完整的文字中请尽量不要使用 来人工干预分段。6. 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。7. 所有的字号都应该用样式表来实现，禁止在页面中出现 标记。8. 请不要在页面中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码） ，空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。9. 中英文混排时，我们尽可能的将英

26、文和数字定义为 verdana 和 arial 两种字体。10. 行距建议用百分比来定义，常用的两个行距的值是 line-height:120%/150%.11. 网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样： 而应该这样：12. 嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。13.“页面大小”定义为页面的所有文件大小的总和，包括 HTML 文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，页面大小保持在 34K 以下为合适。10、文档的结构化书写：页面 CSS 文档都应采用结构化的书写方式，逻辑清晰易于阅读。如

27、：首页介绍服务/*=主导航=*/#mainMenu width:100%;height:30px;background:url(images/mainMenu_bg.jpg) repeat-x;#mainMenu ul li float:left;line-height:30px;margin-right:1px;cursor:pointer;/*=主导航结束=*/11、选用恰当的元素：根据文档的结构来选择 HTML 元素，而不是根据 HTML 元素的样式来选择。例如，使用P 元素来包含文字段落，而不是为了换行。如果在创建文档时找不到适当的元素，则可以考虑使用通用的 div 或者是 span；

28、避免过渡使用 div 和 span。少量、适当的使用 div 和 span 元素可以使文档的结构更加清晰合理并且易于使用样式；尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；12、派生选择器：可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：.mainMenu ul li background:url(images/bg.gif;)13、辅助图片用背影图处理：这里的”辅助图片” 是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背

29、影图处理，可以在不改动页面的情况下通过 CSS 样式来进行改动，如： #logo background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;14、结构与样式分离：在页面里只写入文档的结构，而将样式写于 css 文件中，通过外部调用 CSS 样式表来实现结构与样式的分离。15、鼠标手势：在 XHTML 标准中， hand 只被 IE 识别，当需要将鼠标手势转换为“手形”时，则将“hand” 换为“pointer”，即“cursor:pointer;”16注释书写规范01、行间注释：直接写于属性值后面，如：.searchborde

30、r:1px solid #fff;/*定义搜索输入框边框 */background:url(/images/icon.gif) no-report #333;/*定义搜索框的背景*/02、整段注释：分别在开始及结束地方加入注释，如：/*=搜索条=*/.search border:1px solid #fff;background:url(/images/icon.gif) no-repeat #333;/*=搜索条结束=*/03协助注释非作者维护时所加入的表示修改时间、修改人等标识信息。在区域注释或单行注释的基础上加上修改人和修改时间等信息。例(区域注释) ： /pre/pre./pre/pr

31、e/pre/*=S 注释内容修改人和修改时间*/pre.class/pre./pre/pre.class/pre./pre/pre/*=E 注释内容修改人和修改时间*/pre例( 单行注释 )：/pre/pre/pre./pre/pre.class/pre/*注释内容修改人和修改时间*/pre./pre/pre17样式属性代码缩写1、不同类有相同属性及属性值的缩写：对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。如：#mainMenu background:url(/ima

32、ges/bg.gif);border:1px solid #333;width:100%;height:30px;overflow:hidden;#subMenu background:url(/images/bg.gif);border:1px solid #333;width:100%;height:20px;overflow:hidden;2，两个不同类的属性值有重复之处，刚可以缩写为：#mainMenu,#subMenu background:url(/images/bg.gif);border:1px solid #333;width:100%;overflow:hidden;#ma

33、inMenu height:30px;#subMenu height:20px;3，同一属性的缩写：同一属性根据它的属性值也可以进行简写，如：.search background-color:#333;background-image:url(/images/icon.gif);background-repeat: no-repeat;background-position:50% 50%;.search background:#333 url(/images/icon.gif) no-repeat 50% 50%;4，内外侧边框的缩写：在 CSS 中关于内外侧边框的距离是按照上、右、下、左的

34、顺序来排列的，当这四个属性值不同时也可直接缩写，如：.btn margin-top:10px;margin-right:8px;margin-bottom:12px;margin-left:5px;padding-top:10px;padding-right:8px;padding-bottom:12px;padding-left:8px;则可缩写为：.btn Margin:10px 8px 12px 5px;Padding:10px 8px 12px 5px;而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如： .btn margin-top:10px;marg

35、in-right:5px;margin-bottom:10px;margin-left:5px;缩写为： .btn margin:10px 5px;而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：.btn margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;缩写为：.btnmargin:10px;5，颜色值的缩写：当 RGB 三个颜色值数值相同时，可缩写颜色值代码。如：.menu color:#ff3333;可缩写为:.menu color:#f33;18hack 书写规范因为不同浏览器对

36、W3C 标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，比如 IE 在很多情况下就与 FF 存在 3px 的差距，对于这些差异性，就需要利用 css 的 hack来进行调整，当然在没有必要的情况下，最好不要写 hack 来进行调整，避免因为 hack 而导致页面出现问题。01、 IE6、IE7、Firefox 之间的兼容写法：写法一：IE 都能识别*;标准浏览器 (如 FF)不能识别*；IE6 能识别*，但不能识别 !important,IE7 能识别*，也能识别!important;FF 不能识别*，但能识别!important;根据上述表达，同一类/ID 下的 CSS hack

37、可写为：.searchInput background-color:#333;/*三者皆可*/*background-color:#666 !important; /*仅 IE7*/*background-color:#999; /*仅 IE6 及 IE6 以下*/一般三者的书写顺序为：FF、IE7、IE6.写法二：IE6 可识别“_”，而 IE7 及 FF 皆不能识别，所以当只针对 IE6 与 IE7 及 FF 之间的区别时，可这样书写：.searchInput background-color:#333;/*通用*/_background-color:#666;/*仅 IE6 可识别*/写

38、法三：*+html 与 *html 是 IE 特有的标签 , Firefox 暂不支持。.searchInput background-color:#333;*html .searchInput background-color:#666;/*仅 IE6*/*+html .searchInput background-color:#555;/*仅 IE7*/02，屏蔽浏览器：select 是选择符，根据情况更换。第二句是 MAC 上 safari 浏览器独有的。*:lang(zh) select font:12px !important; /*FF 的专用*/select:empty font

39、:12px !important; /*safari 可见*/IE 的 if 条件 hack 写法：所有的 IE 可识别：Only IE 只有 IE5.0 可以识别:Only IE 5.0 IE5.0 包换 IE5.5 都可以识别:Only IE 5.0+ 仅 IE6 可识别:Only IE 6- IE6 以及 IE6 以下的 IE5.x 都可识别 :Only IE 6/+ 仅 IE7 可识别:Only IE 7/- 19、清除浮动：在 Firefox 中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的 HACK 来对父级做一次定义，那么就可以解决这个问题。select:after content:”.”;display:block;height:0;clear:both;visibility:hidden;