Formatting Text Fields with Cascading Style Sheets

Định dạng văn bản lĩnh vực Cascading Style Sheets Cascading Style Sheets (CSS) đã trở thành một công cụ thiết yếu trong việc tạo ra các trang Web hiện đại vì những khả năng định dạng phong phú, họ cung cấp. Với Flash MX 2004, các trường văn bản bây giờ có quyền truy cập (mặc dù phần nào hạn chế) cho rằng sức mạnh như nhau. Chú ý Bài học này không phải là để được một tổng quan rộng lớn của Cascading Style Sheets...
Nội dung trích xuất từ tài liệu:
Formatting Text Fields with Cascading Style Sheets < Day Day Up >Formatting Text Fields with Cascading Style SheetsCascading Style Sheets (CSS) have become an essential tool in the creation of modernWeb pages because of the extensive formatting capabilities they provide. With Flash MX2004, text fields now have access (albeit somewhat limited) to that same power.NOTEThis lesson is not intended to be an extensive overview of Cascading Style Sheets, butrather a simple introduction.A Cascading Style Sheet is a set of rules that describe how various elements are styledand formatted in a tag-based document. Although this might sound complicated, itsactually very simple. As always, the best learning tool is an example.Imagine you have an HTML document structured like this:Hello!I hope to see you soon.DerekThis document doesnt contain any of the normal HTML tags. Instead, it contains textplaced between custom tags that we made up. This is the first part of the Cascading StyleSheet equation; next, we create our style sheet to describe the formatting that each ofthese tags represents://this is our cascading style sheetgreeting { color: #663399; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; display: block;}message { color: #FF3300; font-size: 12px; font-weight: normal; display: block;}signature { color: #990000; font-size: 14px; font-weight: italic; display: block;}This style sheet contains three rules: greeting, message, and signature. The formatting ofeach rule is defined within the curly braces. Each line within the curly braces represents aformatting property (color, font-family, font-size, and so on) followed by a colon (:),followed by the value of the property, followed by a semicolon (;).When this style sheet is applied to our HTML document, text between specific tags takeson the formatting of that tag as defined in the style sheet; therefore, the text Hello!appears in a purple, bold, 16-pixel, sans-serif font.There are major benefits to using style sheets. Formatting your document is a breezebecause the styling of elements requires the use of a single tag, as opposed to a bunch ofnested tags. Another benefit is that if you have several hundred or even thousand HTMLdocuments that get their styling via a style sheet, updating the rules in that single stylesheet automatically updates the formatting of all those documents.Although the standard that defines modern Cascading Style Sheet usage allows for someextensive formatting capabilities, Flashs implementation of Cascading Style Sheetfunctionality is somewhat limited. Well discuss this in a moment, but now lets look athow Cascading Style Sheets are used in Flash.Cascading Style Sheets can be used in Flash to define how text displayed in a dynamictext field should be formatted. The CSS can be defined internally within a movie usingActionScript, or can exist externally from Flash in a text document with a .css fileextension. Creating and using Cascading Style Sheets within Flash requires use of theStyleSheet object. The syntax used to define the rules in the style sheet varies dependingon whether the style sheet is internal or external. To help bring this all together, lets lookat an example:var myStyleSheet:TextField.StyleSheet = new TextField.StyleSheet();This line creates a StyleSheet object named myStyleSheet. The setStyle() method is usedto define rules for this object within Flash:myStyleSheet.setStyle(greeting, { color: #663399, fontFamily: Arial, Helvetica, sans-serif, fontSize: 16, fontWeight: bold, display: block});This syntax creates a greeting rule (similar to the one discussed earlier) within themyStyleSheet object. However, there are some syntactical differences between thisdefinition and the one shown earlier. The syntax shown earlier represents the standardsyntactical structure of a Cascading Style Sheet (including external style sheets thatwould be loaded into Flash). The syntax shown above for defining a style is unique toActionScript, and should only be used when defining rules using the setStyle() method.The main differences to note here are that the style is defined within parentheses; thestyles name is within quotes, followed by a comma; property values are between singlequotes (), property settings are terminated by commas instead of semicolons; and the lastproperty definition (in this case, display) is not terminated by anything. Another subtledifference is the fact that standard style sheet syntax defines property names usinghyphens (font-family, font-weight, and so on), but internally these same properties aredefined by removing the hyphen and using an uppercase character instead (fontFamily,fontWeight, and so on).To apply thi ...