《FLEX中应用CSS完全详解手册.pdf》由会员分享,可在线阅读,更多相关《FLEX中应用CSS完全详解手册.pdf(13页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、在 FLEX 中使用样式方法一、使用本地样式定义使用 标签在 MXML 文件中创建本地的样式定义。这个标签包含了符合CSS2.0 语法的样式表定义。这些定义会应用到当前文档以及当前文档的子文档。.solidBorder/类选择样式border-style:solid;button/组件定义样式border-style:solid;./应用到组件/文档中的 button 自动应用样式表中的样式二、使用外部样式表FLEX支持外部 CSS样式表。要应用一个样式表到当前文档和子文档,使用标签中的 source 属性。/载入外部样式表.style.css 文件中的样式表定义与本地样式定义相同。三、使用内
2、联样式可以像设定组件的属性一样在MXML 标签中设定样式属性。内联样式的优先级高于本地样式和外部样式。/设定样式属性四、使用setStyle()方法可以在 ActionScript中使用方法来操作组件的样式属性。使用setStyle()方法的优先级是最高的。/组件初始化时调用设定样式的五、脚本方法各组件对应的样式属性themeColor 主题颜色:如果对色彩样式配置不想过多的去设置的话,themeColor 是一个选择。它可以让你选择一种基本色彩,然后组件的边框,外观等色彩将会以此色彩为基础构成一组缺省的样式,组件均可使用此样式属性。Application组件样式属性backgroundIma
3、ge背景图使用 Embed(source=);来应用backgroundColor背景色backgroundGradientColors背景渐进色这个属性要设置2 个色彩,渐进起始色和渐进结束色,中间以逗号分隔backgroundGradientAlphas背景渐进色透明度这个属性要设置2 个透明度,对应渐进色中的 2 种颜色值的范围是0.001.00,中间以逗号分隔panel组件样式属性cornerRadius边角度数 panel 外框边角度数数值从0280 时为直角,数值越大,圆角弧度越大headerHeight标题头高度panel 标题头的高度数值从050 dropShadowEnabl
4、ed是否显示投影true 和 false2 个属性shadowDistance投影大小 dropShadowEnabled为 true 时有效数值从 020 shadowDirection投影方向 3 个属性 leftrightcenter dropShadowColor投影的颜色roundedBottomCorners底部边角是否为圆角true 和 false2 个属性若为false,则底部边角为直角,cornerRadius 对其无影响;若为true,cornerRadius 对底部边角才会起作用textAlign文字对齐方向3 个属性 leftrightcenter background
5、Color背景色除 title 外有内容的部分背景色backgroundAlpha背景透明度除title 外有内容的部分背景透明度数值从0.001.00 borderColor边框色包括外边框和title 与主体内容之间的边框色borderAlpha边框透明度包括外边框和title 与主体内容之间的边框透明度数值从0.001.00 borderStyle边框样式undefined,none,solid3 种样式:默认为undefined。当取值为none 或solid 时,title 与主体内容之间将无边框间隔或是solid 样式。borderThickness边框厚度边框样式为solid 时
6、的边框粗细程度,数值从020 headerColors标题头背景渐变色这个属性要设置2 个色彩,渐进起始色和渐进结束色,中间以逗号分隔footerColors底部背景渐变色这个属性要设置2 个色彩,渐进起始色和渐进结束色,中间以逗号分隔highlightAlphas高光透明度只针对headerColors 有效。有 2 个数值,中间以逗号分隔前一个为高光亮度,从 0.001.00,为 1 时最亮,为白色后一个为高光透明度,从0.001.00,为 1 时最透明(可通过设置制作出水晶半透明效果)color文本颜色若想设置 panel 中 title 中的字体,外观,背景等样式,为了不与panel
7、中样式相冲突,需在样式表中定义一个引用的样式。panel.titleStyleName:myTitleStyle;.然后新定义一个myTitleStyle样式来设置title 的样式。TabNavigator组件样式属性tabHeight每个 Tab 的高度数值从050 tabWidth每个 Tab 的宽度数值从0200 cornerRadius边角圆角度每个Tab 中主体内容的边角圆角度从020 注意不是 Tab 的边角horizontalGap每个 Tab 之间的间隔宽度数值从-1020当为负数时,Tab 将会出现重叠horizontalAlignTab的对齐方向leftcenterrig
8、ht paddingLeft左填充距离整个一组Tab 的左填充距离,数值从020.不是指每个 Tab 的填充距离paddingRight右填充距离整个一组Tab 的右填充距离,数值从020.不是指每个Tab 的填充距离textAlign文本对齐方向每个Tab 中主体内容中的文本对齐方向leftcenterright textIndentTab标题偏移度每个Tab 中标题相对于居中位置的偏移程度数值从020 backgroundColor背景色 Tab 和 Tab 中主体内容都会应用此背景色backgroundAlpha背景色透明度只针对Tab 中主体内容的背景色有效数值从0.001.00 bo
9、rderStyle边框样式Tab 中主体内容的边框样式nonesolidinsetoutset四种样式borderColor边框颜色 Tab 中主体内容的边框颜色borderThickness边框粗细 borderStyle为 solid 时有效数值从020 dropShadowEnabled是否显示投影true 和 false2 个属性shadowDistance投影大小 dropShadowEnabled为 true 时有效数值从020 dropShadowColor投影的颜色color主体内容的文本颜色若想设置 TabNavigator 中 tab 中的样式,为了不与TabNavigat
10、or 中样式相冲突,需在样式表中定义一个引用的样式。TabNavigator.tabStyleName:myTabs;.然后新定义一个myTabs样式来设置tab 的样式。myTabs中的设置cornerRadiusTab边角圆角度每个Tab 的边角圆角度从020 注意不是 Tab 主体内容的边角fillColorsTab填充渐变色未选中的Tab 的填充渐变色这个属性要设置2 个色彩,渐变起始色和渐变结束色,中间以逗号分隔fillAlphasTab填充色透明度未选中的Tab 的填充色透明度这个属性要设置2 个值,渐变起始色透明度和渐变结束色透明度,中间以逗号分隔,数值从0.001.00 bac
11、kgroundColorTab背景色选中的Tab 会应用上背景色backgroundAlphaTab背景色透明度数值从0.001.00 borderColorTab边框颜色textRollOverColor鼠标经过 Tab 时的 Tab 文字颜色Accordion组件样式属性headerHeight标签头高度Accordion 组件中每个标签头的高度dropShadowEnabled是否显示投影true 和 false2 个属性shadowDistance投影的大小从020 shadowDirection投影方向 leftrightcenter dropShadowColor投影的颜色bord
12、erStyle边框的样式nonesolid borderThickness边框的粗细从020 backgroundColor背景色整个Accordion 组件包括标签头和主体内容都会应用上背景色fillColors未选中的标签头填充色这个属性要设置4 个色彩值:渐变起始色,渐变结束色,鼠标经过时渐变起始色,鼠标经过时渐变结束色fillAlphas未选中的标签头填充色透明度对应于fillColors 设置 4 个透明度数值从0.001.00 selectedFillColors选中的标签头填充色这个属性要设置2 个色彩值:渐变起始色,渐变结束色color 标签头文字的颜色textRollOver
13、Color鼠标经过标签头时的文字颜色textSelectedColor鼠标点击标签头时的文字颜色textIndent标签头文字缩进距离的大小数值从0100 openDuration打开新标签的速度数值从01000 LinkBar组件样式属性horizontalGap水平方向各链接之间的间隔数值从020 separatorWidth间隔线的粗细各链接之间间隔线的粗细数值从020 separatorColor间隔线的颜色borderStyleLinkBar的边框样式nonesolid borderColor边框颜色borderThickness边框粗细程度数值从020 cornerRadius边框
14、圆角度数值从020 dropShadowEnabled是否显示边框投影true 和 false shadowDistance投影大小数值从020 shadowDirection投影方向 leftcenterright dropShadowColor投影颜色backgroundColor背景色backgroundAlpha背景色透明度数值从0.001.00 color 链接文字颜色disabledColor选中的链接文字颜色rollOverColor鼠标经过未选中的链接时的背景色textRollOverColor鼠标经过未选中的链接时的文字色selectionColor鼠标点击未选中的链接时的背
15、景色textSelectedColor鼠标点击未选中的链接时的文字色ApplicationControlBar组件样式属性cornerRadius边框圆角度数值从020 dropShadowEnabled是否显示边框投影true 和 false shadowDistance投影大小数值从020 dropShadowColor投影颜色borderStyle边框样式defaultnonesolid borderColor边框颜色borderThickness边框粗细数值从020 backgroundColor背景颜色fillColors填充渐变色这个属性要设置2 个色彩,渐变起始色和渐变结束色,中
16、间以逗号分隔fillAlphas填充色透明度这个属性要设置2 个透明度渐变起始色透明度和渐变结束色透明度highlightAlphas高光透明度2 个数值,中间以逗号分隔前一个为高光亮度,从 0.001.00,为 1 时最亮,为白色后一个为高光透明度,从0.001.00,为 1 时最透明(可通过设置制作出水晶半透明效果)backgroundColor背景色List 组件样式属性backgroundColor背景色backgroundAlpha背景色透明度数值从0.001.00 useRollOver是否使用鼠标经过List 每一项时产生效果truefalse rollOverColor鼠标经过
17、每一项时的背景色useRollOver 为 true 时有效textRollOverColor鼠标经过每一项时的文字颜色useRollOver 为 true 时有效alternatingItemColorsList中间隔背景色这个属性要设置2 个色彩,某一项的背景色和下一项的背景色color 选项文本颜色selectionColor被选中项的背景色textSelectedColor被选中项的文字颜色textIndent选项文本缩进距离selectionDuration被选中项渐变速度被选中项背景色变为selectionColor中的值的速度,设置可实现渐变效果数值从05000值越大,渐变速度越
18、慢borderStyle边框样式 nonesolid.borderColor边框颜色borderThickness边框粗细数值从020 dropShadowEnabled是否显示投影true 和 false2 个属性shadowDistance投影大小 dropShadowEnabled为 true 时有效数值从020,shadowDirection投影方向3 个属性 leftrightcenter dropShadowColor投影的颜色DataGrid组件样式属性backgroundColor背景色backgroundAlpha背景色透明度数值从0.001.00 alternatingIt
19、emColors间隔背景颜色间隔项的颜色这个属性要设置2 个色彩,某一项的背景色和下一项的背景色headerColors标题头背景渐变颜色这个属性要设置2 个色彩,标题头背景渐变起始色和标题头背景渐变结束色horizontalGridLines是否显示横向分隔线是否显示每一行之间的横向分隔线truefalse horizontalGridLineColor横向分隔线颜色horizontalGridLines为 true 时有效verticalGridLines是否显示垂直方向分隔线是否显示每一行之间的横向分隔线truefalse 此属性只对内容中的分隔线有效,标题头的分隔线是默认的vertic
20、alGridLineColor 垂直方向分隔线颜色verticalGridLineColor为 true 时有效useRollOver是否实现鼠标经过时的变化效果truefalse rollOverColor鼠标经过一行时的本行背景色useRollOver 为 true 时有效textRollOverColor鼠标经过一行时的本行文字颜色useRollOver 为 true 时有效(这个属性好像无效?)color 文字颜色textSelectedColor被选中行的文字颜色(这个属性好像无效?)selectionColor被选中行的背景颜色textIndent每一行文字缩进距离数值从030 T
21、ree 组件样式属性backgroundColor背景色backgroundAlpha背景色透明度数值从0.001.00 alternatingItemColors间隔行的颜色这个属性设置2 个色彩,某一行的背景色和下一行的背景色depthColors 树级结构中每级的背景色这个属性可设置多个色彩,中间以逗号分隔。对应从树的顶级到最后一级每 1 级的背景色。设置此属性会覆盖alternatingItemColors中的设置useRollOver是否使用鼠标经过每一行时的效果truefalse rollOverColor鼠标经过每一行时的背景色useRollOver 为 true 时有效text
22、RollOverColor鼠标经过每一行时的文字颜色useRollOver 为 true 时有效borderThickness边框的粗细数值从020 color 文本颜色selectionColor被选中行的背景色textSelectedColor被选中行的文本颜色textIndent文字缩进值文字相对于图标的缩进值从050 indentation每一层级相对于上一层级的缩进值从050 openDuration打开和关闭本层内容的速度从01000 selectionDuration被选中层级的背景色渐变速度从03000 TextInput组件样式属性backgroundColor背景色back
23、groundAlpha背景色透明度数值从0.001.00color文本颜色borderStyle边框样式nonesolidinset outset borderColor边框颜色borderThickness边框粗细 borderStyle为 solid 时有效数值从020 cornerRadius边框圆角度borderStyle 为 solid 时有效数值从020 textIndent输入框中内容缩进值数值从020 dropShadowEnabled是否显示投影truefalse shadowDirection投影方向 leftcenterright shadowDistance投影大小数值
24、从020 dropShadowColor投影颜色NumericStepper组件样式属性backgroundColor背景色backgroundAlpha背景色透明度数值从0.001.00 borderStyle边框样式nonesolidinset fillColors上翻和下拉键的渐变填充色这个属性要设置4 个色彩值:渐变起始色,渐变结束色,鼠标经过时渐变起始色,鼠标经过时渐变结束色fillAlphas填充色透明度针对fillColors 属性这个属性要设置4 个透明度渐变起始色透明度渐变结束色透明度鼠标经过时渐变起始色透明度鼠标经过时渐变结束色透明度数值从0.001.00 highligh
25、tAlphas高光透明度针对fillColors 属性2 个数值,中间以逗号分隔前一个为高光亮度,从 0.001.00,为 1 时最亮,为白色后一个为高光透明度,从 0.001.00,为 1 时最透明dropShadowEnabled是否显示投影truefalse shadowDirection投影方向 leftcenterright shadowDistance投影大小数值从020 dropShadowColor投影颜色ComboBox组件样式属性color 所有选项中文本颜色borderColor边框颜色cornerRadius边框圆角度数值从020 fillColors被选择项的渐变填充
26、色这个属性要设置4 个色彩值:渐变起始色,渐变结束色,鼠标经过时渐变起始色,鼠标经过时渐变结束色fillAlphas填充色透明度针对fillColors 属性这个属性要设置4 个透明度渐变起始色透明度渐变结束色透明度鼠标经过时渐变起始色透明度鼠标经过时渐变结束色透明度数值从0.001.00 highlightAlphas高光透明度针对fillColors属性2 个数值,中间以逗号分隔前一个为高光亮度,从0.001.00,为 1 时最亮,为白色后一个为高光透明度,从0.001.00,为 1 时最透明(可通过设置制作出水晶半透明效果)backgroundAlpha下拉框的背景透明度数值从0.001
27、.00 alternatingItemColors下拉框中选项的间隔背景色这个属性设置2 个色彩,某一行的背景色和下一行的背景色useRollOver下拉框中选项是否使用鼠标经过时的效果truefalse rollOverColor下拉框中选项鼠标经过时的背景色useRollOver 为 true 时有效textRollOverColor下拉框中选项鼠标经过时的文本颜色useRollOver 为 true 时有效selectionColor下拉框中点击某一行选项时的此选项背景色textSelectedColor下拉框中点击某一行选项时的此选项文本颜色openDuration打开下拉框的速度数值
28、从102000 closeDuration关闭下拉框的速度数值从102000 CheckBox组件样式属性(包含单选和多选)borderColor边框颜色color文本颜色textRollOverColor鼠标经过选择框时的文本颜色textSelectedColor鼠标点击选择框时的文本颜色fillColors选择框的背景填充色这个属性要设置4 个色彩值:渐变起始色,渐变结束色,鼠标经过时渐变起始色,鼠标经过时渐变结束色fillAlphas填充色透明度针对fillColors 属性这个属性要设置4 个透明度渐变起始色透明度渐变结束色透明度鼠标经过时渐变起始色透明度鼠标经过时渐变结束色透明度数值从0.001.00 highlightAlphas高光透明度针对fillColors属性2 个数值,中间以逗号分隔前一个为高光亮度,从0.001.00,为 1 时最亮,为白色后一个为高光透明度,从0.001.00,为 1 时最透明(可通过设置制作出水晶半透明效果)HSlider(类似于温度刻度计的组件HSlider 为横向的)组件样式属性labelOffset刻度值文字与刻度计之间的距离数值从-5050 负数时刻度值文字在刻度计下方正数时在上方thumbOffset刻度计中的游标与标尺之间的距离数值从-5050负数时游标在标尺下方