flex4学习笔记_css
发布时间：2020-12-15 01:26:25 所属栏目：百科 来源：网络整理
导读：Summary for css in flex4 ? In this chapter,I described the use of Cascading Style Sheets (CSS) to effect the visual presentation?of Flex applications. You learned the following: ? ● ?CSS are implemented in the Flex SDK as the primary mech
|
Summary for css in flex4
?
In this chapter,I described the use of Cascading Style Sheets (CSS) to effect the visual presentation?of Flex applications. You learned the following:
?
●?CSS are implemented in the Flex SDK as the primary mechanism for controlling a Flex?application’s visual appearance.
?
●?You can declare styles with inline style declarations,and with embedded or external style?sheets.
? ? 两种基本方式
?
●?Type selectors apply styles to all components that extend a certain component or set of?components.
? ??Type selector对某个组件或者容易的的继承类(子类)同样有效
?
●?Flex 4 adds the use of CSS namespaces to distinguish style declarations for MX or Spark?components.
?
●?Style name (also known as class) selectors define styles that are applied to components?through their styleName property.
? ? css文件讲某个style定义一个属性
?
●?The global selector applies styles to all components in the entire application.
? ? 定义缺省的style，全局有效，但是局部定义优先
?
●?Styles can be manipulated programmatically with the setStyle() and getStyle()?methods.
?
●?You can compile external style sheets in SWF files that can be loaded at runtime.
? ? 这个参考原书，感觉用到的地方不多
?
下面给出一段示例代码：
?
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"?
? xmlns:s="library://ns.adobe.com/flex/spark"?
? xmlns:mx="library://ns.adobe.com/flex/mx" >
? <s:layout>
? ? <s:VerticalLayout horizontalAlign="center" paddingTop="20"/>
? </s:layout>
? <fx:Style>
? ? @namespace mx "library://ns.adobe.com/flex/mx";
? ? @namespace s "library://ns.adobe.com/flex/spark";
? ??
? ? global {
? ? ? font-family:Times New Roman,Times,serif;
? ? ? color:purple;
? ? }
? ? s|Label
? ? {
? ? ? font-size:18;
? ? ? font-style:italic;
? ? }
//descendant selector，要完全符合这样的层次才能有效，见结果
? ? s|HGroup s|Button s|Label
? ? {
? ? ? font-style:normal;
? ? ? font-weight:bold;
? ? }
//name selector
? ? .redFont?
? ? {
? ? ? color:#ff0000;
? ? }
? </fx:Style>
? <s:VGroup>
? ? <s:Label text="Hello World" styleName="redFont"/>
? ? <s:Button label="Click me"/>?
? </s:VGroup>
? <s:HGroup>
? ? <s:Label text="Hello World"/>
? ? <s:Button label="Click me"/>?
? </s:HGroup> ? ? ?
</s:Application>
?
运行结果为：
========================================== ? ? ? ? 如果将style保存为css文件：
//ExternalStyles.css
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
?
global {
? font-family:Times New Roman,serif;
? color:purple;
}
s|Label
{
? font-size:18;
? font-style:italic;
}
s|Button s|Label
{
? font-style:normal;
? font-weight:bold;
}
.redFont?
{
? color:#ff0000;
}
?
再修改mxml文件为：
?
//ExternalStyles.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" >
? <s:layout>
? ? <s:VerticalLayout horizontalAlign="center" paddingTop="20"/>
? </s:layout>
? <fx:Style source="ExternalStyles.css"/>
? <s:VGroup>
? ? <s:Label text="Hello World" styleName="redFont"/>
? ? <s:Button label="Click me"/>?
? </s:VGroup>
? <s:HGroup>
? ? <s:Label text="Hello World"/>
? ? <s:Button label="Click me"/>?
? </s:HGroup> ? ? ?
</s:Application>
?
则运行结果一样
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
