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

作者佚名技术来源 CSS技术浏览发布时间 2012-03-05

font-family:Arial Black;
}
.txtRed {
color:red;
}
.txtOrange {
color CSS模块化设计——从空格谈起

range;
}
.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 l

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS教程:CSS中的定位（position）下一篇: CSS实现在文章每段后面加入带连接的隐藏文字

关于CSS模块化设计——从空格谈起的所有评论

随机推荐