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

:left; height:72px;}

/*** Content ***/

#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}

#content h1{color:#F00}/* 设置字体色彩 */

#content .posts{ overflow:hidden; }

#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }

/*** Footer ***/

#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}

#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

<h1>My name is <span>Wiky</span></h1>

7. 给你的CSS代码排序

/*** 样式属性按字母排序 ***/ 
div{ 
background-color:#3399cc; 
color:#666; 
font:1.2em/1.4em Arial, Helvetica, sans-serif; 
height:300px; 
margin:10px 5px; 
padding:5px 0 10px 5px; 
width:30%; 
z-index:10; 
}

8. 保持CSS的可读性

书写可读的CSS将会使得更轻易查找和修改样式。对于以下两种情况，哪种可读性更高，我想不言而明。

/*** 每个样式属性写一行 ***/ 
div{ 
background-color:#3399cc; 
color:#666; 
font: 1.2em/1.4em Arial, Helvetica, sans-serif; 
height:300px; 
margin:10px 5px; 
padding:5px 0 10px 5px; 
width:30%; 
z-index:10; 
} 
/*** 所有的样式属性写在同一行 ***/ 
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px;padding:5px 0 10px 5px; width:30%; z-index:10; }

当对于一些样式属性较少的选择器，我会写到一行：

/*** 选择器属性少的写在同一行 ***/ 
 
div{ background-color:#3399cc; color:#666;}

对于这个规出场非硬性规定，但无论您采取哪种写法，我的建议是始终保持代码一致。属性多的分行写，属性少于3个可以写一行。

9. 选择更优的样式属性值

CSS中有些属性采取不合的属性值，固然达到的效不雅差不多，当机能上却存在着差别，如

差别在于border:0把border设为0px，固然在页面上看不见，但按border默认值懂得，浏览器依然对border-width/border-color进行了衬着，即已经占用了内存值。

而border:none把border设为“none”即没有，浏览器解析“none”时将不作出衬着动作，即不会消费内存值。所以建议应用border:none;

同样的，display:none隐蔽对象浏览器不作衬着，不占用内存。而visibility:hidden则会。

如不雅代码中的属性都能按照字母排序，那查找修改的时刻就能加倍快速:

起首，@import不属于XHTML标签，也不是Web标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的机能有某些负面的影响。具体可以参考《高机能网站设计：不要应用@import》。所以，请避免应用@import

11. 应用外部样式表

这个原则始终是一个很好的设计实践。不单可以更易于保护修改，更重要的是应用外部文件可以进步页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档从新下载。所以，在实际应用中，没有须要把CSS代码内置在HTML文档中：

3/4 首页上一页 1 2 3 4 下一页尾页

　　推荐阅读

　　如何使用Flexbox和CSS Grid，实现高效布局

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

本文标题：编写出色CSS代码的13个建议

地址：http://www.17bianji.com/lsqh/37767.html

1/2 1