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的黑体字显示效果。
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 到底什么是Python?•Python是一种解释性语言。Python代码在运行之前不需要编译。其它解释性语言还包括PHP和Ruby。•Pyt
- 前言最近,我已经成功将我的个人网站从 Flask 迁移到 Django 了,最早接触 Django 的时候大概是在 4 年前,我记得那个时候
- 前言上次做了用于输入样例格式修改,相当于测试用例的过滤器,这次我们使用类似的思路来做一个对于像C++代码中块注释的过滤器。/** * Def
- 本文实例总结了Python操作redis方法。分享给大家供大家参考,具体如下:python连接方式可参考:https://www.jb51.
- 注意:index.html再次声明变量的时候注意空格的问题来源:https://blog.csdn.net/guofeng93/articl
- 本文实例讲述了python统计日志ip访问数的方法。分享给大家供大家参考。具体如下:import ref=open("/tmp/a
- 在写代码过程中我们常常可能会遇到这样一种情况,要对一个list中的每个元素做同样的操作时,两种方法方法一:循环遍历每个元素 话不多说,上代码
- 1.使用npm进行初始化在本地创建项目的文件夹名称,如 node_test,并在该文件夹下进行黑窗口执行初始化命令 2. 安装 e
- 本文实例讲述了Python将名称映射到序列元素中的方法。分享给大家供大家参考,具体如下:问题:希望通过名称来访问元素,减少结构中对位置的依赖
- 传统行业里,缺做互联网资深的人;互联网行业里,缺玩传统业务资深的人。于是会造成很多问题,比如两边难沟通,在传统行业者心目中,网络营销e-Ma
- 前言Python 字典 update()方法用于更新字典中的键/值对,可以修改存在的键对应的值,也可以添加新的键/值对到字典中。语法格式d.
- 1.var、let、const简介 ECMAS
- 看代码吧~import numpy as npa = np.array([[2, 4, 6, 1], [1, 5, 2, 9]])print
- 对于内容驱动的网站,设计好坏的关键是关系型数据库。在这个教程中,我们已经使用了MySQL关系型数据库管理系统(RDBMS)建立了我们的数据库
- python正则表达式括号python中re库函数的简单用法re.findall(pattern,string)匹配所有符合正则表达式的字符
- 记得导入包,其他按键可类比def keyPressEvent(self, event): if event.key() == Q
- 本文实例讲述了Python2随机数列生成器。分享给大家供大家参考,具体如下:#filename:randNumber.pyimport ra
- 1、tox 能做什么?细分的用途包括:创建开发环境运行静态代码分析与测试工具自动化构建包针对 tox 构建的软件包运行测试检查软件包是否能在
- 准备1.电脑系统:win102.手机:安卓(没钱买苹果)3.需要的工具可以从官网下载https://appium.io/https://ww
- 背景目前项目在移动端上,首推使用微信小程序。各项目的小程序访问数据有必要进行采集入库,方便后续做统计分析。虽然阿拉丁后台也提供了趋势分析等功