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 阅读(261)
评论(0) 编辑 收藏 所属分类:
flex2.0