CSS自定义属性 Expression ，行为 behavior 及 .htc文件
实例讲解css中的行为：expression和behavior(附DEMO下载)
本文将通过实例讲解CSS中的expression和behavior的用法。但是需要注意的是：较多的使用css中的行为，会极大的消耗客户端资源。从而影响网页的渲染速度。所以并不推荐大范围的使用css行为。
结构、表现、行为，分离和联系
网页三要素——结构、表现、行为。这个大家都很清楚（如果你对此不是很熟悉，这里可以这样狭义的理解——结构就是HTML，表现就是CSS，行为就是JavaScript）。为了能写出高内聚、低耦合、可以重复使用，符合web标准的网页，将这三层分离开来是必不可少的，所以在HTML结构中直接写“style="……"”的做法是不提倡的。但是分开并不表示“一刀两断”，作为一个网页的三个组成部分，他们之间还必须保持着联系。例如，结构和表现，用css选择符联系着，而结构和行为用事件联系着。那表现和行为用什么联系着呢？其实联系他们之间的纽带就是我们今天要讲的css中的行为。
表现和行为的联系
好像很多的朋友都感觉：CSS和JavaScript之间有什么关系呀？好像没有必要保持什么联系吧？ 的确，在很多情况下，他们直接很少联系，甚至在有必要联系的情况下，也可以间接的转化为结构和行为之间的联系。而且，随着最新的浏览器对css2甚至css3的支持不断完善，结构和行为之间的联系也在不断的在弱化。但是，表现和行为之间的联系，在一些特殊处理，特别是在对IE5-IE6的特效兼容性上，却有着非常大的应用。
下面让我们来看个简单的例子——
很简单，就是一个列表而已。现在我们想在这些列表上，实现一个用户体验更好的改变：当鼠标移到每个列表项上，这个列表的背景颜色高亮显示。对，很实用的一个改变而已。如果我没有猜错的话，你第一想到的应该是下面的代码——
没有必要感到害羞，这没有什么错，而且完全实现了效果。只是，当boss说：“麻烦把其他页面的所有列表都实现这个效果”的时候，你会比较抓狂而已。毕竟在整个项目的所有页面中找到所有的li标签，并在里面复制上两句代码绝对不是一个令人舒服的工作。
为什么不试试css中的expression。在公用的css样式表文件中，加入下面的样式，即可立刻实现对所有li标签的效果——
对，就是一句“star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})”就实现了刚才的效果，而且没有对前台结构做任何改变。
这就是expression的作用，一个轻量级的关于样式的行为方式的实现。
见鬼！又变了！
上面的效果真的不错，鼠标浮上去背景高亮显示的效果受到了顾客的好评。以至于顾客说：“这个效果真的不错，能不能给所有的表格单元、引用标签、超链接全部加上这种效果。” 为了满足顾客的兽欲，没有办法，咱只能改呀。于是，你对有td 、blockquote和a标签都加上了这玩意。这是你还多了一个心眼，为了防止顾客对li、td、blockquote和a要不同的高亮显示背景，你把他们分开写了。于是样式表中，非常壮观的出现了下面的代码——
顾客对你的反应速度赶到很满意，但是可惜的是：这个顾客只是一个小角色，真正需要的并不是他，而是他的上级BOSS点头，项目才可以验收。好在，那个上级顾客没有提什么过分的要求，只是说：“我希望高亮显示的颜色变成绿色，高亮的文字最好能变成红色，而且鼠标的样子要变成手指的样子！”
虽然那个小角色顾客一开始拍着胸脯说：“绝对不会变了，这就是我们的效果”。但是真正出钱的是那个“上级BOSS顾客”。所以，没有办法，我们也只能改了。这时候为了系统的可扩展性和可维护性，我建议你使用behavior行为。因为作为轻量级的expression解决方案已经不是最好的选择了。
CSS中的behavior行为
CSS中的behavior也是表现和行为相联系的纽带。只是behavior相比expression更善于解决一些重量级的任务（例如在IE6中实现对透明PNG的支持，我们将在以后的文章中讲到）。
所以上面的需求，如果用behavior来实现的话，将会非常轻松。
先建一个htc文件，名字虽然命名，这就命名为"changeColor.htc"吧，内容很简单，会JavaScript的都能看懂——
然后在通用的css文件中加入下面的样式，来引入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下载列表
· behavior.rar
· 更多css中expression知识
.htc文件 =======
从5.5版本开始，Internet Explorer（IE）开始支持Web 行为的概念。这些行为是由后缀名为.htc的脚本文件描述的，它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。Web 行为还是推荐的扩展IE对象模型和控件集的方法。微软在它的开发者站点上的DHTML 行为库栏目里提供了几个定制的Web行为。我会在本文中讨论一个比较新的Web 行为：WebService行为。
Web 服务是通过一个开放的简单对象访问协议（SOAP）来传递参数和接收返回值，以便在Web上提供接口无关的软件服务的方法。在Internet上有许多例子和文章帮助你创建Web 服务并从传统的基于窗口表单的应用程序或者在服务器端来使用这些Web 服务，但是也可以使用WebService 行为也可以在客户浏览器上使用Web 服务。
从客户浏览器调用一个Web 服务的好处包括能够得到服务器更快的响应时间，结果是生成交互能力更强的页面并让用户用起来更高兴。与传统的将表单发回服务器然后接收一个新的页面不同的是（这个过程包括重新下载图片和其它的内容），WebService行为使用XMLHTTP在后台只发送和接收与事务处理过程相关的内容，然后这些内容又可以通过DHTML和脚本进行显示。
我所知道的目前支持Web 行为的唯一一个浏览器是IE；开发者们知道避免使用只能在IE上使用的功能。但是W3C在工作草案里有这个CSS的扩展以作为未来的标准。
如果你决定现在就使用Web 行为，你可以使用下面的JavaScript函数来检测客户端是否支持这个功能：
使用上面的函数，你可以在运行时确定是否能够使用WebService 行为来调用Web 服务并使用IE的DHTML功能来显示结果或者是把这个表单发送给服务器让服务器来完成必要的操作，然后再次生成一个完整的页面。使用CSS语法来为一个元素添加WebService行为不会影响不支持特定CSS属性的浏览器。
微软提供了一个很好的参考，程序员可以用它更好的熟悉从客户端访问Web 服务。开发者还可以在微软的站点上找到必要的HTML 组件（*.htc）文件。
有了客户端工具包中的WebService行为，开发者们可以为Web 消费者创建更丰富更具交互性的页面，它们与使用大型主机提供的Web 服务或者基于表单窗口的应用程序的企业用户的功能是一样的。这将帮助消除冗余的代码并能通过为服务提供的特定功能提高响应时间来增强用户体验的快感。
来源：http://justinyoung.cnblogs.com
本文将通过实例讲解CSS中的expression和behavior的用法。但是需要注意的是：较多的使用css中的行为，会极大的消耗客户端资源。从而影响网页的渲染速度。所以并不推荐大范围的使用css行为。
结构、表现、行为，分离和联系
网页三要素——结构、表现、行为。这个大家都很清楚（如果你对此不是很熟悉，这里可以这样狭义的理解——结构就是HTML，表现就是CSS，行为就是JavaScript）。为了能写出高内聚、低耦合、可以重复使用，符合web标准的网页，将这三层分离开来是必不可少的，所以在HTML结构中直接写“style="……"”的做法是不提倡的。但是分开并不表示“一刀两断”，作为一个网页的三个组成部分，他们之间还必须保持着联系。例如，结构和表现，用css选择符联系着，而结构和行为用事件联系着。那表现和行为用什么联系着呢？其实联系他们之间的纽带就是我们今天要讲的css中的行为。
表现和行为的联系
好像很多的朋友都感觉：CSS和JavaScript之间有什么关系呀？好像没有必要保持什么联系吧？ 的确，在很多情况下，他们直接很少联系，甚至在有必要联系的情况下，也可以间接的转化为结构和行为之间的联系。而且，随着最新的浏览器对css2甚至css3的支持不断完善，结构和行为之间的联系也在不断的在弱化。但是，表现和行为之间的联系，在一些特殊处理，特别是在对IE5-IE6的特效兼容性上，却有着非常大的应用。
下面让我们来看个简单的例子——
+展开
<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>
-HTML
<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>
很简单，就是一个列表而已。现在我们想在这些列表上，实现一个用户体验更好的改变：当鼠标移到每个列表项上，这个列表的背景颜色高亮显示。对，很实用的一个改变而已。如果我没有猜错的话，你第一想到的应该是下面的代码——
+展开
-HTML
<ul >
<li onmouseover="this.style.backgroundColor=’pink’" onmouseout="this.style.backgroundColor=”;">我是一个列表项，来自http://justinyoung.cnblogs.com/li>
<li onmouseover="this.style.backgroundColor=’pink’" onmouseout="this.style.backgroundColor=”;">我是一个列表项，来自http://justinyoung.cnblogs.com/li>
<li onmouseover="this.style.backgroundColor=’pink’" onmouseout="this.style.backgroundColor=”;">我是一个列表项，来自http://justinyoung.cnblogs.com/li>
<li onmouseover="this.style.backgroundColor=’pink’" onmouseout="this.style.backgroundColor=”;">我是一个列表项，来自http://justinyoung.cnblogs.com/li>
<li onmouseover="this.style.backgroundColor=’pink’" onmouseout="this.style.backgroundColor=”;">我是一个列表项，来自http://justinyoung.cnblogs.com/li>
ul>
<li onmouseover="this.style.backgroundColor=’pink’" onmouseout="this.style.backgroundColor=”;">我是一个列表项，来自http://justinyoung.cnblogs.com/li>
<li onmouseover="this.style.backgroundColor=’pink’" onmouseout="this.style.backgroundColor=”;">我是一个列表项，来自http://justinyoung.cnblogs.com/li>
<li onmouseover="this.style.backgroundColor=’pink’" onmouseout="this.style.backgroundColor=”;">我是一个列表项，来自http://justinyoung.cnblogs.com/li>
<li onmouseover="this.style.backgroundColor=’pink’" onmouseout="this.style.backgroundColor=”;">我是一个列表项，来自http://justinyoung.cnblogs.com/li>
<li onmouseover="this.style.backgroundColor=’pink’" onmouseout="this.style.backgroundColor=”;">我是一个列表项，来自http://justinyoung.cnblogs.com/li>
ul>
没有必要感到害羞，这没有什么错，而且完全实现了效果。只是，当boss说：“麻烦把其他页面的所有列表都实现这个效果”的时候，你会比较抓狂而已。毕竟在整个项目的所有页面中找到所有的li标签，并在里面复制上两句代码绝对不是一个令人舒服的工作。
为什么不试试css中的expression。在公用的css样式表文件中，加入下面的样式，即可立刻实现对所有li标签的效果——
+展开
-HTML
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
<meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例页面title>
<style type="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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
<meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例页面title>
<style type="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>
对，就是一句“star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})”就实现了刚才的效果，而且没有对前台结构做任何改变。
这就是expression的作用，一个轻量级的关于样式的行为方式的实现。
见鬼！又变了！
上面的效果真的不错，鼠标浮上去背景高亮显示的效果受到了顾客的好评。以至于顾客说：“这个效果真的不错，能不能给所有的表格单元、引用标签、超链接全部加上这种效果。” 为了满足顾客的兽欲，没有办法，咱只能改呀。于是，你对有td 、blockquote和a标签都加上了这玩意。这是你还多了一个心眼，为了防止顾客对li、td、blockquote和a要不同的高亮显示背景，你把他们分开写了。于是样式表中，非常壮观的出现了下面的代码——
+展开
-CSS
li{
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="";})
}
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="";})
}
顾客对你的反应速度赶到很满意，但是可惜的是：这个顾客只是一个小角色，真正需要的并不是他，而是他的上级BOSS点头，项目才可以验收。好在，那个上级顾客没有提什么过分的要求，只是说：“我希望高亮显示的颜色变成绿色，高亮的文字最好能变成红色，而且鼠标的样子要变成手指的样子！”
虽然那个小角色顾客一开始拍着胸脯说：“绝对不会变了，这就是我们的效果”。但是真正出钱的是那个“上级BOSS顾客”。所以，没有办法，我们也只能改了。这时候为了系统的可扩展性和可维护性，我建议你使用behavior行为。因为作为轻量级的expression解决方案已经不是最好的选择了。
CSS中的behavior行为
CSS中的behavior也是表现和行为相联系的纽带。只是behavior相比expression更善于解决一些重量级的任务（例如在IE6中实现对透明PNG的支持，我们将在以后的文章中讲到）。
所以上面的需求，如果用behavior来实现的话，将会非常轻松。
先建一个htc文件，名字虽然命名，这就命名为"changeColor.htc"吧，内容很简单，会JavaScript的都能看懂——
+展开
-HTML
<public:attach event="onmouseover" onevent="befor()" />
<public:attach event="onmouseout" onevent="after()" />
<script type="text/javascript">
function befor(){
this.style.backgroundColor="#7FFFAA";
this.style.color="red";
this.style.cursor="pointer";
}
function after(){
this.style.backgroundColor="";
this.style.color="";
this.style.cursor="";
}
script>
<public:attach event="onmouseout" onevent="after()" />
<script type="text/javascript">
function befor(){
this.style.backgroundColor="#7FFFAA";
this.style.color="red";
this.style.cursor="pointer";
}
function after(){
this.style.backgroundColor="";
this.style.color="";
this.style.cursor="";
}
script>
然后在通用的css文件中加入下面的样式，来引入htc文件——
+展开
-CSS
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下载列表
· behavior.rar
· 更多css中expression知识
.htc文件 =======
从5.5版本开始，Internet Explorer（IE）开始支持Web 行为的概念。这些行为是由后缀名为.htc的脚本文件描述的，它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。Web 行为还是推荐的扩展IE对象模型和控件集的方法。微软在它的开发者站点上的DHTML 行为库栏目里提供了几个定制的Web行为。我会在本文中讨论一个比较新的Web 行为：WebService行为。
Web 服务是通过一个开放的简单对象访问协议（SOAP）来传递参数和接收返回值，以便在Web上提供接口无关的软件服务的方法。在Internet上有许多例子和文章帮助你创建Web 服务并从传统的基于窗口表单的应用程序或者在服务器端来使用这些Web 服务，但是也可以使用WebService 行为也可以在客户浏览器上使用Web 服务。
从客户浏览器调用一个Web 服务的好处包括能够得到服务器更快的响应时间，结果是生成交互能力更强的页面并让用户用起来更高兴。与传统的将表单发回服务器然后接收一个新的页面不同的是（这个过程包括重新下载图片和其它的内容），WebService行为使用XMLHTTP在后台只发送和接收与事务处理过程相关的内容，然后这些内容又可以通过DHTML和脚本进行显示。
我所知道的目前支持Web 行为的唯一一个浏览器是IE；开发者们知道避免使用只能在IE上使用的功能。但是W3C在工作草案里有这个CSS的扩展以作为未来的标准。
如果你决定现在就使用Web 行为，你可以使用下面的JavaScript函数来检测客户端是否支持这个功能：
+展开
-JavaScript
function canUseBehaviors() {
var ua = window.navigator.userAgent;
var msiePos = ua.indexOf(’MSIE’);
var msieVer = 0;
var behaviorsAvailable = false;
var iHandle = 0;
if (msiePos >= 0) {
msieMajorVer = parseInt(ua.charAt(msiePos + 5));
msieMinorVer = parseInt(ua.charAt(msiePos + 7));
if (msieMajorVer >= 5) {
if (((msieMajorVer == 5) && (msieMinorVer >= 5)) ||
(msieMajorVer > 5)) {
behaviorsAvailable = true;
}
}
}
return behaviorsAvailable;
}
var ua = window.navigator.userAgent;
var msiePos = ua.indexOf(’MSIE’);
var msieVer = 0;
var behaviorsAvailable = false;
var iHandle = 0;
if (msiePos >= 0) {
msieMajorVer = parseInt(ua.charAt(msiePos + 5));
msieMinorVer = parseInt(ua.charAt(msiePos + 7));
if (msieMajorVer >= 5) {
if (((msieMajorVer == 5) && (msieMinorVer >= 5)) ||
(msieMajorVer > 5)) {
behaviorsAvailable = true;
}
}
}
return behaviorsAvailable;
}
使用上面的函数，你可以在运行时确定是否能够使用WebService 行为来调用Web 服务并使用IE的DHTML功能来显示结果或者是把这个表单发送给服务器让服务器来完成必要的操作，然后再次生成一个完整的页面。使用CSS语法来为一个元素添加WebService行为不会影响不支持特定CSS属性的浏览器。
微软提供了一个很好的参考，程序员可以用它更好的熟悉从客户端访问Web 服务。开发者还可以在微软的站点上找到必要的HTML 组件（*.htc）文件。
有了客户端工具包中的WebService行为，开发者们可以为Web 消费者创建更丰富更具交互性的页面，它们与使用大型主机提供的Web 服务或者基于表单窗口的应用程序的企业用户的功能是一样的。这将帮助消除冗余的代码并能通过为服务提供的特定功能提高响应时间来增强用户体验的快感。
来源：http://justinyoung.cnblogs.com
加支付宝好友偷能量挖...
