【永恒的瞬间】
☜Give me hapy ☞

Flex 所支持的样式比 Flash 要丰富,样式定义的方法也很多。这也是 Flex Flash 要强大、适合网页开发的地方之一。
样式定义类型
1. 外部样式表

< mx : Style   source = '/css/myStyle.css' />


Flex
会调用全局样式表 global.css ,该全局样式表由 flex-config.xml 定义,如:

<global- css - url >/ WEB - INF / flex /global. css </global- css - url >    


系统默认的样式表文件 global.css 文件其实没有任何样式定义,我们可以手动添加全局样式,也可以更改默认的全局样式文件路径。如,把全局样式文件该为:

<global- css - url >/ css / styles . css </global- css - url >


在这里顺便提一点,定义外部 css 文件的时候,颜色样式有四种定义方式:

: .myclass { fillColor: #6666CC } // 16 进制颜色格式
2 : .myclass { borderColor: rgb(77%,22%,0%) } // RGB 颜色格式
3 : .myclass { errorColor: rgb(0,255,0) } // 10 进制 RGB 颜色格式
4 : .myclass { color : Blue } // VGA 颜色名称格式
2. 本地样式定义
使用 <mx:Style> 来定义当前文件的样式
下面的例子定义了 myFontStyle 子类样式,要使用对应的样式可以在组件中使用 styleName 属性来应用样式

< mx : Style >

2. . myFontStyle   {    fontSize :   15    }

3. </ mx : Style >

4. < mx : Button   id = 'myButton'   styleName = 'myFontStyle'   label = 'Click   Here'   >


下面的样式则定义了所有 Button 组件的样式,使用该方式定义的样式在使用的时候不需要指定样式名。

< mx : Style >

2. Button   {    fontSize :   15    }

3. </ mx : Style >

4. < mx : Button   id = 'myButton'   label = 'Click   Here'   >


3. 内嵌样式定义
对个别需要特殊处理的组件,可以使用下面的方式进行内嵌样式定义

< mx : Button   id = 'myButton'   fontSize = '15'   color = '0x9966CC'   label = 'My   Button' />



4. 使用脚本样式定义
这种方法使用了 Flash 传统的 AS 脚本方式来定义样式,具有更强大的灵活性,并且可以使用 StyleManager 类以及 getStyle() setStyle() 方法,如下所示:

1. < mx : Script >  

2. <![ CDATA [  

3. //使用styleManger类  

4. mx . styles . StyleManager . styles . ToolTip . fontWeight   =   'bold' ;  

5. //获取组件样式  

6. lb1 . text = ip1 . getStyle ( 'fontSize' );  

7. //设置组件样

8. lb1 . text = ip1 . setStyle ( 'fontSize' , newSize )

9. ]]>

10.  </ mx : Script >

如果三种样式定义方式同时使用的话,优先级别从高到低依次为:
内嵌式样式 > 本地样式定义 ( 脚本样式定义 )> 外部样式定义

特殊样式定义
在进行样式定义的时候,我们需要注意几种 Flex 特殊的样式定义
1.
全局样式定义
对所有未被定义的控制组件应用 global 样式

global   {  

2. fontSize : 22 ;

3. textDecoration :   underline ;

4.   }
2.
应用程序样式定义
Application
标记是 Flex 的根标记, Application 样式用来定义未被定义的容器以及子容器的样式

Application   {  

2. marginLeft :   0px ;

3. marginRight :   0px ;

4. marginTop :   0px ;

5. marginBottom :   0px ;

6. horizontalAlign :   'left' ;

7.   }

关于字体的样式定义
1. 使用设备字体

. myClass   {  

2. fontFamily :   Arial ,   Helvetica ,   '_sans' ;

3. color :   Red ;

4. fontSize :   22 ;

5. fontWeight :   bold ;

6.   }


2. 使用移植字体

1. < mx : Style >  

2. @ font - face   {    

3. src : url ( 'akbar.ttf' );

4. fontFamily :   myfont ;

5.   }

6. @ font - face   {  

7. src : url ( 'akbar.ttf' );

8. fontWeight :   bold ;

9. fontFamily :   myfontBold ;

10.    }

11.  </ mx : Style >
在定义了该字体样式后,就可以通过 fontFamily 来应用该字体样式,如:

Accordion   {  

2. fontFamily :   myfont

3.   }

z
posted on 2007-01-12 12:43 ☜♥☞MengChuChen 阅读(258) 评论(0)  编辑  收藏 所属分类: flex2.0

只有注册用户登录后才能发表评论。


网站导航: