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 閱讀(266)
評論(0) 編輯 收藏 所屬分類:
flex2.0