css对象化研究

一，概述: 　　CSS的对象化：（OO-CSS）OO的特点是继承，封装，多态，面向抽象编程。所谓OO的CSS，就是按照OO的一些思想来写CSS样式表。只有这种OO形式的CSS，才能够最大限度的发挥CSS的作用，让真正的CSS复用成为可能。　　OO-CSS以下的一些特性，可以看作是面向对象的方式：

CSS的一个类(class)的属性，按照继承的方式来书写；
将每一个独立的class，封装到不同的css文件；
为某种经常出现的样式建模，抽象出一个相对通用的接口(如SimpleTable)；
在HTML中，让不同的组件，实现同一个样式接口，这就是多态的一种。

二，TABLE的对象化实践：v0.13 　　Table的参考实现。其格式完全符合XHTML1.1标准。如果需要使用类似的Table，可以制作同样的标准Table，制作一个接口(参见TableInterface.css)相同的CSS-Table，然后指定table的class即可。如果需要更改样式或换肤，只需要修改一处。

TableInterface.css
/************************************
  Name: OO-CSS Template: TABLE
  Version:0.12
  Date: 2004.05.25
  Author: icecloud
  Blog: http://www.nona.name
 ********************************** */
/* ＜table class="tableName">*/
.Table {
}
/***********************************************************/
/* ＜col class="colbegin"> ＜col class="colend">*/
.Table .colid {
}
.Table .colmain {
}
.Table .colothers {
}
.Table .colspecial {
}
/***********************************************************/
/* ＜caption> */
.Table caption {
}
/***********************************************************/
/* ＜thead> */
.Table thead {
}
/***********************************************************/
/* ＜tr>＜th>＜a class="text">＜/a>＜/th> */
.Table thead th {
}
.Table thead th .text {
}
.Table thead th  .text:hover {
}
/* ＜tbody> */
.Table tbody {
}
/***********************************************************/
/* ＜tr>＜td>＜span class="text">＜/span>＜/td>＜/tr> */
.Table tbody tr {
}
.Table tbody td {	
}
.Table tbody td .text {
}
.Table tbody td .text:link {
}
.Table tbody td .text:visited {
}
.Table tbody td .text:hover {
}
.Table tbody td .cuttail {
}
.Table tbody td .description {
}
.Table tbody td .identify {
}
.Table tbody td .highlight {
}
.Table tbody td .operation {
}
.Table tbody td .operation:hover {
}
.Table tbody td .important { 
}
.Table tbody td .icon { 
}
/***********************************************************/
/* ＜tfoot>＜tr>＜td>＜span lass="text">＜/span>＜/td>＜/tr>＜/tfoot> */
.Table tfoot {
}
.Table tfoot tr {
}
.Table tfoot tr td {
}
.Table tfoot td  .text {
}
.Table tfoot td  .text:link {
}
.Table tfoot td  .text:visited {
}
.Table tfoot td  .text:hover {
}＜/caption>＜/table>
根据上面的模板制作的
　　花哨表格风格[garishTable.css]
　　简单表格风格[simpleTable.css]

btn.htc
/***********************************************************/
＜PUBLIC:COMPONENT>
＜PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="_On_Over()" />
＜PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="_On_Out()" />
＜SCRIPT language="jscript">
var _color=element.currentStyle.color;
var _bgcolor=element.currentStyle.backgroundColor;
function _On_Over()
{
	runtimeStyle.color="black";
	runtimeStyle.backgroundColor="#F8C2D9";
}
function _On_Out()
{
	runtimeStyle.color=_color;
	runtimeStyle.backgroundColor=_bgcolor;
}
＜/SCRIPT>
＜/PUBLIC:COMPONENT>

chagestyle.js
/***********************************************************/
function changeStyle(id,cls) {
	var obj = document.getElementById(id);
	obj.setAttribute("className",cls);
}

更新记录
    * 2004-05-11 v0.10 基本构想及实现
    * 2004-05-11 v0.11 修正错误，改用HTC实现动态背景
    * 2004-05-25 v0.12 缩减代码，增加项目界面
    * 2004-05-25 v0.13 增加修改样式，修改DTD为xhtml1.1
已知BUG
    * 更换样式后再次换回，因为expression，无法正确返回背景色
    * 更换样式后HTC失效

三，LIST的对象化实践：v0.10 　　用CSS定义LIST，用于代替TABLE进行数据的列表显示。如果不对列有要求的时候可以用LIST代替TABLE。

2004-05-24 v0.10 基本构想及实现

pageLayout.css
************************************
  Name: OO-CSS Template: PageLayout
  Version:0.12
  Date: 2004.05.25
  Author: icecloud
  Blog: http://www.nona.name
 ********************************** */
body {
	font-size: medium;
	margin: 0;
} 
#container {
	background: #F0F8FF;
	padding: 1em;
} 
 #container div.object {
 	border:1px solid #005095;
 }
 #container div.name {
 	color: white;
	padding-left:1em;
	background: #005095;
	font-weight: bolder;
 }
 #container div.description {
	padding: 0.5em 0.5em 0.5em 1em;
	text-indent: 2em;
 }
   #container div.preface {
	padding: 0.5em 0.5em 0.5em 1em;
	text-align: left;
 }
  #container div.example {
	padding: 0.5em 0.5em 0.5em 1em;
	border-top: 1px dotted #005095;
	text-align: center;
 }
   #container div.update {
	padding: 0.5em 0.5em 0.5em 1em;
	border-top: 1px dotted #005095;
	text-align: left;
 }
   #container div.operation {
	padding: 0.5em 0.5em 0.5em 1em;
	border-top: 1px dotted #005095;
	text-align: center;
 } 
 .linebreak {
	clear: both;
	width: 100%;
	height: 0px;
	margin: 1px 0 1px 0;
 }

参考资料： OO的CSS尝试 http://soft.eesky.com/info/43090.htm