Beautiful-Css

2010-12-29 阅读 217

当你还在为你工作伙伴说你的Css太乱了,当你还在寻找怎么样才能让自己的Css写的very Beautiful时,一个好的Css格式不仅是你个人能力的象征,也是你......,当你看到我的这篇文章时也许你就不会再因为Css美观问题而烦恼了。下面是我个人的观点,仅供参考。

第一:打造属于自己的reset.css.

你的rest.css不一定是最好的,但他一定要适合你自己。

rest.css是不是该在所有的页面中存在,或者说是不是一定要reset.css。这种观点应该是仁者见仁智者见智的事吧。我个人不好说,但有一点,即使你页面中有reset.css,也不要把所有的标签都给rest了,因为这些标签可能有些根本都用不到,你却把它写在rest.css中了,这样只能给服务器带来压力,可能会出现很多bug和一些难以预料的东西,我个人的建议是,根据页面的具体要求打造合适的Css.我们可以把最常用的css写到reset.css中,其他的可以写到global.css中。个人推荐的reset.css代码如下:

<pre class="brush:css;">    *{margin:0;padding:0}
body {
    line-height: 1.5;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ol, ul {
    list-style: none;
}
```
<p>
	注:对<span class="Apple-style-span" style="font-family: monospace; white-space: pre; ">line-height: 1.5;的解释,有的朋友会问为什么不把</span><span class="Apple-style-span" style="font-family: monospace; white-space: pre; ">line-height属性设置成1px呢?</span></p>
<p>
	我的解释是:行高默认所有元素都会继承的,所以给body设置行高为1就足够了。通常行高设为1时候,英文照常阅读,但中文就无法阅读了,行间距过于紧密导致容易看错行。通常在中文环境下得设置1.41.5才能是用户正常阅读。我建议是1.5,这样算出来的值也是整数。比如字体大小12px的时候行高是18px,字体大小16px时行高24px。看起来也会比较舒服。此外,还有一个不设置成1的重要原因是:IE下,行高为1时,中文字顶部会被削掉几像素,字体加粗时尤为明显。所以,重置的原则是好的,但切不可重置为1</p>
<h4>
	第二:Css中个属性的排序问题。</h4>
<p>
	我的建议排序方式是:按照英文字母的顺序从a-z 的次序排序,这样的好处是:</p>
<ol><li>
		css不会因为这样排序而影响到程序的运行速度。</li>
	<li>
		这样写可以是你的css更有条理,更容易查找,是你的团队伙伴不在为找某个css属性而头疼。</li>
</ol><h4>
	第三:Css中的注释。</h4>
<ol><li>
		你可以用注释组织你的样式。</li>
	<li>
		你可以用注释对相似元素进行分组,可以更快的找到你需要的内容等等。</li>
</ol><h4>
	第四:一致性</h4>
<p>
	无论你现在以何种方式编码,保持下去。我对于css要单行还是多行书写的方式在不做任何见解,我个人认为这个问题根本没有必要去争执,这是个人爱好的问题。我个人而言,我使用混合模式,如果一个样式有超过3条属性,我就采用多行模式。</p>
<h4>
	第五:从正确的地方出发。</h4>
<p>
	在你写好你的标签之前不要动你的样式文件</p>
<div>
	当我准备开工的时候,在我创建一个CSS文件之前,我检查并对整个文档进行编码(HTML),从body标签开始到整个body标签结束。不添加任何多余的div、id或class。我会添加一些通用的div,比如头部,内容,底部,因为我知道这些东西肯定会有。</div>
<div>
	通过先编码整个文档,你可以避免出现多DIV症或多类症,这些毛病有的时候可能是致命的! 你只需要在你开始写CSS和确定需要另外的东西来实现相关效果的时候再加入它们。</div>
<div>
	使用CSS的向后选择器来定义子元素。不要直接自动的为元素添加类或id。</div>
<p>
	请记住,如果一个文档没有良好的格式(结构),CSS是毫无价值的。</p>
<p style="color:#f00;">
	为了感谢各位朋友长久以来的支持,惠邻网(<a href="http://www.huilinwang.com/blog/post/75.html">www.huilinwang.com</a>)将会给每位朋友寄去一张满载着我们深深祝福的明信片。希望朋友们在新的一年里,都能家庭幸福、身体健康、万事如意!</p>
<p>
	感谢:http://www.qianduan.net</p>

reset css

更新于 2023年03月28日