flex4组件：自定义外观

《flex4组件：自定义外观》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第13章Flex4组件：自定义外观13.1样式13.2皮肤13.1样式13.1.1FlexCSS简介CSS（CasscadingStyleSheet）是层叠样式表的简称，它是描述文档怎样被呈现的语言，由W3C指定为规范。CSS标准最早应用于Web开发中，使得程序开发和界面开发分离，可以对网页获得更好的控制和更高的灵活性。Flex中的样式也支持CSS标准，即Flex应用程序也可以使用CSS呈现。由于CSS的简单、方便等优点，逐渐成为了Flex应用程序美化界面的最重要的方法，在Flex中的应用前景越来越广泛。13.1.1FlexCSS简介1．样式名（1）自定义

2、样式名。自定义样式名以“.”开头，后接一个自定义的名称，表示此样式为自定义样式名，例如以下代码定义了一个自定义样式myStytle：.myStytle{fontSize:15;color:#000fff;}13.1.1FlexCSS简介（2）组件名作为样式名。例如以下代码：@namespaces"library://ns.adobe.com/flex/spark";@namespacemx"library://ns.adobe.com/flex/halo";s

3、Button{color:#ff0000;}mx

4、Button{color:

5、#000000;}13.1.1FlexCSS简介（3）组件id作为样式名。将组件的id值作为样式名，在组件的id值前面加上“#”，可以直接对某一个组件设置样式，例如：#okButton{fontSize:15;color:#ffffff;}组件代码如下所示：13.1.1FlexCSS简介（4）分组样式名。分组样式名用于定义几种内容完全相同的样式，不同的样式名之间使用逗号“,”隔开，从而使CSS代码更简洁。例如：.myStyle,s

6、Button{fontSi

7、ze:15;color:#000fff;}（5）全局选择器。使用global关键字作为样式名将定义一个全局样式，这样就可以将该样式应用到程序中的所有组件中，除非组件重写某个组件的样式。例如：global{fontSize:15;color:#ff00ff;}13.1.1FlexCSS简介2．属性Flex中的样式属性既可以在样式中定义，也可以直接在组件属性中设置。以下根据功能的不同具体介绍在Flex4中可以应用的常用样式属性。（1）字体。Flex4中的字体类属性主要用于定义组件中字体的样式，常用的字体属性如表13.1所示。属性名说明fontFamily要使用

8、的字体名称或用逗号分隔的字体名称列表。Flash运行时使用列表中的第一个可用字体呈现该元素fontLookup要使用的字体查找，有效值为device（系统字体）或embedded_cff（嵌入字体）fontSize字体大小，默认单位为像素fontStyle是否使用斜体，值为normal时用于纯文本，值为italic时用于斜体fontWeight字体是否粗细，有效值为normal（正常）或bold（加粗）color字体颜色13.1.1FlexCSS简介以下代码定义字体的样式：.test{fontFamily:黑体;fontSize:18;fontStyle:

9、italic;fontWeight:bold;color:blue;}应用样式后的效果如图所示。13.1.1FlexCSS简介（2）文本。Flex4中的文本类属性主要用于定义文本的样式，常用的文本属性如表13.2所示。以下代码定义了文本样式：.test{textAlign:right;textAlpha:0.5}设置文本样式后的结果如图所示。13.1.1FlexCSS简介（3）定位。定位样式属性用于组件的定位，常用的定位属性如表13.3所示。属性名说明left从组件左边到其父容器的内容区域左边之间的水平距离right从组件右边到其父容器的内容区域右边之间的

10、水平距离top从组件顶边到其父容器的内容区域顶边之间的垂直距离bottom从组件底边到其父容器的内容区域底边之间的垂直距离paddingLeft容器左边缘与文本之间的空间paddingRight容器右边缘与文本之间的空间paddingBottom容器底部边缘与文本之间的空间paddingTop容器顶部边缘与文本之间的空间horizontalCenter从组件内容区域的中心到组件中心的水平距离verticalCenter从组件内容区域的中心到组件中心的垂直距离13.1.1FlexCSS简介（4）背景。Flex4中的背景类样式属性用于设置组件的背景样式，常用的

11、属性如表13.4所示。属性名说明backgroundColor组件