CSS规范文稿V1.docx

CSS规范文稿V1.docx

《CSS规范文稿V1.docx》由会员分享，可在线阅读，更多相关《CSS规范文稿V1.docx（23页珍藏版）》请在冰豆网上搜索。

CSS规范文稿V1

CSS规范文稿

2009.1.5

1W3C规范3

2编码3

3标题3

4文件格式4

5路径4

6标签4

7CSS文件定义4

7.1全局样式：

（请大家讨论最终结果）5

7.2功能样式：

（此部分样式是否含入全局样式）6

7.3栏目样式：

7

8CSS样式定义7

8.1面向对象定义CSS7

8.2CSS样式排序8

9CSS样式命名9

10CSS语法9

10.1设置字体9

10.2加粗9

10.3空格10

10.4缩进10

10.5行距11

10.6表格11

10.7按钮12

10.8链接12

10.9中英排版13

11代码优化13

12代码检查13

13解决浏览器兼容问题的Hack方法13

14附件14

14.1各浏览器对CSS的解析认识差异（附件一）14

14.2证券常用中英文对照表（附件二）18

14.3网页常用中英文对照表（附件三）21

CSS规范文稿

为提高页面代码质量，提高工作效率和网站后期的可维护性，以及改善用户体验，充分发挥团队协作的潜能，而补充的以下网页制作规范，希望能通过规范的制作，使网站前端工作从效果图设计到静态页制作逐步走向产品化、模块化的专业制作体系，也使网站更好的发挥兼容性，以增强各种浏览器的用户体验，提高页面代码的可读性，为更好的配合程序开发，从而节约一定的网站开发时间。

具体规范事项如下：

请大家指正和补充。

1W3C规范

网页开头必须调用w3c规范：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

DTD文档类型定义：

（DocumentTypeDefinition）

DTD是一套关于标记符的语法规则。

它是XML1.0版规格得一部分,是XML文件的验证机制,属于XML文件组成的一部分。

DTD是一种保证XML文档格式正确的有效方法，可以通过比较XML文档和DTD文件来看文档是否符合规范，元素和标签使用是否正确。

一个DTD文档包含：

元素的定义规则，元素间关系的定义规则，元素可使用的属性，可使用的实体或符号规则。

XML文件提供应用程序一个数据交换的格式,DTD正是让XML文件能够成为数据交换的标准,依照DTD建立XML文件,并且进行验证,可以轻易的建立标准和交换数据，满足网络共享和数据交互。

的xmlns属性：

必须设置标签的xmlns属性，且其值为http:

//www.w3.org/1999/xhtml。

2编码

为了让浏览器更好的识别编码，每个页面都需要标示编码“utf-8”。

3标题

每个页面都需要有明确的标题，通过制定属性完成。

不应出现“NewPage”或“UntitledDocument”字样。

禁止在同一页面出现两个

4文件格式

在无特殊要求时，网页保存为*.asp格式。

因为asp格式的文件支持include功能，可将头、尾、菜单以及公用模块等页面嵌套进来。

5路径

页面中请使用绝对路径，因为绝对路径更利于代码移植，从而减少程序开发的工作量。

6标签

●在xhtml中，,和都是必须的标签。

●所有元素都必须结束。

如

应该有

●所有标签都必须小写。

如应改为。

●任何属性值必须用单引号/双引号引起来。

即不能写为。

●所有属性必须有值。

●“&”符号必须为编码"&"。

●不要定义图片标签的width、height属性。

如

height？

/>

●我们不提倡使用标签调用样式。

如：

7CSS文件定义

一个网站的样式应包含:

全局样式、功能样式和针对具体栏目的栏目样式。

全局样式和功能样式由项目负责人统一合并、整理，栏目样式由该栏目制作人书写。

在整理CSS文件时，要在文件内详细标注文件作者和注释。

增强CSS代码的可读性，减少后期维护工作量。

方法一：

每个页面调用全局css和这个页面用单独用到的css。

--全局css样式表-->

--栏目css样式表-->

--功能css样式表-->

方法二：

将全局样式和功能样式文件嵌套在栏目样式文件中。

--columnName.css在栏目样式文件中嵌入全局样式和功能样式链接-->

@import"/css/style.css";/*引入全局样式*/

@import"/css/css.css";/*引入功能样式*/

7.1全局样式：

（请大家讨论最终结果）

全局样式对应的是整个网站的样式表，内涵网站的整体风格。

全局样式对应的文件名应global.css。

/*--------全局样式--------*/

body{font-family:

"宋体",arial;font-size:

12px;margin:

0px;padding:

0px;background:

#fff;color:

#000;}

div,form,img,ul,li,dl,dt,dd{padding:

0px;margin:

0px;border:

0px;}

td,p,div,li,select,input,textarea{font-family:

"宋体";font-size:

12px;}

td,p,div,li,input,textarea{word-break:

break-all;}/*强行换行*/

table,tr,td,th{font-size:

12px;}

ul,li{list-style-type:

none;}/*ul,li{LIST-STYLE:

none;}*/

h1,h2,h3,h4,h5,h6{padding:

0px;margin:

0px;}

/*--------链接--------*/

a:

link{color:

#000000;text-decoration:

none;}/*未访问的链接*/

a:

visited{color:

#000000;text-decoration:

none;}/*已访问的链接*/

a:

hover{color:

#ff0000;text-decoration:

underline;}/*鼠标放上去的链接*/

a:

active{color:

#999999;}/*激活链接*/

/*--------表单--------*/

……

/*--------文本样式--------*/

.fB{font-weight:

bold;}

.f12px{font-size:

12px;}

.f14px{font-size:

14px;}

.lh_16{line-height:

16px;}

.lh_18{line-height:

18px;}

.lh_20{line-height:

20px;}

.lh_22{line-height:

22px;}

/*--------对齐和边距--------*/

.left{float:

left;}

.right{float:

right;}

.clear{clear:

both;}/*.clear{clear:

both;visibility:

hidden;font-size:

1px;width:

1px;}.pd_10{padding:

10;}

.mg_10{margin:

10;}

.ma{margin:

0auto}

/*--------结构布局--------*/

.main{}

.left{}

.right{}

/*--------栏目板块--------*/

/*top头部样式*/

……

/*main中部布局样式*/

……

/*bottom尾部样式*/

……

/*公用板块1*/

……

/*公用板块2*/

……

/*公用板块3*/

……

7.2功能样式：

（此部分样式是否含入全局样式）

功能样式对应为网站上的某个具体功能，比如网站的标签选项卡样式，功能样式并非会在每个页面都出现，只在需要的页面内才会调用。

功能样式对应的文件名应css.css。

多人合作一个项目时，如果在栏目页面制作过程中需要写新的功能样式，请将此部分样式注释出来，由项目负责人合到功能样式表。

/*大盘行情标签功能样式*/

.tab{font-size:

12px}

.tab_s{font-size:

14px}

/*首页flash轮播图片功能样式*/

……

7.3栏目样式：

栏目样式是该栏目特有的样式，不被其他栏目页面所使用的样式，应放置在和一级栏目名称相同的css文件中，比如"columnName.htm"页面的样式应放置在"columnName.css"文件中。

多人合作一个项目时，如果在栏目页面制作过程中需要写新的全局样式，请将此部分样式注释出来，由项目负责人合到全局样式表。

注意全局样式不要重名！

为避免重名，可以用栏目名做为CSS样式名的前缀，

/*制作人XXX2009-01-02*/

/*合并到全局样式*/

.left{text-align:

left;}

/*栏目文本样式*/

……

/*栏目链接样式*/

……

/*xxx栏目样式*/

……

8CSS样式定义

8.1面向对象定义CSS

必须使用CSS样式表来定义整个网站文字风格。

为方便修改，最好调用外部.css文件，有些个别的不常用的则可直接加在该页相应代码中。

要面向对象去定义CSS样式，也就是说针对具体某个栏目板块定义样式，比如定义导航样式、侧栏样式、新闻标题样式等；而不是根据样式去定义，比如红色、行距等。

例如导航的样式应定义为：

.nav{margin-top:

15px;border-bottom:

1pxsolid#333333;}

首页|栏目1|栏目2

尽量避免大篇幅的下面这种写法：

.margin-top15{margin-top:

15px}

.border-bottom1px{border-bottom:

1pxsolid#333333;}

首页|栏目1|栏目2

面向对象定义CSS的方法，样式结构清晰，方便整站修改、替换样式，利于代码移植，根据样式定义CSS，再多人合作时候，样式不但容易重名，也会因为页面增加使CSS文件越来越冗余。

●网页常用中英文对照表（附件）

8.2CSS样式排序

CSS中元素的排列顺序要照如下的样例代码定义。

在CSS中先对页面标签（如：

body、table）进行定义，然后定义伪类，最后定义自定义的扩展类（class）。

--

p{text-indent:

2em;}

body{font-family:

"宋体";font-size:

9pt;color:

#000000;margin-top:

0px;margin-right:

0px;margin-bottom:

0px;margin-left:

0px}

table{font-family:

"宋体";font-size:

9pt;line-height:

20px;color:

#000000}

a:

link{font-size:

9pt;color:

#FFFFFF;text-decoration:

none}

a:

visited{font-size:

9pt;color:

#99FFFF;text-decoration:

none}

a:

hover{font-size:

9pt;color:

#FF9900;text-decoration:

none}

a:

active{font-size:

9pt;color:

#FF9900;text-decoration:

none}

a.classname:

link{font-size:

9pt;color:

#3366cc;text-decoration:

none}

a.classname:

visited{font-size:

9pt;color:

#3366cc;text-decoration:

none}

a.classname:

hover{font-size:

9pt;color:

#FF9900;text-decoration:

none}

a.classname:

active{font-size:

9pt;color:

#FF9922;text-decoration:

none}

.blue{font-family:

"宋体";font-size:

10.5pt;line-height:

20px;color:

#0099FF;letter-spacing:

5em}

-->

9CSS样式命名

●id和class命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如:

newRelease（最新产品/new+Release）

●CSS样式表各区块用注释说明

●尽量使用英文命名原则

●尽量不缩写，除非一看就明白或特别长的单词

●CSS的样试命名的前缀可与其文件名相同（解释：

news.css文件内定义的样试.news、.newsleft、.newsleft_content、.newsNav。

这样可以避免样式的重名。

）

10CSS语法

10.1设置字体

需要对字体设计时可使用标签的style属性或直接在样式表中实现。

禁止在页面中出现

>标记。

禁止使用此类标签！

red">可使用标签的style属性

--

.red{color:

red}

-->

尽量将样式写入css,便于维护

●中文尽量使用"宋体"12px或14px。

这是经过优化的字号建议考虑。

●为保证不同浏览器上字号保持一致，字号用点数pt和像素px来定义。

●黑体字或者宋体字加粗时，建议选用11pt和14px的字号比较合适。

10.2加粗

尽量把样式写在css中，如果在一句话中需要对其中的部分文字加粗，可使用标签，不要用定义。

例1：

样式要写入CSS，常用样式可建入全局样式表中。

--

.fB{font-weight:

bold}

-->

字体加粗

例2：

必要时候可以插入标签。

[股市行情]近日大盘走势

例3：

尽量不要这样写，不便于维护，且增加代码量。

bold">[股市行情]近日大盘走势

10.3空格

●不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码）

●转意符号 ，也要尽量少使用，火狐和IE效果不一样（解决：

空白应该尽量使用text-indent,padding,margin,hspace,vspace以及透明的gif图片来实现。

）

10.4缩进

排版中遇到需要进行首行缩进的时候，处理做法是在样式表中定义p{text-indent:

2em;}然后给每一段加上

标记。

不要省略