本文向大家介绍一下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样式表之前,我建议您首先考虑您想要如何实现样式。出于简单性的考虑,我向您展示了四种声明样式的基本方法:

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

    	
  • TitleWindow{ ?
  • borderColor:#f7f7f7; ?
  • borderAlpha:1; ?
  • borderThicknessLeft:0; ?
  • borderThicknessTop:0; ?
  • borderThicknessBottom:0; ?
  • borderThicknessRight:0; ?
  • cornerRadius:0; ?
  • headerHeight:0; ?
  • highlightAlphas:1,1; ?
  • headerColors:#f7f7f7,#f7f7f7; ?
  • footerColors:#f7f7f7,#f7f7f7; ?
  • backgroundColor:#f7f7f7; ?
  • dropShadowEnabled:true; ?
  • }?
  • ◆通过一个惟一的样式名。通过使用一个惟一的Flex CSS样式名来声明样式。请确保在名字之前使用一个句点并使用驼峰式大小写约定:

    .altText?

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

    	
  • Text.bigYellowText ?
  • { ?
  • ?color:#EFB526; ?
  • ?fontSize:36; ?
  • ?fontWeight:Bold; ?
  • } ?
  • ◆通过全局选择器。全局选择器是一种特殊的选择器,它能够影响包含属性集的应用程序内的每一个组件。比如,我可以将包含有cornerRadius样式属性的所有显示对象组件的cornerRadius样式属性设置为4,如下所示:

    	
  • global ?
  • { ?
  • ?cornerRadius:4;? ?
  • }?
  • Flex CSS样式优先权

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

    	
  • Button.altCornersButton ?
  • { ?
  • ?cornerRadius:8;? ?
  • }?
  • ?

自由转载,转载请注明: 转载自WEB开发笔记 www.chhua.com

本文链接地址: Flex CSS样式的四种声明方法 http://www.chhua.com/web-note419

相关笔记

更多