CSS心得:五個(gè)非常重要的CSS技巧

一、圖像替換文本

#header h1 a{
display:block;
text-indent:-9999em;
background:(images/logo.png) no-repeat 0 0;
height:87px;
width:250px;
overflow:hidden;
}

　　看得懂這個(gè)嗎？我看到很多們都LOGO都只是用圖片代替，而沒(méi)有鏈接。其他，只需要更簡(jiǎn)單的方法，利用圖像替換文本的方法，顯示LOGO，并擁有鏈接。各個(gè)值的功能display:block; a的默認(rèn)狀態(tài)是inline的，需要讓它變成塊狀的，才可能定義高度和寬度，以適應(yīng)LOGO的寬高。另外的一個(gè)功能是，讓鏈接在text-indent后，在原區(qū)域可點(diǎn)擊。
　　text-indent:-9999em; - 難道你想刪除logo中的文字?這樣應(yīng)該是你的最后選擇。因?yàn)檫@不符合語(yǔ)議標(biāo)記，所以，也對(duì)搜索引擎不友好。而這個(gè)值就是讓你的字體縮進(jìn)到看不到的地方。讓你不用刪除文字。
　　其他的不用講了吧…

二、display:inline-block;

　　在寫(xiě)sofished daily的CSS時(shí)，在頂站定日期的空間，就用了display:inline-block;顧名思義，就是在內(nèi)聯(lián)情況也的塊狀，可以設(shè)定高度寬度。在GR看到一篇share講了說(shuō)到了跨瀏覽器顯示這個(gè)顯示display:inline-block的方法：

.element-class {
display: -moz-inline-stack; //Firefox only code
display: inline-block; //some standard browsers
zoom: 1; //IE only
*display: inline; //Only IE know this code (CSS Hack)
}

　　好處是什么？好處就是不用使用float，在一行中顯示設(shè)定寬高的元素。不過(guò)，上面提到的跨瀏覽器，貌似我在IE下依然可以顯示，難道是IE tester的問(wèn)題？

三、用line-height文字垂直居中

　　你可能知道用text-align來(lái)讓文字水平劇中，不過(guò)，卻找不到更直接的方法來(lái)讓元素垂直居。這里，或許你可以利用一下line- height。比如你要在導(dǎo)航中讓文字簡(jiǎn)直居中于導(dǎo)航，可能會(huì)想到用padding和margin，不過(guò)，這時(shí)，煩人的IE可能會(huì)給你制造出麻煩，所以，用line-height吧，這是一個(gè)更簡(jiǎn)單的方法：
　　上面這張圖片的導(dǎo)航高度是28px，你可以給a設(shè)定這樣的值：#navigation a{font-size:14px;line-height:28px;}，這樣，就少去了用padding和margin的麻煩了。

四、布局居中

　　你會(huì)發(fā)現(xiàn)，很多網(wǎng)站的布局都是劇中的。原因是方便瀏覽，對(duì)用戶比較好？對(duì)于初學(xué)CSS的人來(lái)說(shuō)，可能并不知道怎么做吧。很簡(jiǎn)單，就一句，假設(shè)你的布局的那個(gè)div殼是#wrapper：
　　div#wrapper{margin:0 auto;}
　　這就是說(shuō)，讓上面沒(méi)有margin，而左右自動(dòng)適應(yīng)，選擇相等的寬度。這樣就可以更好地在各個(gè)瀏覽器中表現(xiàn)了。

五、CSS縮寫(xiě)

　　CSS縮寫(xiě)，為什么？簡(jiǎn)單來(lái)說(shuō)有兩個(gè)好處。一，讓你寫(xiě)代碼更有效率，因?yàn)槎蹋欢奖阈薷模l(shuí)也不想對(duì)著一堆雜亂的代碼發(fā)呆。貌似有很多人寫(xiě)過(guò)這個(gè)，不過(guò)，這里，就重復(fù)一下吧。我并不想直接寫(xiě)出所有，這樣文章看起來(lái)似乎特別長(zhǎng)，就給一些鏈接看看，你就明白了。

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)