CSS模块化设计—从空格谈起(3)
作者:daijianchun 来源:蓝色理想 发布时间:2007-12-15 09:41:00
三、CSS+HTML的模块化设计
(1)举个简单例子:
.classNameA .classNameB .classNameC
就是一个类包路径,A包含B,B包含C.
意思就是,在A块内的全部HTML代码(包括B块、C块),先应用样式classNameA;
然后,在B块内的全部HTML代码(包括C块),先应用样式classNameA,之后再先应用样式classNameB;
最后,在C块内的全部HTML代码,先应用样式classNameA,再先应用样式classNameB,最后应用样式classNameB;
(2)在样式表中,关于类包的路径,对于某些复杂的HMTL代码,最后写绝对路径,就是每一个类名都不要拉下。这样可读性更强,错误率更小;当然,宽容度就越低。
例如:
<style type="text/css">
/*控制 li 的样式*/
.a1 ul li {
color:red;
}
/*控制class="a"的div块内,全部连接 a 的样式*/
.a1 a {
font-size:20px;
}
/*控制class="a"的div块内,一个一个为 class="mylink"的样式*/
.a1 .myLink {
font-size:12px;
}
/*控制 li 内连接a的样式*/
.a1 ul li a {
font-size:40px;
}
/*控制名 li 内,一个为 class="mylink"的连接的样式 */
.a1 ul li .myLink {
font-size:60px;
font-family:黑体;
}
/*b1样式*/
.b1 {
color:blue;
}
/*控制 li 内 b1 的样式*/
.a1 ul li .b1 {
color:green;
}
</style>
<div class="a1">
<a href="#">linkText</a>
<a href="#" class="myLink">titleText</a>
<div class="b1">b11111111</div>
<ul>
<li>
<a href="#">titleText</a>
<div class="b1">nameCN</div>
</li>
<li>
<a href="#" class="myLink">titleText</a>
<div class="b1">nameCN<span class="c1">nameEN</span></div>
</li>
<li>titleText</li>
<li>titleText</li>
<li>titleText</li>
</ul>
</div>
样式,按*.HTML从内层到外层;按*.CSS上下文,从下文到上文;按内联样式表上下文,从下文到上文;按内嵌>内联>外联的优先级;
叠加覆盖计算最终显示效果。
CSS语句,严格说是JS代码的一类,换句话说,CSS语句也是“弱类型”的,空格是一个“运算符”,由于“弱类型”不严谨,所以,没有空格的时候,虽然不报错,也有显示效果,但那是按错误逻辑运算的,有时歪打正着,但确莫名其妙。再加上有很多满足各浏览器的HACK语法,CSS语句就更加零乱不堪。所以,写的时候,尽量在满足宽容度的情况下,严禁一些。
(3)给大家一个案例
模块化设计,要求相对封闭独立性、可重复性、可修改性、统一性等等是比较高的,当然,模块化越高越复杂的,修改起来也要月谨慎,因为牵一发而动全身,这就要求,在开发设计前期要做好详尽的策划,从目录结构、命名规范,到全局和特例的界限划分、后期修改的宽容度估计等等,都要有个把握。
下面就给一个我做的网站的地址:http://www.51youcai.com
样式表是按类路径来模块化定义的,有中文注释;
由于加了jsp程序,代码格式有变动,也许会有不少垃圾代码;
在FireFox下,有几处显示不当、JS未做相应优化,请用IE6+浏览;
感兴趣者可以当HTML和CSS来,做参考。
猜你喜欢
- 在讲这个问题之前让我们来先看一段代码: dim sql_injdata,SQL_inj,SQL_Get,SQL_Data,Sql_
- GetRef 函数 返回一个指向一过程的引用,此过程可绑定某事件。 Set object.eventname = GetRef(procna
- 本例详细介绍了如何在wiondws XP下安装与配置MySQL5.0.37 ,图文并茂,相信对初学mysql的朋友有所帮助。1 点击MySQ
- 针对border边框属性在浏览器中的渲染方式很早以前就开始在QQ群中看到大家在讨论,而我也一直以border:0 none;的方式处理。其中
- css的流行导致了标签的流行,很直观,看起来很清爽。流行的一部分,还有很多种功能强大且美观的导航。。。1. Change.org2. N.D
- Photoshop Express,也就是传说中的web版photoshop,来了。和想象中的web photoshop相比,这个Photo
- MySQL是一个小型关系型数据库管理系统,开发者为瑞典MySQLAB公司,在2008年1月16号被Sun公司收购。MySQL被广泛地应用在I
- 在并不知道DIV浮动层的宽度,高度的情况下,如何使浮动层在任何分辩率的情况下居中呢! 下面使用了JAVASCRIPT来
- 做程序开发的人都知道版本控制的重要性, 代码的管理好说,TFS/SVN/VSS/CVS,哪个都能用。但涉及到数据库的版本控制,就不是太好做的
- Mysql Explain 详解一.语法explain < table_name >例如: explain select * f
- Introduction简介So what is POSH? No, it's not just some new clothing
- 三遍记忆,让你记住海量素材的准确位置和用途,提高其可用性.这仅仅是一个示意图.在以往的日子里,我做到了只要脑袋里冒出一个想法,立刻就能知道我
- MySQL由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.我在开发一个P2P应用的时候曾经使用MySQL来保存P2P节点,由
- 我插入Mysql5的中文一直是乱码。但是直接使用mysqlAdmin,EMS等工具插入DB就不是乱码。而且我还可以使用程序正常地读出来。原因
- 统计分析常常会出错、存在偏见或过于狭隘。数字崇拜者常因专注于统计分析而把可用性研究引入歧途。强调洞察力和定性研究更为重要。用户研究有两种类型
- 汉字转为拼音的asp函数,原理:利用多维数组 1.添加索引 2.遍历数组Author: Unknowasp之家测试截图,呵呵不错:<%
- 制作网页可说是易学难精,因此,不断吸收经验可弥补不足,以下列出的50个制作主页的独门招数可帮助你尽快成为高手,哈哈!1、让读者有理由逗留。要
- 发一个数字拼图游戏,有点小疑问前几天写得,其中一段代码还要感谢“簡簡單單愛妳”的提示,不过我还是不太明白, ,有点笨。 $(&qu
- 偶然看到 Tanel Poder 提到的一个 Metalink Note (438452.1): Performance Tools Qui
- 单位的小王学习SQL Server已有一段时间了,已经做了个不错的管理系统,有次小王让我帮着看看库的设计有没有问题,其间我发现他的安全意识非