CSS样式重置

在项目中，多数情况下，我们并不需要依赖浏览器的默认样式，因此，我们需要自己设定样式。一般分为三种样式：重置样式（初始化样式）、公共样式（一系列页面：头部、尾部等等）和独立样式（内容），前两者可命名为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

github演示