9.1.用CSS定义组件样式
9.1.1.问题
你希望利用CSS 对组件应用皮肤
9.1.2.解决办法
利用类选择器或类型选择器声明样式属性。
9.1.3.讨论
你可以用CSS 个性化你的用户界面。如果熟悉HTML 文档中的样式元素，你会发现Flex里的CSS 语法大致相同. 你可以用类选择器为各种组件指派样式，同样你可以为一个组件定义类型选择器，它将适用于显示列表上该组件的所有实例。
类选择器经过声明后，在程序范围内可对不同组件应用任意次。类选择器的语法是一个句号（或点），后面跟着与样式有关的你所想的任何名字，驼峰样式同时以小写字母开头---举个例子, .myCustomStyle. 接下来的例子用<mx:Style> 标签创造了局部样式，并在代码内利用styleName 属性将样式指派给一个Label 组件:
本例中.labelStyle 选择器定义了用于标签的有关字体处理的样式.本样式通过逐行将其赋值给Label 实例的styleName 属性起到作用。你会意识到在应用样式时，声明部分前面的句号/点已经被去掉了。
类型选择器可用来将其声明的样式应用于某一组件的所有实例. 要想声明类型选择器, 可使用想要处理的组件的相应类名, 如下:
尽管可以使用类型和类选择器声明样式, 定义了的属性值可能在编译时被组件的声明逐个重新定义。下例中, 你看到应用于Label 组件两个实例的样式, 其中第二个重写了fontSize样式属性:
编译时逐项指定的样式属性值不会受到用<mx:Style> 标签局部定义的CSS 的限制, 正如上述例子。逐项定义的样式属性值会在运行和编译时重写掉外部加载的样式文件定义的样式。
你会注意到本例中嵌入的fontSize 属性是直接连接的，然而在CSS 声明中的style 属性则带有连字符. 带有连字符的的声明符合CSS 管理, 并且可用来在外部样式表单中利用<mx:Style> 标签声明样式属性。MXML 中嵌入声明的样式属性利用驼峰样式符合ActionScript 标准,该标准不支持连字符. 内部机制中, CSS 中带连字符的样式声明被转换成驼峰样式并用来利用getStyle 方法检索可用的属性声明。
你希望利用CSS 对组件应用皮肤
9.1.2.解决办法
利用类选择器或类型选择器声明样式属性。
9.1.3.讨论
你可以用CSS 个性化你的用户界面。如果熟悉HTML 文档中的样式元素，你会发现Flex里的CSS 语法大致相同. 你可以用类选择器为各种组件指派样式，同样你可以为一个组件定义类型选择器，它将适用于显示列表上该组件的所有实例。
类选择器经过声明后，在程序范围内可对不同组件应用任意次。类选择器的语法是一个句号（或点），后面跟着与样式有关的你所想的任何名字，驼峰样式同时以小写字母开头---举个例子, .myCustomStyle. 接下来的例子用<mx:Style> 标签创造了局部样式，并在代码内利用styleName 属性将样式指派给一个Label 组件:
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Style>
.labelStyle {
font-family: 'Arial';
font-size: 20px;
font-weight: 'bold';
color: #FFFFFF;
}
</mx:Style>
<mx:Label text="Hello Flex!" styleName="labelStyle" />
</mx:Application>
<mx:Style>
.labelStyle {
font-family: 'Arial';
font-size: 20px;
font-weight: 'bold';
color: #FFFFFF;
}
</mx:Style>
<mx:Label text="Hello Flex!" styleName="labelStyle" />
</mx:Application>
本例中.labelStyle 选择器定义了用于标签的有关字体处理的样式.本样式通过逐行将其赋值给Label 实例的styleName 属性起到作用。你会意识到在应用样式时，声明部分前面的句号/点已经被去掉了。
类型选择器可用来将其声明的样式应用于某一组件的所有实例. 要想声明类型选择器, 可使用想要处理的组件的相应类名, 如下:
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Style>
Label {
font-family: 'Arial';
font-size: 20px;
font-weight: 'bold';
color: #FFFFFF;
}
</mx:Style>
<mx:Label text="Hello Flex!" />
</mx:Application>
<mx:Style>
Label {
font-family: 'Arial';
font-size: 20px;
font-weight: 'bold';
color: #FFFFFF;
}
</mx:Style>
<mx:Label text="Hello Flex!" />
</mx:Application>
尽管可以使用类型和类选择器声明样式, 定义了的属性值可能在编译时被组件的声明逐个重新定义。下例中, 你看到应用于Label 组件两个实例的样式, 其中第二个重写了fontSize样式属性:
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Style>
Label {
font-family: 'Arial';
font-size: 20px;
font-weight: 'bold';
color: #FFFFFF;
}
</mx:Style>
<mx:Label text="Hello Flex!" />
<mx:Label text="Hello Flex!" fontSize="12" />
</mx:Application>
layout="vertical">
<mx:Style>
Label {
font-family: 'Arial';
font-size: 20px;
font-weight: 'bold';
color: #FFFFFF;
}
</mx:Style>
<mx:Label text="Hello Flex!" />
<mx:Label text="Hello Flex!" fontSize="12" />
</mx:Application>
编译时逐项指定的样式属性值不会受到用<mx:Style> 标签局部定义的CSS 的限制, 正如上述例子。逐项定义的样式属性值会在运行和编译时重写掉外部加载的样式文件定义的样式。
你会注意到本例中嵌入的fontSize 属性是直接连接的，然而在CSS 声明中的style 属性则带有连字符. 带有连字符的的声明符合CSS 管理, 并且可用来在外部样式表单中利用<mx:Style> 标签声明样式属性。MXML 中嵌入声明的样式属性利用驼峰样式符合ActionScript 标准,该标准不支持连字符. 内部机制中, CSS 中带连字符的样式声明被转换成驼峰样式并用来利用getStyle 方法检索可用的属性声明。
加支付宝好友偷能量挖...
