CSS模块化设计——从空格谈起
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-03-05
font-family:Arial Black; } .txtRed { color:red; } .txtOrange { colorrange; } .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模块化设计——从空格谈起的所有评论