|
新来草根（尚未认证）
- 帖子
- 27
- 积分
- 22
- 威望
- 72
- 金币
- 0 元
|
CSS模块化设计——从空格谈起
一、空格运算符
1 C8 S" {, S1 L) m （1）CSS语言
6 m* ~6 u; D/ d* C' B 简单地说，CSS语言类似JS语言，是通过客户端下载后，通过本地浏览器解析。而CSS语言又是非常低级的“弱类型”语言，离JS这种基于对象的比较完善的“弱类型”语言，还差相当一段距离。要知道CSS样式是定义出来的，而样式的呈现是根据文档流顺序和CSS优先级别，浏览器自己识别计算后显示出来的。而浏览器又有忽略和纠错功能（尤以IE为甚），所以样式定义的语法有错误，并不影响浏览器正常工作，只不过显示不出应有的效果罢了。在我们设计定义样式的时候，排错是比较令人苦恼的，其本质原因是于这种弱类型CSS语言本身的不严禁性有关系的，所以我们就更应该注重CSS定义的严禁，才能出较少的错误，较快更好的完成工作。' N5 y9 H4 m6 f" K- {5 L
（2）CSS的运算符
0 @& u& o3 s6 F6 J 首先说，CSS语言的运算符就不多，有.#{}:";还有一个非常重要的空格。这几个运算符，都是常用的定义声明符号。而在CSS样式定义中，空格就有点特殊，我们可以把它视为在.Net或Java中命名空间或类包定义中的 . 运算符。换句话说，我们可以把空格视为路径指向的箭头，表明HTML标签的父子级别关系。CSS是与HTML想关联的，也就是说，CSS的每一个定义都与“某个HTML标签”或“某段模块化HTML代码”相对应，而HTML可以调用多个样式类。一个CSS样式类可以根据HTML代码来“复合定义”；一个HTML标签也可以“复合调用”多个样式类。所以说，CSS样式定义的复杂性与关联的HTML是密不可分。
, s. B( n' U' \/ Y% d( w （3）实例说明# Z. e# |# \- g
% M5 g% J$ c+ T5 D& H& Z
以下是引用片段：1 ], p4 D- e4 S+ N+ e- M4 }
<style type="text/css">
( q# f* F. ?$ ~. u& I4 ntd .b {
# b0 e% U$ n2 u# F7 O color:#00ff00; 5 Q U: R% u" U$ G' Y
} & H7 g) o& Y1 ~! h/ [
th.b {
0 D' m. d2 K ~) d* K* D2 u color:#ff0000;
4 w k3 W3 U$ Q; `( P: a font-family:黑体;
* z! Z. E" W [3 K* V0 U( b$ K4 w font-size:20px;
8 [( G) _4 L e+ k} 8 x6 P' o" S4 p) \. H. I' h
.b { 4 ~, A5 \8 R" h6 C) n7 _4 t% w, N4 f3 F9 ?
color:#0000ff;
8 J& I9 U; E& I' J& L7 S2 N0 z font-size:12px; ( M% B6 k& W x1 U8 k- H# x
}
5 \8 W$ y, I' p</style>
* B6 d' w; }# I, B' @* ]<table> 6 M; q& i2 l/ ~* [
<tr> ( }% ~( W5 h; y- j& a5 l
# u+ r' G3 s P. b: V0 g <td><div class="b">第一个类b的类路径是th .b</div></td> 3 A/ r4 u. x+ \% C+ B7 Q: J
<th class="b">第二个类b的类路径是th.b</td> $ G8 H: E1 f; R* q K; X* V2 u1 ~
<td class="b">第三个类b的类路径是 .b</th> 0 f7 |7 Y1 t9 W3 |
</tr>
$ C7 }" n+ ?0 T# R' a/ T8 ~6 R</table> 4 p8 {) ]8 @ i7 @# V" f
<div class="b">第三个类b的类路径是 .b</div> * r5 M, z: |3 \2 x+ ?2 k. {, t
讲解：
# ]; V$ I' \7 k% p# P0 | 1、第一个类b的类路径是td .b，定义该HTML文档内所有的td标签内的带class="b"的标签的样式 。
; Q3 b9 ?- O8 W" s% c' S( k以下是引用片段：
3 ]; \) R: t) a& b" Z7 R# H* Std .b { : o n1 t' V& ^, F/ }: k# A- Q
color:#00ff00; 2 s8 Q! S) t: W' U5 v
}
+ E/ ?* A3 [" H: W. {/ r. d 定义的是<td><div class="b">text</div></td>这组代码块中的b类，class="b"是包含在td标签内的，是td的子级，所以在这里要用“空格”指向明确表明父子级别关系。% |4 W! T) \1 {6 |1 o C+ j
2、第二个类b的类路径是th.b，定义的是该HTML文档内所有的带class="b"的th标签的样式。9 P6 }( a! }5 ~
以下是引用片段：/ [# W, Q5 K+ O) ?' c0 {+ a
th.b {
2 T$ ] V- u m: }) r color: #FF0000
5 Z& J* C/ i4 A7 U2 I" K}
8 \ T' Q% ?: `6 [" v4 T 定义的是<th class="b">text</td>，在这里的代码中，th和class='b'是平级的，先th后.b组成一个同级类路径th.b，所以没有空格代表“HTML类”和“自定义类”具有同级路径！$ q) n+ X2 v/ e
3、第三个类b的类路径是 .b，定义该HTML文档内所有的td标签的样式，它是该文档的一个全局样式，是body .b的简写。
4 g/ ? w q. X, t以下是引用片段：
( V' ^% j) @3 t.b { . K( A9 w: H( o. ]- A
color:#0000ff;
5 }$ O4 S: N0 T Y' }5 z/ r3 o font-size:12px; , {/ V5 v0 C* k: [& s8 E# d
}
0 D1 D: d. f' P `% w 定义了<td class="b">第三个类b的类路径是td.b</th>和<div class="b">第三个类b的类路径是 .b</div>这两处的b类没有明确的路径指向，优先级别要比有明确路径的低。$ K, u4 |( I& A6 Y; p3 m
4、大家可以看到，在HTML代码中，同样都是class="b"，但是在CSS定义时，采用的类路径不同，作用就不同了。类路径越完整，优先级越高。在具体应用的时候，我们可以，使用完整类路径来定义某HTML代码块某一些特殊地方，做异化处理。例如本例表头th的黑体字显示效果。
1 G0 F/ |; G: S% E7 T; S推荐网站：中国培训财富网（http://www.training163.com/）
|
