CSS规范

CSS规范

1.0版2009-10-10 Carter@

一、总则 (2)

1.1目的及效力 (2)

1.2 CSS书写原则 (2)

二、样式重置 (2)

2.1重置代码 (2)

2.2注意事项 (3)

三、CSS书写顺序 (3)

3.1样式 (3)

3.2注意事项 (3)

四、CSS Hack (4)

4.1样式 (4)

4.2书写顺序 (4)

4.3注意事项 (4)

按住CTRL并单击目录可直接定位

一、总则

1.1目的及效力

1.制订本规范的目的：使css样式表文件标准化，具有较高的可读性，便于后期自己或他人

阅读、修改，使之开发效率提高。

2.页面制作人员必须严格遵守此规范。

3.本规范应用于2009年11月1日以后制作的项目中，不溯及以往。

4.本规范随时根据需要修订，请注意版本号的变化。当前为1.0版。

1.2 CSS样式书写总规范

1.普通企业网站样式表文件统一命名为“main.css”，对于门户型网站或大型企业网站根据

实际情况进行命名、细分。

2.由于页面采用utf-8编码所以必须在样式表文件顶部加上“@charset "utf-8";”。

3.书写样式时必须先进行样式重置。

4.书写样式时必须按照规定的顺序。

5.不同浏览器对于CSS解析认识不一样，为保证页面在各个浏览器下基本一致需要针对不

同浏览器去写不同的CSS。

6.书写样式时可以缩写的样式推荐使用缩写。

二、样式重置

2.1重置代码

/* 样式重置*/

body { margin:0; padding:0; font-size:12px; font-family:Arial,"宋体"; }

form,ul,li,p,h1,h2,h3,h4,h5,h6 { margin:0; padding:0; }

img { border:0; vertical-align:absbottom; }

ul,li { list-style-type:none; }

input, select, textarea { font-size:12px; font-family:Arial; vertical-align:absmiddle; } /* 常用功能样式*/

.clear { height:0px; font-size:0px; line-height:0px; overflow:hidden; clear:both; } .overflow { overflow:auto; }

.nobg { background:none!important; }

/* 默认文字链接样式*/

a { color:#333; text-decoration:none; }

a:hover { color:#285898; text-decoration:underline; }

2.2注意事项

1.尽量不要采用* { margin:0; padding:0; }

2.样式重置代码中已经包含常见情况，后期如有添加请按照CSS书写顺序添加。

三、CSS书写顺序

3.1样式

#样式名/.样式名{ display:block; float:; position:; z-index:; width:; height:; margin:; padding:; border:; background:; color:; font:（font-weight、font-size、line-height、font-family）; text-align:; text-decoration:; list-style:; overflow:; display:inline; *zoom:1; }

3.2注意事项

1.“｛”前后必须空格。

2.CSS属性必须以“;”结尾（最后一个属性也必须加“;”）,写完一个属性空一格。方便

后期自己或他人查看、修改。

3.CSS样式书写顺序：布局；定位；尺寸；边界；补白；边框；背景；字体；文本；其他；

4.对于可以缩写的属性在实际项目中可以不采用缩写，但必须按照“上、右、下、左”的顺

序进行书写。如margin-top:1px; margin-right:2px;……（“margin、padding属性”推荐使用缩写，方便后期修改。）

5.“font”此属性为缩写，代表字体属性集合，实际项目中不要求缩写。其内部包含：

font-weight、font-size、line-height、font-family等，书写顺序按照“（）”内。

对于没有列出字体属性（如：font-variant）在书写时在“font-family”后增加。

6.书写没有列出属性时根据备注第三项（CSS样式书写顺序）在其相应模块后增加。

7.“display:inline”原则为最后一个属性。其他属性都在其前面增加。如有“*zoom:1;”

则“*zoom:1;”为最后一个属性。

四、CSS Hack

4.1样式

#样式名/.样式名{

background:#000000; /* 全部支持*/

background/*\**/:#f00\9; /* 所有IE内核浏览器*/

background:#0000FF\0; /* IE8支持*/

* background:#FFFF00; /* IE7和IE6能识别,IE8和FF不能识别*/

_ background:#FF0000; /* IE6能识别，IE7、IE8和FF不能识别*/ }

4.2书写顺序

采用先Firefox后IE8再IE7其次才IE6的书写顺序。

4.3注意事项

1.目前只针对IE、Firefox，后期会逐步对其他浏览器（如：谷歌浏览器、Opera）写不

同Hack。

2.“\数字”目前只有9和0这两个数字可以使用。“\9”IE6+都支持。

3.

4.

5.

6.

7.

（注：文档可能无法思考全面，请浏览后下载，供参考。可复制、编制

，期待你的好评与关注）

8.

9.