编写出色CSS代码的13个建议

:20px;}

.alignright{float:right;text-align:right;margin-left:20px;}

.clear{clear:both;text-indent:-9999px;}

那么对于如许一个段落

<p class="alignleft">我是一个段落!</p>

如不雅须要把这个段落由本来的左对齐修改为右对齐，那么只须要修改它的className就为alignright就可以了。

3. 代码缩写

CSS代码缩写可以进步你写代码的速度，精简你的代码量。在CSS琅绫擎有不少可以缩写的属性，包含margin，padding，border，font，background和色彩值等，如不雅您学会了代码缩写，本来如许的代码：

li{ 
font-family:Arial, Helvetica, sans-serif; 
font-size: 1.2em; 
line-height: 1.4em; 
padding-top:5px; 
padding-bottom:10px; 
padding-left:5px; 
}

就可以缩写为：

li{ 
font: 1.2em/1.4em Arial, Helvetica, sans-serif; 
padding:5px 0 10px 5px; 
}

如不雅您想更懂得这些属性要怎么缩写，可以参考《常用CSS缩写竽暌癸法总结》或者下载CSS-Shorthand-Cheat-Sheet.pdf 。

4. 应用CSS持续

如不雅页面中父元素的多个子元素应用雷同的样式，那最好把他们雷同的样式定义在其父元素上，让它们持续这些CSS样式。如许你可以很好的保护你的代码，并且还可以削减代码量。那么本来如许的代码：

#container li{ font-family:Georgia, serif; } 
 
#container p{ font-family:Georgia, serif; } 
 
#container h1{font-family:Georgia, serif; }

10. 应用代替@import

就可以简写成：

你可以归并多个CSS选择器为一个，如不雅他们有合营的样式的话。如许做不只代码简洁且可为你节俭时光和空间。如：

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
 
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
 
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

可以归并为

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. 恰当的代码注释

.aaabb{margin:2px;color:red;}

/*------------------------------------ 
 
1. Reset 
 
2. Header 
 
3. Content 
 
4. SideBar 
 
5. Footer 
 
----------------------------------- */

如斯你代码的构培养一目了然，你可以轻易的查找和修改代码。

而对于代码的主内容，也应恰当的加以划分，甚至在有须要的处地点对代码加以注释解释，如许也有利于团队开辟:

/*** Header ***/ 
#header{ height:145px; position:relative; } 
#header h1{ width:324px; margin:45px 0 0 20px; float	
			 2/4   首页 上一页 1 2 3 4 下一页 尾页	
			

　　推荐阅读
　　如何使用Flexbox和CSS Grid，实现高效布局
            
            CSS 浮动属性一向是网站上分列元素的重要办法之一，然则当实现复杂构造时，这种办法不老是那么幻想。荣幸的是，在现代网页设计时代，应用 Flexbox 和  CSS Grid 来对齐元素，变得相对轻易>>>详细阅读


本文标题：编写出色CSS代码的13个建议
地址：http://www.17bianji.com/lsqh/37767.html
 1/2    1