flex4 css的多种用法

原文地址： http://ghostjay.blog.51cto.com/2815221/600912

下面给出一段示例代码：

 

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

  xmlns:s="library://ns.adobe.com/flex/spark" 

  xmlns:mx="library://ns.adobe.com/flex/mx" >

  <s:layout>

    <s:VerticalLayout horizontalAlign="center" paddingTop="20"/>

  </s:layout>

  <fx:Style>

    @namespace mx "library://ns.adobe.com/flex/mx";

    @namespace s "library://ns.adobe.com/flex/spark";

    

    global {

      font-family:Times New Roman, Times, serif;

      color:purple;

    }

    s|Label

    {

      font-size:18;

      font-style:italic;

    }

//descendant selector，要完全符合这样的层次才能有效，见结果

    s|HGroup s|Button s|Label

    {

      font-style:normal;

      font-weight:bold;

    }

//name selector

    .redFont 

    {

      color:#ff0000;

    }

  </fx:Style>

  <s:VGroup>

    <s:Label text="Hello World" styleName="redFont"/>

    <s:Button label="Click me"/> 

  </s:VGroup>

  <s:HGroup>

    <s:Label text="Hello World"/>

    <s:Button label="Click me"/> 

  </s:HGroup>      

</s:Application>

 

运行结果为：

==========================================    

    如果将style保存为css文件：

//ExternalStyles.css

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/mx";

 

global {

  font-family:Times New Roman, Times, serif;

  color:purple;

}

s|Label

{

  font-size:18;

  font-style:italic;

}

s|Button s|Label

{

  font-style:normal;

  font-weight:bold;

}

.redFont 

{

  color:#ff0000;

}

 

再修改mxml文件为：

 

//ExternalStyles.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" >

  <s:layout>

    <s:VerticalLayout horizontalAlign="center" paddingTop="20"/>

  </s:layout>

  <fx:Style source="ExternalStyles.css"/>

  <s:VGroup>

    <s:Label text="Hello World" styleName="redFont"/>

    <s:Button label="Click me"/> 

  </s:VGroup>

  <s:HGroup>

    <s:Label text="Hello World"/>

    <s:Button label="Click me"/> 

  </s:HGroup>      

</s:Application>

 

则运行结果一样