使用縮寫(xiě)可以幫助減少你CSS文件的大小,更加容易閱讀。css縮寫(xiě)的主要規則請參看《常用css縮寫(xiě)語(yǔ)法總結》,這里就不展開(kāi)描述。
忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以只寫(xiě)width=100,但是在CSS中,你必須給一個(gè)準確的單位,比如:width:100px width:100em。只有兩個(gè)例外情況可以不定義單位:行高和0值。除此以外,其他值都必須緊跟單位,注意,不要在數值和單位之間加空格。
當在XHTML中使用CSS,CSS里定義的元素名稱(chēng)是區分大小寫(xiě)的。為了避免這種錯誤,我建議所有的定義名稱(chēng)都采用小寫(xiě)。
class和id的值在HTML和XHTML中也是區分大小寫(xiě)的,如果你一定要大小寫(xiě)混合寫(xiě),請仔細確認你在CSS的定義和XHTML里的標簽是一致的。
當你寫(xiě)給一個(gè)元素定義class或者id,你可以省略前面的元素限定,因為ID在一個(gè)頁(yè)面里是唯一的,鴆las s可以在頁(yè)面中多次使用。你限定某個(gè)元素毫無(wú)意義。例如:
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以寫(xiě)成
#content { /* declarations */ }
.details { /* declarations */ }
這樣可以節省一些字節。
通常padding的默認值為0,background-color的默認值是transparent。但是在不同的瀏覽器默認值可能不同。如果怕有沖突,可以在樣式表一開(kāi)始就先定義所有元素的margin和padding值都為0,象這樣:
* {
margin:0;
padding:0;
}
CSS中,子元素自動(dòng)繼承父元素的屬性值,象顏色、字體等,已經(jīng)在父元素中定義過(guò)的,在子元素中可以直接繼承,不需要重復定義。但是要注意,瀏覽器可能用一些默認值覆蓋你的定義。
如果對同一個(gè)元素的定義有多種,以最接近(最小一級)的定義為最優(yōu)先,例如有這么一段代碼
Update: Lorem ipsum dolor set
在CSS文件中,你已經(jīng)定義了元素p,又定義了一個(gè)classupdate
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
這兩個(gè)定義中,class=update將被使用,因為class比p更近。你可以查閱W3C的《 Calculating a selector’s specificity》 了解更多。
一個(gè)標簽可以同時(shí)定義多個(gè)class。例如:我們先定義兩個(gè)樣式,第一個(gè)樣式背景為#666;第二個(gè)樣式有10 px的邊框。
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在頁(yè)面代碼中,我們可以這樣調用
這樣最終的顯示效果是這個(gè)div既有#666的背景,也有10px的邊框。是的,這樣做是可以的,你可以嘗試一下。
CSS初學(xué)者不知道使用子選擇器是影響他們效率的原因之一。子選擇器可以幫助你節約大量的class定義。我們來(lái)看下面這段代碼:
這段代碼的CSS定義是:
div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }
你可以用下面的方法替代上面的代碼
樣式定義是:
#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }
用子選擇器可以使你的代碼和CSS更加簡(jiǎn)潔、更加容易閱讀。
為了節省字節,我建議不要給背景圖片路徑加引號,因為引號不是必須的。例如:
background:url(images/***.gif) #333;
可以寫(xiě)為
background:url(images/***.gif) #333;
如果你加了引號,反而會(huì )引起一些瀏覽器的錯誤。
當一些元素類(lèi)型、class或者id都有共同的一些屬性,你就可以使用組選擇器來(lái)避免多次的重復定義。這可以節省不少字節。
例如:定義所有標題的字體、顏色和margin,你可以這樣寫(xiě):
h1,h2,h3,h4,h5,h6 {
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用時(shí),有個(gè)別元素需要定義獨立樣式,你可以再加上新的定義,可以覆蓋老的定義,例如:
h1 { font-size:2em; }
h2 { font-size:1.6em; }
當你用CSS來(lái)定義鏈接的多個(gè)狀態(tài)樣式時(shí),要注意它們書(shū)寫(xiě)的順序,正確的順序是::link :visited :hover :active。抽取第一個(gè)字母是LVHA,你可以記憶成LoVe HAte(喜歡討厭)。為什么這么定義,可以參考Eric Meyer的《
聯(lián)系客服