你對Flex中Flex樣式的用法是否了解，這里向大家簡單描述一下，F(xiàn)lex所支持的Flex樣式比Flash要豐富，F(xiàn)lex樣式定義的方法也很多。這也是Flex比Flash要強(qiáng)大、適合網(wǎng)頁開發(fā)的地方之一。

Flex中使用Flex樣式

Flex所支持的Flex樣式比Flash要豐富，F(xiàn)lex樣式定義的方法也很多。這也是Flex比Flash要強(qiáng)大、適合網(wǎng)頁開發(fā)的地方之一。

Flex樣式定義類型

1.外部Flex樣式表

<mx:Stylesourcemx:Stylesource='/css/myStyle.css'/> 

Flex會調(diào)用全局Flex樣式表global.css，該全局Flex樣式表由flex-config.xml定義，如：

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

系統(tǒng)默認(rèn)的Flex樣式表文件global.css文件其實(shí)沒有任何Flex樣式定義，我們可以手動(dòng)添加全局Flex樣式，也可以更改默認(rèn)的全局Flex樣式文件路徑。如，把全局Flex樣式文件該為：

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

在這里順便提一點(diǎn)，定義外部css文件的時(shí)候，顏色Flex樣式有四種定義方式：

1:.myclass{fillColor:#6666CC}//16進(jìn)制顏色格式
2:.myclass{borderColor:rgb(77%,22%,0%)}//RGB顏色格式
3:.myclass{errorColor:rgb(0,255,0)}//10進(jìn)制RGB顏色格式
4:.myclass{color:Blue}//VGA顏色名稱格式

2.本地Flex樣式定義

使用來定義當(dāng)前文件的Flex樣式
下面的例子定義了myFontStyle子類Flex樣式，要使用對應(yīng)的Flex樣式可以在組件中使用styleName屬性來應(yīng)用Flex樣式。

1.<mx:Style> 
 
2..myFontStyle{fontSize:15}  
 
3.mx:Style> 
 
4.<mx:Buttonidmx:Buttonid='myButton'styleName='myFontStyle'label='ClickHere'> 
 

 下面的Flex樣式則定義了所有Button組件的Flex樣式，使用該方式定義的Flex樣式在使用的時(shí)候不需要指定Flex樣式名。

1.<mx:Style> 
 
2.Button{fontSize:15}  
 
3.mx:Style> 
 
4.<mx:Buttonidmx:Buttonid='myButton'label='ClickHere'> 

3.內(nèi)嵌Flex樣式定義

對個(gè)別需要特殊處理的組件，可以使用下面的方式進(jìn)行內(nèi)嵌Flex樣式定義

<mx:Buttonidmx:Buttonid='myButton'fontSize='15'  
color='0x9966CC'label='MyButton'/> 

4.使用腳本Flex樣式定義

這種方法使用了Flash傳統(tǒng)的AS腳本方式來定義Flex樣式，具有更強(qiáng)大的靈活性，并且可以使用StyleManager類以及getStyle()和setStyle()方法，如下所示：

1.<mx:Script> 
 
2. 
 
3.//使用styleManger類  
 
4.mx.styles.StyleManager.styles.ToolTip.  
fontWeight='bold';  
 
5.//獲取組件Flex樣式  
 
6.lb1.text=ip1.getStyle('fontSize');  
 
7.//設(shè)置組件Flex樣式  
 
8.lb1.text=ip1.setStyle('fontSize',newSize);  
 
9.]]> 
 
10.mx:Script> 
 

 如果三種Flex樣式定義方式同時(shí)使用的話，優(yōu)先級別從高到低依次為：內(nèi)嵌式Flex樣式>本地Flex樣式定義(腳本Flex樣式定義)>外部Flex樣式定義

特殊Flex樣式定義

在進(jìn)行Flex樣式定義的時(shí)候，我們需要注意幾種Flex特殊的Flex樣式定義

1.全局Flex樣式定義

對所有未被定義的控制組件應(yīng)用globalFlex樣式

1.global{  
 
2.fontSize:22;  
 
3.textDecoration:underline;  
 
4.}  

2.應(yīng)用程序Flex樣式定義

Application標(biāo)記是Flex的根標(biāo)記，ApplicationFlex樣式用來定義未被定義的容器以及子容器的Flex樣式

1.Application{  
 
2.marginLeft:0px;  
 
3.marginRight:0px;  
 
4.marginTop:0px;  
 
5.marginBottom:0px;  
 
6.horizontalAlign:'left';  
 
7.}  

【編輯推薦】

1. 技術(shù)分享 如何修改默認(rèn)的Flex樣式
2. Flex主題創(chuàng)建及支持的樣式設(shè)置方式
3. 全面認(rèn)識Flex應(yīng)用程序的六大元素
4. 揭開Flex正則表達(dá)式的神秘面紗
5. Flex數(shù)據(jù)綁定及其使用頻繁的幾種情況