css - 柔性 : How to apply CSS to ActionScript Componet?

Question

我有一个 Flex ActionScript 组件。如何将 CSS 应用到该组件？我希望能够应用来自外部 CSS 文件的样式。

文件“global.css”中的 CSS 选择器:

.myPanel
{
color:#cccccc;
background-color:#333333;
border-color:#ff0000;
border-style:solid;
}

我的 Flex 组件:

package components
{
import mx.containers.Panel;

public class myPanel extends Panel
{
public function myPanel()
{
   super();
}

override protected function createChildren():void
{
super.createChildren();
}
}
}

Answer 1

不幸的是，如果您的组件是通过 Actionscript 定义的，您将不得不在构造函数或初始化函数中手动定义您的 css 样式(例如):

//create and initialize css
var myCSS:StyleSheet = new StyleSheet();
myCSS.setStyle("body", {fontSize:'15',color:'#000066'});
myCSS.setStyle("h1", {fontSize:'25',color:'#000000'});
myCSS.setStyle("h2", {fontSize:'19',color:'#000000'});
myCSS.setStyle("a:link", {color:'#0000CC',textDecoration:'none'});
myCSS.setStyle("a:hover", {color:'#0000FF',textDecoration:'underline'});
myCSS.setStyle("b", {fontWeight:'bold'});
myCSS.setStyle("em", {fontWeight:'bold'});

一种更简单的方法是将您的组件定义为 mxml 组件并在 header 中定义样式表，如下所示:

<fx:Style source="../assets/css/global.css"/>

还有你的 CSS 文件: