四种声明Flex CSS样式的基本方法

开发 后端
本文向大家介绍一下Flex CSS样式的概念,对于具有Web设计背景的人,最为重要的是要理解Flex CSS样式并不遵循与W3C CSS规定相同的约定。

本文和大家重点学习一Flex CSS样式的属性,在开始创建Flex CSS样式表之前,我建议您首先考虑您想要如何实现样式。出于简单性的考虑,我向您展示了四种声明样式的基本方法。

Flex内的CSS

首先,对于具有Web设计背景的人,最为重要的是要理解Flex CSS样式并不遵循与W3CCSS规定相同的约定。在W3CCSS版本2.0中被用来分离单词的连字符(-)并未用作Flex实现内的代码约定的一部分。相反,CSS的Flex实现使用了驼峰式大小写。比如,W3CCSS2规范内的vertical-center对等于FlexCSS内的verticalCenter。

如果您已经在使用了驼峰式大小写的编程语言内进行过编程,那么,这非常容易习惯。好的消息是CSS2.0规范内可用的大部分内容在FlexCSS实现内也可用。并且,CSS的Flex实现是在CSS2.0W3C标准上的显著扩展,提供了额外的、对Flex组件惟一的样式属性。

维护样式:组件与Flex CSS样式属性

在开始创建Flex CSS样式表之前,我建议您首先考虑您想要如何实现样式。出于简单性的考虑,我向您展示了四种声明样式的基本方法:

◆通过组件的类名。通过将组件的类名作为样式名来设置组件的样式: 

  1. TitleWindow{  
  2. borderColor:#f7f7f7;  
  3. borderAlpha:1;  
  4. borderThicknessLeft:0;  
  5. borderThicknessTop:0;  
  6. borderThicknessBottom:0;  
  7. borderThicknessRight:0;  
  8. cornerRadius:0;  
  9. headerHeight:0;  
  10. highlightAlphas:1,1;  
  11. headerColors:#f7f7f7,#f7f7f7;  
  12. footerColors:#f7f7f7,#f7f7f7;  
  13. backgroundColor:#f7f7f7;  
  14. dropShadowEnabled:true;  

◆通过一个惟一的样式名。通过使用一个惟一的Flex CSS样式名来声明样式。请确保在名字之前使用一个句点并使用驼峰式大小写约定:

.altText 

  1. {  
  2.  fontFamily:TVNordEFCEOP-RegularCon;  
  3.  fontSize:18;  
  4.  color:#FFFFFF;  
  5. }  


◆通过一个组件外加一个样式名。当同一个组件需要有多种设计时(这对于具有多个视图状态的应用程序很常见),可以设置组件的样式名。这种方法还确保了只有特定的组件才可以分配到特定的样式:

  1. Text.bigYellowText  
  2. {  
  3.  color:#EFB526;  
  4.  fontSize:36;  
  5.  fontWeight:Bold;  
  6. }  

 ◆通过全局选择器。全局选择器是一种特殊的选择器,它能够影响包含属性集的应用程序内的每一个组件。比如,我可以将包含有cornerRadius样式属性的所有显示对象组件的cornerRadius样式属性设置为4,如下所示:

  1. global  
  2. {  
  3.  cornerRadius:4;   

Flex CSS样式优先权

虽然全局选择器基本上设置的是一个属性的默认值,该值很容易被覆盖。比如,如果我在内联(inline)或在我的CSS文件内将Button组件的cornerRadius属性设置为0,它将优于我已经指定的4这一全局默认设置;因此,所有我的Button组件都将包含一个值为0的cornerRadius属性。而且,我将通过创建一个额外的样式来覆盖4这一全局设置和0这一Button设置:

  1. Button.altCornersButton  
  2. {  
  3.  cornerRadius:8;   

 【编辑推荐】

  1. 学习笔记 在Flex中如何使用CSS文件
  2. 探索Flex和CSS的强大功能
  3. Flex框架中Cairngorm和Mate的优点大比拼
  4. FlexBuilder3.0与Eclipse3.4的***结合
  5. 解析Flex应用开发步骤 新特性和技术框架 

 

责任编辑:佚名 来源: ibm.com
相关推荐

2010-08-02 16:47:46

Flex

2010-07-28 13:54:42

Flex数据绑定

2010-08-05 13:44:12

Flex布局

2010-09-06 16:09:58

CSS样式CSS

2010-01-20 10:56:14

VB.NET Main

2010-08-05 09:33:08

Flex页面跳转

2010-09-14 14:10:36

CSS样式表

2010-09-06 13:36:45

CSS样式表CSS

2010-08-13 13:31:48

Flex效果组件

2022-06-14 13:55:30

模型训练网络

2010-09-02 10:55:57

CSS

2009-06-22 11:01:12

2023-02-10 11:13:42

网络功耗无线网络设备

2010-10-19 17:40:30

SqlServer主键

2023-08-30 23:41:16

AI框架项目

2015-03-19 15:13:20

PHP基本排序算法代码实现

2010-08-06 14:52:35

FlexCSS层叠样式表

2009-12-09 11:03:45

安装Linux

2019-08-13 09:00:24

REST API身份认证密钥

2014-03-17 09:22:43

Linux命令
点赞
收藏

51CTO技术栈公众号