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