Flex 스타일 및 글꼴

3764 단어 WebcssFlex각본Flash
Flex가 지원하는 스타일은 Flash보다 다양하며 스타일 정의 방법도 많습니다.Flex가 Flash보다 강력하고 웹 개발에 적합한 곳 중 하나이기도 하다.
스타일 정의 유형
1. 외부 스타일시트

<mx:Style source='/css/myStyle.css'/>

Flex에서 글로벌 스타일시트 글로벌을 호출합니다.css, 이 전역 스타일시트는 flex-config입니다.xml 정의:

<global-css-url>/WEB-INF/flex/global.css</global-css-url>

시스템의 기본 스타일시트 파일 글로벌.css 파일은 사실 스타일 정의가 없습니다. 전역 스타일을 수동으로 추가할 수도 있고 기본 전역 스타일 파일 경로를 변경할 수도 있습니다.예를 들어, 글로벌 스타일 파일은 다음과 같습니다.

<global-css-url>/css/styles.css</global-css-url>

참고로 외부 css 파일을 정의할 때 색상 스타일에는 다음 네 가지 정의 방식이 있습니다.

.myclass { fillColor: #6666CC } // 16      
.myclass { borderColor: rgb(77%,22%,0%) } // RGB     
.myclass { errorColor: rgb(0,255,0) } // 10  RGB    
.myclass { color: Blue } // VGA

2. 로컬 스타일 정의
을 사용하여 현재 파일의 스타일을 정의합니다.
다음 예는 myFontStyle 하위 클래스 스타일을 정의하고 해당 스타일을 사용하려면 구성 요소에서 styleName 속성을 사용하여 스타일을 적용합니다.

<mx:Style> 

.myFontStyle {  fontSize: 15  }

</mx:Style>

<mx:Button id='myButton' styleName='myFontStyle' label='Click Here' >

다음 스타일은 모든 Button 구성 요소의 스타일을 정의합니다. 이 방식으로 정의된 스타일은 사용할 때 스타일 이름을 지정하지 않아도 됩니다.

<mx:Style> 
Button {  fontSize: 15  }
</mx:Style>

<mx:Button id='myButton' label='Click Here' >

3. 인라인 스타일 정의
특수 처리가 필요한 개별 구성 요소에 대해 아래의 방식으로 내장 스타일 정의를 할 수 있습니다

<mx:Button id='myButton' fontSize='15' color='0x9966CC' label='My Button'/>

4. 스크립트 스타일 정의 사용
이런 방법은 Flash의 전통적인 AS 스크립트 방식을 사용하여 스타일을 정의하고 더욱 유연성을 가지며 Style Manager 클래스와 get Style() 및 set Style() 방법을 다음과 같이 사용할 수 있다.

<mx:Script>
<![CDATA[

//  styleManger 
mx.styles.StyleManager.styles.ToolTip.fontWeight = 'bold';
//      
lb1.text=ip1.getStyle('fontSize');
//      
lb1.text=ip1.setStyle('fontSize',newSize);
  
]]>
</mx:Script>

세 가지 스타일 정의가 모두 사용되는 경우 우선순위는 높음부터 낮음까지 다음과 같습니다.
인라인 스타일 > 로컬 스타일 정의 (스크립트 스타일 정의) > 외부 스타일 정의
특수 스타일 정의
스타일 정의를 진행할 때, 우리는 몇 가지 Flex의 특수한 스타일 정의를 주의해야 한다
1. 글로벌 스타일 정의
정의되지 않은 모든 제어 구성 요소에 글로벌 스타일 적용

global {  
fontSize:22;
textDecoration: underline;
}

2. 응용 프로그램 스타일 정의
Application 태그는 Flex의 루트 태그이며, Application 스타일은 정의되지 않은 컨테이너와 하위 컨테이너의 스타일을 정의하는 데 사용됩니다.

Application {  
marginLeft: 0px;
marginRight: 0px;
marginTop: 0px;
marginBottom: 0px;
horizontalAlign: 'left';
}

글꼴 스타일 정의 정보
1. 장치 글꼴 사용

.myClass {  
fontFamily: Arial, Helvetica, '_sans';
color: Red;
fontSize: 22;
fontWeight: bold;
}

2. 마이그레이션 글꼴 사용

<mx:Style>
@font-face { 
src:url('akbar.ttf');
fontFamily: myfont;
}

@font-face { 
src:url('akbar.ttf');
fontWeight: bold;
fontFamily: myfontBold;
}

</mx:Style>

글꼴 스타일을 정의한 후에는 다음과 같은 글꼴 스타일을 FontFamily를 통해 적용할 수 있습니다.

Accordion {  
fontFamily: myfont
}
asp.net c# 유효성 검사 날짜 형식
asp.net 오류 처리 클래스 + SESSION 클래스

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage