5個(gè)實(shí)用CSS應(yīng)用技巧實(shí)例分享
隨著近幾年來Web標(biāo)準(zhǔn)的流行，css也逐漸有原先輔助的角色轉(zhuǎn)變成了各大網(wǎng)站編程的重要組成部分一直。它很好地將樣式與內(nèi)容分離，使得后期的版面維護(hù)與更新工作得以更加地便捷！本文將給大家介紹5個(gè)有關(guān)CSS的實(shí)用技巧。
1. 使用!important:
!important是用來將css屬性的優(yōu)先權(quán)提升到之高無上的地步，任何多余的裝飾在!important的面前都無用無知地。使用方法：
.text {
background-color:blue !important; //只需在css屬性后加上!important即可，與屬性間的空格可有可無
background-color:red; //盡管該css屬性是寫在后面，但沒有起到任何的作用
}
2. 使用background設(shè)置圖片來替換文本：
每個(gè)網(wǎng)站都有一個(gè)logo，如果使用a標(biāo)簽直接包含logo圖片，這樣的做法對(duì)搜索引擎不太友好。此時(shí)，我們可以用a標(biāo)簽包含一段文字，通過css來的background屬性來隱藏文字，同時(shí)設(shè)置a標(biāo)簽的背景圖片為logo圖片，這樣可以更加友好地優(yōu)化了網(wǎng)站。
.logo a {
display:block;
width:120px; //此處的寬度和高度與logo圖片的寬度和高度一致即可
height:80px;
text-indent:-9999px;
background:url(’logo.gif’) no-repeat;
}
3. 清除浮動(dòng)：
在網(wǎng)站的布局設(shè)置時(shí)，經(jīng)常會(huì)出現(xiàn)通過浮動(dòng)來布局網(wǎng)站內(nèi)容的分布。但若該元素浮動(dòng)后，它就脫離了它的父親的管束，會(huì)導(dǎo)致它的父親的高度為0。為了不是父親的后面的兄弟們的布局出現(xiàn)問題,此時(shí)需要對(duì)父親清除浮動(dòng).方法有二:
01. 在父親的浮動(dòng)兒子后面插入一個(gè)塊級(jí)元素,如div,設(shè)置該div的css為clear,編寫css:
.clear {
clear:both;
}
02. 使用overflow和heigth組合的方式,設(shè)置父親father的css為:
.father {
overflow:hidden; //標(biāo)準(zhǔn)瀏覽器中生效
height:%1; //兼容IE6
}
4. 文字垂直居中
若有一個(gè)h3包含的標(biāo)題，你設(shè)置了它的高度為30px，就會(huì)發(fā)現(xiàn)它是居上邊顯示的，此時(shí)你只需結(jié)合line-heigth屬性即可實(shí)現(xiàn)居中效果：
h3 {
height:30px;
line-height:30px;
}
5. 網(wǎng)站整體內(nèi)容居中
大家都知道有個(gè)屬性text-align:center;可以是文本居中，該屬性在ie6下也可以實(shí)現(xiàn)將網(wǎng)站的整體居中顯示。但在標(biāo)準(zhǔn)瀏覽器中，該 屬性是不起作用的。在標(biāo)準(zhǔn)瀏覽器中卻可以使用margin:0 auto;屬性是網(wǎng)站的整體內(nèi)容居中，但該屬性在IE6中卻不能識(shí)別，所以為了兼容多瀏覽器，可以組合使用：
body {
text-align:center; //在body標(biāo)簽中設(shè)置該屬性給IE6認(rèn)識(shí)只用
}
#wrapper {
text-align:left; //在標(biāo)準(zhǔn)瀏覽器中，先須將文章的內(nèi)容居左顯示
margin:0 auto; //然后使用margin屬性將網(wǎng)站整體內(nèi)容居中
}
這些css技巧或許很簡(jiǎn)單，但我的初衷是希望可以給初學(xué)者帶去一些幫助。當(dāng)然css技巧遠(yuǎn)遠(yuǎn)不止這些，以后會(huì)逐漸整理了發(fā)表出來與大家分享。
