CSS模块化设计—从空格谈起.docVIP

一、空格运算符 （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 tddiv 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; } 定义的是tddiv class=btext/div/td这组代码块中的b类，class=b是包含在td标签内的，是td的子级，所以在这里要用“空格”指向明确表明父子级别关系。 2、第二个类b的类路径是th.b，定义的是该HTML文档内所有的带class=b的th标签的样式。 以下是引用片段： th.b { color: #FF0000 } 定义的是th class=btext/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中复合调用样式类 （1）在一个HTML标签内，可以复合调用多个样式类，也是用空格做运算符，复合类名总字符不能超过256。 （2）示例： 以下是引用片段： style type