22
Flex 中的 CSS 样式 使用本地样式定义 使用<mx:Style>标签在 MXML 文件中创建本地的样式定义。这个标签包含了符合 CSS2.0 语法的样式表定 义。这些定义会应用到当前文档以及当前文档的子文档。 <mx:style> .solidBorder{ //类选择样式 border-style:solid; } button { // 组件定义样式 border-style:solid; } .... </mx:style> //应用到组件 <mx:VBox styleName="solidBorder" /> <mx:button/> //文档中的 button 自动应用样式表中的样式 使用外部样式表 FLEX 支持外部 CSS 样式表。要应用一个样式表到当前文档和子文档,使用<mx:Style>标签中的 source 性。 <mx:Application ...> <mx:Style source="style/style.css"/> //载入外部样式表 ... </mx:Application> style.css 文件中的样式表定义与本地样式定义相同。 使用内联样式 可以像设定组件的属性一样在 MXML 标签中设定样式属性。内联样式的优先级高于本地样式和外部样式。 <mx:button borderStyle="solid"> //设定样式属性 使用 setStyle()方法 可以在 ActionScript 中使用方法来操作组件的样式属性。使用 setStyle()方法的优先级是最高的。 <mx:Application ...> <mx:Script> <![CDATA[ private functiom initButton():void { myButton.setStyle("paddingTop",12); myButton.setStyle("paddingBottom",12); } ]]> </mx:Script> <mx:Button id="myButton" initialize="initButton();"> //组件初始化时调用设定样式的脚本方法 </mx:Application> 各组件对应的样式属性

Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

  • Upload
    vudiep

  • View
    273

  • Download
    8

Embed Size (px)

Citation preview

Page 1: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

Flex 中的 CSS 样式 一 使用本地样式定义

使用<mx:Style>标签在 MXML 文件中创建本地的样式定义。这个标签包含了符合 CSS2.0 语法的样式表定

义。这些定义会应用到当前文档以及当前文档的子文档。

<mx:style>

.solidBorder{ //类选择样式

border-style:solid;

}

button { // 组件定义样式

border-style:solid;

}

....

</mx:style>

//应用到组件

<mx:VBox styleName="solidBorder" />

<mx:button/> //文档中的 button 自动应用样式表中的样式

二 使用外部样式表

FLEX 支持外部 CSS 样式表。要应用一个样式表到当前文档和子文档,使用<mx:Style>标签中的 source 属

性。

<mx:Application ...>

<mx:Style source="style/style.css"/> //载入外部样式表

...

</mx:Application>

style.css 文件中的样式表定义与本地样式定义相同。

三 使用内联样式

可以像设定组件的属性一样在 MXML 标签中设定样式属性。内联样式的优先级高于本地样式和外部样式。

<mx:button borderStyle="solid"> //设定样式属性

四 使用 setStyle()方法

可以在 ActionScript 中使用方法来操作组件的样式属性。使用 setStyle()方法的优先级是最高的。

<mx:Application ...>

<mx:Script>

<![CDATA[

private functiom initButton():void {

myButton.setStyle("paddingTop",12);

myButton.setStyle("paddingBottom",12);

}

]]>

</mx:Script>

<mx:Button id="myButton" initialize="initButton();"> //组件初始化时调用设定样式的脚本方法

</mx:Application>

各组件对应的样式属性

Page 2: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

themeColor 主题颜色:如果对色彩样式配置不想过多的去设置的话,themeColor 是一个选择。它可以让

你选择一种基本色彩,然后组件的边框,外观等色彩将会以此色彩为基础构成一组缺省的样式,组件均可

使用此样式属性。

Application 组件样式属性

backgroundImage 背景图 使用 Embed(source=" ");来应用

backgroundColor 背景色

backgroundGradientColors 背景渐进色 这个属性要设置 2 个色彩,渐进起始色和渐进结束色,中间

以逗号分隔

backgroundGradientAlphas 背景渐进色透明度 这个属性要设置 2 个透明度,对应渐进色中的 2 种颜色

值的范围是 0.00~1.00, 中间以逗号分隔

panel 组件样式属性

cornerRadius 边角度数 panel 外框边角度数 数值从 0~28 0 时为直角,数值越大,圆角

弧度越大

headerHeight 标题头高度 panel 标题头的高度 数值从 0~50

dropShadowEnabled 是否显示投影 true 和 false 2 个属性

shadowDistance 投影大小 dropShadowEnabled 为 true 时有效 数值从 0~20

shadowDirection 投影方向 3 个属性 left right center

dropShadowColor 投影的颜色

roundedBottomCorners 底部边角是否为圆角 true 和 false 2 个属性 若为 false,则底部边角为直角,

cornerRadius 对其无影响;若为 true,cornerRadius 对底部边角才会起作用

textAlign 文字对齐方向 3 个属性 left right center

backgroundColor 背景色 除 title 外有内容的部分背景色

backgroundAlpha 背景透明度 除 title 外有内容的部分背景透明度数值从 0.00~1.00

borderColor 边框色 包括外边框和 title 与主体内容之间的边框色

borderAlpha 边框透明度 包括外边框和 title 与主体内容之间的边框透明度 数值从

0.00~1.00

borderStyle 边框样式 undefined,none,solid 3 种样式:默认为 undefined。当取值为 none

或 solid 时,title 与主体内容之间将无边框间隔或是 solid 样式。

borderThickness 边框厚度 边框样式为 solid 时的边框粗细程度,数值从 0~20

headerColors 标题头背景渐变色 这个属性要设置 2 个色彩,渐进起始色和渐进结束色,中间以

逗号分隔

footerColors 底部背景渐变色 这个属性要设置 2 个色彩,渐进起始色和渐进结束色,中间以

逗号分隔

highlightAlphas 高光透明度 只针对 headerColors 有效。有 2 个数值,中间以逗号分隔

前一个为高光亮度,从 0.00~1.00,为 1 时最亮,为白色后一个为高光透明度,从 0.00~1.00,为 1 时最透明

(可通过设置制作出水晶半透明效果)

color 文本颜色

若想设置 panel 中 title 中的字体,外观,背景等样式,为了不与 panel 中样式相冲突,需在样式表中定义一

个引用的样式。

panel {

...

titleStyleName:"myTitleStyle";

...

}

Page 3: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

然后新定义一个 myTitleStyle 样式来设置 title 的样式。

TabNavigator 组件样式属性

tabHeight 每个 Tab 的高度 数值从 0~50

tabWidth 每个 Tab 的宽度 数值从 0~200

cornerRadius 边角圆角度 每个 Tab 中主体内容的边角圆角度 从 0~20 注意不是 Tab 的边角

horizontalGap 每个 Tab 之间的间隔宽度 数值从-10~20 当为负数时,Tab 将会出现重叠

horizontalAlign Tab 的对齐方向 left center right

paddingLeft 左填充距离 整个一组 Tab 的左填充距离,数值从 0~20.不是指每个 Tab 的

填充距离

paddingRight 右填充距离 整个一组 Tab 的右填充距离,数值从 0~20.不是指每个 Tab 的

填充距离

textAlign 文本对齐方向 每个 Tab 中主体内容中的文本对齐方向 left center right

textIndent Tab 标题偏移度 每个 Tab 中标题相对于居中位置的偏移程度 数值从 0~20

backgroundColor 背景色 Tab 和 Tab 中主体内容都会应用此背景色

backgroundAlpha 背景色透明度 只针对 Tab 中主体内容的背景色有效 数值从 0.00~1.00

borderStyle 边框样式 Tab 中主体内容的边框样式 none solid inset outset 四种样式

borderColor 边框颜色 Tab 中主体内容的边框颜色

borderThickness 边框粗细 borderStyle 为 solid 时有效 数值从 0~20

dropShadowEnabled 是否显示投影 true 和 false 2 个属性

shadowDistance 投影大小 dropShadowEnabled 为 true 时有效 数值从 0~20

dropShadowColor 投影的颜色

color 主体内容的文本颜色

若想设置 TabNavigator 中 tab 中的样式,为了不与 TabNavigator 中样式相冲突,需在样式表中定义一个引

用的样式。

TabNavigator {

...

tabStyleName:"myTabs";

...

}

然后新定义一个 myTabs 样式来设置 tab 的样式。

myTabs 中的设置

cornerRadius Tab 边角圆角度 每个 Tab 的边角圆角度 从 0~20 注意不是 Tab 主体内容的

边角

fillColors Tab 填充渐变色 未选中的 Tab 的填充渐变色 这个属性要设置 2 个色彩,渐变

起始色和渐变结束色,中间以逗号分隔

fillAlphas Tab 填充色透明度 未选中的 Tab 的填充色透明度 这个属性要设置 2 个值,渐

变起始色透明度和渐变结束色透明度,中间以逗号分隔,数值从 0.00~1.00

backgroundColor Tab 背景色 选中的 Tab 会应用上背景色

backgroundAlpha Tab 背景色透明度 数值从 0.00~1.00

borderColor Tab 边框颜色

textRollOverColor 鼠标经过 Tab 时的 Tab 文字颜色

Accordion 组件样式属性

Page 4: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

headerHeight 标签头高度 Accordion 组件中每个标签头的高度

dropShadowEnabled 是否显示投影 true 和 false 2 个属性

shadowDistance 投影的大小 从 0~20

shadowDirection 投影方向 left right center

dropShadowColor 投影的颜色

borderStyle 边框的样式 none solid

borderThickness 边框的粗细 从 0~20

backgroundColor 背景色 整个 Accordion 组件包括标签头和主体内容都会应用上背景色

fillColors 未选中的标签头填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结束

色,鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 未选中的标签头填充色透明度 对应于 fillColors设置 4个透明度 数值从 0.00~1.00

selectedFillColors 选中的标签头填充色 这个属性要设置 2 个色彩值:渐变起始色,渐变结束色

color 标签头文字的颜色

textRollOverColor 鼠标经过标签头时的文字颜色

textSelectedColor 鼠标点击标签头时的文字颜色

textIndent 标签头文字缩进距离的大小 数值从 0~100

openDuration 打开新标签的速度 数值从 0~1000

LinkBar 组件样式属性

horizontalGap 水平方向各链接之间的间隔 数值从 0~20

separatorWidth 间隔线的粗细 各链接之间间隔线的粗细数值从 0~20

separatorColor 间隔线的颜色

borderStyle LinkBar 的边框样式 none solid

borderColor 边框颜色

borderThickness 边框粗细程度 数值从 0~20

cornerRadius 边框圆角度 数值从 0~20

dropShadowEnabled 是否显示边框投影 true 和 false

shadowDistance 投影大小 数值从 0~20

shadowDirection 投影方向 left center right

dropShadowColor 投影颜色

backgroundColor 背景色

backgroundAlpha 背景色透明度 数值从 0.00~1.00

color 链接文字颜色

disabledColor 选中的链接文字颜色

rollOverColor 鼠标经过未选中的链接时的背景色

textRollOverColor 鼠标经过未选中的链接时的文字色

selectionColor 鼠标点击未选中的链接时的背景色

textSelectedColor 鼠标点击未选中的链接时的文字色

ApplicationControlBar 组件样式属性

cornerRadius 边框圆角度 数值从 0~20

dropShadowEnabled 是否显示边框投影 true 和 false

shadowDistance 投影大小 数值从 0~20

dropShadowColor 投影颜色

borderStyle 边框样式 default none solid

borderColor 边框颜色

Page 5: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

borderThickness 边框粗细 数值从 0~20

backgroundColor 背景颜色

fillColors 填充渐变色 这个属性要设置 2 个色彩,渐变起始色和渐变结束色,

中间以逗号分隔

fillAlphas 填充色透明度 这个属性要设置 2 个透明度 渐变起始色透明度和渐变

结束色透明度

highlightAlphas 高光透明度 2 个数值,中间以逗号分隔 前一个为高光亮度,从

0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通过设置制作出

水晶半透明效果)

backgroundColor 背景色

List 组件样式属性

backgroundColor 背景色

backgroundAlpha 背景色透明度 数值从 0.00~1.00

useRollOver 是否使用鼠标经过 List 每一项时产生效果 true false

rollOverColor 鼠标经过每一项时的背景色 useRollOver 为 true 时有效

textRollOverColor 鼠标经过每一项时的文字颜色 useRollOver 为 true 时有效

alternatingItemColors List 中间隔背景色 这个属性要设置 2 个色彩,某一项的背景色和下一

项的背景色

color 选项文本颜色

selectionColor 被选中项的背景色

textSelectedColor 被选中项的文字颜色

textIndent 选项文本缩进距离

selectionDuration 被选中项渐变速度 被选中项背景色变为 selectionColor 中的值的速度,

设置可实现渐变效果 数值从 0~5000 值越大,渐变速度越慢

borderStyle 边框样式 none solid inset outset

borderColor 边框颜色

borderThickness 边框粗细 数值从 0~20

dropShadowEnabled 是否显示投影 true 和 false 2 个属性

shadowDistance 投影大小 dropShadowEnabled 为 true 时有效 数值从 0~20

shadowDirection 投影方向 3 个属性 left right center

dropShadowColor 投影的颜色

DataGrid 组件样式属性

backgroundColor 背景色

backgroundAlpha 背景色透明度 数值从 0.00~1.00

alternatingItemColors 间隔背景颜色 间隔项的颜色 这个属性要设置 2 个色彩,某一项的背景

色和下一项的背景色

headerColors 标题头背景渐变颜色 这个属性要设置 2 个色彩,标题头背景渐变起始色和

标题头背景渐变结束色

horizontalGridLines 是否显示横向分隔线 是否显示每一行之间的横向分隔线 true false

horizontalGridLineColor 横向分隔线颜色 horizontalGridLines 为 true 时有效

verticalGridLines 是否显示垂直方向分隔线 是否显示每一行之间的横向分隔线 true false

此属性只对内容中的分隔线有效,标题头的分隔线是默认的

verticalGridLineColor 垂直方向分隔线颜色 verticalGridLineColor 为 true 时有效

useRollOver 是否实现鼠标经过时的变化效果 true false

Page 6: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

rollOverColor 鼠标经过一行时的本行背景色 useRollOver 为 true 时有效

textRollOverColor 鼠标经过一行时的本行文字颜色 useRollOver 为 true 时有效(这个属性好像无效?)

color 文字颜色

textSelectedColor 被选中行的文字颜色 (这个属性好像无效?)

selectionColor 被选中行的背景颜色

textIndent 每一行文字缩进距离 数值从 0~30

Tree 组件样式属性

backgroundColor 背景色

backgroundAlpha 背景色透明度 数值从 0.00~1.00

alternatingItemColors 间隔行的颜色 这个属性设置 2 个色彩,某一行的背景色和下一行的

背景色

depthColors 树级结构中每级的背景色 这个属性可设置多个色彩,中间以逗号分隔。对应

从树的顶级到最后一级每 1 级的背景色。设置此属性会覆盖

alternatingItemColors 中的设置

useRollOver 是否使用鼠标经过每一行时的效果 true false

rollOverColor 鼠标经过每一行时的背景色 useRollOver 为 true 时有效

textRollOverColor 鼠标经过每一行时的文字颜色 useRollOver 为 true 时有效

borderThickness 边框的粗细 数值从 0~20

color 文本颜色

selectionColor 被选中行的背景色

textSelectedColor 被选中行的文本颜色

textIndent 文字缩进值 文字相对于图标的缩进值 从 0~50

indentation 每一层级相对于上一层级的缩进值 从 0~50

openDuration 打开和关闭本层内容的速度 从 0~1000

selectionDuration 被选中层级的背景色渐变速度 从 0~3000

TextInput 组件样式属性

backgroundColor 背景色

backgroundAlpha 背景色透明度 数值从 0.00~1.00

color 文本颜色

borderStyle 边框样式 none solid inset outset

borderColor 边框颜色

borderThickness 边框粗细 borderStyle 为 solid 时有效 数值从 0~20

cornerRadius 边框圆角度 borderStyle 为 solid 时有效 数值从 0~20

textIndent 输入框中内容缩进值 数值从 0~20

dropShadowEnabled 是否显示投影 true false

shadowDirection 投影方向 left center right

shadowDistance 投影大小 数值从 0~20

dropShadowColor 投影颜色

NumericStepper 组件样式属性

backgroundColor 背景色

backgroundAlpha 背景色透明度 数值从 0.00~1.00

borderStyle 边框样式 none solid inset outset

Page 7: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

fillColors 上翻和下拉键的渐变填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结

束色,鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors属性 这个属性要设置4个透明度 渐变起始

色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从

0.00~1.00

highlightAlphas 高光透明度 针对 fillColors 属性

2 个数值,中间以逗号分隔 前一个为高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,

从 0.00~1.00,为 1 时最透明

dropShadowEnabled 是否显示投影 true false

shadowDirection 投影方向 left center right

shadowDistance 投影大小 数值从 0~20

dropShadowColor 投影颜色

ComboBox 组件样式属性

color 所有选项中文本颜色

borderColor 边框颜色

cornerRadius 边框圆角度 数值从 0~20

fillColors 被选择项的渐变填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结束

色,鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性 这

个属性要设置 4 个透明度 渐变起始色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过

时渐变结束色透明度 数值从 0.00~1.00

highlightAlphas 高光透明度 针对 fillColors 属性 2 个数值,中间以逗号分隔 前一个为

高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通

过设置制作出水晶半透明效果)

backgroundAlpha 下拉框的背景透明度 数值从 0.00~1.00

alternatingItemColors 下拉框中选项的间隔背景色 这个属性设置 2 个色彩,某一行的背景色和下

一行的背景色

useRollOver 下拉框中选项是否使用鼠标经过时的效果 true false

rollOverColor 下拉框中选项鼠标经过时的背景色 useRollOver 为 true 时有效

textRollOverColor 下拉框中选项鼠标经过时的文本颜色 useRollOver 为 true 时有效

selectionColor 下拉框中点击某一行选项时的此选项背景色

textSelectedColor 下拉框中点击某一行选项时的此选项文本颜色

openDuration 打开下拉框的速度 数值从 10~2000

closeDuration 关闭下拉框的速度 数值从 10~2000

CheckBox 组件样式属性(包含单选和多选)

borderColor 边框颜色

color 文本颜色

textRollOverColor 鼠标经过选择框时的文本颜色

textSelectedColor 鼠标点击选择框时的文本颜色

fillColors 选择框的背景填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变

结束色,鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性 这个属性要设置 4 个透明度 渐变起始

色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从

0.00~1.00

Page 8: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

highlightAlphas 高光透明度 针对 fillColors 属性 2 个数值,中间以逗号分隔 前一个为

高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通

过设置制作出水晶半透明效果)

HSlider(类似于温度刻度计的组件 HSlider 为横向的)组件样式属性

labelOffset 刻度值文字与刻度计之间的距离 数值从-50~50 负数时刻度值文字在刻度计下

方 正数时在上方

thumbOffset 刻度计中的游标与标尺之间的距离 数值从-50~50 负数时游标在标尺下方 正数

时在上方

dataTipOffset

tickLength 刻度线的长度 数值从 0~20

tickOffset 刻度线与标尺之间的距离 数值从-50~50

tickThickness 刻度线的粗细 数值从 0~20

tickColor 刻度线的颜色

borderColor 边框颜色

showTrackHighlight 显示轨迹高光亮度 true false

trackColors 拖动游标时的轨迹颜色 这个属性要设置 2 个色彩值 已经过的轨迹颜色和

未经过的轨迹颜色

fillColors 游标填充渐变色 这个属性要设置 4 个色值:渐变起始色,渐变结束色,鼠

标经过游标时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性 这个属性要设置 4 个透明度 渐变起始

色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从

0.00~1.00

Button 组件样式属性

cornerRadius 边框圆角度 数值从 0`28

textIndent Button 标题文本缩进值 数值从 0`20

paddingLeft Button 内部左侧填充值 数值从 0`20

paddingRight Button 内部右侧填充值 数值从 0`20

paddingTop Button 内部上侧填充值 数值从 0`20

paddingBottom Button 内部下侧填充值 数值从 0`20

fillColors Button 背景填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结束

色,鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性这个属性要设置 4 个透明度 渐变起

始色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从

0.00~1.00

highlightAlphas 高光透明度 针对 fillColors 属性 2 个数值,中间以逗号分隔 前一个为

高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通

过设置制作出水晶半透明效果)

color 文字颜色

textRollOverColor 鼠标经过时的文字颜色

textSelectedColor 鼠标点击时的文字颜色

borderColor 边框颜色

PopUpButton 组件样式属性

Page 9: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

cornerRadius 边框圆角度 数值从 0`28

arrowButtonWidth 下拉按钮宽度 数值从 0`50

popUpGap 点下拉按钮出现的内容与 PopUpButton 之间的距离 数值从-25`25

textIndent PopUpButton 中文本内容的缩进值 数值从 0`20

paddingLeft PopUpButton 中左填充距离 数值从 0`20

paddingRight PopUpButton 中右填充距离 数值从 0`20

paddingTop PopUpButton 中上填充距离 数值从 0`20

paddingBottom PopUpButton 中下填充距离 数值从 0`20

fillColors PopUpButton 背景填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变

结束色,鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性这个属性要设置 4 个透明度 渐变起始

色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从

0.00~1.00

highlightAlphas 高光透明度 针对 fillColors 属性 2 个数值,中间以逗号分隔 前一个为

高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通

过设置制作出水晶半透明效果)

color PopUpButton 文本颜色

textRollOverColor 鼠标经过 PopUpButton 时的文本颜色

textSelectedColor 鼠标点击 PopUpButton 时的文本颜色

borderColor 边框颜色

ButtonBar 组件样式属性

buttonHeight ButtonBar 的高度 数值从 0`50

horizontalGap ButtonBar 中每个 Button 在水平方向的间隔 数值从 0`20

textIndent 每个 Button 中的文本缩进值 数值从 0`20

color 每个 Button 中的文本颜色

textRollOverColor 鼠标经过时每个 Button 中的文本颜色

textSelectedColor 鼠标点击时每个 Button 中的文本颜色

ButtonBar 中 Button 的一些属性需要单独来设置一个样式 buttonStyleName:"myButtonBar";

.myButtonBar 中设置如下:

cornerRadius 边框圆角度 数值从 0`28

fillColors PopUpButton 背景填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结

束色,鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性这个属性要设置 4 个透明度 渐变起始

色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从

0.00~1.00

highlightAlphas 高光透明度 针对 fillColors 属性 2 个数值,中间以逗号分隔 前一个为

高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通

过设置制作出水晶半透明效果)

ScrollBar 组件样式属性

分为 VScrollBar 和 HScrollBar(横向和纵向滚动条),属性样式要在 2 个中分别设置

cornerRadius 边框圆角度 数值从 0`16

borderColor 滚动条边框颜色

fillColors 滚动条填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结束色,

Page 10: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性这个属性要设置 4 个透明度 渐变起始

色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从

0.00~1.00

highlightAlphas 高光透明度 针对 fillColors 属性 2 个数值,中间以逗号分隔 前一个为

高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通

过设置制作出水晶半透明效果)

rackColors 滚动栏中滚动条之外的地方的渐变色 这个属性要设置 2 个色彩值:渐变起始色,

渐变结束色

DateChooser 组件样式属性

cornerRadius 边框圆角度 数值从 0`28

borderThickness 边框粗细 数值从 0`15

headerColors 呈现年月的头部背景色 这个属性要设置 2 个色彩值:渐变起始色,渐变结束色

fillColors 滚动条填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结束色,

鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性

这个属性要设置 4 个透明度 渐变起始色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经

过时渐变结束色透明度 数值从 0.00~1.00

highlightAlphas 高光透明度 针对 fillColors 属性

2 个数值,中间以逗号分隔 前一个为高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,

从 0.00~1.00,为 1 时最透明(可通过设置制作出水晶半透明效果)

todayColor 今日的背景颜色

rollOverColor 鼠标经过日期时的背景颜色

selectionColor 所选择日期的颜色

color 日期的文本颜色

borderColor 边框颜色

backgroundColor 除头部外的日期面板背景色

backgroundAlpha 除头部外的日期面板背景透明度 值从 0.00~1.00

dropShadowEnabled 是否显示投影 true false

shadowDistance 投影大小 dropShadowEnabled 为 true 时有效 值从 0~20

shadowDirection 投影方向 left right center

dropShadowColor 投影的颜色

MenuBar 组件样式属性

cornerRadius 边框圆角度 数值从 0`30

backgroundColor 下拉的子菜单中背景颜色

borderColor 边框颜色

fillColors 菜单填充背景色 这个属性要设置 2 个色彩值:渐变起始色,渐变结束色

fillAlphas 菜单填充背景色透明度 这个属性要设置 2 个透明度:渐变起始色透明度,渐

变结束色透明度

highlightAlphas 鼠标经过菜单时的高光亮度 2 个数值,中间以逗号分隔 前一个为高光亮度,

从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明

rollOverColor 下拉的子菜单中鼠标经过每一项时的背景色

selectionColor 下拉的子菜单中鼠标点击每一项时的背景色

color 菜单文字颜色

Page 11: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

textRollOverColor 下拉的子菜单中鼠标经过时的文字颜色

textSelectedColor 下拉的子菜单中鼠标点击时的文字颜色

disabledColor 下拉的子菜单中被屏蔽项的背景色

HRule 组件样式属性

strokeColor 划线颜色

shadowColor 阴影颜色

strokeWidth 划线与阴影之间的距离 数值从 0`10

LinkButton 组件样式属性

cornerRadius 边框圆角度

rollOverColor 鼠标经过时的背景色

selectionColor 鼠标点击时的背景色

color 文字颜色

textRollOverColor 鼠标经过时的文字颜色

textSelectedColor 鼠标点击时的文字颜色

paddingLeft 左填充距离 数值从 0`20

paddingRight 右填充距离 数值从 0`20

ProgressBar 组件样式属性

borderColor 边框颜色

barColor 进度条中已经过的进度颜色

trackColors 进度条中未经过的进度渐变色 这个属性要设置 2 个色彩值:渐变起始色,渐

变结束色

color 进度条进度文字颜色

paddingLeft 进度条左填充距离 数值从 0`30

paddingRight 进度条右填充距离 数值从 0`30

textIndent 进度文字相对于进度条的缩进值 数值从 0`30

trackHeight 进度条高度 数值从 0`30

verticalGap 进度文字与进度条之间的垂直间隔距离 数值从 0`30

? Indeterminate 针对 barColor 的颜色为主色调而产生间隔色的进度条效果

文字样式

fontFamily 字体

fontSize 文字大小

color 文字颜色

fontWeight 文字粗细 bold normal

fontStyle 文字斜体 italic normal

textDecoration 文字下划线 underline none

textAlign 文本对齐方向 left center right

paddingLeft 文本所在容器的左填充距离 数值从 0`30

paddingRight 文本所在容器的右填充距离 数值从 0`30

textIndent 文本首行缩进值 数值从 0`30

leading 文本行间距 数值从 0`20

在 FLEX 中有很多方法来使用样式:

Page 12: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

一 使用本地样式定义

使用<mx:Style>标签在 MXML 文件中创建本地的样式定义。这个标签包含了符合 CSS2.0 语法的样式表定

义。这些定义会应用到当前文档以及当前文档的子文档。

<mx:style>

.solidBorder{ //类选择样式

border-style:solid;

}

button { // 组件定义样式

border-style:solid;

}

....

</mx:style>

//应用到组件

<mx:VBox styleName="solidBorder" />

<mx:button/> //文档中的 button 自动应用样式表中的样式

二 使用外部样式表

FLEX 支持外部 CSS 样式表。要应用一个样式表到当前文档和子文档,使用<mx:Style>标签中的 source 属

性。

<mx:Application ...>

<mx:Style source="style/style.css"/> //载入外部样式表

...

</mx:Application>

style.css 文件中的样式表定义与本地样式定义相同。

三 使用内联样式

可以像设定组件的属性一样在 MXML 标签中设定样式属性。内联样式的优先级高于本地样式和外部样式。

<mx:button borderStyle="solid"> //设定样式属性

四 使用 setStyle()方法

可以在 ActionScript 中使用方法来操作组件的样式属性。使用 setStyle()方法的优先级是最高的。

<mx:Application ...>

<mx:Script>

<![CDATA[

private functiom initButton():void {

myButton.setStyle("paddingTop",12);

myButton.setStyle("paddingBottom",12);

}

]]>

</mx:Script>

<mx:Button id="myButton" initialize="initButton();"> //组件初始化时调用设定样式的脚本方法

</mx:Application>

各组件对应的样式属性

themeColor 主题颜色:如果对色彩样式配置不想过多的去设置的话,themeColor 是一个选择。它可以让

你选择一种基本色彩,然后组件的边框,外观等色彩将会以此色彩为基础构成一组缺省的样式,组件均可

Page 13: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

使用此样式属性。

Application 组件样式属性

backgroundImage 背景图 使用 Embed(source=" ");来应用

backgroundColor 背景色

backgroundGradientColors 背景渐进色 这个属性要设置 2 个色彩,渐进起始色和渐进结束色,中间

以逗号分隔

backgroundGradientAlphas 背景渐进色透明度 这个属性要设置 2 个透明度,对应渐进色中的 2 种颜色

值的范围是 0.00~1.00, 中间以逗号分隔

panel 组件样式属性

cornerRadius 边角度数 panel 外框边角度数 数值从 0~28 0 时为直角,数值越大,圆角弧

度越大

headerHeight 标题头高度 panel 标题头的高度 数值从 0~50

dropShadowEnabled 是否显示投影 true 和 false 2 个属性

shadowDistance 投影大小 dropShadowEnabled 为 true 时有效 数值从 0~20

shadowDirection 投影方向 3 个属性 left right center

dropShadowColor 投影的颜色

roundedBottomCorners 底部边角是否为圆角 true 和 false 2 个属性 若为 false,则底部边角为直角,

cornerRadius 对其无影响;若为 true,cornerRadius 对底部边角才会起作用

textAlign 文字对齐方向 3 个属性 left right center

backgroundColor 背景色 除 title 外有内容的部分背景色

backgroundAlpha 背景透明度 除 title 外有内容的部分背景透明度数值从 0.00~1.00

borderColor 边框色 包括外边框和 title 与主体内容之间的边框色

borderAlpha 边框透明度 包括外边框和 title 与主体内容之间的边框透明度 数值从

0.00~1.00

borderStyle 边框样式 undefined,none,solid 3 种样式:默认为 undefined。当取值为 none

或 solid 时,title 与主体内容之间将无边框间隔或是 solid 样式。

borderThickness 边框厚度 边框样式为 solid 时的边框粗细程度,数值从 0~20

headerColors 标题头背景渐变色 这个属性要设置 2 个色彩,渐进起始色和渐进结束色,中间以

逗号分隔

footerColors 底部背景渐变色 这个属性要设置 2 个色彩,渐进起始色和渐进结束色,中间以

逗号分隔

highlightAlphas 高光透明度 只针对 headerColors 有效。有 2 个数值,中间以逗号分隔前一个

为高光亮度,从 0.00~1.00,为 1 时最亮,为白色后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通

过设置制作出水晶半透明效果)

color 文本颜色

若想设置 panel 中 title 中的字体,外观,背景等样式,为了不与 panel 中样式相冲突,需在样式表中定义一

个引用的样式。

panel {

...

titleStyleName:"myTitleStyle";

...

}

然后新定义一个 myTitleStyle 样式来设置 title 的样式。

Page 14: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

TabNavigator 组件样式属性

tabHeight 每个 Tab 的高度 数值从 0~50

tabWidth 每个 Tab 的宽度 数值从 0~200

cornerRadius 角圆角度 每个 Tab 中主体内容的边角圆角度 从 0~20 注意不是 Tab 的边角

horizontalGap 每个 Tab 之间的间隔宽度 数值从-10~20 当为负数时,Tab 将会出现重叠

horizontalAlign Tab 的对齐方向 left center right

paddingLeft 左填充距离 整个一组 Tab 的左填充距离,数值从 0~20.不是指每个 Tab 的

填充距离

paddingRight 右填充距离 整个一组 Tab 的右填充距离,数值从 0~20.不是指每个 Tab 的

填充距离

textAlign 文本对齐方向 每个 Tab 中主体内容中的文本对齐方向 left center right

textIndent Tab 标题偏移度 每个 Tab 中标题相对于居中位置的偏移程度 数值从 0~20

backgroundColor 背景色 Tab 和 Tab 中主体内容都会应用此背景色

backgroundAlpha 背景色透明度 只针对 Tab 中主体内容的背景色有效 数值从 0.00~1.00

borderStyle 边框样式 Tab 中主体内容的边框样式 none solid inset outset 四种样式

borderColor 边框颜色 Tab 中主体内容的边框颜色

borderThickness 边框粗细 borderStyle 为 solid 时有效 数值从 0~20

dropShadowEnabled 是否显示投影 true 和 false 2 个属性

shadowDistance 投影大小 dropShadowEnabled 为 true 时有效 数值从 0~20

dropShadowColor 投影的颜色

color 主体内容的文本颜色

若想设置 TabNavigator 中 tab 中的样式,为了不与 TabNavigator 中样式相冲突,需在样式表中定义一个引

用的样式。

TabNavigator {

...

tabStyleName:"myTabs";

...

}

然后新定义一个 myTabs 样式来设置 tab 的样式。

myTabs 中的设置

cornerRadius Tab 边角圆角度 每个 Tab 的边角圆角度 从 0~20

注意不是 Tab 主体内容的边角

fillColors Tab 填充渐变色 未选中的 Tab 的填充渐变色

这个属性要设置 2 个色彩,渐变起始色和渐变结束色,中间以逗号分隔

fillAlphas Tab 填充色透明度 未选中的 Tab 的填充色透明度

这个属性要设置 2 个值,渐变起始色透明度和渐变结束色透明度,中间以逗号分隔,数值从 0.00~1.00

backgroundColor Tab 背景色 选中的 Tab 会应用上背景色

backgroundAlpha Tab 背景色透明度 数值从 0.00~1.00

borderColor Tab 边框颜色

textRollOverColor 鼠标经过 Tab 时的 Tab 文字颜色

Accordion 组件样式属性

headerHeight 标签头高度 Accordion 组件中每个标签头的高度

dropShadowEnabled 是否显示投影 true 和 false 2 个属性

shadowDistance 投影的大小 从 0~20

Page 15: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

shadowDirection 投影方向 left right center

dropShadowColor 投影的颜色

borderStyle 边框的样式 none solid

borderThickness 边框的粗细 从 0~20

backgroundColor 背景色 整个 Accordion 组件包括标签头和主体内容都会应用上背景色

fillColors 未选中的标签头填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结束

色,鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 未选中的标签头填充色透明度 对应于 fillColors设置 4个透明度 数值从 0.00~1.00

selectedFillColors 选中的标签头填充色 这个属性要设置 2 个色彩值:渐变起始色,渐变结束色

color 标签头文字的颜色

textRollOverColor 鼠标经过标签头时的文字颜色

textSelectedColor 鼠标点击标签头时的文字颜色

textIndent 标签头文字缩进距离的大小 数值从 0~100

openDuration 打开新标签的速度 数值从 0~1000

LinkBar 组件样式属性

horizontalGap 水平方向各链接之间的间隔 数值从 0~20

separatorWidth 间隔线的粗细 各链接之间间隔线的粗细数值从 0~20

separatorColor 间隔线的颜色

borderStyle LinkBar 的边框样式 none solid

borderColor 边框颜色

borderThickness 边框粗细程度 数值从 0~20

cornerRadius 边框圆角度 数值从 0~20

dropShadowEnabled 是否显示边框投影 true 和 false

shadowDistance 投影大小 数值从 0~20

shadowDirection 投影方向 left center right

dropShadowColor 投影颜色

backgroundColor 背景色

backgroundAlpha 背景色透明度 数值从 0.00~1.00

color 链接文字颜色

disabledColor 选中的链接文字颜色

rollOverColor 鼠标经过未选中的链接时的背景色

textRollOverColor 鼠标经过未选中的链接时的文字色

selectionColor 鼠标点击未选中的链接时的背景色

textSelectedColor 鼠标点击未选中的链接时的文字色

ApplicationControlBar 组件样式属性

cornerRadius 边框圆角度 数值从 0~20

dropShadowEnabled 是否显示边框投影 true 和 false

shadowDistance 投影大小 数值从 0~20

dropShadowColor 投影颜色

borderStyle 边框样式 default none solid

borderColor 边框颜色

borderThickness 边框粗细 数值从 0~20

backgroundColor 背景颜色

fillColors 填充渐变色 这个属性要设置 2 个色彩,渐变起始色和渐变结束色,

Page 16: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

中间以逗号分隔

fillAlphas 填充色透明度 这个属性要设置 2 个透明度 渐变起始色透明度和渐变

结束色透明度

highlightAlphas 高光透明度 2 个数值,中间以逗号分隔 前一个为高光亮度,从

0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通过设置制作出

水晶半透明效果)

backgroundColor 背景色

List 组件样式属性

backgroundColor 背景色

backgroundAlpha 背景色透明度 数值从 0.00~1.00

useRollOver 是否使用鼠标经过 List 每一项时产生效果 true false

rollOverColor 鼠标经过每一项时的背景色 useRollOver 为 true 时有效

textRollOverColor 鼠标经过每一项时的文字颜色 useRollOver 为 true 时有效

alternatingItemColors List 中间隔背景色 这个属性要设置 2 个色彩,某一项的背景色和下一

项的背景色

color 选项文本颜色

selectionColor 被选中项的背景色

textSelectedColor 被选中项的文字颜色

textIndent 选项文本缩进距离

selectionDuration 被选中项渐变速度 被选中项背景色变为 selectionColor 中的值的速度,

设置可实现渐变效果 数值从 0~5000 值越大,渐变速度越慢

borderStyle 边框样式 none solid inset outset

borderColor 边框颜色

borderThickness 边框粗细 数值从 0~20

dropShadowEnabled 是否显示投影 true 和 false 2 个属性

shadowDistance 投影大小 dropShadowEnabled 为 true 时有效 数值从 0~20

shadowDirection 投影方向 3 个属性 left right center

dropShadowColor 投影的颜色

DataGrid 组件样式属性

backgroundColor 背景色

backgroundAlpha 背景色透明度 数值从 0.00~1.00

alternatingItemColors 间隔背景颜色 间隔项的颜色 这个属性要设置 2 个色彩,某一项的背景

色和下一项的背景色

headerColors 标题头背景渐变颜色 这个属性要设置 2 个色彩,标题头背景渐变起始色和标

题头背景渐变结束色

horizontalGridLines 是否显示横向分隔线 是否显示每一行之间的横向分隔线 true false

horizontalGridLineColor 横向分隔线颜色 horizontalGridLines 为 true 时有效

verticalGridLines 是否显示垂直方向分隔线 是否显示每一行之间的横向分隔线 true false 此

属性只对内容中的分隔线有效,标题头的分隔线是默认的

verticalGridLineColor 垂直方向分隔线颜色 verticalGridLineColor 为 true 时有效

useRollOver 是否实现鼠标经过时的变化效果 true false

rollOverColor 鼠标经过一行时的本行背景色 useRollOver 为 true 时有效

textRollOverColor 鼠标经过一行时的本行文字颜色 useRollOver 为 true 时有效(这个属性好像无效?)

color 文字颜色

Page 17: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

textSelectedColor 被选中行的文字颜色 (这个属性好像无效?)

selectionColor 被选中行的背景颜色

textIndent 每一行文字缩进距离 数值从 0~30

Tree 组件样式属性

backgroundColor 背景色

backgroundAlpha 背景色透明度 数值从 0.00~1.00

alternatingItemColors 间隔行的颜色 这个属性设置 2 个色彩,某一行的背景色和下一行的

背景色

depthColors 树级结构中每级的背景色 这个属性可设置多个色彩,中间以逗号分隔。对应

从树的顶级到最后一级每 1 级的背景色。设置此属性会覆盖 alternatingItemColors 中的设置

useRollOver 是否使用鼠标经过每一行时的效果 true false

rollOverColor 鼠标经过每一行时的背景色 useRollOver 为 true 时有效

textRollOverColor 鼠标经过每一行时的文字颜色 useRollOver 为 true 时有效

borderThickness 边框的粗细 数值从 0~20

color 文本颜色

selectionColor 被选中行的背景色

textSelectedColor 被选中行的文本颜色

textIndent 文字缩进值 文字相对于图标的缩进值 从 0~50

indentation 每一层级相对于上一层级的缩进值 从 0~50

openDuration 打开和关闭本层内容的速度 从 0~1000

selectionDuration 被选中层级的背景色渐变速度 从 0~3000

TextInput 组件样式属性

backgroundColor 背景色

backgroundAlpha 背景色透明度 数值从 0.00~1.00

color 文本颜色

borderStyle 边框样式 none solid inset

outset

borderColor 边框颜色

borderThickness 边框粗细 borderStyle 为 solid 时有效 数值从 0~20

cornerRadius 边框圆角度 borderStyle 为 solid 时有效 数值从 0~20

textIndent 输入框中内容缩进值 数值从 0~20

dropShadowEnabled 是否显示投影 true false

shadowDirection 投影方向 left center right

shadowDistance 投影大小 数值从 0~20

dropShadowColor 投影颜色

NumericStepper 组件样式属性

backgroundColor 背景色

backgroundAlpha 背景色透明度 数值从 0.00~1.00

borderStyle 边框样式 none solid inset outset

fillColors 上翻和下拉键的渐变填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结

束色,鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性 这个属性要设置 4 个透明度 渐变起

始色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从

Page 18: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

0.00~1.00

highlightAlphas 高光透明度 针对 fillColors 属性

2 个数值,中间以逗号分隔 前一个为高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,

从 0.00~1.00,为 1 时最透明

dropShadowEnabled 是否显示投影 true false

shadowDirection 投影方向 left center right

shadowDistance 投影大小 数值从 0~20

dropShadowColor 投影颜色

ComboBox 组件样式属性

color 所有选项中文本颜色

borderColor 边框颜色

cornerRadius 边框圆角度 数值从 0~20

fillColors 被选择项的渐变填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结束

色,鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性 这个属性要设置 4 个透明度 渐变起始

色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从

0.00~1.00

highlightAlphas 高光透明度 针对 fillColors 属性 2 个数值,中间以逗号分隔 前一个为

高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通

过设置制作出水晶半透明效果)

backgroundAlpha 下拉框的背景透明度 数值从 0.00~1.00

alternatingItemColors 下拉框中选项的间隔背景色 这个属性设置 2 个色彩,某一行的背景色和下

一行的背景色

useRollOver 下拉框中选项是否使用鼠标经过时的效果 true false

rollOverColor 下拉框中选项鼠标经过时的背景色 useRollOver 为 true 时有效

textRollOverColor 下拉框中选项鼠标经过时的文本颜色 useRollOver 为 true 时有效

selectionColor 下拉框中点击某一行选项时的此选项背景色

textSelectedColor 下拉框中点击某一行选项时的此选项文本颜色

openDuration 打开下拉框的速度 数值从 10~2000

closeDuration 关闭下拉框的速度 数值从 10~2000

CheckBox 组件样式属性(包含单选和多选)

borderColor 边框颜色

color 文本颜色

textRollOverColor 鼠标经过选择框时的文本颜色

textSelectedColor 鼠标点击选择框时的文本颜色

fillColors 选择框的背景填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结

束色,鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性 这个属性要设置 4 个透明度 渐变起

始色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从

0.00~1.00

highlightAlphas 高光透明度 针对 fillColors 属性 2 个数值,中间以逗号分隔 前一个为

高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通

过设置制作出水晶半透明效果)

Page 19: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

Hslider(类似于温度刻度计的组件 HSlider 为横向的)组件样式属性)

labelOffset 刻度值文字与刻度计之间的距离 数值从-50~50 负数时刻度值文字在刻度计下

方 正数时在上方

thumbOffset 刻度计中的游标与标尺之间的距离 数值从-50~50 负数时游标在标尺下方 正数

时在上方

dataTipOffset

tickLength 刻度线的长度 数值从 0~20

tickOffset 刻度线与标尺之间的距离 数值从-50~50

tickThickness 刻度线的粗细 数值从 0~20

tickColor 刻度线的颜色

borderColor 边框颜色

showTrackHighlight 显示轨迹高光亮度 true false

trackColors 拖动游标时的轨迹颜色 这个属性要设置 2 个色彩值 已经过的轨迹颜色和

未经过的轨迹颜色

fillColors 游标填充渐变色 这个属性要设置 4 个色彩值:渐变起始色,渐变结束色,

鼠标经过游标时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性 这个属性要设置 4 个透明度 渐变起始

色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从

0.00~1.00

Button 组件样式属性

cornerRadius 边框圆角度 数值从 0`28

textIndent Button 标题文本缩进值 数值从 0`20

paddingLeft Button 内部左侧填充值 数值从 0`20

paddingRight Button 内部右侧填充值 数值从 0`20

paddingTop Button 内部上侧填充值 数值从 0`20

paddingBottom Button 内部下侧填充值 数值从 0`20

fillColors Button 背景填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结束色,

鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性,这个属性要设置 4 个透明度 渐变

起始色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从

0.00~1.00

highlightAlphas 高光透明度 针对 fillColors 属性 2 个数值,中间以逗号分隔 前一个为

高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通

过设置制作出水晶半透明效果)

color 文字颜色

textRollOverColor 鼠标经过时的文字颜色

textSelectedColor 鼠标点击时的文字颜色

borderColor 边框颜色

PopUpButton 组件样式属性

cornerRadius 边框圆角度 数值从 0`28

arrowButtonWidth 下拉按钮宽度 数值从 0`50

popUpGap 点下拉按钮出现的内容与 PopUpButton 之间的距离 数值从-25`25

textIndent PopUpButton 中文本内容的缩进值 数值从 0`20

Page 20: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

paddingLeft PopUpButton 中左填充距离 数值从 0`20

paddingRight PopUpButton 中右填充距离 数值从 0`20

paddingTop PopUpButton 中上填充距离 数值从 0`20

paddingBottom PopUpButton 中下填充距离 数值从 0`20

fillColors PopUpButton 背景填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结

束色,鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性这个属性要设置 4 个透明度 渐变起始

色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从

0.00~1.00

highlightAlphas 高光透明度 针对 fillColors 属性 2 个数值,中间以逗号分隔 前一个为

高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通

过设置制作出水晶半透明效果)

color PopUpButton 文本颜色

textRollOverColor 鼠标经过 PopUpButton 时的文本颜色

textSelectedColor 鼠标点击 PopUpButton 时的文本颜色

borderColor 边框颜色

ButtonBar 组件样式属性

buttonHeight ButtonBar 的高度 数值从 0`50

horizontalGap ButtonBar 中每个 Button 在水平方向的间隔 数值从 0`20

textIndent 每个 Button 中的文本缩进值 数值从 0`20

color 每个 Button 中的文本颜色

textRollOverColor 鼠标经过时每个 Button 中的文本颜色

textSelectedColor 鼠标点击时每个 Button 中的文本颜色 ButtonBar 中 Button 的一些属性需要单独来

设置一个样式 buttonStyleName:"myButtonBar";

.myButtonBar 中设置如下:

cornerRadius 边框圆角度 数值从 0`28

fillColors PopUpButton 背景填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结束色,

鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性这个属性要设置 4 个透明度 渐变起始

色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从

0.00~1.00

highlightAlphas 高光透明度 针对 fillColors 属性 2 个数值,中间以逗号分隔 前一个为

高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通

过设置制作出水晶半透明效果)

ScrollBar 组件样式属性

分为 VScrollBar 和 HScrollBar(横向和纵向滚动条),属性样式要在 2 个中分别设置

cornerRadius 边框圆角度 数值从 0`16

borderColor 滚动条边框颜色

fillColors 滚动条填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结束色,

鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性

这个属性要设置 4 个透明度 渐变起始色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经

过时渐变结束色透明度 数值从 0.00~1.00

Page 21: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

highlightAlphas 高光透明度 针对 fillColors 属性 2 个数值,中间以逗号分隔 前一个为

高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通

过设置制作出水晶半透明效果)

trackColors 滚动栏中滚动条之外的地方的渐变色 这个属性要设置 2 个色彩值:渐变起始色,

渐变结束色

DateChooser 组件样式属性

cornerRadius 边框圆角度 数值从 0`28

borderThickness 边框粗细 数值从 0`15

headerColors 呈现年月的头部背景色 这个属性要设置 2 个色彩值:渐变起始色,渐变结束色

fillColors 滚动条填充色 这个属性要设置 4 个色彩值:渐变起始色,渐变结束

色,鼠标经过时渐变起始色,鼠标经过时渐变结束色

fillAlphas 填充色透明度 针对 fillColors 属性这个属性要设置 4 个透明度 渐变起

始色透明度 渐变结束色透明度 鼠标经过时渐变起始色透明度 鼠标经过时渐变结束色透明度 数值从

0.00~1.00

highlightAlphas 高光透明度 针对 fillColors 属性 2 个数值,中间以逗号分隔 前一个为

高光亮度,从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明(可通

过设置制作出水晶半透明效果)

todayColor 今日的背景颜色

rollOverColor 鼠标经过日期时的背景颜色

selectionColor 所选择日期的颜色

color 日期的文本颜色

borderColor 边框颜色

backgroundColor 除头部外的日期面板背景色

backgroundAlpha 除头部外的日期面板背景透明度 值从 0.00~1.00

dropShadowEnabled 是否显示投影 true false

shadowDistance 投影大小 dropShadowEnabled 为 true 时有效 值从 0~20

shadowDirection 投影方向 left right center

dropShadowColor 投影的颜色

MenuBar 组件样式属性

cornerRadius 边框圆角度 数值从 0`30

backgroundColor 下拉的子菜单中背景颜色

borderColor 边框颜色

fillColors 菜单填充背景色 这个属性要设置 2 个色彩值:渐变起始色,渐变结束色

fillAlphas 菜单填充背景色透明度 这个属性要设置 2 个透明度:渐变起始色透明度,渐

变结束色透明度

highlightAlphas 鼠标经过菜单时的高光亮度 2 个数值,中间以逗号分隔 前一个为高光亮度,

从 0.00~1.00,为 1 时最亮,为白色 后一个为高光透明度,从 0.00~1.00,为 1 时最透明

rollOverColor 下拉的子菜单中鼠标经过每一项时的背景色

selectionColor 下拉的子菜单中鼠标点击每一项时的背景色

color 菜单文字颜色

textRollOverColor 下拉的子菜单中鼠标经过时的文字颜色

textSelectedColor 下拉的子菜单中鼠标点击时的文字颜色

disabledColor 下拉的子菜单中被屏蔽项的背景色

Page 22: Flex 中的 CSS 样式read.pudn.com/downloads110/ebook/456551/Flex_css.pdfborderThickness 边框粗细 数值从0~20 backgroundColor 背景颜色 fillColors 填充渐变色 这个属性要设置2

HRule 组件样式属性

strokeColor 划线颜色

shadowColor 阴影颜色

strokeWidth 划线与阴影之间的距离 数值从 0`10

LinkButton 组件样式属性

cornerRadius 边框圆角度

rollOverColor 鼠标经过时的背景色

selectionColor 鼠标点击时的背景色

color 文字颜色

textRollOverColor 鼠标经过时的文字颜色

textSelectedColor 鼠标点击时的文字颜色

paddingLeft 左填充距离 数值从 0`20

paddingRight 右填充距离 数值从 0`20

ProgressBar 组件样式属性

borderColor 边框颜色

barColor 进度条中已经过的进度颜色

trackColors 进度条中未经过的进度渐变色 这个属性要设置 2 个色彩值:渐变起始色,渐变

结束色

color 进度条进度文字颜色

paddingLeft 进度条左填充距离 数值从 0`30

paddingRight 进度条右填充距离 数值从 0`30

textIndent 进度文字相对于进度条的缩进值 数值从 0`30

trackHeight 进度条高度 数值从 0`30

verticalGap 进度文字与进度条之间的垂直间隔距离 数值从 0`30

Indeterminate 针对 barColor 的颜色为主色调而产生间隔色的进度条效果

文字样式

fontFamily 字体

fontSize 文字大小

color 文字颜色

fontWeight 文字粗细 bold normal

fontStyle 文字斜体 italic normal

textDecoration 文字下划线 underline none

textAlign 文本对齐方向 left center right

paddingLeft 文本所在容器的左填充距离 数值从 0`30

paddingRight 文本所在容器的右填充距离 数值从 0`30

textIndent 文本首行缩进值 数值从 0`30

leading 文本行间距 数值从 0`20