CSS模块化设计—从空格谈起
作者:daijianchun 来源:蓝色理想 发布时间:2007-12-15 09:41:00
引子:
今天在蓝点看了Yang的博客《CSS样式表中继承关系的空格与不空格》,思考了一下,本来想写《CSS样式的复合定义与复合调用及简单的模块化设计》,但是内容太大,还是来点简单的实惠。所以改叫《CSS样式——从空格谈起》吧。
一、空格运算符
(1)CSS语言
简单地说,CSS语言类似JS语言,是通过客户端下载后,通过本地浏览器解析。而CSS语言又是非常低级的“弱类型”语言,离JS这种基于对象的比较完善的“弱类型”语言,还差相当一段距离。要知道CSS样式是定义出来的,而样式的呈现是根据文档流顺序和CSS优先级别,浏览器自己识别计算后显示出来的。而浏览器又有忽略和纠错功能(尤以IE为甚),所以样式定义的语法有错误,并不影响浏览器正常工作,只不过显示不出应有的效果罢了。在我们设计定义样式的时候,排错是比较令人苦恼的,其本质原因是于这种弱类型CSS语言本身的不严禁性有关系的,所以我们就更应该注重CSS定义的严禁,才能出较少的错误,较快更好的完成工作
(2)CSS的运算符
首先说,CSS语言的运算符就不多,有.#{}:";还有一个非常重要的空格。这几个运算符,都是常用的定义声明符号。而在CSS样式定义中,空格就有点特殊,我们可以把它视为在.Net或Java中命名空间或类包定义中的 . 运算符。换句话说,我们可以把空格视为路径指向的箭头,表明HTML标签的父子级别关系。CSS是与HTML想关联的,也就是说,CSS的每一个定义都与“某个HTML标签”或“某段模块化HTML代码”相对应,而HTML可以调用多个样式类。一个CSS样式类可以根据HTML代码来“复合定义”;一个HTML标签也可以“复合调用”多个样式类。所以说,CSS样式定义的复杂性与关联的HTML是密不可分。
(3)实例说明
<style type="text/css">
td .b {
color:#00ff00;
}
th.b {
color:#ff0000;
font-family:黑体;
font-size:20px;
}
.b {
color:#0000ff;
font-size:12px;
}
</style>
<table>
<tr>
<td><div class="b">第一个类b的类路径是th .b</div></td>
<th class="b">第二个类b的类路径是th.b</td>
<td class="b">第三个类b的类路径是 .b</th>
</tr>
</table>
<div class="b">第三个类b的类路径是 .b</div>
讲解:
1、第一个类b的类路径是td .b,定义该HTML文档内所有的td标签内的带class="b"的标签的样式 。
也就是说:
td .b {
color:#00ff00;
}
定义的是
<td><div class="b">text</div></td>
这组代码块中的b类,class="b"是包含在td标签内的,是td的子级,所以在这里要用“空格”指向明确表明父子级别关系。
2、第二个类b的类路径是th.b,定义的是该HTML文档内所有的带class="b"的th标签的样式。
也就是说,
th.b {
color: #FF0000
}
定义的是
<th class="b">text</td>
在这里的代码中,th和class='b'是平级的,先th后.b组成一个同级类路径th.b,所以没有空格代表“HTML类”和“自定义类”具有同级路径!
3、第三个类b的类路径是 .b,定义该HTML文档内所有的td标签的样式,它是该文档的一个全局样式,是body .b的简写。
也就是说,
.b {
color:#0000ff;
font-size:12px;
}
定义了
<td class="b">第三个类b的类路径是td.b</th>
和
<div class="b">第三个类b的类路径是 .b</div>
这两处的b类没有明确的路径指向,优先级别要比有明确路径的低。
4、大家可以看到,在HTML代码中,同样都是class="b",但是在CSS定义时,采用的类路径不同,作用就不同了。类路径越完整,优先级越高。在具体应用的时候,我们可以,使用完整类路径来定义某HTML代码块某一些特殊地方,做异化处理。例如本例表头th的黑体字显示效果。
猜你喜欢
- 兼容当前HTML/XHTML文档是否有DTD声明:以下为程序代码:var xtop = document.documentElement.s
- 一个不错的文字放大特性源码。效果图:运行代码框<script for=document event=onmousemove>//
- 在了解了JavaScript1.7的相关更新后,我们再继续关注JavaScript1.8的新特性。在W3C Group带来的JavaScri
- 内容摘要: 当用户填写页面<FORM>内容时所提供的全部值,或在浏览器地址栏输入在URL后的值,通过Form和QueryStrin
- object.OpenTextFile(filename[, iomode[, create[, format]]]) 参数 object
- 几个利用背景结合a:hover做的小东东,希望对大家有所帮助。<!DOCTYPE html PUBLIC "-//W3C//
- 代码如下: Function closeHTML(strContent) Dim arrTags, i, OpenPos, ClosePos
- MS SQL基本语法及实例操作 一:建表并初始化 ============================ create database
- 这里我们在SQL Server 2005\SQL Server 2008版本上通过举例子,说明临时表和表变量两者的一些特征,让我们对临时表和
- 今天偶尔在一个学习网站技术的地方看到一个教程,关于html代码的,刚看到咱常用到的视频播放器html标签Object,平时用到他的时候都是为
- 代码如下:< % Set fso=Server.CreateObject("Scripting
- asp取得字段属性代码:set AdoX = server.createobject("adox.c
- 近日大家热议的盗版XP黑屏问题想必很多人都知道了,在这里就不多说。据媒体报道,微软公司将实施逐步投放策略,预计本周将投放5%黑屏,下周投放2
- http://swik.net/Ajax/Ajax+Mistakes在某网站瞎逛时,发现这个链接,进去逛了逛,觉得很有意思,大家也可以去看看
- 首先打击我的就是rpm安装,它告诉我发现了Mysql版本冲突,安装无法继续。我用rpm -q 查询后,想通过rpm -e 来删除系统自带的版
- 图片的间隙Q:我有一张大图片,把它切割后在Dreamweaver中进行拼接,可是总是有间隙,不知为什么?A:不知你是否把表格的边距、间距和边
- 即使是简单的脚本语言,应用良好的模式可以得到非常“优美”的代码和较高的效率。尤其是对于交互要求较高的B/S系统,非常有必要用设计模式来优化代
- IE测试通过,FF有点小BUGCls_Leibie.asp代码如下:<% '数据库字段为类属性,添加、删除、修改、操
- XML(可扩展标记语言)已成为Web应用中数据表示和数据交换的标准,随着Internet的快速发展,尤其是电子商务,Web服务等应用的广泛使
- 这个javascript划词搜索功能,在很多地方我们都会看到,特别是装了浏览器插件的时候,当我们用鼠标选择一段文字的时候,就会出现搜索提示,