在项目中，多数情况下，我们并不需要依赖浏览器的默认样式，因此，我们需要自己设定样式。一般分为三种样式：重置样式（初始化样式）、公共样式（一系列页面：头部、尾部等等）和独立样式（内容），前两者可命名为reset.css和common.css。
重置样式reset.css：不推荐使用通配符*{...}，对性能影响太大，而且有些标签没必要设置。
公共样式common.css：在一组页面中有很多类似的样式和效果，可以写若干通用的样式以便使用。
独立样式：各自页面除公共样式外的样式。
注意：在写css样式时需要注意语义化，例如公共样式，可以在对应部分加上"public-"前缀，如"public-header"，"public-container"，独立样式可以页面简称加上实现功能，或者功能加业务名称等，如"index-list","list-quest"（问题列表）等。
(代码如下)
reset.css:
body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,input,form,a,p,textarea{ margin:0; padding:0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } ol,ul,li{ list-style: none; } a{ text-decoration: none; display: block; } img{ border: none; display: block; } .clearfix{ zoom:1; } .clearfix:after{ display: block; clear: both; content: "", visibility:hidden; height: 0; }
common.css
.public-header{ height:100px; background-color: #ff6600; } .public-container{ position: relative; margin:0 auto; background-color: #468ad8; width: 900px } .public-footer{ height:100px; background-color: #9e46d8; }
index.css
.container-list{ padding:30px; } .container-list li{ margin: 10px; padding:40px; text-align: center; }
index.html
</!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="public-header"></div> <div class="public-container"> <ul class="container-list"> <li>normal.css</li> <li>reset.css</li> <li>index.css</li> </ul> </div> <div class="public-footer"></div> </body> </html>
在浏览器中实现效果：
github地址如下：https://github.com/bellayoung/demo/tree/master/ResetCSS