<!--[if !mso]> <mce:style><! v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} --> <!--[endif]--><!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning /> <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing> <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery> <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery> <w:ValidateAgainstSchemas /> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:SpaceForUL /> <w:BalanceSingleByteDoubleByteWidth /> <w:DoNotLeaveBackslashAlone /> <w:ULTrailSpace /> <w:DoNotExpandShiftReturn /> <w:AdjustLineHeightInTable /> <w:BreakWrappedTables /> <w:SnapToGridInCell /> <w:WrapTextWithPunct /> <w:UseAsianBreakRules /> <w:DontGrowAutofit /> <w:UseFELayout /> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles> </xml><![endif]--><!-- /* Font Definitions */ @font-face {font-family:宋體; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"\@宋體"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; mso-pagination:none; font-size:10.5pt; mso-bidi-font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:宋體; mso-font-kerning:1.0pt;} p {mso-margin-top-alt:auto; margin-right:0cm; mso-margin-bottom-alt:auto; margin-left:0cm; mso-pagination:widow-orphan; font-size:12.0pt; font-family:宋體; mso-bidi-font-family:宋體;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} --><!--[if gte mso 10]> <mce:style><! /* Style Definitions */ table.MsoNormalTable {mso-style-name:普通表格; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman"; mso-fareast-font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;} --> <!--[endif]-->
最近又要開始研究
FLEX
了，來(lái)實(shí)踐一下引用外部
CSS
文件全局控制組件的外觀（本例子非常的
EASY
！）
1
） 創(chuàng)建
FLEX
主程序
CssTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="CssTest.css" />
<mx:Text styleName="MyTextStyle" text="Embedded fonts rock!" width="305" x="431.5" y="127"/>
<mx:Button x="512" y="253" label="Button" styleName="MyTextStyle" />
</mx:Application>
2
）創(chuàng)建被引用的
CSS
文件（路徑與
CssTest.mxml
一樣）
CssTest.css
/* CSS file */
.MyTextStyle
{
font-family: Copacetix;
font-size: 24pt;
color:#2f103e;
cornerRadius:19;
width:142;
}
3
）運(yùn)行結(jié)果：
<!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"> <v:stroke joinstyle="miter" /> <v:formulas> <v:f eqn="if lineDrawn pixelLineWidth 0" /> <v:f eqn="sum @0 1 0" /> <v:f eqn="sum 0 0 @1" /> <v:f eqn="prod @2 1 2" /> <v:f eqn="prod @3 21600 pixelWidth" /> <v:f eqn="prod @3 21600 pixelHeight" /> <v:f eqn="sum @0 0 1" /> <v:f eqn="prod @6 1 2" /> <v:f eqn="prod @7 21600 pixelWidth" /> <v:f eqn="sum @8 21600 0" /> <v:f eqn="prod @7 21600 pixelHeight" /> <v:f eqn="sum @10 21600 0" /> </v:formulas> <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect" /> <o:lock v:ext="edit" aspectratio="t" /> </v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" alt="" style='width:268.5pt; height:165pt'> <v:imagedata src="file:///C:\DOCUME~1\crystal\LOCALS~1\Temp\msohtml1\01\clip_image001.jpg" mce_src="file:///C:\DOCUME~1\crystal\LOCALS~1\Temp\msohtml1\01\clip_image001.jpg" o: /> </v:shape><![endif]--><!--[if !vml]--><!--[endif]-->
結(jié)語(yǔ)：如果不精通
CSS
或是對(duì)所經(jīng)用到的控件的屬性內(nèi)容不熟悉的，我推薦一個(gè)方法：
在頁(yè)面上設(shè)置好你想要的控件的樣式（將顏色，大小，字體等等屬性從源代碼中
COPY
出來(lái)，粘貼到
CSS
文件中）
例如：如下的
button
樣式是你想要的
<!--[if gte vml 1]><v:shape id="_x0000_i1026" type="#_x0000_t75" alt="" style='width:164.25pt;height:88.5pt'> <v:imagedata src="file:///C:\DOCUME~1\crystal\LOCALS~1\Temp\msohtml1\01\clip_image002.jpg" mce_src="file:///C:\DOCUME~1\crystal\LOCALS~1\Temp\msohtml1\01\clip_image002.jpg" o: /> </v:shape><![endif]--><!--[if !vml]--><!--[endif]-->
在
SOURCE
中得到它的屬性設(shè)置
<mx:Button x="217" y="206" label="Button" width="104" height="32" fontSize="15" cornerRadius="13" color="#B62F19" fontWeight="bold" alpha="0.49"/>
OK
，現(xiàn)在可以將這些屬性
COPY
到
CSS
文件中了
CssTest.css
中添加代碼
.MyTextStyle1
{
font-family: Copacetix;
font-size: 15pt;
fontWeight:bold;
color:#B62F19;
cornerRadius:13;
width:104;
height:32;
alpha:0.49;
}
CssTest.mxml
中代碼變?yōu)椋?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="CssTest.css" />
<mx:Text styleName="MyTextStyle" text="Embedded fonts rock!" width="305" x="431.5" y="127"/>
<mx:Button x="512" y="253" label="Button" styleName="MyTextStyle" />
<mx:Button x="217" y="206" label="Button" styleName="
MyTextStyle1
"/>
</mx:Application>
運(yùn)行結(jié)果：
FLEX實(shí)踐：引用外部CSS文件控制外觀