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精華摘要 基本語法
flex基本語法 絕大多數mxml標識符合as3.0規範,mxml檔案編譯產生的swf檔案包含相應的as物件。as3.0是一種物件導向的語言,符合ecmascript第4版規範。mxml檔案的命名規範 1 必須符合as的命名規範,以字母或下劃線開頭 2 不得使用as的類名 元件id標識和命名空間的m...
flex的樣式使用
元素與主軸的對齊方式 定義flex容器 display flex 設定容器內部元素的排列方向 row 定義排列方向,從左到右 row reverse 從右到左 column 從上到下 column reverse 從下到上 flex direction row reverse nowrap 不換行 ...
樣式布局flex的使用
說到頁面布局,無外乎水平垂直,先說說水平,最開始使用最多的是float屬性,但是它有後遺症,塌陷呀清除呀,最後放棄轉戰flex。需要謹記的是,flex是設定在需要生效的元素的父元素上面的。display flex flex direction row column 其中row為水平布局,column...