加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Flex中使用CSS

发布时间:2020-12-15 05:13:41 所属栏目:百科 来源:网络整理
导读:一.使用mx:Style标签 xml 代码 ? xml ? version = "1.0" ? encoding = "utf-8" ? ?? mx:Application ? xmlns:mx = "http://www.adobe.com/2006/mxml" ? layout = "absolute" ?? ???? ?? ???? mx:Style ?? ????????Button?{ ?? ???????????color:?#ff0000; ??

一.使用<mx:Style>标签

xml 代码
  1. <?xml?version="1.0"?encoding="utf-8"?>??
  2. <mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="absolute">??
  3. ???? ??
  4. ????<mx:Style>??
  5. ????????Button?{ ??
  6. ???????????color:?#ff0000; ??
  7. ???????????borderColor:?#cccccc; ??
  8. ???????????themeColor:?#00ff00; ??
  9. ???????????fontFamily:?Arial; ??
  10. ???????????fontSize:?12; ??
  11. ???????????fontWeight:?normal; ??
  12. ????????} ??
  13. ????????.mylinkButton?{ ??
  14. ???????????rollOverColor:?#00ff00; ??
  15. ???????????selectionColor:?#00ff00; ??
  16. ???????????color:?#ffff00; ??
  17. ????????} ??
  18. ????</mx:Style>??
  19. ???? ??
  20. ????<mx:Button?x="10"?y="10"?label="Button"/>??
  21. ????<mx:LinkButton?styleName="mylinkButton"?label="LinkButton"?x="10"?y="40"/>??
  22. ???? ??
  23. </mx:Application>??

二.使用css文件
使用css文件和使用<mx:Style>标签基本一样。先创建一个css文件mystyle.css,并将上面的样式内容复制进去。

css 代码
  1. /*?CSS?file?*/??
  2. Button?{ ??
  3. ???color:?#ff0000; ??
  4. ???borderColor:?#cccccc; ??
  5. ???themeColor:?#00ff00; ??
  6. ???fontFamily:?Arial; ??
  7. ???fontSize:?12; ??
  8. ???fontWeight:?normal; ??
  9. } ??
  10. .mylinkButton?{ ??
  11. ???rollOverColor:?#00ff00; ??
  12. ???selectionColor:?#00ff00; ??
  13. ???color:?#ffff00; ??
  14. ???textRollOverColor:?#0000ff; ??
  15. }??

再修改我们的主程序,使用<mx:Style>标签的source属性,指定css文件

xml 代码
  1. <?xml?version="1.0"?encoding="utf-8"?>??
  2. <mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="absolute">??
  3. ???? ??
  4. ????<mx:Style?source="css/mystyle.css"/>??
  5. ???? ??
  6. ????<mx:Button?x="10"?y="10"?label="Button"/>??
  7. ????<mx:LinkButton?styleName="mylinkButton"?label="LinkButton"?x="10"?y="40"/>??
  8. ???? ??
  9. </mx:Application>??

三.使用编程方法
可以通过CSSStyleDeclaration对象,来设置css样式,也可以通过flex显示对象的setStyle()来设置样式。

private function init():void { ?myLinkBtn.setStyle("color","#ff0000"); ?myLinkBtn.setStyle("rollOverColor","#ffff00"); }

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读