9.3.嵌入CSS样式

2023-07-29 15:25:47

字体：大中小

来源：转载

供稿：网友

9.3.1.问题
你想在你的程序中利用CSS 为组件嵌入使用样式。
9.3.2.解决办法
在本地定义中定义样式，或者利用<mx:Style>标签的source 属性从外部文件中嵌入使用CSS规则。
9.3.3.讨论
样式可以在编译时通过多种方式嵌入进你的Flex 程序。这一诀窍讲述利用CSS 语法定义嵌入在你程序中的样式。在Flex 中运用CSS,你可以做到以下内容：
? 在MXML 文件的<mx:Style>标签内声明本地样式。
? 设置<mx:Style> 标签的source 属性为外部样式表单。
下面的例子在主程序内局部声明两个类样式，这些样式应用于程序显示的Label 实例：

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Style>
.header {
font-family: 'Arial';
font-size: 15px;
font-weight: 'bold';
color: #FFFFFF;
}
.message {
font-family: 'Arial';
font-size: 12px;
color: #336699;
}
</mx:Style>
<mx:Label text="I have a header style!" styleName="header" />
<mx:Text text="I have a message style!" styleName="message" />
</mx:Application>

本例中，类选择器一旦局部设定便逐项设置Label 组件和Text 组件。每个选择器中定义的属性值将会标签实例的适当元素，同时明确地修改字体。尽管本例为Application 容器局部地定义了样式,自定义MXML 组件同样可以利用<mx:Style> 标签在本子组件内声明样式。

做为选择, 这些样式声明可以放在外部CSS 文件中并且赋值给<mx:Style>标签的source 属性。下述代码可添加到以.css 结尾的文件中，并允许嵌入使用：

-CSS

.header {
font-family: 'Arial';
font-size: 15px;
font-weight: 'bold';
color: #FFFFFF;
}
.message {
font-family: 'Arial';
font-size: 12px;
color: #336699;
}

若要将外部CSS 文件嵌入到你的程序中, 你须将文件路径赋值给<mx:Style>标记的source 属性。如下嵌入了CSS 文件的程序片段, 会产生和前面例子同样的视觉形象。

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Style source="assets/styles/label_styles.css" />
<mx:Label text="Hello!" styleName="header" />
<mx:Text text="Welcome to the example." styleName="message" />
</mx:Application>