FLEX實踐：引用外部CSS檔案控制外觀

 

結語：如果不精通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>

 

運行結果：