IT技术江湖   操作系统   安全技术   平面设计   Web开发   数据库   互联网   搜索引擎   网络广告   
引擎技术江湖  BLOG  合作联系
本站
Google
IT技术江湖
首页>Web开发>DIV+CSS重构> CSS样式表技巧总结
  • IT技术江湖
  • CSS样式表技巧总结
    http://www.hack1st.com 来源: 2008-03-22 阅读: 评论

     一、关于注释

      在创建xhtml+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某些属性的优先级需要定义)可以灵活处理。

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

    上一篇:DIV和CSS排版中制作细线条的几种方法  
    下一篇:CSS 中的行为 —— expression

    ·网友互动--用户名: (新注册) 密码: 匿名评论 [所有评论]
    评论内容:(用户发表意见仅代表其个人意见,评论内容与本站立场无关,请自觉遵守互联网相关政策法规)
    关注此文读者还看过
    • ·从四个方面谈谈Web标准的价值所在
      ·CSS编写中灵活运行注释的意义
      ·用CSS制作的很不错的简洁的网页导航下拉菜
      ·一个用纯CSS制作的网页下拉菜单
      ·Div + CSS高度自适应解决方案
      ·简单了解学习CSS的伪类
      ·CSS 中的行为 —— expression
      ·网页制作基础知识:为什么我的设置的div最
      ·CSS样式表技巧总结
      ·DIV和CSS排版中制作细线条的几种方法
    最新更新
    • ·从四个方面谈谈Web标准的价值所在
      ·CSS编写中灵活运行注释的意义
      ·用CSS制作的很不错的简洁的网页导航下拉菜
      ·一个用纯CSS制作的网页下拉菜单
      ·Div + CSS高度自适应解决方案
      ·简单了解学习CSS的伪类
      ·CSS 中的行为 —— expression
      ·CSS样式表技巧总结
      ·DIV和CSS排版中制作细线条的几种方法
      ·运用 CSS 的 absolute 与 relative 制作的
    文章关注度排行
    ·Div + CSS高度自适应解决方案
    ·一个用纯CSS制作的网页下拉菜单
    ·用CSS制作的很不错的简洁的网页导航下拉菜
    ·DIV和CSS排版中制作细线条的几种方法
    ·控制网页文件大小通过精简CSS实现
    ·CSS的学习应该注意学习方法
    ·CSS让网页更容易设计与维护
    ·CSS实战:利用CSS相对定位进行多行多列布局
    热点推荐
    频道推荐
    • ·CSS的学习应该注意学习方法
    • ·CSS让网页更容易设计与维护
    • ·CSS设计符合Web标准的网页表单的几个技巧
    • ·巧妙运用CSS样式表立刻改变鼠标的样式
    • ·纯CSS制作的新闻网站中的文章列表
    • ·CSS布局实例:上中下三行,中间自适应
    • ·Web 的内容(Content)、结构(Structure)
    本站精华
    • ·巧妙运用CSS样式表立刻改变鼠
    • ·Web 的内容(Content)、结构
    • ·CSS让网页更容易设计与维护
    • ·CSS的学习应该注意学习方法
    • ·CSS布局实例:上中下三行,中间
    • ·纯CSS制作的新闻网站中的文章
    • | 网站导航 | 联系QQ | 编辑邮箱 | RSS订阅 | 友情链接 | 官方blog
    • 版权所有:IT技术江湖 @2007-2008
    • powered by www.hack1st.com online services. all rights reserved.京ICP备07005766号