当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 你怎么书写CSS代码?

CSS样式表
CSS定位中Positoin、absolute、Relative的一些研究
脚本控制三行三列自适应高度DIV布局的代码
word-wrap在firefox中不起作用的解决方法
网页设计者需要了解的_网页字体大小数据参考
div+css与xhtml+css分别是什么意思?
xhtml+css网页制作中常见问题解决方法
表格标签table深入了解
DIV+CSS网页另类上下布局的实例代码
CSS实现每行新闻数量不等效果代码
JAVASCRIPT IE 与 FF 中兼容写法记录
让超出DIV宽度范围的文字自动显示省略号...
CSS使用学习总结
解决IE6 3像素Bug的css写法
用CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大
firefox margin-top失效的原因与解决办法
IE hack条件写法
css pointer控制在firefox下显示手型的代码
纯CSS实现上下左右都居中的代码
在DW中CSS编码需要注意和掌握的一些技巧
DIV CSS网页布局 最小高度(min-height)的妙用

CSS样式表 中的 你怎么书写CSS代码?


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 89 ::
收藏到网摘: n/a

纵向书写特点:

每个CSS属性独立一行,一般不会出现换行或横向滚动条。
可以通过firebug等工具查找到模块,在DW中ctrl+g行定位,修改方便。
属性段落间有缩进,保证了代码的整洁,层次清楚,符合编程语言代码规范,修改更加直观。
存在的问题:代码冗余(如空格符、tab符、换行符);文件大小增加;容易出现纵向滚动条。

横向书写特点:

最大化的利用了空间,单屏内能显示更多,减小了纵向滚动条出现的几率,能够快速捕获较多的信息。
减小了文件大小,省去了不必要的空格、换行等。
横向书写方便分块以及注释,便于查看CSS结构,选择符一目了然。当今显示器正朝着越来越大,越来越宽发展,基本上一行内可以显示完全。
加快编写CSS速度,不用每次敲换行和tab,并且减少拉动滚动条的次数。
如果是活动页,不用作压缩处理。使用CSS optimizers 来优化CSS是提倡的,但是使用横向书写,基本上不存在多余的空格和换行,因此可以不用压缩,这样效率和能力都会得到提高。
便于阅读和查找相关结构。代码编辑器对同行数定位做的都比较好,因此我们要解决的是如何快速纵向定位目标。横向书写时选择符纵向对齐,再加上
.class_name_2  .class_name_2_1  .class_name_2_1_1的选择符层次分明,因此很容易定位到目标。
在调试小Bug的时候就可以直接打开CSS更改,不用再打开firebug去找到模块。
横向书写,是基于CSS选择符的写法,层次容易对比,更利于模块化。对整体CSS规划有好处,后期维护成本低。
便于不同版本的CSS代码对比。
存在的问题:书写过密,从而影响阅读。这种弊端显而易见,但只要优化做到家,这种状况会很少。

尽管对于现如今的带宽来说,网页文件那仅以K为单位的大小实在是微不足道,但如何将这以K来计算的网页文件精简到最小还是网页设计师们应该考虑的问题之一。而横向书写省去了不必要的空格、换行等,大大减小了文件大小。我们不能说哪种书写是对的,至于具体采用哪种写法依个人选择,当然改变习惯可能会影响一个人的工作效率,那我们提倡的是:提交的CSS样式文件是经过代码格式化的,而这个工作可以完全交给DW等工具,我们只要点击一下,整个文件就会像我们想象的那样呈现出来。这样的代码看起来很舒服,修改容易,团队成员在后续交接也会变得更加顺利。