CSS规范_1.0.doc

CSS规范1.0版 2009-10-10 C一、总则21.1目的及效力21.2 CSS书写原则2二、样式重置22.1重置代码22.2注意事项3三、CSS书写顺序33.1样式33.2注意事项3四、CSS Hack44.1样式44.2书写顺序44.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 Hack4.1样式#样式名/.样式名background:#000000; /* 全部支持 */background/*/:#f009; /* 所有IE内核浏览器 */background:#0000FF0; /* IE8支持*/* background:#FFFF00;/* IE7和IE6能识别,IE8和FF不能识别*/_ background:#FF0000; /* IE6能识别，IE7、IE8和FF不能识别*/4.2书写顺序采用先Firefox后I