Home思洋影视事业部网站建设知识库
0 Comments

书写高效CSS注意的七个方面(3)

发布于：2013-07-18  |   作者：广州网站建设  |   已聚集：人围观

四、使用多重选择器

ExampleSourceCode



    
	
  1. 
		低效率的  
    2. 
	
  2. 
		 
    3. 
	
  3. 
		h1{color:#236799;}  
    4. 
	
  4. 
		h2{color:#236799;}  
    5. 
	
  5. 
		h3{color:#236799;}  
    6. 
	
  6. 
		h4{color:#236799;}  
    7. 
	
  7. 
		 
    8. 
	
  8. 
		高效的  
    9. 
	
  9. 
		 
    10. 
	
  10. 
		h1,h2,h3,h4{color:#236799;}  
    11. 
	
  11. 
		 
    12. 




	五、使用多重声明



	ExampleSourceCode




    
	
  1. 
		低效率的  
    2. 
	
  2. 
		 
    3. 
	
  3. 
		p{margin:001em;}  
    4. 
	
  4. 
		p{background:#ddd;}  
    5. 
	
  5. 
		p{color:#666;}  
    6. 
	
  6. 
		 
    7. 
	
  7. 
		译者注：对于十六进制颜色值，个人偏向于色值不缩写且英文字母要大写的方式.  
    8. 
	
  8. 
		 
    9. 
	
  9. 
		高效的  
    10. 
	
  10. 
		 
    11. 
	
  11. 
		p{margin:001em;background:#ddd;color:#666;}  
    12. 
	
  12. 
		 
    13. 




	六、使用简记属性



	ExampleSourceCode




    
	
  1. 
		低效率的  
    2. 
	
  2. 
		 
    3. 
	
  3. 
		body{font-size:85%;font-family:arial,helvetica,sans-serif;  
    4. 
	
  4. 
		background-image:url(image.gif);background-repeat:no-repeat;  
    5. 
	
  5. 
		background-position:0100%;margin-top:1em;margin-right:1em;  
    6. 
	
  6. 
		margin-bottom:0;margin-left:1em;padding-top:10px;  
    7. 
	
  7. 
		padding-right:10px;padding-bottom:10px;padding-left:10px;  
    8. 
	
  8. 
		border-style:solid;border-width:1px;border-color:red;color:#222222;  
    9. 
	
  9. 
		 
    10. 
	
  10. 
		高效的  
    11. 
	
  11. 
		 
    12. 
	
  12. 
		body{font:85%arial,helvetica,sans-serif;  
    13. 
	
  13. 
		background:url(image.gif)no-repeat0100%;margin:1em1em0;  
    14. 
	
  14. 
		padding:10px;border:1pxsolidred;color:#222;}  
    15. 
	
  15. 
		 
    16. 




	七、避免使用!important



	ExampleSourceCode




    
	
  1. 
		慎用写法  
    2. 
	
  2. 
		 
    3. 
	
  3. 
		#news{background:#ddd!important;}  
    4. 
	
  4. 
		特定情况下可以使用以下方式提高权重级别  
    5. 
	
  5. 
		#container#news{background:#ddd;}  
    6. 
	
  6. 
		body#container#news{background:#ddd;}  
    7. 
	
  7. 
		 
    8. 




	那么，如何让（后续）维护你站点的人更容易理解你的样式代码呢？我们在51cto.com以后的文章中和大家共同讨论学习。

	广州网站建设,网站建设,广州网页设计,广州网站设计


			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机