flex
所支援的樣式比
flash
要豐富,樣式定義的方法也很多。這也是
flex
比flash
要強大、適合網頁開發的地方之一。
樣式定義型別
1. 外部樣式表
style source ='/css/mystyle.css' /> 1. flex 會呼叫全域性樣式表 global.css ,該全域性樣式表由 flex-config.xml 定義,如: css -url >/ web- inf/ flex /global. csscss -url > 1. 系統預設的樣式表檔案 global.css 檔案其實沒有任何樣式定義,我們可以手動新增全域性樣式,也可以更改預設的全域性樣式檔案路徑。如,把全域性樣式檔案該為: css -url >/ css/ styles .css css- url> 1. 在這裡順便提一點,定義外部 css檔案的時候,顏色樣式有四種定義方式: : .myclass // 16 進製顏色格式 2: .myclass // rgb 顏色格式 3: .myclass // 10 進製rgb 顏色格式 4: .myclass // vga 顏色名稱格式 1 2.本地樣式定義 使用來定義當前檔案的樣式 下面的例子定義了 myfontstyle 子類樣式,要使用對應的樣式可以在元件中使用 stylename 屬性來應用樣式。 style > 2.. myfontstyle 3.mx :style > 4. buttonid= 'mybutton' stylename ='myfontstyle' label ='click here' > 1. 下面的樣式則定義了所有 button 元件的樣式,使用該方式定義的樣式在使用的時候不需要指定樣式名。 style > 2.button 3.mx :style > 4. buttonid= 'mybutton' label ='click here' > 1. 3. 內嵌樣式定義 對個別需要特殊處理的元件,可以使用下面的方式進行內嵌樣式定義 buttonid= 'mybutton' fontsize ='15' color ='0x9966cc' label ='my button' /> 1. 4. 使用指令碼樣式定義 這種方法使用了 flash 傳統的as 指令碼方式來定義樣式,具有更強大的靈活性,並且可以使用 stylemanager 類以及getstyle() 和setstyle() 方法,如下所示: 1. script > 2. cdata[ 3.//使用stylemanger類 4.mx. styles .stylemanager .styles .tooltip .fontweight ='bold'; 5.//獲取元件樣式 6. lb1. text =ip1 .getstyle ('fontsize'); 7.//設定元件樣式 8. lb1. text =ip1 .setstyle ('fontsize' ,newsize); 9.]]> 10.mx: script > 如果三種樣式定義方式同時使用的話,優先級別從高到低依次為: 內嵌式樣式 > 本地樣式定義 (指令碼樣式定義 )> 外部樣式定義 特殊樣式定義 在進行樣式定義的時候,我們需要注意幾種 flex 特殊的樣式定義 1. 全域性樣式定義 對所有未被定義的控制項應用 global樣式 global 1. 2. 應用程式樣式定義 標記是flex 的根標記, 樣式用來定義未被定義的容器以及子容器的樣式 1. 關於字型的樣式定義 1. 使用裝置字型 . myclass 1. 2. 使用移植字型 1. style > 2. @font -face 6. @font -face 11.mx: style > 在定義了該字型樣式後,就可以通過 fontfamily 來應用該字型樣式,如: accordion 1. flex基本語法 絕大多數mxml標識符合as3.0規範,mxml檔案編譯產生的swf檔案包含相應的as物件。as3.0是一種物件導向的語言,符合ecmascript第4版規範。mxml檔案的命名規範 1 必須符合as的命名規範,以字母或下劃線開頭 2 不得使用as的類名 元件id標識和命名空間的m... 元素與主軸的對齊方式 定義flex容器 display flex 設定容器內部元素的排列方向 row 定義排列方向,從左到右 row reverse 從右到左 column 從上到下 column reverse 從下到上 flex direction row reverse nowrap 不換行 ... 說到頁面布局,無外乎水平垂直,先說說水平,最開始使用最多的是float屬性,但是它有後遺症,塌陷呀清除呀,最後放棄轉戰flex。需要謹記的是,flex是設定在需要生效的元素的父元素上面的。display flex flex direction row column 其中row為水平布局,column...Flex精華摘要 基本語法
flex的樣式使用
樣式布局flex的使用