Flex中如何使用Flex樣式定義和字體

本篇內(nèi)容主要講解“Flex中如何使用Flex樣式定義和字體”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Flex中如何使用Flex樣式定義和字體”吧!

Flex中使用樣式和字體

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

Flex樣式定義類型

1.外部樣式表

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

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

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

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

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

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

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樣式定義

使用<mx:Style>來定義當(dāng)前文件的樣式

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

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

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

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

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

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

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

4.使用腳本Flex樣式定義

這種方法使用了Flash傳統(tǒng)的AS腳本方式來定義樣式，具有更強(qiáng)大的靈活性，并且可以使用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.//設(shè)置組件樣式   8.lb1.text=ip1.setStyle('fontSize',newSize);   9.]]>  10.</mx:Script>

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

特殊Flex樣式定義

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

1.全局Flex樣式定義

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

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

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

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

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

關(guān)于字體的Flex樣式定義

1.使用設(shè)備字體

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來應(yīng)用該字體樣式，如：

1.Accordion{   2.fontFamily:myfont   3.}

到此，相信大家對(duì)“Flex中如何使用Flex樣式定義和字體”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！