实例讲解css中的行为:expression和behavior(附DEMO下载)
2008-07-21 18:01
501 查看
本文将通过实例讲解CSS中的expression和behavior的用法。但是需要注意的是:较多的使用css中的行为,会极大的消耗客户端资源。从而影响网页的渲染速度。所以并不推荐大范围的使用css行为。
css选择符联系着,而结构和行为用事件联系着。那表现和行为用什么联系着呢?其实联系他们之间的纽带就是我们今天要讲的css中的行为。
下面让我们来看个简单的例子——
[code]<li>我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
[/code]
很简单,就是一个列表而已。现在我们想在这些列表上,实现一个用户体验更好的改变:当鼠标移到每个列表项上,这个列表的背景颜色高亮显示。对,很实用的一个改变而已。如果我没有猜错的话,你第一想到的应该是下面的代码——
[code]<lionmouseover="this.style.backgroundColor='pink'"onmouseout="this.style.backgroundColor='';">我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
[/code]
没有必要感到害羞,这没有什么错,而且完全实现了效果。只是,当boss说:“麻烦把其他页面的所有列表都实现这个效果”的时候,你会比较抓狂而已。毕竟在整个项目的所有页面中找到所有的li标签,并在里面复制上两句代码绝对不是一个令人舒服的工作。
为什么不试试css中的expression。在公用的css样式表文件中,加入下面的样式,即可立刻实现对所有li标签的效果——
[code]<htmlxmlns="http://www.w3.org/1999/xhtml">
[/code]
对,就是一句“star:expression(onmouseover=function(){this.style.backgroundColor="pink"},onmouseout=function(){this.style.backgroundColor="";})”就实现了刚才的效果,而且没有对前台结构做任何改变。
这就是expression的作用,一个轻量级的关于样式的行为方式的实现。
[code]star:expression(onmouseover=function(){this.style.backgroundColor="pink"},onmouseout=function(){this.style.backgroundColor="";})
[/code]
顾客对你的反应速度赶到很满意,但是可惜的是:这个顾客只是一个小角色,真正需要的并不是他,而是他的上级BOSS点头,项目才可以验收。好在,那个上级顾客没有提什么过分的要求,只是说:“我希望高亮显示的颜色变成绿色,高亮的文字最好能变成红色,而且鼠标的样子要变成手指的样子!”
虽然那个小角色顾客一开始拍着胸脯说:“绝对不会变了,这就是我们的效果”。但是真正出钱的是那个“上级BOSS顾客”。所以,没有办法,我们也只能改了。这时候为了系统的可扩展性和可维护性,我建议你使用behavior行为。因为作为轻量级的expression解决方案已经不是最好的选择了。
所以上面的需求,如果用behavior来实现的话,将会非常轻松。
先建一个htc文件,名字虽然命名,这就命名为"changeColor.htc"吧,内容很简单,会JavaScript的都能看懂——
[code]<public:attachevent="onmouseout"onevent="after()"/>
[/code]
然后在通用的css文件中加入下面的样式,来引入htc文件——
这样,就将样式和行为完全的分离开来了。以后那该死的顾客再要改变什么,只要在通用css或者htc文件中进行相应的修改即可。
css中的行为,expression和behavior只有IE才有效,FireFox无效,而且IE也只有IE5以上的版本才支持。
2:不推荐使用expression和behavior
在页面渲染的过程中,expression和behavior需要大量的计算,会大量地耗费客户端资源。所以不到迫不得已,请不要使用expression和behavior。
3:expression和behavior的现实意义
上面两点,好像已经判了expression和behavior死刑。其实,并不是,它们依然有着现实意义——就是用另外一种途径解决IE6的兼容性问题(IE5已经基本退出市场,可以不用考虑)。例如:IE7以上的版本、FireFox、Opera、Safari都已经支持透明PNG图片,但是IE6却不能支持。这是IE6天生的缺陷,但是为了能让IE6也能够兼容我们的设计效果,那么这时候behavior便有了用武之地。
总的来说,expression和behavior在逐渐的没落,但是只要IE6还是浏览器市场上占有一席之地,expression和behavior就依然有着旺盛的生命力。
一个完整的可以运行的实例页面
一个完整的可以运行的实例demo下载
更多css中expression知识
结构、表现、行为,分离和联系
网页三要素——结构、表现、行为。这个大家都很清楚(如果你对此不是很熟悉,这里可以这样狭义的理解——结构就是HTML,表现就是CSS,行为就是JavaScript)。为了能写出高内聚、低耦合、可以重复使用,符合web标准的网页,将这三层分离开来是必不可少的,所以在HTML结构中直接写“style="……"”的做法是不提倡的。但是分开并不表示“一刀两断”,作为一个网页的三个组成部分,他们之间还必须保持着联系。例如,结构和表现,用表现和行为的联系
好像很多的朋友都感觉:CSS和JavaScript之间有什么关系呀?好像没有必要保持什么联系吧?的确,在很多情况下,他们直接很少联系,甚至在有必要联系的情况下,也可以间接的转化为结构和行为之间的联系。而且,随着最新的浏览器对css2甚至css3的支持不断完善,结构和行为之间的联系也在不断的在弱化。但是,表现和行为之间的联系,在一些特殊处理,特别是在对IE5-IE6的特效兼容性上,却有着非常大的应用。下面让我们来看个简单的例子——
<ul>
[code]<li>我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
<li>我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
<li>我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
<li>我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
<li>我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
</ul>
[/code]
很简单,就是一个列表而已。现在我们想在这些列表上,实现一个用户体验更好的改变:当鼠标移到每个列表项上,这个列表的背景颜色高亮显示。对,很实用的一个改变而已。如果我没有猜错的话,你第一想到的应该是下面的代码——
<ul>
[code]<lionmouseover="this.style.backgroundColor='pink'"onmouseout="this.style.backgroundColor='';">我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
<lionmouseover="this.style.backgroundColor='pink'"onmouseout="this.style.backgroundColor='';">我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
<lionmouseover="this.style.backgroundColor='pink'"onmouseout="this.style.backgroundColor='';">我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
<lionmouseover="this.style.backgroundColor='pink'"onmouseout="this.style.backgroundColor='';">我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
<lionmouseover="this.style.backgroundColor='pink'"onmouseout="this.style.backgroundColor='';">我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
</ul>
[/code]
没有必要感到害羞,这没有什么错,而且完全实现了效果。只是,当boss说:“麻烦把其他页面的所有列表都实现这个效果”的时候,你会比较抓狂而已。毕竟在整个项目的所有页面中找到所有的li标签,并在里面复制上两句代码绝对不是一个令人舒服的工作。
为什么不试试css中的expression。在公用的css样式表文件中,加入下面的样式,即可立刻实现对所有li标签的效果——
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[code]<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="YES!B/S!,web标准,杨正祎,博客园,实例代码"/>
<metaname="Description"content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/"/>
<title>YES!B/S!文章示例页面</title>
<styletype="text/css">
/***为了便于演示,故将样式放在前台页面上***/
li{
star:expression(onmouseover=function(){this.style.backgroundColor="pink"},onmouseout=function(){this.style.backgroundColor="";})
}
</style>
</head>
<body>
<ul>
<li>我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
<li>我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
<li>我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
<li>我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
<li>我是一个列表项,来自http://justinyoung.cnblogs.com/</li>
</ul>
</body>
</html>
[/code]
对,就是一句“star:expression(onmouseover=function(){this.style.backgroundColor="pink"},onmouseout=function(){this.style.backgroundColor="";})”就实现了刚才的效果,而且没有对前台结构做任何改变。
这就是expression的作用,一个轻量级的关于样式的行为方式的实现。
见鬼!又变了!
上面的效果真的不错,鼠标浮上去背景高亮显示的效果受到了顾客的好评。以至于顾客说:“这个效果真的不错,能不能给所有的表格单元、引用标签、超链接全部加上这种效果。”为了满足顾客的兽欲,没有办法,咱只能改呀。于是,你对有td、blockquote和a标签都加上了这玩意。这是你还多了一个心眼,为了防止顾客对li、td、blockquote和a要不同的高亮显示背景,你把他们分开写了。于是样式表中,非常壮观的出现了下面的代码——li{
[code]star:expression(onmouseover=function(){this.style.backgroundColor="pink"},onmouseout=function(){this.style.backgroundColor="";})
}
td{
star:expression(onmouseover=function(){this.style.backgroundColor="pink"},onmouseout=function(){this.style.backgroundColor="";})
}
blockquote{
star:expression(onmouseover=function(){this.style.backgroundColor="pink"},onmouseout=function(){this.style.backgroundColor="";})
}
a{
star:expression(onmouseover=function(){this.style.backgroundColor="pink"},onmouseout=function(){this.style.backgroundColor="";})
}
[/code]
顾客对你的反应速度赶到很满意,但是可惜的是:这个顾客只是一个小角色,真正需要的并不是他,而是他的上级BOSS点头,项目才可以验收。好在,那个上级顾客没有提什么过分的要求,只是说:“我希望高亮显示的颜色变成绿色,高亮的文字最好能变成红色,而且鼠标的样子要变成手指的样子!”
虽然那个小角色顾客一开始拍着胸脯说:“绝对不会变了,这就是我们的效果”。但是真正出钱的是那个“上级BOSS顾客”。所以,没有办法,我们也只能改了。这时候为了系统的可扩展性和可维护性,我建议你使用behavior行为。因为作为轻量级的expression解决方案已经不是最好的选择了。
CSS中的behavior行为
CSS中的behavior也是表现和行为相联系的纽带。只是behavior相比expression更善于解决一些重量级的任务(例如在IE6中实现对透明PNG的支持,我们将在以后的文章中讲到)。所以上面的需求,如果用behavior来实现的话,将会非常轻松。
先建一个htc文件,名字虽然命名,这就命名为"changeColor.htc"吧,内容很简单,会JavaScript的都能看懂——
<public:attachevent="onmouseover"onevent="befor()"/>
[code]<public:attachevent="onmouseout"onevent="after()"/>
<scripttype="text/javascript">
functionbefor(){
this.style.backgroundColor="#7FFFAA";
this.style.color="red";
this.style.cursor="pointer";
}
functionafter(){
this.style.backgroundColor="";
this.style.color="";
this.style.cursor="";
}
</script>
[/code]
然后在通用的css文件中加入下面的样式,来引入htc文件——
li,td,blockquote,a{behavior:url("changeColor.htc")}
这样,就将样式和行为完全的分离开来了。以后那该死的顾客再要改变什么,只要在通用css或者htc文件中进行相应的修改即可。
expression和behavior的重要说明
1:只有IE才可以使用css中的行为,expression和behavior只有IE才有效,FireFox无效,而且IE也只有IE5以上的版本才支持。
2:不推荐使用expression和behavior
在页面渲染的过程中,expression和behavior需要大量的计算,会大量地耗费客户端资源。所以不到迫不得已,请不要使用expression和behavior。
3:expression和behavior的现实意义
上面两点,好像已经判了expression和behavior死刑。其实,并不是,它们依然有着现实意义——就是用另外一种途径解决IE6的兼容性问题(IE5已经基本退出市场,可以不用考虑)。例如:IE7以上的版本、FireFox、Opera、Safari都已经支持透明PNG图片,但是IE6却不能支持。这是IE6天生的缺陷,但是为了能让IE6也能够兼容我们的设计效果,那么这时候behavior便有了用武之地。
总的来说,expression和behavior在逐渐的没落,但是只要IE6还是浏览器市场上占有一席之地,expression和behavior就依然有着旺盛的生命力。
资源和Demo下载
资源和Demo下载列表
相关文章推荐
- 实例讲解css中的行为:expression和behavior(附DEMO下载)
- 实例讲解css中的行为:expression和behavior(附DEMO下载)
- 实例讲解css中的行为:expression和behavior(附DEMO下载)
- 实例讲解css中的行为:expression和behavior(附DEMO下载)
- 实例讲解css中的行为:expression和behavior(behavior的路径问题)
- Android 依赖注入:Dagger 实例讲解(Demo下载)
- 【CSS翻转门】技术实例讲解(附源码下载)
- Android 依赖注入:Dagger 实例讲解(Demo下载)
- ThinkPHP行为扩展Behavior应用实例详解
- 实例讲解如何使用CSS保持页面内容宽高比
- CSS中的行为—expression
- Android实例demo18之多线程断点下载
- K近邻算法讲解与python实现(附源码demo下载链接)
- CSS中的行为——expression
- springmvc rest风格的实例代码demo讲解
- SSH+ExtJs4开发项目的Demo实例视频讲解
- CSS伪类:before在元素之前 :after 在元素之后实例讲解
- jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
- SpringMVC-(1)一个简单的实例demo及讲解
- DIV+CSS各种布局实例(附下载)