本文將通過執行個體講解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>
很簡單，就是一個列表而已。現在我們想在這些列表上，實現一個使用者體驗更好的改變：當滑鼠移到每個清單項目上，這個列表的背景顏色高亮顯示。對，很實用的一個改變而已。如果我沒有猜錯的話，你第一想到的應該是下面的代碼——
<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標籤的效果——
<!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>
對，就是一句“star : expression(onmouseover=function() {this.style.backgroundColor="pink"}, onmouseout=function(){this.style.backgroundColor="";})”就實現了剛才的效果，而且沒有對前台結構做任何改變。
這就是expression的作用，一個輕量級的關於樣式的行為方式的實現。
見鬼！又變了！上面的效果真的不錯，滑鼠浮上去背景高亮顯示的效果受到了顧客的好評。以至於顧客說：“這個效果真的不錯，能不能給所有的表格單元、引用標籤、超連結全部加上這種效果。” 為了滿足顧客的獸慾，沒有辦法，咱只能改呀。於是，你對有td 、blockquote和a標籤都加上了這玩意。這是你還多了一個心眼，為了防止顧客對li、td、blockquote和a要不同的高亮顯示背景，你把他們分開寫了。於是樣式表中，非常壯觀的出現了下面的代碼——
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="";})
}
顧客對你的反應速度趕到很滿意，但是可惜的是：這個顧客只是一個小角色，真正需要的並不是他，而是他的上級BOSS點頭，項目才可以驗收。好在，那個上級顧客沒有提什麼過分的要求，只是說：“我希望高亮顯示的顏色變成綠色，高亮的文字最好能變成紅色，而且滑鼠的樣子要變成手指的樣子！”
雖然那個小角色顧客一開始拍著胸脯說：“絕對不會變了，這就是我們的效果”。但是真正出錢的是那個“上級BOSS顧客”。所以，沒有辦法，我們也只能改了。這時候為了系統的可擴充性和可維護性，我建議你使用behavior行為。因為作為輕量級的expression解決方案已經不是最好的選擇了。
CSS中的behavior行為CSS中的behavior也是表現和行為相聯絡的紐帶。只是behavior相比expression更善於解決一些重量級的任務（例如在IE6中實現對透明PNG的支援，我們將在以後的文章中講到）。
所以上面的需求，如果用behavior來實現的話，將會非常輕鬆。
先建一個htc檔案，名字雖然命名，這就命名為"changeColor.htc"吧，內容很簡單，會JavaScript的都能看懂——
<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>
然後在通用的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下載列表Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
