DIV CSS 佈局教程網

七.最近優先原則

如果對同一個元素的定義有多種，以最接近(最小一級)的定義為最優先，例如有這麼一段代碼

Update:Loremipsumdolorset  
 

在CSS文件中，你已經定義了元素p，又定義了一個class"update"

p{  
margin:1em0;  
font-size:1em;  
color:#333;  
}  
.update{  
font-weight:bold;  
color:#600;  
}  
 

這兩個定義中，class="update"將被使用，因為class比p更近。你可以查閱W3C的《Calculatingaselector’sspecificity》了解更多。

八.多重class定義

一個標簽可以同時定義多個class。例如：我們先定義兩個樣式，第一個樣式背景為#666；第二個樣式有10px的邊框。

.one{width:200px;background:#666;}  
.two{border:10pxsolid#F00;}  
 

在頁面代碼中，我們可以這樣調用

<divclassdivclass="onetwo">div> 
 

這樣最終的顯示效果是這個div既有#666的背景，也有10px的邊框。是的，這樣做是可以的，你可以嘗試一下。

九.使用子選擇器(descendantselectors)

CSS初學者不知道使用子選擇器是影響他們效率的原因之一。子選擇器可以幫助你節約大量的class定義。我們來看下面這段代碼：

<dividdivid="subnav"> 
<ul> 
<liclassliclass="subnavitem"><ahrefahref="#"class="subnavitem"> 
 
Item1a>li>> 
<liclassliclass="subnavitemselected"><ahrefahref="#" 
class="subnavitemselected">Item1a>li> 
<liclassliclass="subnavitem"><ahrefahref="#"class="subnavitem"> 
Item1a>li> 
ul> 
div> 
 

這段代碼的CSS定義是：

div#subnavul{/*Somestyling*/}  
div#subnavulli.subnavitem{/*Somestyling*/}  
div#subnavulli.subnavitema.subnavitem{/*Somestyling*/}  
div#subnavulli.subnavitemselected{/*Somestyling*/}  
div#subnavulli.subnavitemselecteda.subnavitemselected{/*Somestyling*/}  
 

你可以用下面的方法替代上面的代碼

<ulidulid="subnav"> 
<li><ahrefahref="#">Item1a>li> 
<liclassliclass="sel"><ahrefahref="#">Item1a>li> 
<li><ahrefahref="#">Item1a>li> 
ul> 
 

樣式定義是：

#subnav{/*Somestyling*/}  
#subnavli{/*Somestyling*/}  
#subnava{/*Somestyling*/}  
#subnav.sel{/*Somestyling*/}  
#subnav.sela{/*Somestyling*/}  
 

用子選擇器可以使你的代碼和CSS更加簡潔、更加容易閱讀。

十.不需要給背景圖片路徑加引號

為了節省字節，我建議不要給背景圖片路徑加引號，因為引號不是必須的。例如：

background:url("images/***.gif")#333;  
 

可以寫為

background:url(images/***.gif)#333;  
 

如果你加了引號，反而會引起一些浏覽器的錯誤。