在Flex中施用CSS

在Flex中使用CSS
一.使用<mx:Style>标签
xml 代码

<?xml version="1.0" encoding="utf-8"?>  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">             <mx:Style>          Button {              color: #ff0000;              borderColor: #cccccc;              themeColor: #00ff00;              fontFamily: Arial;              fontSize: 12;              fontWeight: normal;           }           .mylinkButton {              rollOverColor: #00ff00;              selectionColor: #00ff00;              color: #ffff00;           }       </mx:Style>             <mx:Button x="10" y="10" label="Button"/>      <mx:LinkButton styleName="mylinkButton" label="LinkButton" x="10" y="40"/>         </mx:Application> 

二.使用css文件
使用css文件和使用<mx:Style>标签基本一样。先创建一个css文件mystyle.css，并将上面的样式内容复制进去。
css 代码

/* CSS file */  Button {      color: #ff0000;      borderColor: #cccccc;      themeColor: #00ff00;      fontFamily: Arial;      fontSize: 12;      fontWeight: normal;   }   .mylinkButton {      rollOverColor: #00ff00;      selectionColor: #00ff00;      color: #ffff00;      textRollOverColor: #0000ff;   }  

再修改我们的主程序，使用<mx:Style>标签的source属性，指定css文件
xml 代码

<?xml version="1.0" encoding="utf-8"?>  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">             <mx:Style source="css/mystyle.css"/>             <mx:Button x="10" y="10" label="Button"/>      <mx:LinkButton styleName="mylinkButton" label="LinkButton" x="10" y="40"/>         </mx:Application> 

三.使用编程方法
可以通过CSSStyleDeclaration对象，来设置css样式，也可以通过flex显示对象的setStyle()来设置样式。

private function init():void { myLinkBtn.setStyle("color", "#ff0000"); myLinkBtn.setStyle("rollOverColor", "#ffff00");}

查看更多 下一篇