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

最近又要开始研究 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: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 ）创建被引用的 CSS 文件（路径与 CssTest.mxml 一样） CssTest.css

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

3 ）运行结果：

结语：如果不精通 CSS 或是对所经用到的控件的属性内容不熟悉的，我推荐一个方法：

在页面上设置好你想要的控件的样式（将颜色，大小，字体等等属性从源代码中 COPY 出来，粘贴到 CSS 文件中）

例如：如下的 button 样式是你想要的

在 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 中代码变为：

<?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>

运行结果：

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

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义