Flex精華摘要 5 使用樣式和字型

2021-04-07 07:12:09 字數 3189 閱讀 5726

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...