快速业务通道

CSS教程:设计制作网页的CSS经验

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-03

  我们在网页教学网中向大家介绍过很多CSS经验与技巧,这些东西都发布在http://www.webjx.com/css/的文章中,相信对大家是有一些帮助与启发的。有些习惯显得尤为重要,今天与您分享六个CSS习惯。因为习惯其实是会变的,所以只能写“最近”的。这些习惯都跟技术无关,如果不遵守,也不会出错。但是我觉得良好的习惯会体现一个人的素质。

一、用class_name方式写类名。
  以前喜欢用class-name写,不过好像两样也没什么差别。但我比较反对用className写类名,因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会写成驼峰式,理由见下一条。

二、样式都用class而不用id。
  有三个理由,一,id不可以重复,所以用class的话,可以肆无忌惮的用无数次。二,id的优先级太高,若是写了一个#page_content a {color:#f60} ,那你完蛋了,里面要改链接颜色,都必须加上#page_content才能越过这个优先级。三,id专门留给JS用,这样才符合表现与行为分离的原则。所以id我用驼峰式,也是为了体现这一点。

三、margin和padding,尽量省略最后一个值。
  比如margin: 20px 10px 5px 10px; ,左右值是一样的,就应该省略掉最后一个值,写成margin: 20px 10px 5px; 这样到时候要改左右间距,改一个就好,免得改漏了。其实这个问题虽然很细小,但是可以看得出对margin四个值省略规则的熟练程度。

四、按标准写CSS,再针对特定浏览器作hack。
  比如,通常我们会遇到如下的写法:

.side_col {
    float:left;
    display: inline;
    margin-left: 20px;
}
  而我的写法会是:

.side_col {
    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标准的熟练掌

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号