網(wǎng)頁制作中常用的20個(gè)優(yōu)化CSS代碼技巧

時(shí)間：2022-05-29 18:15:01 | 來源：網(wǎng)絡(luò)營銷

時(shí)間：2022-05-29 18:15:01 來源：網(wǎng)絡(luò)營銷

大家非常的清楚CSS是我們Web制作中不可或缺的一部分。HTML提供了Web制作的結(jié)構(gòu)，但他不能讓我們實(shí)現(xiàn)美麗的頁面制作，此時(shí)我們需要CSS的幫助。CSS雖然能幫我們完善Web制作的效果，但其在不同的瀏覽器下是有不可預(yù)知的效果，為了讓你的CSS能解決這些不一致，今天億企邦給大家介紹20個(gè)CSS技巧代碼，相信這些對你應(yīng)該有很大的幫助。

1、使用text-indent來隱藏文本

這個(gè)常用在圖片替換文本中，最常見的就是使用使用圖片來替換Logo，這個(gè)是非常有用的，使用“text-indent”我們可以達(dá)到圖片替換文本的效果，而且方便搜索引擎的優(yōu)化，還能支持閱讀器閱讀網(wǎng)頁內(nèi)容：

當(dāng)然，這個(gè)只是使用“text-indent"替換文本的一種效果，其實(shí)他還有更多的方法。

2、根據(jù)文件格式設(shè)置鏈接圖標(biāo)

這個(gè)技巧主要是針對用戶體驗(yàn)，讓用戶能很清楚點(diǎn)擊的鏈接是有關(guān)于什么方面的內(nèi)容，比如說，點(diǎn)擊某個(gè)鏈接會(huì)到跳到站外。換句話說使用屬性選擇器器，給不同的鏈接設(shè)置不同的圖標(biāo)，讓用戶很輕松的明白相應(yīng)的鏈接是有關(guān)于什么方面的內(nèi)容：

3、在IE瀏覽器中刪除textarea的滾動(dòng)條

IE瀏覽器中textarea默認(rèn)就有滾動(dòng)條出現(xiàn)，為了達(dá)到所有瀏覽器默認(rèn)下一致的效果，其實(shí)我們可以使用代碼讓他達(dá)到一致的效果：

4、段落首字下沉

有雜志排版中我們?？吹降谝粋€(gè)段落的首字下沉的效果，其實(shí)這種效果實(shí)現(xiàn)是相當(dāng)?shù)娜菀祝?br>
5、所有瀏覽器下的CSS透明度

元素透明度時(shí)常是個(gè)惱人的問題，下面這種方式可以實(shí)現(xiàn)所有瀏覽器下的透明度設(shè)置：

6、Reset Css

Eric Meyer的重置CSS幾乎已經(jīng)成為標(biāo)準(zhǔn)，用來重置瀏覽器的默認(rèn)樣式：

但這樣的重置樣式并非適合每一個(gè)人，我就在此基礎(chǔ)上精減了部分代碼，因?yàn)槲野l(fā)現(xiàn)我們有很多標(biāo)簽是不怎么使用的：

7、圖片預(yù)加載

圖片預(yù)加載有時(shí)是非常有用的，這樣當(dāng)某個(gè)元素需要時(shí)，他就已經(jīng)被加載了，此時(shí)就不會(huì)有任何延誤或閃爍的現(xiàn)像：

8、基本的CSS Sprite按鈕

CSS Sprite我想大家一定是非常熟悉，我們時(shí)常在按鈕或鏈接中使用CSS Sprites,用來提搞用戶的體驗(yàn)。比如說，我們有一個(gè)按鈕，當(dāng)用戶鼠標(biāo)在按鈕上時(shí)需要顯示另一種背景，那么我們就可以使用這樣的技術(shù)：

9、Google Font API

Google Font給我們提供一個(gè)新的字體設(shè)置。

10、瀏覽器的專用hack

瀏覽器的兼容問題向來都是很煩的事情，特別是在IE下的兼容問題。但有時(shí)我們?yōu)榱诉_(dá)到一致的效果，不得不使用瀏覽器的兼容：

11、固定頁腳

固定頁腳在屏幕的底部，在現(xiàn)代瀏覽器來說是一件非常容易的事情，但是在IE6下還是需要特殊的處理：

12、翻轉(zhuǎn)圖片

翻轉(zhuǎn)圖像隨著CSS3的transform越來越實(shí)用，不需要重新加載圖片，就可以實(shí)現(xiàn)一個(gè)圖片的旋轉(zhuǎn)。常見的是一個(gè)三角型效果，我們想讓他在不同狀態(tài)展示不同的風(fēng)格：

13、clearfix

clearfix主要是使用他來清除浮動(dòng)，只需要添加這個(gè)類名無需加上任何HTML標(biāo)記，就可以達(dá)到清除浮動(dòng)的效果：

14、圓角

隨著CSS3的屬性的出現(xiàn)，我們制作圓角效果就不需要在像以前那樣的辛苦了，可以使用CSS3的border-radius來實(shí)現(xiàn)，只是在IE-6-8下無法實(shí)現(xiàn)，我們來看現(xiàn)代瀏覽器下如何制作圓角：

15、!important

!important有時(shí)可以幫我們做很多事，他可以覆蓋任何相同的樣式，換句話說他可以改為樣式的權(quán)重：

16、@font-face

@font-face也是CSS3的屬性之一，他能在所有瀏覽器下運(yùn)行。最大的作用就是讓用戶沒有字體的瀏覽下也能支持網(wǎng)頁字體，具體使用：

17、頁面水平居中

如何使一個(gè)網(wǎng)站的頁面水平居中顯示，我想這個(gè)不用我說大家也知道，因?yàn)榇蠹铱隙ㄊ褂眠^多次了。

18、最小高度min-height

在IE6瀏覽器下是不支持最小高度這個(gè)屬性的，為了解決這個(gè)問題，我們可以使用下面這樣的代碼來處理：

19、垂直居中

水平居中處理起來相當(dāng)?shù)暮唵蔚模谴怪本又刑幚砥饋磉€是相當(dāng)?shù)臒?，特別是要兼容IE的瀏覽器情況下：

20、::selection

有很多朋友肯定不知道這個(gè)屬性的作用。它可以改變選擇的文本的背景色和前景色，突出你的瀏覽器中的選擇文本效果：

億企邦知識擴(kuò)展——附：幾個(gè)常用到的CSS樣式：

(1)、中文字兩端對齊：text-align:justify;text-justify:inter-ideograph;

(2)、固定寬度漢字截?cái)啵簅verflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不過只能處理文字在一行上的截?cái)啵荒芴幚矶嘈小?（IE5以上）FF不能，它只隱藏。

(3)、固定寬度漢字（詞）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。

(4)、<acronym title=”輸入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠標(biāo)放在前面的文字上看效果。這個(gè)效果在國外的很多網(wǎng)站都可以看到，而國內(nèi)的少又少。

(5)、FLASH透明：選中swf,打開原代碼窗口，在</object>前輸入<param name=”wmode” value=”transparent”> 以上是針對IE的代碼。針對FIREFOX 給<embed> 標(biāo)簽也增加類似參數(shù)wmode=”transparent” 。

(6)、在做網(wǎng)頁時(shí)常用到把鼠標(biāo)放在圖片上會(huì)出現(xiàn)圖片變亮的效果，可以用圖片替換的技巧，也可以用如下的濾鏡：

.pictures img {
　　filter: alpha(opacity=45);
　　}
　　.pictures a:hover img {
　　filter: alpha(opacity=90);
　　}

(7)、圖片設(shè)為半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5測試通過，F(xiàn)F未通過，這是因?yàn)檫@個(gè)樣式是IE私有的東西。

做過跟網(wǎng)頁制作有關(guān)的工作人員應(yīng)該知道，網(wǎng)站越大，CSS樣式越多，所以開始做前，請做好充分的準(zhǔn)備和策劃，包括命名規(guī)則。頁面區(qū)塊劃分，內(nèi)部樣式分類等，這樣才不至于在以后的網(wǎng)站維護(hù)中再經(jīng)常的優(yōu)化代碼。