套件 | flash.text |
類別 | public dynamic class StyleSheet |
繼承 | StyleSheet EventDispatcher Object |
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
若要將樣式套用到 TextField 物件,請將 StyleSheet 物件指定到 TextField 物件的 styleSheet
屬性。
注意: 您不能編輯含有樣式表的文字欄位。 換句話說,將文字欄位的 type
屬性設定為 TextFieldType.INPUT
,會將 StyleSheet 套用到文字欄位的預設文字,但是使用者就無法再對內容進行編輯。 因此,請考慮改用 TextFormat 類別,將樣式指定給輸入文字欄位。
Flash Player 支援原始 CSS1 規格 (www.w3.org/TR/REC-CSS1) 中屬性的子集。 下表顯示支援的「階層式樣式表」(CSS) 屬性和值,以及它們的對應 ActionScript 屬性名稱。(每個 ActionScript 屬性名稱都是由對應的 CSS 屬性名稱所衍生,如果名稱包含破折號,其中的破折號會省略,後續的字元則會改為大寫)。
CSS 屬性 | ActionScript 屬性 | 用法和支援的值 |
---|---|---|
color
|
color
| 僅支援 16 進位顏色值。 不支援命名的顏色 (如 blue )。 顏色的撰寫格式如下:#FF0000 。 |
display
|
display
| 支援的值為 inline 、block 及 none 。 |
font-family
|
fontFamily
| 一份以逗號區隔的清單,依照所需字體的遞減順序,列出要使用的字體。 您可以使用任何字體系列名稱。 如果您指定了泛用字體名稱,便會轉換成適用的裝置字體。 可用的字體轉換包括:mono 會轉換為 _typewriter 、sans-serif 會轉換為 _sans ,serif 則會轉換為 _serif 。 |
font-size
|
fontSize
| 只取用值的數字部分。 不會剖析單位 (px、pt);像素和點是一樣的。 |
font-style
|
fontStyle
| 可辨識的值為 normal 和 italic 。 |
font-weight
|
fontWeight
| 可辨識的值為 normal 和 bold 。 |
kerning
|
kerning
| 可辨識的值為 true 和 false 。 只有嵌入字體會支援字距微調。 特定字體 (如 Courier New) 則不支援字距微調。 kerning 屬性只在 Windows 中建立的 SWF 檔支援,在 Macintosh 上建立的 SWF 檔不支援此屬性。 不過,這些 SWF 檔可在非 Windows 版本的 Flash Player 上播放且 kerning 仍然適用。 |
leading
|
leading
| 字行間平均分散的空間量。 此值會指定增加在每一行後的像素數。 負值會壓縮字行間的空間。 只取用值的數字部分。 不會剖析單位 (px、pt);像素和點是一樣的。 |
letter-spacing
|
letterSpacing
| 字元間平均分散的空間量。 此值指定增加在每個字元後的像素數。 負值會壓縮字元間的空間。 只取用值的數字部分。 不會剖析單位 (px、pt);像素和點是一樣的。 |
margin-left
|
marginLeft
| 只取用值的數字部分。 不會剖析單位 (px、pt);像素和點是一樣的。 |
margin-right
|
marginRight
| 只取用值的數字部分。 不會剖析單位 (px、pt);像素和點是一樣的。 |
text-align
|
textAlign
| 可辨識的值為 left 、center 、right 和 justify 。 |
text-decoration
|
textDecoration
| 可辨識的值為 none 和 underline 。 |
text-indent
|
textIndent
| 只取用值的數字部分。 不會剖析單位 (px、pt);像素和點是一樣的。 |
相關 API 元素
屬性 | 定義自 | ||
---|---|---|---|
constructor : Object
類別物件的參照或是特定物件實體的建構函數。 | Object | ||
styleNames : Array [唯讀]
陣列,包含在這個樣式表中註冊的所有樣式名稱 (以字串表示)。 | StyleSheet |
方法 | 定義自 | ||
---|---|---|---|
會建立新的 StyleSheet 物件。 | StyleSheet | ||
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
會在 EventDispatcher 物件註冊事件偵聽程式,以便讓偵聽程式收到事件的通知。 | EventDispatcher | ||
會從樣式表物件移除所有樣式。 | StyleSheet | ||
會將事件傳送到事件流程。 | EventDispatcher | ||
會傳回與名為 styleName 之樣式有關聯的樣式物件副本。 | StyleSheet | ||
會檢查 EventDispatcher 物件是否有對特定的事件類型註冊偵聽程式。 | EventDispatcher | ||
指出物件是否有已定義的指定屬性。 | Object | ||
指出 Object 類別的實體是否位於指定為參數的物件原型鏈中。 | Object | ||
會剖析 CSSText 中的 CSS,並以該 CSS 載入樣式表。 | StyleSheet | ||
指出指定的屬性是否存在,以及是否可列舉。 | Object | ||
會從 EventDispatcher 物件移除偵聽程式。 | EventDispatcher | ||
為迴圈作業設定動態屬性的可用性。 | Object | ||
會以指定的名稱,將新的樣式新增至樣式表物件。 | StyleSheet | ||
傳回代表此物件的字串,根據地區特定慣例進行格式化。 | Object | ||
會傳回指定之物件的字串形式。 | Object | ||
擴充 CSS 解析功能。 | StyleSheet | ||
會傳回指定之物件的基本值。 | Object | ||
檢查此 EventDispatcher 物件是否已註冊事件偵聽程式,或者此物件的任何祖系已為特定事件類型註冊事件偵聽程式。 | EventDispatcher |
styleNames | 屬性 |
StyleSheet | () | 建構函式 |
public function StyleSheet()
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
會建立新的 StyleSheet 物件。
相關 API 元素
clear | () | 方法 |
public function clear():void
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
會從樣式表物件移除所有樣式。
getStyle | () | 方法 |
public function getStyle(styleName:String):Object
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
會傳回與名為 styleName
之樣式有關聯的樣式物件副本。 如果沒有任何樣式物件與 styleName
有關聯,則會傳回 null
。
參數
styleName:String — 字串,指定要擷取的樣式名稱。
|
Object — 一個物件。
|
相關 API 元素
範例
如何使用本範例
如需有關如何使用
getStyle()
方法的說明,請參閱 parseCSS() 或 transform() 方法的範例。
parseCSS | () | 方法 |
public function parseCSS(CSSText:String):void
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
會剖析 CSSText
中的 CSS,並以該 CSS 載入樣式表。 如果 CSSText
中的樣式已經在 styleSheet
中,便會保留 styleSheet
中的屬性,而且只會在 styleSheet
新增或變更 CSSText
中的屬性。
若要擴充原生 CSS 剖析功能,可以建立 StyleSheet 類別的子類別,以覆寫這個方法。
參數
CSSText:String — 要剖析的 CSS 文字 (字串)。
|
範例 ( 如何使用本範例 )
建構函式中會建立多行的文字欄位,並將其內容設定為 HTML 格式的字串 (HTML Heading 和 Span 標籤不會在套用 CSS 樣式之前顯示)。範例會建立 URLRequest
物件以識別 CSS 檔的位置,例如,在這個範例中,該 CSS 檔與 SWF 檔在相同目錄中。檔案會以 URLLoader
物件載入。 範例為 loader
URLLoader 物件加入了兩個事件偵聽程式。 如果發生 IO 錯誤,會叫用 errorHandler()
方法,由它在文字欄位中顯示錯誤訊息。 在接收到所有資料並放在 loader
URLLoader 物件的 data 屬性中之後,會叫用 loaderCompleteHandler()
方法。這個方法會剖析從檔案載入之資料的 CSS 樣式,並在 sheet
StyleSheet 物件中填入樣式定義。
當使用者按一下文字欄位時,會呼叫 clickHandler()
方法。 clickHandler()
方法中的 if 陳述式會檢查確定載入已完成後,再將樣式表套用到文字欄位。 為了讓樣式表開始生效,在將樣式表指定給文字欄位後,必須以內容重新指定 htmlText
屬性。 Heading 標籤的 CSS font-family
和 color
屬性值也會附加到文字欄位的內容中 (如果樣式表值未生效,這些屬性值將是 "undefined")。
下列是可搭配這個範例使用的 CSS 檔內容範例。 執行這個範例之前,請建立文字檔、複製下列 CSS 內容到檔案中,然後將它另存成檔名 test.css
,並放在與 SWF 檔相同的目錄中。
p { font-family: Times New Roman, Times, _serif; font-size: 14; font-Style: italic; margin-left: 10; } h1 { font-family: Arial, Helvetica, _sans; font-size: 20; font-weight: bold; } .bluetext { color: #0000CC; }
package { import flash.display.Sprite; import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.StyleSheet; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.events.IOErrorEvent; import flash.events.Event; import flash.events.MouseEvent; public class StyleSheet_parseCSSExample extends Sprite { private var loader:URLLoader = new URLLoader(); private var field:TextField = new TextField(); private var exampleText:String = "<h1>This is a headline</h1>" + "<p>This is a line of text. <span class='bluetext'>" + "This line of text is colored blue.</span></p>"; private var sheet:StyleSheet = new StyleSheet(); private var cssReady:Boolean = false; public function StyleSheet_parseCSSExample() { field.x = 10; field.y = 10; field.background = true; field.multiline = true; field.autoSize = TextFieldAutoSize.LEFT; field.htmlText = exampleText; field.addEventListener(MouseEvent.CLICK, clickHandler); addChild(field); var req:URLRequest = new URLRequest("test.css"); loader.load(req); loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler); loader.addEventListener(Event.COMPLETE, loaderCompleteHandler); } public function errorHandler(e:IOErrorEvent):void { field.htmlText = "Couldn't load the style sheet file."; } public function loaderCompleteHandler(event:Event):void { sheet.parseCSS(loader.data); cssReady = true; } public function clickHandler(e:MouseEvent):void { if (cssReady) { field.styleSheet = sheet; field.htmlText = exampleText; var style:Object = sheet.getStyle("h1"); field.htmlText += "<p>Headline font-family is: " + style.fontFamily + "</p>"; field.htmlText += "<p>Headline color is: " + style.color + "</p>"; } else { field.htmlText = "Couldn't apply the CSS styles."; } } } }
setStyle | () | 方法 |
public function setStyle(styleName:String, styleObject:Object):void
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
會以指定的名稱,將新的樣式新增至樣式表物件。 如果樣式表中並沒有該命名的樣式,則會新增該樣式。 如果樣式表中已經有該命名的樣式,則會予以取代。 如果 styleObject
參數為 null
,則會移除該命名樣式。
Flash Player 會建立一份您傳遞到這個方法之樣式物件的副本。
如需支援樣式的清單,請參閱表格中 StyleSheet 類別的描述。
參數
styleName:String — 字串,會指定新增至樣式表的樣式名稱。
| |
styleObject:Object — 會說明樣式的物件,或是 null 。
|
transform | () | 方法 |
public function transform(formatObject:Object):flash.text:TextFormat
語言版本: | ActionScript 3.0 |
執行階段版本: | AIR 1.0, Flash Player 9, Flash Lite 4 |
擴充 CSS 解析功能。 進階開發人員可擴充 StyleSheet 類別來覆寫這個方法。
參數
formatObject:Object — 會說明樣式的物件,包含做為物件屬性的樣式規則,或是 null 。
|
flash.text:TextFormat — TextFormat 物件,包含將 CSS 規則對應至文字格式屬性的結果。
|
相關 API 元素
範例 ( 如何使用本範例 )
transform()
方法,將來自 CSS 檔的樣式套用到文字欄位的 TextFormat 物件。
通常使用 CSS 樣式來設定 HTML 內容的格式。 但藉由使用 StyleSheet 物件的 transform()
方法,就可以指定特定 CSS 樣式給 TextFormat 物件,然後套用到任何文字欄位。
URLRequest
和 URLLoader
物件會用來載入 CSS 檔。 範例為 Event.COMPLETE
事件加入了事件偵聽程式,會在接收到所有資料並放在 loader
URLLoader 物件的 data 屬性中之後發生。接著 loaderCompleteHandler()
方法會剖析從檔案載入之資料中的 CSS,並在 sheet
StyleSheet 物件中填入樣式。 樣式表的 getStyle()
方法會擷取 HTML 段落樣式,然後使用樣式表的 transform()
方法將樣式指定給 cssFormat
TextFormat 物件。最後,inputField
文字欄位的預設文字格式會設定為新的 cssFormat
文字格式。
package { import flash.display.Sprite; import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.StyleSheet; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldType; import flash.events.IOErrorEvent; import flash.events.Event; public class StyleSheet_transformExample extends Sprite { private var loader:URLLoader = new URLLoader(); private var inputField:TextField = new TextField(); private var sheet:StyleSheet = new StyleSheet(); public function StyleSheet_transformExample() { inputField.x = 10; inputField.y = 10; inputField.background = true; inputField.width = 300; inputField.height = 200; inputField.wordWrap = true; inputField.multiline = true; inputField.type = TextFieldType.INPUT; addChild(inputField); var req:URLRequest = new URLRequest("test.css"); loader.load(req); loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler); loader.addEventListener(Event.COMPLETE, loaderCompleteHandler); } public function errorHandler(e:IOErrorEvent):void { inputField.htmlText = "Couldn't load the style sheet file."; } public function loaderCompleteHandler(event:Event):void { var cssFormat:TextFormat = new TextFormat(); sheet.parseCSS(loader.data); var style:Object = sheet.getStyle("p"); cssFormat = sheet.transform(style); inputField.defaultTextFormat = cssFormat; } } }
package { import flash.display.Sprite; import flash.text.StyleSheet; import flash.text.TextField; import flash.text.TextFieldAutoSize; public class StyleSheetExample extends Sprite { public function StyleSheetExample() { var style:StyleSheet = new StyleSheet(); var heading:Object = new Object(); heading.fontWeight = "bold"; heading.color = "#FF0000"; var body:Object = new Object(); body.fontStyle = "italic"; style.setStyle(".heading", heading); style.setStyle("body", body); var label:TextField = new TextField(); label.styleSheet = style; label.htmlText = "<body><span class='heading'>Hello </span>World...</body>"; addChild(label); } } }
Tue Jun 12 2018, 03:47 PM Z