用户登录  |  傲看软件园 用户注册
文章中心广告代码ASP源码PHP源码JSP源码.NET源码源码相关傲看留言板繁體中文
当前位置:傲看软件园文章中心WEB学院div+css重构

从空格谈CSS模块化设计

减小字体 增大字体 作者:佚名  来源:本站整理  发布时间:2009-04-29 11:10:05

一、空格运算符

      (1)CSS语言

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

      (2)CSS的运算符

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

      (3)实例说明

以下是引用片段:
<style type="text/css">
td .b { 
       color:#00ff00; 
}
th.b {  
       color:#ff0000;
       font-family:黑体;
       font-size:20px;
}
.b {
       color:#0000ff;
       font-size:12px;
}
</style>
<table>
       <tr>
              
              <td><div class="b">第一个类b的类路径是th .b</div></td> 
              <th class="b">第二个类b的类路径是th.b</td>
              <td class="b">第三个类b的类路径是 .b</th>
       </tr> 
</table>
<div class="b">第三个类b的类路径是 .b</div>

      讲解:

      1、第一个类b的类路径是td .b,定义该HTML文档内所有的td标签内的带class="b"的标签的样式 。

以下是引用片段:
td .b { 
       color:#00ff00; 
}

      定义的是<td><div class="b">text</div></td>这组代码块中的b类,class="b"是包含在td标签内的,是td的子级,所以在这里要用“空格”指向明确表明父子级别关系

Tags:DIV+CSS

作者:佚名

文章评论评论内容只代表网友观点,与本站立场无关!

   评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论

精品栏目导航

关于本站 | 网站帮助 | 广告合作 | 下载声明 | 友情连接 | 网站地图
冀ICP备08004437号 | 客服Q:354766721 | 交流群83228313
傲看软件园 - 绿色软件,破解软件下载站! 源码网 源码之家 绿软之家
Copyright © 2003-2010 OkHan.Net. All Rights Reserved .
页面执行时间:39,265.63000 毫秒
Powered by:OkHan CMS Version 4.0.0 SP2