Flex 스타일 및 글꼴
스타일 정의 유형
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
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fortinet FortiWeb Web Application Firewall Policy BypassFrom: Geffrey Velasquez Date: Wed, 2 May 2012 20:33:23 -0500...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
