此页面上的内容需要较新版本的 Adobe Flash Player。

获取 Adobe Flash Player

网站首页   |   关于伊维   |   网站建设   |   软件开发   |   案例欣赏   |   配套服务   |   新闻动态   |   技术支持   |   联系我们
  新闻动态 News
  伊维观点
 
 
  虚拟空间 域名注册
  优化推广 网站推广
  企业邮箱 短信平台
  平面设计 定制印刷
  户外广告  
 
伊维互联的成长历程与资质
为您解答售
前的一切问题
最新客户与公司动态
伊维互联的
成长历程与资质
给我们发送邮件
最新客户与
公司动态
首页 新闻动态 最新动态
重构中的模块化设计: 样式的作用域
  

很久没有更新 blog 了,这段时间实在是发生了很多的事,累身累心。但还是有很多想做的事,比如更新merceCSS、把一直以来所总结的有关模块化的内容整理出来跟大家分享、参加交流会等等。

模块化设计我已经提过很多了,像《 从宜家的家具设计讲模块化 》、《 页面重构中的模块化思维 》、《 页面重构中的组件制作要点 》都是跟模块化相关的,不过之前一直没有讲到具体实现方面的内容,只是一些思维。这次重点讲一下实现方面的内容,权当到目前为止我对模块化的一些总结整理。

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

写过程序的同学应该都知道,变量是有作用域的(不知道的同学自己去问谷歌,这里就不作解释了),样式的定义也同样存在着作用域的问题,即定义的作用范围,很容易就能理解,如下面的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的重复定义,代码冗余。

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

权值的大小跟选择器的类型和数量有关
样式的优先级跟样式的定义顺序有关
了解样式的权值后有什么作用呢?比如可以这样用:举一个最简单的例子,

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

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


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


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

 
分享到:
 
 
珠海网站建设·最新动态伊维互联 竭诚为您服务!
建站热线:0756-2611167 (总机)

相关网站建设链接:
珠海做网站|最新动态|珠海网站制作
(声明:本文部分资料参考来源网络,如有侵权请及时告之)