论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

{CSS}CSS注释、命名、继续性、样式排序等CSS技巧的小结

文章类别:div+css布局 | 发表日期:2008-9-26 11:34:04

一、关于注释

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

二、关于命名

  在给CSS文件命名的时候,我比较喜欢使用符合语义的英文名或者缩写命名,在非常用部分也许会用部分拼音命名。另外,在某些有从属关系的class里,我可能会使用类似“list_banner”之类的命名,即父元素名加上“_”再加上元素名。
  关于命名,可以根据团队设计师的习惯进行协商。但最好在命名之后加上注释,以便将来生成文档备查。

三、关于继续性

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

四、关于CSS定义的层次

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<div id=\"menu\">
<div class=\"menulist\">
<div class=\"selectit\"></div>
</div>
</div>

  示例CSS:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#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某些属性的优先级需要定义)可以灵活处理。
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058