起点建筑 » 其他教程 » Dreamweaver » CSS模块化设计——从空格谈起

查看完整版本: CSS模块化设计——从空格谈起

迷失的亲 2007-12-16 06:10

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

一、空格运算符hR b2H az T-b
c[3M1ED3RdX3V
   （1）CSS语言
5F0tn z"c
   简单地说，CSS语言类似JS语言，是通过客户端下载后，通过本地浏览器解析。而CSS语言又是非常低级的“弱类型”语言，离JS这种基于对象的比较完善的“弱类型”语言，还差相当一段距离。要知道CSS样式是定义出来的，而样式的呈现是根据文档流顺序和CSS优先级别，浏览器自己识别计算后显示出来的。而浏览器又有忽略和纠错功能（尤以IE为甚），所以样式定义的语法有错误，并不影响浏览器正常工作，只不过显示不出应有的效果罢了。在我们设计定义样式的时候，排错是比较令人苦恼的，其本质原因是于这种弱类型CSS语言本身的不严禁性有关系的，所以我们就更应该注重CSS定义的严禁，才能出较少的错误，较快更好的完成工作。 kZ+^O G7Je&n

   （2）CSS的运算符9W/R.T?;DB

   首先说，CSS语言的运算符就不多，有.#{}:";还有一个非常重要的空格。这几个运算符，都是常用的定义声明符号。而在CSS样式定义中，空格就有点特殊，我们可以把它视为在.Net或Java中命名空间或类包定义中的 . 运算符。换句话说，我们可以把空格视为路径指向的箭头，表明HTML标签的父子级别关系。CSS是与HTML想关联的，也就是说，CSS的每一个定义都与“某个HTML标签”或“某段模块化HTML代码”相对应，而HTML可以调用多个样式类。一个CSS样式类可以根据HTML代码来“复合定义”；一个HTML标签也可以“复合调用”多个样式类。所以说，CSS样式定义的复杂性与关联的HTML是密不可分。

   （3）实例说明[code]<style type="text/css">
td .b {
   color:#00ff00;
} ]2zo%r5^l
th.b {
   color:#ff0000;
   font-family:黑体; !tZ'fj#s/U&LS5u
   font-size:20px;
}
.b {
   color:#0000ff; AkY~*_uX!j2CK
   font-size:12px;
}
</style> ,] ] xxD3AN"I#t
<table> pX!~+G8nq;T/lL
   <tr> 7O*o ]L/B#o1w&F&D
            *}p],Q'?I?i7Uqdm
            <td><div class="b">第一个类b的类路径是th .b</div></td>
            <th class="b">第二个类b的类路径是th.b</td> 9nAIRkZ
            <td class="b">第三个类b的类路径是 .b</th>
   </tr>
</table> S2eT F^H@.r.W
<div class="b">第三个类b的类路径是 .b</div>[/code]讲解： 4ALr8m}g5bM

   1、第一个类b的类路径是td .b，定义该HTML文档内所有的td标签内的带class="b"的标签的样式。[code]td .b {
   color:#00ff00;
}[/code]定义的是<td><div class="b">text</div></td>这组代码块中的b类，class="b"是包含在td标签内的，是td的子级，所以在这里要用“空格”指向明确表明父子级别关系。sT9hnE
"|"~R+@$h7E
   2、第二个类b的类路径是th.b，定义的是该HTML文档内所有的带class="b"的th标签的样式。[code]th.b {
   color: #FF0000 *w]F5p#Fk
}[/code]定义的是<th class="b">text</td>，在这里的代码中，th和class='b'是平级的，先th后.b组成一个同级类路径th.b，所以没有空格代表“HTML类”和“自定义类”具有同级路径！^lsH,_G5H/NB

   3、第三个类b的类路径是 .b，定义该HTML文档内所有的td标签的样式，它是该文档的一个全局样式，是body .b的简写。[code].b {
   color:#0000ff; &r5W4uA5ei+|8lO8m&o
   font-size:12px;
}[/code]定义了<td class="b">第三个类b的类路径是td.b</th>和<div class="b">第三个类b的类路径是 .b</div>这两处的b类没有明确的路径指向，优先级别要比有明确路径的低。
/S$Jj6C ^7X'}
   4、大家可以看到，在HTML代码中，同样都是class="b"，但是在CSS定义时，采用的类路径不同，作用就不同了。类路径越完整，优先级越高。在具体应用的时候，我们可以，使用完整类路径来定义某HTML代码块某一些特殊地方，做异化处理。例如本例表头th的黑体字显示效果。

   二、HTML中复合调用样式类

   （1）在一个HTML标签内，可以复合调用多个样式类，也是用空格做运算符，复合类名总字符不能超过256。
&Wn/m8B7J&Mz
   （2）示例：[code]<style type="text/css">
.myTxt { 5f~n7b+BD
   font-size:50px;
   font-family:Arial Black;
} V*wA1B`"t
.txtRed { .f t lKpk(Gq4W
   color:red;  .B@] x%khA
} vDQfs-P
.txtOrange {
   colorrange;
}
.txtGreen { ~:N#X*zt'CB
   color:green; hPj"m9nX:G
}
.txtBlue {
   color:blue;
}
</style>
<ul>
   <li class="myTxt txtRed">123</li>
   <li class="myTxt txtOrange">Text</li>
   <li class="txtGreen">Text</li>
   <li class="myTxt txtBlue">Text</li> 4@(Pv\5V(oFy
</ul>[/code]（3）应用：

   对于某些多数样式属性累同，仅有几个不同样式属性的定义，可以用这个方法来缩写。也可以在某个不改变某个通用样式类的同时，用HTML调用复合类，突出局部特例。
(LZo/SG
   三、CSS+HTML的模块化设计

   （1）举个简单例子：K:UP6f?a L4Y
*|,fmE8Z;UZ5j,FQ
   .classNameA .classNameB .classNameC

   就是一个类包路径,A包含B,B包含C. 意思就是,在A块内的全部HTML代码(包括B块、C块),先应用样式classNameA；然后，在B块内的全部HTML代码(包括C块),先应用样式classNameA，之后再先应用样式classNameB；最后，在C块内的全部HTML代码,先应用样式classNameA，再先应用样式classNameB,最后应用样式classNameB；

   （2）在样式表中，关于类包的路径，对于某些复杂的HMTL代码，最后写绝对路径，就是每一个类名都不要拉下。这样可读性更强，错误率更小；当然，宽容度就越低。

   例如[code]<style type="text/css">  d)~N8MRM Jb
/*控制 li 的样式*/
.a1 ul li {  C0G2Cci\!b,F1SN
color:red;  $b(UD3k#p'?
} (S;N3dj)H'U
;Vf-q;].OC`\9n1Q
/*控制class="a"的div块内，全部连接 a 的样式*/
.a1 a { $@ma6j\1Y)I"C
font-size:20px;
} 3I|j_~PL3O

/*控制class="a"的div块内，一个一个为 class="mylink"的样式*/ !?)v1u9Z6x7Z
.a1 .myLink { x-S CP5],m9zZ7DX(w
   font-size:12px; &^!Q+n0H*i)~j-[
}
7i*OT].}
/*控制 li 内连接a的样式*/
.a1 ul li a { %cEY$I$W#r
   font-size:40px; BC1?E3UYQ{;H%y
}
/k9x(j [(@4i}y
/*控制名 li 内，一个为 class="mylink"的连接的样式 */ :T[#m.sl%U5H
.a1 ul li .myLink {
   font-size:60px;
   font-family:黑体; !O)f |Q:OK/k
} /h%k.dPu6H7Na4Vm
\5j*M:C w)UQ[*{AZ
/*b1样式*/ &A5?%E4l9^
.b1 { bVz(x t jw-E+r
   color:blue; *x$O+a5q%wE[(Id(m
}
/*控制 li 内 b1 的样式*/ ;l^c&}2rAE!c6nr/Y9k
.a1 ul li .b1 { O5a8\"f,Y|*h
   color:green;
}
</style>
4sWx8Y*}&q-|4H1f;j
<div class="a1">
   <a href="#">linkText</a> 5\({;cgaKvP
   <a href="#" class="myLink">titleText</a> Ly1i I k ~y,@1\
   <div class="b1">b11111111</div>
   <ul> +DyZiN p7`
         <li> ]RZD2n,J&X-nf-b
               <a href="#">titleText</a>
               <div class="b1">nameCN</div>
         </li> r,`:t(wj
         <li>
               <a href="#" class="myLink">titleText</a>
               <div class="b1">nameCN<span class="c1">nameEN</span></div>
         </li>
         <li>titleText</li> u8]7v ATO
         <li>titleText</li> /c Eo#^;[.X_
         <li>titleText</li>
   </ul>
</div> [/code]样式，按*.HTML从内层到外层；按*.CSS上下文，从下文到上文；按内联样式表上下文，从下文到上文；按内嵌>内联>外联的优先级；
叠加覆盖计算最终显示效果。
*sJCa q`,d
   CSS语句，严格说是JS代码的一类，换句话说，CSS语句也是“弱类型”的，空格是一个“运算符”，由于“弱类型”不严谨，所以，没有空格的时候，虽然不报错，也有显示效果，但那是按错误逻辑运算的，有时歪打正着，但确莫名其妙。再加上有很多满足各浏览器的HACK语法，CSS语句就更加零乱不堪。所以，写的时候，尽量在满足宽容度的情况下，严禁一些。

页: [1]

查看完整版本: CSS模块化设计——从空格谈起