Flex では外部 CSS スタイルシートをサポートしています。ローカルスタイルシートの場所を宣言するか、グローバルスタイルシートを使用して、すべてのアプリケーションで使用するスタイルを定義することができます。現在のドキュメントおよびその子ドキュメントにスタイルシートを適用するには、<mx:Style> タグの source プロパティを使用します。

次の例では、flex_app_root/assets ディレクトリにある MyStyleSheet.css ファイルを指定します。

<?xml version="1.0"?>
<!-- styles/ExternalCSSExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Style source="../assets/SimpleTypeSelector.css"/>

  <mx:Button id="myButton" label="Click Here"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

source プロパティの値は、スタイル宣言を含むファイルの URL です。source プロパティを使用する場合、その <mx:Style> タグの内容を空にする必要があります。<mx:Style> タグを追加して、他のスタイルを定義することもできます。インクルードするファイルには <mx:Style> タグを追加しないでください。標準の CSS ファイルシンタックスを使用する必要があります。

外部スタイルシートファイルには、タイプセレクタとクラスセレクタの両方を含めることができます。

Adobe® Flex™ Builder™ を使用している場合、Flex プロパティビューのスタイルポップアップメニューの「CSS へ変換」ボタンを使用して既存のコンポーネント定義からスタイルシートを生成できます。1 つのコンポーネントタイプまたはコンポーネントのクラスについてカスタムスタイルシートを書き出したり、そのコンポーネントのスタイルプロパティを使用してグローバルスタイルシートを作成したりできます。詳細については、デザインモードでの CSS エディタの使用を参照してください。

CSS ファイルを SWF ファイルにコンパイルして、実行時にロードすることもできます。詳細については、実行時のスタイルシートのロードを参照してください。

CSS ファイルは、source-path コンパイラ引数への引数として指定することができます。このため、このコンパイラ引数を使用してスタイルシートを切り替えることができます。

デフォルトのスタイルシートについて

Flex には、すべてのアプリケーションで使用されるデフォルトのスタイルシートが用意されています。このスタイルシートを使用すると、Flex コンポーネントすべてに一貫したスタイルが適用されます。このファイルは defaults.css で、/frameworks/libs ディレクトリの framework.swc ファイル内にあります。このファイルによって埋め込まれるプログラムスキンクラスは、mx.skins.halo パッケージに収められています。このファイルで使用されるグラフィカルスキンも、framework.swc ファイルにあります。

デフォルトのスタイルシートで Halo テーマが構成されます。詳細については、テーマについてを参照してください。

defaults.css ファイルは暗黙的にロードされ、コンパイルの段階で Flex アプリケーションに適用されます。defaults-css-url コンパイラオプションを使用すると、デフォルトのスタイルとして明示的に他のファイルを指定できます。defaults.css ファイルは、その名前を変更するか、framework.swc ファイルから削除することで無効にすることもできます。

defaults.css ファイルでは、すべての Flex コンポーネントの外観と操作性が定義されています。アプリケーションに追加のテーマや CSS ファイルを適用しても、カスタムスタイルでオーバーライドされないコンポーネントに対しては、引き続き defaults.css に記述されたスタイルが使用されます。Flex からデフォルトテーマを完全に除去するには、defaults.css で定義されているスタイルをすべて削除するか、オーバーライドする必要があります。

Flex では他のスタイルシートも扱うことができるので、テーマを短時間で容易に適用できます。詳細については、付属のテーマファイルについてを参照してください。