FLEX实践：引用外部CSS文件控制外观

xiaoer_1982

<!--[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了，来实践一下引用外部CSS文件全局控制组件的外观（本例子非常的EASY！）
1） 创建FLEX主程序CssTest.mxml

<?xml version="1.0"encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
<mx:Stylesource="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）创建被引用的CSS文件（路径与CssTest.mxml一样）CssTest.css

/* CSS file */
.MyTextStyle
{
font-family:Copacetix;
font-size:24pt;
color:#2f103e;
cornerRadius:19;
width:142;
}

3）运行结果：

<!--[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:href="http://p.blog.csdn.net/images/p_blog_csdn_net/meteorlWJ/EntryImages/20090225/333.jpg" /></v:shape><![endif]--><!--[if !vml]--><!--[endif]-->
结语：如果不精通CSS或是对所经用到的控件的属性内容不熟悉的，我推荐一个方法：
在页面上设置好你想要的控件的样式（将颜色，大小，字体等等属性从源代码中COPY出来，粘贴到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:href="http://p.blog.csdn.net/images/p_blog_csdn_net/meteorlWJ/EntryImages/20090225/444.jpg" /></v:shape><![endif]--><!--[if !vml]--><!--[endif]-->

在SOURCE中得到它的属性设置
<mx:Button x="217" y="206"label="Button" width="104" height="32"fontSize="15" cornerRadius="13" color="#B62F19"fontWeight="bold" alpha="0.49"/>

OK，现在可以将这些属性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 中代码变为：
<?xmlversion="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>
运行结果：