繁體中文当前位置: 首页 > 图文教程 > 专题中心 > XHTML教程、HTML教程与W3C教程专题 > CSS教程教程 > CSS教程:设计制作网页的CSS经验
- CSS教程教程
- CSS教程:网页布局定位及z-index解释
- CSS教程:line-height属性的继承
- CSS教程:复合型条状图表
- CSS教程:最基本的条状图表
- CSS教程：媒体类别语法
- CSS教程：CSS放入网页的几种方式
- CSS教程：了解熟悉css语法
- CSS教程：CSS到底是干什么用的？
- CSS教程：行高line-height属性(1)
- CSS教程：认识层叠规则互相作用
- CSS教程：理解继承属性及应用
- CSS教程：行高line-height属性(2)
- CSS教程：div设置float后高度不自动增加
- CSS教程：简单理解em
- CSS教程：总结清除浮动的方法
- CSS教程：汇总CSS初学者的几个技巧
- CSS教程：简化CSS中属性的示例
- CSS教程：网页图片垂直居中的使用技巧
- css教程：美化网页段落的排版
- css教程：网页布局
CSS教程教程 中的 CSS教程:设计制作网页的CSS经验
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-12-05 浏览: 40 ::
收藏到网摘: n/a
我们在软晨学习网中向大家介绍过很多CSS经验与技巧，这些东西都发布在http://www.ruanchen.com/"code">.side_col {
float:left;
display: inline;
margin-left: 20px;
}
而我的写法会是：
.side_col {
float: left;
margin-left: 20px;
}
* .side_col {
_display:inline; /*hacked for IE 6*/
}
float: left;
margin-left: 20px;
}
* .side_col {
_display:inline; /*hacked for IE 6*/
}
看明白了么？不应该把hack混在一起，也不应该用一种侥幸的心态，觉得float:left与display:inline写在一起没事。嗯，它们俩确实没事儿，但是其他的hack就不一定了。而且这里写display:inline纯粹就是为了解决IE6的bug，所以前面加上下划线，以明确的表达你的目的。
另外不要以为凡是hack都是为IE准备的。其实有些hack是针对其他浏览器的，比如FF。这就要求你对CSS标准的熟练掌握，能够自信的判断哪些渲染是遵守标准，哪些违反标准的。
此外，我喜欢在hack前面加上星号，其实这纯粹是个人习惯了。可能过段时间我就不这么用了，呵呵。
五、记得加空格。
.class_name { property: value; } 。我个人觉得合理的空格是优秀代码的一个指标。按英文的习惯，标点后面都应该带空格（如果你写This is a pen.That’s a pencil.句点后面不加空格， word里面会有错误提示）。所以既然CSS是外国人发明的，应该按他们的格式来写。类似的，在JS里var a = b + c;里面的空格也应该都要加。
六、适当的层叠（Cascading)或缩进以定义CSS的“作用域”。
啥叫“CSS的作用域”？其实并不是所有的样式都在所有的地方使用。有的样式只用在某一块里面，比如“导航栏”里的“搜索框”，可能应该写成：
.nav .search {}
而有时候用层叠会增加代码优先级，所以也可以用缩进来“象征性的”体现作用域。像这样：
.login_box {}
.forgot_pwd{}
.forgot_pwd{}
缩进，是为了表示它们对应的标签具有父子关系。但这样只能起一个提醒的作用。
CSS技巧在于不断的总结与对编码的理解，任何时候都是在不断的完善的，有何经验欢迎您来52CSS.com与我分享，也可以在W3Cbbs.com发贴，写出您对CSS的心得体会。
评论 (0) 