之前，青華互聯(lián)青島網(wǎng)站建設(shè)給大家介紹過，DIV+CSS設(shè)計已經(jīng)成為網(wǎng)站建設(shè)，網(wǎng)站設(shè)計的一個大趨勢，并在做設(shè)計 怎能不會CSS文中為大家介紹了一些CSS的相關(guān)語法和標(biāo)簽的定義。本期，我們將繼續(xù)這個話題，教您如何寫出高效的CSS代碼，讓你的網(wǎng)頁更標(biāo)準(zhǔn)。

　　一、盡量使用 link 引入外部樣式表

　　為了對老版本瀏覽更好的提供支持，在編寫CSS代碼時盡量使用 link 引入外部樣式表的方來代替 @import導(dǎo)入樣式的方式.

　　@import和link在使用上會有一些區(qū)別， 利用二者之間的差異，可以在實際運(yùn)用中進(jìn)行權(quán)衡。

　　二、使用外聯(lián)樣式替代行間樣式或者內(nèi)嵌樣式

　　高效CSS樣式:

　　Example Source Code

　　< /head>

　　三、盡量少的使用 !important

　　慎用寫法

　　#news { background: #ddd !important; }

　　特定情況下可以使用以下方式提高權(quán)重級別

　　#container #news { background: #ddd; }

　　body #container #news { background: #ddd; }

　　四、使用多重選擇器

　　例如以下兩CSS代碼

　　低效率的

　　h1 { color: #236799; }

　　h2 { color: #236799; }

　　h3 { color: #236799; }

　　h4 { color: #236799; }

　　高效的避免了重復(fù)代碼，使代碼更加簡潔，明了

　　h1, h2, h3, h4 { color: #236799; }

　　五、使用多重聲明

　　例如：

　　低效率的

　　p { margin: 0 0 1em; }

　　p { background: #ddd; }

　　p { color: #666; }

　　高效的

　　p { margin: 0 0 1em; background: #ddd; color: #666; }

　　六、使用簡記屬性

　　高效CSS代碼：

　　body { font: 85% arial, helvetica, sans-serif; background: url(image.gif) no-repeat 0 100%; margin: 1em 1em 0; padding: 10px; border: 1px solid red; color: #222; }

　　七、使用繼承

　　例如以下兩個效率的對比

　　低效率的

　　p{ font-family: arial, helvetica, sans-serif; }

　　#container { font-family: arial, helvetica, sans-serif; }

　　#navigation { font-family: arial, helvetica, sans-serif; }

　　#content { font-family: arial, helvetica, sans-serif; }

　　#sidebar { font-family: arial, helvetica, sans-serif; }

　　h1 { font-family: georgia, times, serif; }

　　高效的

　　body { font-family: arial, helvetica, sans-serif; }

　　body { font-family: arial, helvetica, sans-serif; }

　　h1 { font-family: georgia, times, serif; }

　　在使用DIV+CSS編寫網(wǎng)頁時，我們會經(jīng)常遇到這些問題，究竟效率怎么樣，我們應(yīng)該從實踐去發(fā)現(xiàn)，這樣才能有更好的理解。

掃描二維碼手機(jī)查看該文章