`

在FLEX中使用样式方法

    博客分类:
  • Flex
阅读更多

在FLEX 中使用样式方法


一、使用本地样式定义

使用<mx:Style>标签在MXML文件中创建本地的样式定义。这个标签包含了符合CSS 2.0语法的样式表定义。这些定义会应用到当前文档以及当前文档的子文档。

<mx:style>
.solidBorder{//类选择样式
border-style:solid;
}

button{//组件定义样式
border-style:solid;
}
....
</mx:style>

//应用到组件

<mx:VBoxstyleName="solidBorder"/>

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


二、使用外部样式表

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

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


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

三、使用内联样式

可以像设定组件的属性一样在MXML标签中设定样式属性。内联样式的优先级高于本地样式和外部样式。
<mx:buttonborderStyle="solid">//设定样式属性

四、使用setStyle()方法

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

<mx:Application...>

<mx:Script>

<![CDATA[privatefunctiominitButton():void{myButton.setStyle("paddingTop",12);myButton.setStyle("paddingBottom",12);}]]>

</mx:Script>

<mx:Buttonid="myButton"initialize="initButton();">//组件初始化时调用设定样式的


五、脚本方法

</mx:Application> 各组件对应的样式属性

themeColor主题颜色:如果对色彩样式配置不想过多的去设置的话,themeColor是一个选择。它可以让你选择一种基本色彩,然后组件的边框,外观等色彩将会以此色彩为基础构成一组缺省的样式,组件均可使用此样式属性。



Application组件样式属性

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

backgroundColor 背景色

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

backgroundGradientAlphas 背景渐进色透明度这个属性要设置2个透明度,对应渐进色中的2种颜色值的范围是0.00~1.00,中间以逗号分隔

panel组件样式属性

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

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

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

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

shadowDirection 投影方向3个属性leftrightcenter

dropShadowColor 投影的颜色

roundedBottomCorners 底部边角是否为圆角true和false2个属性若为false,则底部边角为直角,cornerRadius对其无影响;若为true,cornerRadius对底部边角才会起作用

textAlign 文字对齐方向3个属性leftrightcenter

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

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

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

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

borderStyle 边框样式undefined,none,solid3种样式:默认为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的样式。

TabNavigator 组件样式属性

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

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

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

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

horizontalAlignTab 的对齐方向leftcenterright

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

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

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

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

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

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

borderStyle 边框样式Tab中主体内容的边框样式

nonesolidinsetoutset 四种样式

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

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

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

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

dropShadowColor 投影的颜色

color主体内容的文本颜色

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

TabNavigator{

...

tabStyleName:"myTabs";

...

}

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

myTabs中的设置

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

fillColorsTab 填充渐变色未选中的Tab的填充渐变色这个属性要设置2个色彩,渐变起始色和渐变结束色,中间以逗号分隔

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

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

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

borderColorTab 边框颜色

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

Accordion 组件样式属性

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

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

shadowDistance 投影的大小从0~20

shadowDirection 投影方向leftrightcenter

dropShadowColor 投影的颜色

borderStyle 边框的样式nonesolid

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 间隔线的颜色

borderStyleLinkBar 的边框样式nonesolid

borderColor 边框颜色

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

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

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

shadowDistance 投影大小数值从0~20

shadowDirection 投影方向leftcenterright

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 边框样式defaultnonesolid

borderColor 边框颜色

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每一项时产生效果truefalse

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

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

alternatingItemColorsList 中间隔背景色这个属性要设置2个色彩,某一项的背景色和下一项的背景色color选项文本颜色

selectionColor 被选中项的背景色

textSelectedColor 被选中项的文字颜色

textIndent 选项文本缩进距离

selectionDuration 被选中项渐变速度被选中项背景色变为

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

borderStyle 边框样式 none\solid\..

borderColor 边框颜色

borderThickness 边框粗细数值从0~20

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

shadowDistance 投影大小dropShadowEnabled为true时有效数值从0~20,shadowDirection投影方向3个属性leftrightcenter

dropShadowColor 投影的颜色

DataGrid 组件样式属性

backgroundColor 背景色

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

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

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

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

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

verticalGridLines 是否显示垂直方向分隔线是否显示每一行之间的横向分隔线truefalse此属性只对内容中的分隔线有效,标题头的分隔线是默认的

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

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

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 是否使用鼠标经过每一行时的效果truefalse

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.00color文本颜色

borderStyle 边框样式nonesolidinset outset

borderColor边框颜色

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

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

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

dropShadowEnabled 是否显示投影truefalse

shadowDirection 投影方向leftcenterright

shadowDistance 投影大小数值从0~20

dropShadowColor 投影颜色

NumericStepper 组件样式属性

backgroundColor 背景色

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

borderStyle 边框样式nonesolidinset

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

fillAlphas 填充色透明度针对fillColors属性这个属性要设置4个透明度渐变起始色透明度渐变结束色透明度鼠标经过时渐变起始色透明度鼠标经过时渐变结束色透明度数值从0.00~1.00

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

dropShadowEnabled 是否显示投影truefalse

shadowDirection 投影方向leftcenterright

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 下拉框中选项是否使用鼠标经过时的效果truefalse

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时最透明(可通过设置制作出水晶半透明效果)

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

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

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

分享到:
评论

相关推荐

    在FLEX中使用CSS样式方法

    在Flex中使用CSS样式方法是构建富互联网应用程序(RIA)的关键技术之一。Flex是一个基于ActionScript和Flash Player的开源框架,用于开发交互式、数据驱动的Web应用。它允许开发者利用CSS来控制组件的外观和布局,...

    Flex_Css完全手册.docFlex关于样式专题.pdf

    在FLEX中使用样式方法 2 一 .使用本地样式定义 2 二、使用外部样式表 3 三、使用内联样式 4 四、使用setStyle()方法 4 五、脚本方法 4 Application组件样式属性 5 panel组件样式属性 5 color文本颜色 6 TabNavigator...

    Flex中的CSS样式

    要应用外部样式表,只需在`&lt;mx:Style&gt;`标签中使用`source`属性指定样式表文件的路径: ```xml ``` `style.css`文件中的样式表定义与本地样式定义相似,但通常更便于维护和共享。 #### 三、使用内联样式 内联...

    flex移动布局,极简公共样式包,附demo

    在现代Web开发中,Flex布局(Flexible Box布局)已经成为创建响应式、动态和灵活的用户界面的标准工具。这个“flex移动布局,极简公共样式包”正是为了方便开发者快速构建适应不同屏幕尺寸的移动端应用而设计的。让...

    应用flash制作flex样式

    SWF可以直接在Flex中使用,而SVG则可能需要转换为SWF或使用Flex支持的其他格式。 3. **创建Flex皮肤类**:在Flex项目中,为每个组件创建相应的皮肤类。这些类通常继承自Flex的基础皮肤类,并通过@SkinClass注解关联...

    关于flex 的css样式表

    - Flexbox在现代浏览器中广泛支持,但在较旧版本的IE浏览器中可能需要使用其他方法(如CSS Grid)或使用polyfill库来实现兼容。 5. **实际应用** - 导航栏:通过`justify-content`实现水平居中或两端对齐。 - ...

    Flex样式生成工具

    7. **导出和导入**:生成的样式可以导出为CSS或MXML格式,方便在Flex项目中使用;同时,也可以导入现有的样式文件进行编辑。 8. **预览功能**:实时预览样式修改,确保在实际应用中的效果符合预期。 9. **资源库**...

    flex特效 不错的flex样式生成器

    这个“flex特效 不错的flex样式生成器”是一个工具,可以帮助开发者更轻松地生成适用于Flex布局的CSS样式。通过图形化的界面,用户可以直观地调整各种属性,以实现所需的布局效果。 首先,让我们深入理解Flex布局的...

    flex 嵌入文字样式

    标题“flex 嵌入文字样式”和描述“flex 嵌入外部文字样式,弥补flex内部字体不足的缺憾”提示我们关注如何在Flex容器中使用自定义或外部字体来增强文本表现力。 首先,让我们了解Flex布局的基本概念。Flex布局允许...

    Flex3 StyleExplorer 样式生成器

    在Flex 3中,样式系统是一个强大的特性,它提供了丰富的自定义可能性,让应用程序界面能够根据品牌或者用户需求进行个性化设计。StyleExplorer就是为了解锁这一潜力而存在的。通过这个工具,你可以预览不同的样式...

    FLEX界面样式表工具

    在Flex中,样式可以通过以下几种方式应用: 1. **全局样式(Global Styles)**:这些样式影响整个应用程序,通常定义在皮肤或主应用MXML文件中。 2. **组件样式(Component Styles)**:特定于某个组件实例,可以在...

    flex样式设计器

    在本“Flex样式设计器”中,我们可以方便地对元素进行布局设计,实现灵活多变的界面效果。 1. **Flex容器(Container)**:Flex布局中的主体是Flex容器,它可以包含一个或多个Flex项目。容器通过设置`display`属性...

    Flex样式范例网站

    在"Flex样式范例网站"中,我们可以期待看到一系列关于如何使用Flexbox进行网页设计的实例。 Flexbox的主要目标是为容器内的子元素提供更灵活的布局控制,包括水平或垂直对齐、自动换行、自适应大小分配等。在传统...

    Flex样式生成工具(定制各种Flex按钮网页css样式)

    使用Flex样式生成工具,开发者可以自定义这些Flex元素的样式,包括但不限于按钮的尺寸、颜色、边框、阴影、字体、间距等属性。 在这款工具中,你可以选择预设的按钮样式作为基础,然后通过拖动滑块或输入数值来调整...

    flex 样式选择器

    Flex样式选择器是Adobe Flex框架中的一个重要组成部分,用于在Flex应用程序中定义和管理用户界面元素的外观。这个选择器允许开发者以声明式的方式定制控件的样式,从而实现丰富的视觉效果和交互体验。Flex框架是基于...

    flex类名组合样式.css

    flex的属性的整理,可以直接使用类名进行组合实现flex布局。项目的属性,order,flex-grow,flex-shrink,flex-basis,flex.需要在项目中添加对应的样式

    [Flash/Flex] 使用css定义文本样式

    以上就是关于Flash和Flex中使用CSS定义文本样式的详细说明,通过灵活运用CSS,开发者可以创建出丰富多样的用户界面,提升应用的整体视觉效果。在实际开发中,理解并掌握CSS在Flash/Flex中的应用是非常重要的技能。

    Flex样式设计工具

    总结来说,Flex样式设计工具是Flex开发过程中的强大辅助,它们为样式编辑提供了便利,促进了Flex应用程序的美观性和用户体验。通过使用这些工具,开发者不仅可以更高效地管理样式,还能更好地掌握Flex的样式系统,...

    flex的Alert样式设置

    在IT行业中,尤其是在移动应用开发领域,Flex是一个广泛使用的框架,它允许开发者构建灵活、响应式的用户界面。这里我们关注的是“flex的Alert样式设置”,这涉及到如何自定义和美化在Flex应用程序中显示的警告...

    Flex\Flex关于样式专题

    Flex是Adobe公司开发的一种用于创建富互联网应用程序(RIA)的技术,它基于ActionScript和MXML,主要用于构建可自适应各种屏幕尺寸和设备的...希望这个Flex样式专题能对你有所帮助,祝你在Flex开发的道路上越走越远!

Global site tag (gtag.js) - Google Analytics