隨著近幾年來Web標準的流行，css也逐漸有原先輔助的角色轉變成了各大網站編程的重要組成部分一直。它很好地將樣式與內容分離，使得后期的版面維護與更新工作得以更加地便捷！本文將給大家介紹5個有關CSS的實用技巧。

1. 使用!important:

!important是用來將css屬性的優先權提升到之高無上的地步，任何多余的裝飾在!important的面前都無用無知地。使用方法：

.text {
background-color:blue !important; //只需在css屬性后加上!important即可，與屬性間的空格可有可無
background-color:red; //盡管該css屬性是寫在后面，但沒有起到任何的作用
}

2. 使用background設置圖片來替換文本：

每個網站都有一個logo，如果使用a標簽直接包含logo圖片，這樣的做法對搜索引擎不太友好。此時，我們可以用a標簽包含一段文字，通過css來的background屬性來隱藏文字，同時設置a標簽的背景圖片為logo圖片，這樣可以更加友好地優化了網站。

.logo a {
display:block;
width:120px; //此處的寬度和高度與logo圖片的寬度和高度一致即可
height:80px;
text-indent:-9999px;
background:url no-repeat;
}

3. 清除浮動：

在網站的布局設置時，經常會出現通過浮動來布局網站內容的分布。但若該元素浮動后，它就脫離了它的父親的管束，會導致它的父親的高度為0。為了不是父親的后面的兄弟們的布局出現問題,此時需要對父親清除浮動.方法有二:

01. 在父親的浮動兒子后面插入一個塊級元素,如div,設置該div的css為clear,編寫css:

.clear {
clear:both;
}

02. 使用overflow和heigth組合的方式,設置父親father的css為:

.father {
overflow:hidden; //標準瀏覽器中生效
height:%1; //兼容IE6
}

4. 文字垂直居中

若有一個h3包含的標題，你設置了它的高度為30px，就會發現它是居上邊顯示的，此時你只需結合line-heigth屬性即可實現居中效果：

h3 {
height:30px;
line-height:30px;
}

5. 網站整體內容居中

大家都知道有個屬性text-align:center;可以是文本居中，該屬性在ie6下也可以實現將網站的整體居中顯示。但在標準瀏覽器中，該 屬性是不起作用的。在標準瀏覽器中卻可以使用margin:0 auto;屬性是網站的整體內容居中，但該屬性在IE6中卻不能識別，所以為了兼容多瀏覽器，可以組合使用：

body {
text-align:center; //在body標簽中設置該屬性給IE6認識只用
}
#wrapper {
text-align:left; //在標準瀏覽器中，先須將文章的內容居左顯示
margin:0 auto; //然后使用margin屬性將網站整體內容居中
}

這些css技巧或許很簡單，但我的初衷是希望可以給初學者帶去一些幫助。當然css技巧遠遠不止這些，以后會逐漸整理了發表出來與大家分享。

原文地址：http://www.redbots.cn/skills/2009/09/18/13073.htm