Flex中使用Flex樣式定義和字體
本文和大家重點討論一下Flex中如何使用樣式定義和字體，Flex樣式定義的方法也很多。這也是Flex比Flash要強大、適合網頁開發的地方之一。
Flex中使用樣式和字體
Flex所支持的樣式比Flash要豐富，Flex樣式定義的方法也很多。這也是Flex比Flash要強大、適合網頁開發的地方之一。
Flex樣式定義類型
1.外部樣式表
- <mx:Stylesourcemx:Stylesource='/css/myStyle.css'/>
Flex會調用全局樣式表global.css，該全局樣式表由flex-config.xml定義，如：
- <global-css-url>/WEB-INF/flex/global.css</global-css-url>
系統默認的樣式表文件global.css文件其實沒有任何Flex樣式定義，我們可以手動添加全局樣式，也可以更改默認的全局樣式文件路徑。如，把全局樣式文件該為：
- <global-css-url>/css/styles.css</global-css-url>
在這里順便提一點，定義外部css文件的時候，顏色樣式有四種定義方式：
1:.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顏色名稱格式 #p#
2.本地Flex樣式定義
使用<mx:Style>來定義當前文件的樣式
下面的例子定義了myFontStyle子類樣式，要使用對應的樣式可以在組件中使用styleName屬性來應用樣式。
- 1.<mx:Style>
- 2..myFontStyle{fontSize:15}
- 3.</mx:Style>
- 4.<mx:Buttonidmx:Buttonid='myButton'styleName='myFontStyle'label='ClickHere'>
下面的樣式則定義了所有Button組件的樣式，使用該方式定義的樣式在使用的時候不需要指定樣式名。
- 1.<mx:Style>
- 2.Button{fontSize:15}
- 3.</mx:Style>
- 4.<mx:Buttonidmx:Buttonid='myButton'label='ClickHere'>
3.內嵌Flex樣式定義
對個別需要特殊處理的組件，可以使用下面的方式進行內嵌Flex樣式定義
- <mx:Buttonidmx:Buttonid='myButton'fontSize='15'color='0x9966CC'label='MyButton'/>
4.使用腳本Flex樣式定義
這種方法使用了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樣式定義方式同時使用的話，優先級別從高到低依次為：內嵌式樣式>本地Flex樣式定義(腳本Flex樣式定義)>外部Flex樣式定義。#p#
特殊Flex樣式定義
在進行Flex樣式定義的時候，我們需要注意幾種Flex特殊的Flex樣式定義。
1.全局Flex樣式定義
對所有未被定義的控制組件應用global樣式
- global{
- 2.fontSize:22;
- 3.textDecoration:underline;
- 4.}
2.應用程序Flex樣式定義
Application標記是Flex的根標記，Application樣式用來定義未被定義的容器以及子容器的樣式
- 1.Application{
- 2.marginLeft:0px;
- 3.marginRight:0px;
- 4.marginTop:0px;
- 5.marginBottom:0px;
- 6.horizontalAlign:'left';
- 7.}
#p#關于字體的Flex樣式定義
1.使用設備字體
- 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來應用該字體樣式，如：
- 1.Accordion{
- 2.fontFamily:myfont
- 3.}
【編輯推薦】
