FLEX实践：引用外部CSS文件控制外观
<!--><mce:style><! v\:* {behavior:url(#default#VML);}o\:* {behavior:url(#default#VML);}w\:* {behavior:url(#default#VML);}.shape {behavior:url(#default#VML);}--><!----><!--><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><!--><!--><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles></xml><!--><!-- /* 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;}--><!--><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;}--><!---->最近又要开始研究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）运行结果：
http://p.blog.csdn.net/images/p_blog_csdn_net/meteorlWJ/EntryImages/20090225/333.jpg
<!--><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><!--><!----><!---->
结语：如果不精通CSS或是对所经用到的控件的属性内容不熟悉的，我推荐一个方法：
在页面上设置好你想要的控件的样式（将颜色，大小，字体等等属性从源代码中COPY出来，粘贴到CSS文件中）
例如：如下的button样式是你想要的
<!--><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><!--><!----><!---->
http://p.blog.csdn.net/images/p_blog_csdn_net/meteorlWJ/EntryImages/20090225/444.jpg
在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>
运行结果：
http://p.blog.csdn.net/images/p_blog_csdn_net/meteorlWJ/EntryImages/20090225/555.jpg
页:
[1]