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的黑体字显示效果。

标签:空格,css,设计
0
投稿

猜你喜欢

  • sqlserver 存储过程中的top+变量使用分析(downmoon)

    2024-01-13 13:03:41
  • python中sleep函数用法实例分析

    2023-10-19 15:33:24
  • 如何设置SQL Server数据库全文索引服务

    2009-01-13 13:46:00
  • Python实现GPU加速的基本操作

    2021-07-30 05:10:34
  • PL/SQL编程经验小结开发者网络Oracle

    2010-07-18 13:27:00
  • 使用Python检测文章抄袭及去重算法原理解析

    2023-04-26 12:00:54
  • 人工智能学习Pytorch教程Tensor基本操作示例详解

    2021-06-14 17:39:22
  • SQL Server2019安装后出现连接失败的解决方法

    2024-01-23 05:16:24
  • 零基础写python爬虫之爬虫编写全记录

    2021-09-06 22:53:27
  • python数据归一化及三种方法详解

    2023-02-28 01:48:40
  • Python多进程通信Queue、Pipe、Value、Array实例

    2023-04-08 03:25:55
  • python requests.post请求404问题及解决方法

    2022-08-16 09:36:23
  • Spring Boot集成MyBatis访问数据库的方法

    2024-01-23 06:45:43
  • 利用types增强vscode中js代码提示功能详解

    2023-07-15 05:57:08
  • Python判断操作系统类型代码分享

    2022-12-30 02:09:31
  • Python使用requests xpath 并开启多线程爬取西刺代理ip实例

    2023-05-01 23:36:51
  • PHP getNamespaces()函数讲解

    2023-06-11 07:32:45
  • Python Socket编程之多线程聊天室

    2021-03-23 21:01:02
  • MySQL索引概念及七种索引类型分享介绍

    2024-01-23 03:55:27
  • Python基础学习之模块的安装和卸载

    2021-07-05 09:31:21
  • asp之家 网络编程 m.aspxhome.com