v5_03 在CSS文件中定义样式

最新推荐文章于 2023-10-12 21:13:58 发布

原创最新推荐文章于 2023-10-12 21:13:58 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #Flex #Adobe #设计模式 #框架

flex 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了如何使用设计模式定义通用CSS样式，增强应用程序表现力。包括整体属性设置、组件皮肤定义及高级选择器使用方法。

v5_03 Defining styles in CSS 在CSS文件中定义样式

ex5_03

这部分主要讲

如何通过使用设计模式来定义一些通用样式,从而来进一步增强应用程序

如何为Flex框架组件和自己的定制组件定义CSS样式

对于Spark来说,CSS主要有三种应用场景

1.为一个应用程序定义一些整体属性

2.为组件装配皮肤

3.为能够运用高级CSS选择器

1.使用外观可以进行界面调整

同时可以看到产生的css文件

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
global
{
font-family: Verdana;
font-size: 10;
}

2.选择器

管道,以下样式适用于spark的panel

如果多个同名选择器中有不同的属性,这些属性都可以被应用

如果有相同的属性,最后一个选择器的属性会被应用

s|Panel
{
backgroundColor: #E8E8E8;
} 
s|Button
{
color: #0074AA;
}
s|Button
{
color: #000000;
}
s|Button
{
font-family:"Arial";
}

3.自定义命名空间

可以使用@命名空间指令来创建不念旧恶自定义命名空间

通过引用命名空间和自定义的组件名称并在两者之间带上一个管道字符,可以应用该自定义的组件选择器

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace cx "components.*";

以上在Spark MX命名空间下面使用了 @命名空间语法创建了命名空间cx,该cx命名空间引用了在组件文件夹中的自定义组件

cx|MonthlyEvents
{
color: #000000;
}