技术中心

这里象征着我们的态度和能力

样式的作用域与模块化设计
作者:Ghost    来源:csser.org    发布时间:2010-04-21      浏览次数:7897
分享到:

    要做好模块化,我觉得理解好样式的作用域是很重要的,所以将这部分作为这个系列的第一篇。

    写过程序的同学应该都知道,变量是有作用域的(不知道的同学自己去问谷歌,这里就不作解释了),样式的定义也同样存在着作用域的问题,即定义的作用范围,很容易就能理解,如下面的p的作用域:

/*作用域:全局*/ p{text-indent:2em;}

/*作用域:.demo这个类中*/ .demo p{color:#000000;}

样式选择器的优先级是学习样式的基础知识,一起简单回顾下:

  • 标签的权值为0,0,0,1
  • 类的权值为0,0,1,0
  • 属性选择的权值为0,0,1,1
  • ID的权值为0,1,0,0
  • important的权值为最高1,0,0,0

    使用的规则也很简单,就是 选择器的权值加到一起,大的优先;如果权值相同,后定义的优先 。虽然很简单,但如果书写的时候没有注意,很容易就会导致CSS的重复定义,代码冗余。

从上面我们可以得出两个关键的因素:

  1. 权值的大小跟选择器的类型和数量有关
  2. 样式的优先级跟样式的定义顺序有关

    了解样式的权值后有什么作用呢?比如可以这样用:举一个最简单的例子,

body{color:#555555;}.demo{color:#000000;}

这里的文字颜色受全局定义的影响


这里的文字颜色受类demo定义的影响


这里的文字颜色受类demo定义的影响

    知道了样式的权值,你就知道上面例子的表现是怎样的了。进一步的应用,就是模块化了,比如《 从宜家的家具设计讲模块化 》中的例子,详细请移步。

    再来说说“作用域”,相信大家很容易就会想到“全局”、“公共”这些词,关注过模块化的同学应该都知道,网上说得最多的一种“模块化”,就是像header、footer这样的以大区域划分。在去年web标准交流会(页面重构合理化讨论)上,克军提出了“样式的三层架构”——公共规则层、公共模块层、项目层。这些都有它们适用的范围,而且最大的优点是容易理解和应用。这里也不再做重诉了,感兴趣的同学可以找找相关的文章。

我在这一块的划分上,有点类似克军的“样式的三层架构”,有一点小的差别,我是以“作用域”来分的: 公共级(全局)、栏目级(局部公共)、页面级 。如何划分这个“作用域”呢?很简单,全局的global就是公共级的;只在栏目中用到的局部global是属于栏目级的;只影响单个页面的就是属于页面级的了。

最后几点要特别注意的:

  • 除了标签选择器之外,哪些类是使用于公共级、栏目级中的,如

    .tx_hit{color:#FF0000 !important;}
    的适用范围是公共级的,应该放于全局的定义中。但,如果它只影响于某个栏目,那么就应该把它放于栏目级的作用域中。
  • 标签选择器一般属于栏目定义,有时会用于公共级作用域中,除了最基础的reset之外,应尽可能少使用在公共级定义中
  • 可继承的属性定义使用时须注意影响的范围,特别是在标签选择器中使用时

    接下来的内容就是以这个为基础的,希望大家能理解“样式的作用域”,对于后继内容的理解会很有帮助。

4000-880-989
(24小时热线)
联系客服
微信公众号

官方公众号

小程序

©2008-2022 CORPORATION ALL Rights Reserved. 昆明奥远科技有限公司版权所有 滇ICP备09003328号-1 滇公网安备 53011102000818号
昆明那家网络公司好,新媒体运营,网站优化,网络推广,网站建设,网页设计,网站设计,网站推广,云南网站公司,昆明新媒体公司,云南网红主播,昆明SEO公司,昆明网站建设,昆明网络推广,昆明网站优化,昆明网站推广,红河网站建设,大理网络公司,曲靖网络公司,丽江网站设计,昭通网络公司,保山大数据服务,智慧高速建设,智慧校园服务,云南IDC服务商,网络安全测评,等保测评,网站关键词排名优化服务,服务客户尽超2000余家,一切尽在奥远科技,服务电话:13888956730