使您的CSS网页布局代码更专业精简CSS文件

2024-07-11 08:26:42

字体：大中小

来源：转载

供稿：网友

尽管对于现如今的带宽来说，网页文件那仅以K来算的大小实在是微不足道，但如何将这以K来计算的网页文件精简到最小还是网页设计师们所应该考虑的问题之一。试想一下，你会是希望打开一个网站的时候整个站点马上呈现在你面前呢？还是喜欢花上十几秒甚至是几分钏来看整个站点一点一点的被浏览器解释出来呢？

　　在Table布局的时代，代码无数次的随着表格在页面里重复，致使整个网页文件变得臃肿无比，代码的可读性也降到最低，浏览器的解释时间自然也增加了不少。而自从DIV+CSS的布局替代Table布局之后，这一切都得到了极大的改善，让Table回归到它原本用于显示数据的位置上去，而布局就交给DIV+CSS来做，这样代码的可读性与复用性都得到了提高，而DIV+CSS更为重要的一点就是将网页文件的表现与结构区分开来，再也不用为了表现而去改动整个网页文件的结构了。

　　即使DIV+CSS的布局方式将以前Table布局时代码的臃肿降到了最低，但对于网页设计师来说，如何将网页文件的大小控制到最小是永远值得探索和追求的一个问题。

看如下一段代码：

复制代码

代码如下:
#header {
margin-top:10px;
margin-right:15px;
margin-bottom:10px;
margin-left:15px;
backgroung-color:#333333;
background-images:url(https://www.Vevb.com/Images/logo.gif);
}

这样的一段CSS代码，在条理上很清晰，结构也很明了，可读性很强，可是这样的一段代码却没有做精简，也就是说它是最原始的CSS代码，下面看精简后的代码：

复制代码

代码如下:
#header {
margin:10px 15px;
backgroung:#333 url(https://www.Vevb.com/Images/logo.gif);
}

在CSS中有复合属性这一说法，也就是说可以将很多属性参数整合在一起的，比如说上面的“margin-top; margin-right; margin-bottom; margin-left;”可以整合成一个“margin”属性，然后为其配上参数。

　　通过这一点，我们就可以在原始CSS代码的基本上将代码进一步的精简。而且这样写的结构也合理，可读性也同样强。可是对于要精简到彻底来说，这还不够。为了让这段CSS代码的结构明了，我们用上了空格换行等占用空间的东西，如果将这些占用空间的去掉呢？

复制代码

代码如下:
#header{margin:10px 15px;background:#333 url(https://www.Vevb.com/Images/logo.gif);}

只这一句就替代了上面的一段代码，这样代码就已经精简到了最大化，当然，并不推荐所有人都这样写，这样写的CSS代码在可读性上要远远差于段落式的写法，除非你对自己写的代码有完全掌握的信心。

上一篇：Iframe 高度自适应（兼容IE/Firefox、同域/跨域）

下一篇：有利于SEO优化的DIV+CSS的命名规则小结