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