五條非常重要的CSS技巧

2024-07-11 08:24:35

字體：大中小

供稿：網(wǎng)友

　　今天向大家介紹另外五條非常重要的CSS技巧，可能有重復(fù)，大家多多理解這些知識(shí)一定有收益。
一、圖像替換文本

#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;

　　在寫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：

上一篇：CSS 學(xué)習(xí)心得

下一篇：純CSS實(shí)現(xiàn)的三級(jí)下拉菜單實(shí)現(xiàn)代碼