思洋互动网站建设学前班

七、最近优先原则

如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码
Update:Loremipsumdolorset
在CSS文件中，你已经定义了元素p，又定义了一个class="update"

ExampleSourceCode 

1. p{  
2. margin:1em0;  
3. font-size:1em;  
4. color:#333;  
5. }  
6. .update{  
7. font-weight:bold;  
8. color:#600;  
9. }  

这两个定义中，class="update"将被使用，因为class比p更近。你可以查阅W3C的《Calculatingaselector’sspecificity》了解更多。

八、多重class定义

一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10px的边框。

ExampleSourceCode 

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

在页面代码中，我们可以这样调用 <divclass="onetwo"></div> 这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

九、使用子选择器(descendantselectors)

CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

ExampleSourceCode 

1. <dividdivid="subnav"> 
2. <ul> 
3. <liclassliclass="subnavitem"><ahrefahref=  
4. "http://www.52CSS.com/"class="subnavitem">Item1</a></li>> 
5. <liclassliclass="subnavitemselected"> 
6. <ahrefahref="52CSS.com"class="subnavitemselected">Item1</a></li> 
7. <liclassliclass="subnavitem"> 
8. <ahrefahref="http://www.52CSS.com/"class="subnavitem">Item1</a></li> 
9. </ul> 
10. </div> 
11.  

这段代码的CSS定义是：

ExampleSourceCode 

1. div#subnavul{/*Somestyling*/}  
2. div#subnavulli.subnavitem{/*Somestyling*/}  
3. div#subnavulli.subnavitema.subnavitem{/*Somestyling*/}  
4. div#subnavulli.subnavitemselected{/*Somestyling*/}  
5. div#subnavulli.subnavitemselecteda.
6. subnavitemselected{/*Somestyling*/}  

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

ExampleSourceCode 

1. <ulidulid="subnav"> 
2. <li><ahrefahref="http://www.52CSS.com/">Item1</a></li> 
3. <liclassliclass="sel"><ahrefahref="http://www.52CSS.com/">Item1</a></li> 
4. <li><ahrefahref="http://www.52CSS.com/">Item1</a></li> 
5. </ul> 
6.  

样式定义是：

ExampleSourceCode 

1. #subnav{/*Somestyling*/}  
2. #subnavli{/*Somestyling*/}  
3. #subnava{/*Somestyling*/}  
4. #subnav.sel{/*Somestyling*/}  
5. #subnav.sela{/*Somestyling*/}  
6.  

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
广州网站建设,网站建设,广州网页设计,广州网站设计

十、不需要给背景图片路径加引号

为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：

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

可以写为 

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

如果你加了引号，反而会引起一些浏览器的错误。