免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP
優(yōu)化你的CSS代碼~!

  最近看過(guò)許多網(wǎng)友制作的SKIN的CSS文件,發(fā)現(xiàn)其中有著許多冗余的代碼。下面我來(lái)跟大家介紹一下,如何清除這些冗余的代碼,讓你的CSS文件更加簡(jiǎn)潔。

  一、margin、padding屬性
  參照相關(guān)資料我們可以知道,margin和padding代表的意思分別是外部邊距和內(nèi)部填充距離,在許多網(wǎng)友的CSS中,關(guān)于這兩個(gè)屬性的冗余代碼是出現(xiàn)得最多的。比如:margin:0px,大家可以查看一下自己的CSS文件中,是否許多的margin:0px,其中有的是不需要的,你可以嘗試刪除它,當(dāng)然也并不是所有的margin:0px都沒(méi)有用,相同,padding:0px也一樣。

  另外,margin和padding中各項(xiàng)屬性的順序是:上右下左,你只要記住是順時(shí)針?lè)较蚓秃昧恕N覀冊(cè)倏纯催@兩段代碼:
margin:0px 0px 0px 10px;
margin-left:10px;
其實(shí)他們的作用是一樣的,下面的則是一種縮寫(xiě),使用縮寫(xiě)我們可以減少CSS代碼,并使閱讀起來(lái)更為方便。(padding也相同。)

  二、!important;屬性
  !important是CSS1就定義的語(yǔ)法,作用是提高指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)。IE是不支持這個(gè)語(yǔ)法的,而其他的瀏覽器都支持,通過(guò)這一點(diǎn),我們可以得知,設(shè)置了優(yōu)先權(quán)的代碼是不會(huì)被IE執(zhí)行的。所以我們可以important的后面添加CSS樣式,使其可以區(qū)別于IE和FireFox等瀏覽器。

  上次在看Miles的CSS代碼時(shí),我看到了這樣一句:
height:50px !important;height:50px;
  這里就是多余的了,我們可以這樣寫(xiě):height:50px就夠了,這個(gè)錯(cuò)誤在我剛開(kāi)始制作CSS時(shí)也曾出現(xiàn)過(guò)。

  三、text-align、font樣式
  這兩個(gè)樣式的作用我就不說(shuō)了,但是這兩個(gè)樣式在許多網(wǎng)友的CSS中也存在許多冗余。下面我來(lái)舉例說(shuō)明一下,層的定義如下:
<div id="main">
    <div id="body1">
        <div id="content1">
        </div>
    </div>
    <div id="body2">
    </div>
<div>

CSS文件如下(錯(cuò)誤示例):
#main{width:500px;text-algin:left;font-size:12px;color:#000000;}
#body1{width:500px;text-algin:center;font-size:12px;color:#FF0000;}
#content{text-algin:left;font-size:12px;color:#000000;}
#body2{text-algin:left;font-size:12px;color:#000000;}

  大家可以從上面的代碼中輕易地看出,有許多的冗余代碼,現(xiàn)在我們來(lái)書(shū)寫(xiě)正確的代碼:
#main{width:500px;text-algin:left;font-size:12px;color:#000000;}
#body1{text-algin:center;color:#FF0000;}
#content{width:300px;text-algin:left;color:#000000;}
#body2{}

  以上就是正確的代碼,由于大家在制作SKIN時(shí),對(duì)PJBLOG的DIV結(jié)構(gòu)沒(méi)搞清楚,才會(huì)出現(xiàn)這種錯(cuò)誤。

  四、display:none的使用
  display:none的作用就是使被定義的層不顯示。我們?cè)賮?lái)看看這段代碼:
#blogTitle{font-size:0px;margin:10px 3px 3px 40px;height:20px;color:#FFC1E6;display:none}

  大家有沒(méi)有覺(jué)得這有些多余呢,是的,既然設(shè)置了不顯示,為何還要保留那些不必要的樣式呢?出現(xiàn)這種情況我就知道,這個(gè)SKIN是改自某人的。

  五、還是margin和padding
  我還是通過(guò)例子來(lái)給大家說(shuō)明,層的定義同上,以下是CSS的定義(錯(cuò)誤示例):
#main{margin:5px 0px 5px 0px;}
#body1{margin:12px 0px 10px 0px;}
#content{margin:8px 0px 2px 0px;}
#body2{margin:10px 0px 15px 0px;}

  現(xiàn)在我們?cè)賮?lái)書(shū)寫(xiě)正確的樣式:
#main{}
#body1{margin-top:17px ;}
#content{margin:8px 0px 2px 0px;}
#body2{margin:20px 0px ;}

  這里需要大家制作一下示例才能了解,首先#main{margin:5px 0px 5px 0px;}是沒(méi)有必要的,他無(wú)非定義的就是整個(gè)頁(yè)面的上、下外邊距。(在一定場(chǎng)合下卻需要這樣書(shū)寫(xiě))我們同樣可以通過(guò)定義#body1的上邊距和#body2的下邊距來(lái)設(shè)置,所以才有了#body1{margin-top:17px ;}#body2{margin:20px 0px ;}(這里定義的是#body2的上下邊距為20px,左右邊距為0px,也是縮寫(xiě)的一種方式。)

  同樣的道理,于是我們可以省略了#body1的下邊距,在#content層在定義上邊距,另外大家還需要先弄清楚層的嵌套關(guān)系,否則就會(huì)出錯(cuò)。

  好了,寫(xiě)到這里我也該去睡了,以上就是這些時(shí)間查看大家的CSS文件獲得的經(jīng)驗(yàn),希望對(duì)大家書(shū)寫(xiě)CSS的時(shí)候有所幫助,制作出來(lái)的SKIN更加簡(jiǎn)潔、明了。

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開(kāi)APP,閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
五種方法讓你立刻寫(xiě)出更棒的CSS代碼
編寫(xiě)完美CSS代碼五個(gè)必要條件
編寫(xiě)現(xiàn)代 CSS 代碼的 20 個(gè)建議
使用Web標(biāo)準(zhǔn)建站第9天:CSS布局入門(mén)2
第四十五集 css樣式(之十五)描邊閃爍字
純CSS樣式解決相冊(cè)橫向完美排布
更多類(lèi)似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服