flex htmlText中使用css的简单方法

    在设置控件htmlText属性时，经常要涉及到设定样式，引用外部的css文件这种异步的方式用起来的确让人不顺畅。而flex中使用到的css通常都很小，所以有时候将样式直接写在代码里更简单。

    以TextArea为例，为htmlText赋值以前，可以先设置它的css样式，即TextArea.styleSheet属性。

    例如要添加的css样式为:

a:link{
     color:#0000ff;
     text-decoration:underline;
}

  　将这样一个样式添加到styleSheet中去。做法很简单：

//.......
var alinkStyle:Object = new Object();
alinkStyle["color"] = "#0000ff";
alinkStyle[“textDecoration”] = "underline";
styleSheet.setStyle("a:link",alinkStyle);
//......

   tip:可以看到css中text-docoration变成了textDecoration了。

   我们可以设计一个静态函数将上面的过程一步到位：

public static  function addStyle(styleName:String,style:Object,styleSheet:StyleSheet):void{
			styleSheet.setStyle(styleName,style);
}

 　有了这个函数，做上面的功能，就很easy了，而且看起来与css还挺像：

addStyle("a:link",
              {
                 "color":"#0000ff",
                 "textDecoration":"underline"
               },
              styleSheet);

   上个例子，应该就更清楚了：

 

代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()" width="300" height="300">
<mx:Script>
	<![CDATA[
		import mx.controls.TextArea;
		import flash.text.StyleSheet;
		
		private var textArea:TextArea = null;
		private var htmlText:String = null;
		
		/**
		 * 为一个StyleSheet添加一个样式
		 * 样式的名称为styleName
		 * 样式内容放在sytle中
		 */
		public static  function addStyle(styleName:String,style:Object,styleSheet:StyleSheet):void{
			styleSheet.setStyle(styleName,style);
		}
		
		internal function initApp():void{
			textArea = new TextArea();
			htmlText = "<font size='12'>" + 
					   "<b>我的<\/b>" + 
					   "<i>blog<\/i>和" + 
					   "<u>照片<\/u><br>" + 
					   "<\/font>" + 
					   "<a href='http://ioryioryzhan.iteye.com' target='_blank'>" + 
					   "ioryioryzhan.iteye.com" + 
					   "<img src='http://www.mjbox.com/r/io/ioryioryzhan/ZHANZHIHU.jpg'>" + 
					   "<\/a>";
			
			var my_css:StyleSheet = new StyleSheet();		
			//添加<a>标签的样式		
			addStyle("a:link",
			          {
			          	"fontSize":"12",
			            "color":"#0000ff",
			            "textDecoration":"none"			           
			          },
			          my_css);
			
			addStyle("a:hover",
			         { 
			           "fontSize":"12",
			           "color":"#ff0000",
			           "textDecoration":"underline"
			         },
			         my_css);
		    
			
			textArea.styleSheet = my_css;					
			textArea.htmlText = this.htmlText;
				
			textArea.width = 180;
			textArea.height = 180;
			addChild(textArea);
			textArea.x = 50;
			textArea.y = 50;
		}
		
	]]>
</mx:Script>	
</mx:Application>