📌  相关文章
📜  Flex-CSS样式

📅  最后修改于: 2020-10-25 02:23:13             🧑  作者: Mango

Flex支持使用CSS语法和样式以与CSS转换为HTML组件相同的方式应用于其UI控件。

方法1：使用外部样式表文件

您可以引用应用程序的类路径中可用的样式表。例如，考虑com / tutorialspoint / client文件夹中的Hello.World.mxml文件中的Style.css文件。

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
...
.container {
   cornerRadius :10;
   horizontalCenter :0;    
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

然后可以通过以下代码片段引用css文件

使用styleName属性将样式分配给UI组件

 
   ...

方法2：在Ui容器组件中使用样式

您可以使用标签在UI容器组件中定义样式

班级选择器

使用styleName属性将样式分配给UI组件。

ID等级选择器

使用id选择器的样式UI组件。

类型电平选择器

在一个GO中设置一种类型的UI组件的样式。

Flex样式与CSS示例

让我们按照以下步骤通过创建测试应用程序来检查Flex应用程序的CSS样式-

Step Description
1 Create a project with a name HelloWorld under a packagecom.tutorialspoint.client as explained in the Flex – Create Application chapter.
2 Modify Style.css, HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3 Compile and run the application to make sure business logic is working as per the requirements.

以下是修改后的CSS文件src / com.tutorialspoint / Style.css的内容。

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

.heading
{
   fontFamily: Arial, Helvetica, sans-serif;
   fontSize: 17px;
   color: #9b1204;
   textDecoration:none;
   fontWeight:normal;
}

.button {
   fontWeight: bold;            
}

.container {
   cornerRadius :10;
   horizontalCenter :0;    
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

以下是修改后的mxml文件src / com.tutorialspoint / HelloWorld.mxml的内容。

准备好所有更改后，让我们像在“ Flex-创建应用程序”一章中一样，以正常模式编译和运行应用程序。如果您的应用程序一切正常，将产生以下结果：[在线尝试]

Flex样式与CSS