设为首页  
联系我们  
加入收藏  
网页制作 冲浪宝典 图形图像 操作系统 软件教学 编程开发 认证考试 安全技术 站长专区 文学驿站 娱乐天地 游戏天地 办公软件
文章搜索
您的位置: 首页 >> 文章首页 >> 网页制作 >> CSS >> CSS样式表技巧总结
精品推荐
CSS点击TOP10
·网页制作知识:div+css 面试题目
·[历程]从菜鸟到准网页设计师
·改变IE的字体大小设置时,页面字体不发生改变,怎样实现?
·网页特效代码:纯CSS制作的网页下拉菜单
·CSS网页设计中IE5 IE5.5 IE6 Firefox浏览器兼容性
·常用CSS大全
·用动态CSS解决网页的大小字体问题
·CSS自定义属性Expression
·CSS基本布局16例
·实践用CSS制作框架页效果
网页制作点击TOP10
·菜鸟架设动网论坛全教程
·如何做才能成为一名优秀的网页设计师
·自定义右键菜单代码详解
·用FrontPage 2000下载整个网站
·用JavaScript实现文件图片滚动效果
·初学者入门:如何学习网页制作?
·网页制作知识:div+css 面试题目
·网页对联广告代码效果大全
·JAVASCRIPT实现网页动态鼠标跟随
·网页模板的使用方法 (教程)
精选专题

CSS样式表技巧总结

作者: 来源:http://www.xgdown.com/ 时间:2007-9-8 9:13:01

一、关于注释

在创建XHTML+CSS技巧">CSS网站时,CSS中的注释非常重要。在创建CSS样式时,应当保持随手注释的习惯。一般的,我习惯于使用“/* 注释内容 */”的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的“/***************/”之类的注释是无意义的,没有必要填充大量无意义内容作为分隔。带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率。

二、关于命名

在给CSS文件命名的时候,我比较喜欢使用符合语义的英文名或者缩写命名,在非常用部分也许会用部分拼音命名。另外,在某些有从属关系的class里,我可能会使用类似“list_banner”之类的命名,即父元素名加上“_”再加上元素名。

关于命名,可以根据团队设计师的习惯进行协商。但最好在命名之后加上注释,以便将来生成文档备查。

三、关于继承性

在CSS中,要善用继承性。比如在两个嵌套的div中,父元素定义了background-color属性为黑色,如果子元素的背景同为黑色,则不需重复定义。善于利用CSS的继承性可以让代码更有效、更精简。

四、关于CSS定义的层次

在定义CSS中的class时,建议使用层次分明的方式来描述语句。

示例结构:

<div id="menu">
  <div class="menulist">
    <div class="selectit"></div>
  </div>
</div>

示例CSS:

#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }

在上例中,从最终效果来看,#menu没有必要重复出现,但是实际上如果能够在前面加上#menu,将会让文档的层次更加明了,更利于阅读。

五、关于样式排序

在设计CSS样式表时,我们大多是手写代码,这样很容易造成class中的样式排序混乱。比如有几个class中用到了padding、margin、background、color等样式,但是排序的时候,有的class是background比较靠前,有的是margin比较靠前。这样就造成了一定的混乱,容易让思路受挫。我建议个人或者团队的设计师协定一个大致顺序,这样从个别来说看不出太大差别,但从整体上将更加易于阅读和管理,整体效率会提高不少。

比如,我默认将width、height和padding、margin、border等放在较靠前的位置,background其次,然后是控制文本的font、color、text-align等,接着是某些特殊标签才能用到的元素,像list-style等,最后是css滤镜。当遇到特殊情况时(比如CSS某些属性的优先级需要定义)可以灵活处理。

就总结到这里了,火德欢迎大家补充、指正。


CSS样式表技巧总结 相关文章:
CSS样式表技巧总结 相关软件:
特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
转载请注明来源:http://www.xgdown.com