在網頁設計和開發(fā)中，為了提高代碼的可重用性和減少重復的代碼，經常需要將公用的樣式抽離出來，單獨寫成一個css文件，這樣不僅可以節(jié)約大量代碼，也便于后期修改維護。下面介紹一些提取公用樣式的方法。

方法一：使用全局樣式

*{
margin:0;
padding:0;
box-sizing: border-box;
}

將上述代碼放在所有css樣式之前，就可以將margin和padding設置為0，并將盒模型的計算方式設置為border-box，以避免由于盒模型所造成的樣式問題，并且這些樣式作用于所有的元素。

方法二：提取相同樣式

.box{
width:200px；
height:200px；
background-color:#f0f0f0；
border:1px solid #ccc；
font-size:16px;
}
.btn{
padding:10px 20px;
background-color:#4CAF50;
color:#fff;
font-size:16px;
}

可以發(fā)現(xiàn).box和.btn中有重復的樣式，將他們提取出來：

.common-style{
font-size:16px;
}
.box{
width:200px；
height:200px；
background-color:#f0f0f0；
border:1px solid #ccc；
}
.btn{
padding:10px 20px;
background-color:#4CAF50;
color:#fff;
}

將共同的樣式提取到一個類中，通過繼承這個類來避免重復的樣式。

方法三：利用偽類

a:link,
a:visited{
color:#0079bc;
text-decoration:none;
}
a:hover,
a:active{
color:#ffbc00；
text-decoration:underline;
}

鏈接的樣式在不同的狀態(tài)下是有差異的，可以使用偽類將相同的部分提取出來，并在不同狀態(tài)下重寫部分樣式。