在线教程

1 什么是OOCSS

2 OOCSS中的对象

2.1 类 ooCss.Type

2.2 成员ooCss.Member

2.3 样式表ooCss.Sheet

2.3.1 ooCss.load

2.3.2 ooCss. create

2.3.3 <oocss>标签… 4

2.4 命名空间ooCss.Namespace. 4

2.5 变量… 5

2.6 表达式：… 5

1 继承… 5

1.1 单继承… 5

1.2 多继承… 6

1.3 多层继承… 6

2 覆盖… 7

3 修饰符… 8

3.1 private. 8

3.2 protected. 9

3.3 public. 9

3.4 internal. 10

3.5 sealed. 10

3.6 abstract. 10

4 成员访问… 11

4.1 访问基类成员… 11

4.2 对非基类成员的访问… 11

5 书写格式… 12

6 开关项… 13

7 输出面板… 13

8 反馈… 13

1 什么是OOCSS

OOCSS是Object Oriented Cascading Style Sheets的缩写，于2008年10月提出，是用面向对象的方式使用CSS。

2 OOCSS中的对象

2.1 类 ooCss.Type

CSS中的Rule，一个OOCSS类，便是一个样式规则。

.div

{

color:red;

}

以上代码定义一个类 .div

2.2 成员ooCss.Member

构成类的属性，如color、border、font-size等。

.div

{

color:red;

}

以上代码给类 .div 定义一个成员 color,值为red;

2.3 样式表ooCss.Sheet

包含多个类，通常对应一个.css文件，可以通过以下几种方式来创建样式表

2.3.1 ooCss.load，

该方法有三个参数：

url,css文件的路径

defer,延迟加载的时间，默认0，不延迟加载

namespace，如果css文件中没有定义命名空间，则可以通过这个参数指定。一旦指定，则会覆盖css文件中的定义

如：

ooCss.load(”a.css”) ;

ooCss.load(”a.css”,100) ;

ooCss.load(”a.css”,100,’namespaceA’);

</script>

2.3.2 ooCss. create，

该方法有三个参数：

defer,延迟加载的时间，默认0，不延迟加载

namespace，如果css文件中没有定义命名空间，则可以通过这个参数指定。一旦指定，则会覆盖css文件中的定义

content,样式内容

如：

ooCss.create(100, ‘mespaceA’,’body{font-size:9pt;}’) ;

</script>

2.3.3 <oocss>标签

在页面head或body下定义oocss标签。

如,可以通过如下标签，加载a.css

也可以通过以下方式创建一个样式表

body{font-size:9pt;}

</oocss>

2.4 命名空间ooCss.Namespace

用来存放类，通常一个命名空间包含一个样式表，也可以包含对个样式表。

可以通过如下方式定义：

@namespace namespaceABC;

Body{font-size:9pt;}

……

推荐把命名空间定义语句@namespace放css文件第一行，namespace前的“@”和最后的“;”是必须的，也可以在加载样式表时指定，如

如果即没有在内容中指定，也没有在加载是指定，则会取样式表人url小写文件名作为命名空间。

2.5 变量

跟Javascript里面的变量相同，用来存储一个值，供其他地方访问;用var关键字定义，如：

@namespace namespaceABC;

var defaultColor=’red’;

public var defaultSize=12;

以上代码定义一个私有变量defaultColor和一个公有变量（全局变量）defaultSize

注意：var 关键字放变量名称前，修饰符放var关键字前，后面的‘;’号也是必须的。通常把变量的定义放css文件头部，命名空间后。

2.6 表达式：

用来计算值的一个字符串，用eval定义。如：

@namespace namespaceABC;

public var defaultSize=12;

body

{

font-size : eval(defaultSize+5)pt;

}

以上代码中，类body的成员font-size的值不是一个固定值，而是一个表达式，表达式内容为“defaultSize+5”，表达式引用了变量defaultSize,最后计算font-size成员值为“17pt”。

1 继承

OOCSS中可以用操作符“->”实现类的继承。

1.1 单继承

.base

{

color:red;

}

.son -> .base

{

font-size:12pt;

}

类 .son 继承自 .base ，除了拥有自己的成员 font-size还拥有继承自基类 .base 的成员 color,因此 .son 最终表现为 color:red;font-size:12pt;相当于以下定义：

.son

{

color:red;

font-size:12pt;

}

1.2 多继承

如果要将一个类继承自多个类，则可以用多个“->”操作符连接多个基类名称，如：

.base

{

color:red;

}

.baseBorder

{

border:1px solid gray;

}

.son -> .base -> .baseBorder

{

font-size:12pt;

}

类 .son 继承自两个基类 .base 和 .baseBorder，.son相当于以下定义

.son

{

color:red;

border:1px solid gray;

font-size:12pt;

}

1.3 多层继承

OOCSS允许一个类继承自另一个类的子类

.base

{

color:red;

}

.son -> .base

{

font-size:12pt;

}

. grandson -> .son

{

border:1px solid gray;

}

类 .grandson 继承 .base 的子类 .son，则 .grandson拥有自身的成员border外，还拥有 .son 的成员font-size和 .son继承自.base的成员color，.grandson相当于以下定义

. grandson

{

color:red;

font-size:12pt;

border:1px solid gray;

}

2 覆盖

在下面的类 .son 和.son的基类 .base 中，同时存在成员color

.base

{

color:red;

font-size:12pt;

}

.son -> .base

{

color:blue;

}

则.son只会继承.base类中font-size成员，基类的成员color将会被自身的color成员覆盖，但不影响基类本身的定义，上面的两个类等同于如下定义：

.base

{

color:red;

font-size:12pt;

}

.son

{

color:blue;

font-size:12pt;

}

3 修饰符

OOCSS 2.0 支持的修饰符有：

private , protected , public , internal , sealed , abstract

3.1 private

私有，表示一个类或者成员不能供外部访问。

如果在一个类的定义中加上private关键字，则该类不能被其它样式表中的类访问只能在对当前样式表可见。

例如，在样式表a.css和b.css中进行如下定义

a.css

private .base
{
color:blue;

}

.sonA -> base
{
color:blue;

}

b.css

.sonB -> base
{
color:blue;

}

上面的定义中 a.css中的 .sonA 类可以正确继承 .base ，而 b.css 中的.sonB则不能实现对 .base的继承，因为.base为私有，对a.css外的b.css不可见。

如果在一个成员定义中加上private关键字，则该成员不能被其它类访问，也不能被子类继承，只能在对当前类可见。

例如，在样式表a.css和b.css中进行如下定义

.base
{
private color:blue;

height:30px;

}

.son -> base
{

}

则.son只能继承.base中的height成员。

3.2 protected

保护，该修饰符只能应用于成员对象，表示一个成员只能供当前类及其子类访问。如

.base
{
protected color:blue;

height:30px;

}

.son -> base
{

}

body

{

color:eval()

}

则.son便继承了.base中的两个成员color和height。

3.3 public

公有，该修饰符可以用于类、成员和变量，表示其访问不受任何限制。

3.4 internal

内部，该修饰符可以用于类、成员和变量，表示其访问访问只限于当前样式表。

3.5 sealed

密封，该修饰符只能应用于类，密封类不能被其它类继承。如

.base
{
protected color:blue;

height:30px;

}

.son -> base
{

}

类div不能正确继承 .redDiv ，因为.redDiv是密封类，但调试的输出窗口不会给出任何提示。

3.6 abstract

抽象，该修饰符只能应用于类，表示该类是一个抽象类，抽象类不会在页面中呈现出来，一般用作其它类的基类。如

abstract .base
{
color:red;

}

.son -> .base
{

}

类. base是抽象类,可以被.son正确继承，但最终.base不会被呈现到页面，如 < id=’redDiv’ div class=”base”>红色</div> 这样的引用是错误的，.base 类不会对redDiv有任何影响

注意：默认情况下，类、成员是共有的，变量是私有的。

4 成员访问

4.1 访问基类成员

在OOCSS中，一个类可以用bases访问自己的所有基类，如：this.bases 。

由于在OOCSS中一个类可以继承多个基类，因此，基类是一个数组对象，而类的名称是可以同名的，所以基类每一项可能又包含同名的几个类，所以类的基类是一个二维数组对象，可以像这样访问类的某一个具体基类：

.base1

{

color:red;

height:30px;

}

.base2

{

font-size:9pt;

}

.son -> .base1 -> base2

{

font-size : eval(bases[‘base2’][0].get(‘font-size’));

color:eval(bases[0][0].get(‘color’));

height:eval(base[0].get(‘height’);

}

而通常我们的类都只继承一个基类，因此，OOCSS允许用base访问第一个基类。

4.2 对非基类成员的访问

要访问不是自己基类的其他类，可以在Namespace访问。如：

@namespace abc;

.base1

{

color:red;

height:30px;

}

.base2

{

font-size:9pt;

}

.son

{

font-size: eval(namespace.abc[‘.base2’][0]. get(‘font-size’));

font-size : eval(namespace.abc[‘.base2’][0]. get(‘font-size’));

}

5 书写格式

OOCSS在兼容传统CSS语法的同时，也有局部调整，下面的一段OOCSS代码包含了所有新的特性

@namespace setting; //定义命名空setting

public var defaultSize=10; //定义全局变量 defaultSize

var maxHeight=40; //定义私有变量 maxHeight

var logoUrl=”images/logo.gif” //定义私有变量 logoUrl

private absolute .base //定义私有的抽象类 .baseColor

{

color:blue; //定义成员color

font-size:12pt; //定义成员 font-size

}

.header //定义类 .header

{

Height:eval(maxHeight); //定义成员height,值等于 maxHeight

#logoDiv //嵌套定义类 .header #logDiv

{

Background-image:url(eval(logoUrl));

}

.navBar a:hover //嵌套定义类 .header .navBar a:hover

{

Font-size:9pt;

span -> .base //嵌套定义类 .header .navBar a:hover span,继承自.base

{

font-size:9pt; //覆盖基类成员 font-zie

}

｝

6 开关项

ooCss.LINK_OFF :关闭<link>标签检测，默认开启

ooCss.OOCSS_OFF：关闭<oocss>标签检测，默认开启

DEBUG_OFF：关闭调试功能，默认关闭

7 输出面板

我们可以通过ooCss.DEBUG_OFF=true/false来开启或关闭输出面板;

供下载的包中有两个Javascript文件，分别是：

Oocss-2.0.js，是经过压缩的，默认没有开启输出面板

Oocss-2.0-debug.js，没有经过压缩，是调试用的，默认已经开启调试面板

8 反馈

如果你有对OOCSS任何建议或疑问，可发送邮件到myoocss@gmail.com,也可到官方网站ww.oo-css.cn提交留言。

9 版权所有

李子哥哥 ® OOCSS ®

本文档中的信息，包括 URL 和其他 Internet Web 站点参考，如有变更，恕不另行通知;文档最新版本将始终在http://www.oo-css.cn网站发布。遵守任何适用的版权法是用户的责任。在不限制版权所辖权利的前提下，未经作者（李子哥哥）的明确书面许可，无论出于何种目的，均不得以任何形式或借助任何手段（电子、机械、影印或其他手段）将文档中的任何部分、恶意传播或用于商业用途。

Microsoft 可能拥有对本文档内容的专利、专利申请、商标、版权或其他知识产权。除了任何Microsoft 授权许可协议所提供的明确书面许可，拥有本文档并不赋予您任何有关这些专利、专利申请、商标、版权或其他知识产权的许可。