Flex4组件自定义外观

Flex中的样式也支持CSS标准，即Flex应用程序也可以使用CSS呈现。由于CSS的 简单、方便等优点，逐渐成为了Flex应用程序美化界面的最重要的方法，在Flex中的 应用前景越来越广泛。
13.1.1 Flex CSS简介
1．样式名 （1）自定义样式名。 自定义样式名以“.”开头，后接一个自定义的名称，表示此样式为自定义样式
13.1.1 Flex CSS简介
2．属性 Flex中的样式属性既可以在样式中定义，也可以直接在组件属性中设置。以下
根据功能的不同具体介绍在Flex 4中可以应用的常用样式属性。 （1）字体。 Flex 4中的字体类属性主要用于定义组件中字体的样式，常用的字体属性如表
13.1所示。
属性名
fontFamily
fontLookup fontSize fontStyle fontWeight color
说明
要使用的字体名称或用逗号分隔的字体名称列表。Flash运行时使用列表中的第一个可用 字体呈现该元素
要使用的字体查找，有效值为device（系统字体）或embedded_cff（嵌入字体） 字体大小，默认单位为像素 是否使用斜体，值为normal时用于纯文本，值为italic时用于斜体 字体是否粗细，有效值为normal（正常）或bold（加粗） 字体颜色
paddingBottom
paddingTop
horizontalCenter
verticalCenter
说明 从组件左边到其父容器的内容区域左边之间的水平距离 从组件右边到其父容器的内容区域右边之间的水平距离 从组件顶边到其父容器的内容区域顶边之间的垂直距离 从组件底边到其父容器的内容区域底边之间的垂直距离 容器左边缘与文本之间的空间 容器右边缘与文本之间的空间
contentBackgroundAlpha
rollOverColor cornerRadius
alternatingItemColors
accentColor
说明 组件的整个边界矩形的背景色 由backgroundColor 样式定义的颜色的透明度值 组件的主要颜色，仅适用于spark主题 组件内容的背景颜色，仅适用于spark主题
组件内容背景的透明度，仅适用于spark主题
鼠标位于组件上时加亮的颜色 组件的角的半径 列表中项目使用的背景色。此值是由两种或更多种颜色组成的数组。列表项目的 背景色将从数组中的各种颜色之间选取 组件外观使用的强调文字颜色，仅适用于spark主题
13.1.1 Flex CSS简介
（5）边框。 Flex 4中的边框类样式属性用于设置组件的边框样式，常用的属性如表13.5所示。
13.1.1 Flex CSS简介
（4）分组样式名。 分组样式名用于定义几种内容完全相同的样式，不同的样式名之间使用逗号“,” 隔开，从而使CSS代码更简洁。例如： .myStyle, s|Button {
fontSize:15; color:#000fff; } （5）全局选择器。 使用global关键字作为样式名将定义一个全局样式，这样就可以将该样式应用到 程序中的所有组件中，除非组件重写某个组件的样式。例如： global { fontSize:15; color:#ff00ff; }
13.1.1 Flex CSS简介
以下代码定义字体的样式： .test {
fontFamily:黑体; fontSize:18; fontStyle:italic; fontWeight:bold; color:blue; } 应用样式后的效果如图所示。
13.1.1 Flex CSS简介
（2）文本。 Flex 4中的文本类属性主要用于定义文本的样式，常用的文本属性如表13.2所示。 以下代码定义了文本样式： .test {
名，例如以下代码定义了一个自定义样式myStytle： .myStytle { fontSize:15; color:#000fff; }
13.1.1 Flex CSS简介
（2）组件名作为样式名。 例如以下代码： <fx:Style>
@namespace s "library:///flex/spark"; @namespace mx "library:///flex/halo"; s|Button { color: #ff0000; } mx|Button { color: #000000; } </fx:Style>
第13章 Fl1 样式
❖ 13.1.1 Flex CSS简介 CSS（Casscading Style Sheet）是层叠样式表的简称，它是描述文档怎样被呈现
的语言，由W3C指定为规范。CSS标准最早应用于Web开发中，使得程序开发和界面 开发分离，可以对网页获得更好的控制和更高的灵活性。
13.1.1 Flex CSS简介
（3）组件id作为样式名。 将组件的id值作为样式名，在组件的id值前面加上“#”，可以直接对某一个组 件设置样式，例如： #okButton {
fontSize:15; color:#ffffff; } 组件代码如下所示： <s:Button id="okButton" label=" Id设置样式"/>
textAlign:right; textAlpha:0.5 } 设置文本样式后的结果如图所示。
13.1.1 Flex CSS简介
（3）定位。 定位样式属性用于组件的定位，常用的定位属性如表13.3所示。
属性名 left right top bottom paddingLeft paddingRight
容器底部边缘与文本之间的空间
容器顶部边缘与文本之间的空间
从组件内容区域的中心到组件中心的水平距离
从组件内容区域的中心到组件中心的垂直距离
13.1.1 Flex CSS简介
（4）背景。 Flex 4中的背景类样式属性用于设置组件的背景样式，常用的属性如表13.4所示。
属性名 backgroundColor backgroundAlpha chromeColor contentBackgroundColor