二、HTML中复合调用样式类

（1）在一个HTML标签内，可以复合调用多个样式类，也是用空格做运算符，复合类名总字符不能超过256。
（2）示例：

<style type="text/css">
.myTxt {
       font-size:50px;      
       font-family:Arial Black;
}
.txtRed {
       color:red;
}
.txtOrange {
       color:orange;
}
.txtGreen {
       color:green;
}
.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>
</ul>

（3）应用：
对于某些多数样式属性累同，仅有几个不同样式属性的定义，可以用这个方法来缩写。
也可以在某个不改变某个通用样式类的同时，用HTML调用复合类，突出局部特例。

三、CSS+HTML的模块化设计

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

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

例如：

<style type="text/css">
/*控制 li 的样式*/
.a1 ul li {
    color:red;
}

/*控制class="a"的div块内，全部连接 a 的样式*/
.a1 a {
    font-size:20px;
}

/*控制class="a"的div块内，一个一个为 class="mylink"的样式*/
.a1 .myLink {
       font-size:12px;
}

/*控制 li 内连接a的样式*/
.a1 ul li a {
       font-size:40px;
}

/*控制名 li 内，一个为 class="mylink"的连接的样式 */
.a1 ul li .myLink {
       font-size:60px;
       font-family:黑体;
}

/*b1样式*/
.b1 {
      color:blue;
}
/*控制 li 内 b1 的样式*/
.a1 ul li .b1 {
     color:green;
}
</style>

<div class="a1">
      <a href="#">linkText</a>
      <a href="#" class="myLink">titleText</a>
      <div class="b1">b11111111</div>
      <ul>
            <li>
                   <a href="#">titleText</a>
                   <div class="b1">nameCN</div>
            </li>
            <li>
                   <a href="#" class="myLink">titleText</a>
                   <div class="b1">nameCN<span class="c1">nameEN</span></div>
            </li>
            <li>titleText</li>
            <li>titleText</li>
            <li>titleText</li>
      </ul>
</div>

样式，按*.HTML从内层到外层；按*.CSS上下文，从下文到上文；按内联样式表上下文，从下文到上文；按内嵌>内联>外联的优先级；
叠加覆盖计算最终显示效果。

CSS语句，严格说是JS代码的一类，换句话说，CSS语句也是“弱类型”的，空格是一个“运算符”，由于“弱类型”不严谨，所以，没有空格的时候，虽然不报错，也有显示效果，但那是按错误逻辑运算的，有时歪打正着，但确莫名其妙。再加上有很多满足各浏览器的HACK语法，CSS语句就更加零乱不堪。所以，写的时候，尽量在满足宽容度的情况下，严禁一些。

（3）给大家一个案例

模块化设计，要求相对封闭独立性、可重复性、可修改性、统一性等等是比较高的，当然，模块化越高越复杂的，修改起来也要月谨慎，因为牵一发而动全身，这就要求，在开发设计前期要做好详尽的策划，从目录结构、命名规范，到全局和特例的界限划分、后期修改的宽容度估计等等，都要有个把握。

下面就给一个我做的网站的地址：http://www.51youcai.com

1. 样式表是按类路径来模块化定义的，有中文注释；
2. 由于加了jsp程序，代码格式有变动，也许会有不少垃圾代码；
3. 在FireFox下，有几处显示不当、JS未做相应优化，请用IE6+浏览；
4. 感兴趣者可以当HTML和CSS来，做参考。

经典论坛讨论：
http://bbs.blueidea.com/thread-2815840-1-1.html

本文链接：http://www.blueidea.com/tech/web/2007/5189.asp　

出处：蓝色理想
责任编辑：moby

上一页 CSS模块化设计——从空格谈起 [1] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。