手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS模块化设计——从空格谈起
CSS模块化设计——从空格谈起
摘要:引子:今天在蓝点看了Yang的博客《CSS样式表中继承关系的空格与不空格》,思考了一下,本来想写《CSS样式的复合定义与复合调用及简单的模块...

引子:

今天在蓝点看了Yang的博客《CSS样式表中继承关系的空格与不空格》,思考了一下,本来想写《CSS样式的复合定义与复合调用及简单的模块化设计》,但是内容太大,还是来点简单的实惠。所以改叫《CSS样式——从空格谈起》吧。

一、空格运算符

(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的子级,所以在这里要用“空格”指向明确表明父子级别关系。

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

也就是说,

th.b {

color: #FF0000

}

定义的是<th class="b">text</td>,在这里的代码中,th和class='b'是平级的,先th后.b组成一个同级类路径th.b,所以没有空格代表“HTML类”和“自定义类”具有同级路径!

3、第三个类b的类路径是 .b,定义该HTML文档内所有的td标签的样式,它是该文档的一个全局样式,是body .b的简写。

也就是说,

.b {

color:#0000ff;

font-size:12px;

}

定义了

<td class="b">第三个类b的类路径是td.b</th>

<div class="b">第三个类b的类路径是 .b</div>

这两处的b类没有明确的路径指向,优先级别要比有明确路径的低。

4、大家可以看到,在HTML代码中,同样都是class="b",但是在CSS定义时,采用的类路径不同,作用就不同了。类路径越完整,优先级越高。在具体应用的时候,我们可以,使用完整类路径来定义某HTML代码块某一些特殊地方,做异化处理。例如本例表头th的黑体字显示效果。

二、HTML中复合调用样式类

(1)在一个HTML标签内,可以复合调用多个样式类,也是用空格做运算符,复合类名总字符不能超过256。

(2)示例:

<style type="text/css">

.myTxt {

font-size:50px;

font-family:Arial Black;

}

.txtRed {

color:red;

}

.txtOrange {

color

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 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来,做参考。

【CSS模块化设计——从空格谈起】相关文章:

CSS里随滚动条滚动代码

CSS各种文字对齐方式代码

让CSS样式表优化更整洁而简短

用CSS控制网页总体风格

CSS网页设计时关于字体大小的设计

用CSS设计高用户体验的web文字大小

CSS相框效果示例代码

CSS条状图表进度条

CSS设计符合Web标准的网页表单的几个技巧

CSS控制让每行显示4个图片的样式

精品推荐
分类导航