首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > HTMLCSS教程 > 正文
Google
CSS模块化设计——从空格谈起
来源:蓝色理想 作者:daijianchun 2007年12月14日 16:22 网友评论:0条 点击:

二、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来,做参考。
首页 上一页 [1] [2] 下一页 尾页
上一篇:关于标题字符截取   下一篇:常用CSS长度单位
收藏此页】【打印】【关闭
 相关文章  我要点评
·CSS样式指南:提高CSS代码的可读性
·CSS Hacks 和问题解决
·CSS Hack整理
·面向对象的XHTML与CSS编程
·SEO:细节决定成败-CSS篇
·常用CSS长度单位
·CSS框架的利与弊
·CSS hacks与争议

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】