XCSSファイル（Themeのスタイルも含む）では、スタイル用に決められた構造によって定義する必要があります。

スタイルの定義は、ソースファイルを直接編集、またはnexacro studioのスタイルエディタにて編集を行います。

スタイルの構造

スタイルは、下記の図のようにCSSセレクターによって適用範囲を決定し、その配下のスタイル定義エリアへ「プロパティ名 ： バリュー値；」の記述にて各スタイル情報を列挙します。スタイル定義エリアへは、設定したいプロパティのみ記述し、変更の必要がないプロパティは削除またはバリュー値なしにします。

.Button
{
    background        :        #c0504d;
}

CSSセレクター

セレクターの種類

nexacro platformのセレクターには①Selector、②Child Selector、③Class Selectorの3種類があり、セレクターを指定する際の記述順は①→③→②になります。

Selector

スタイルプロパティを適用する対象を指定します。

下記は、Buttonコンポーネントに対してスタイルを適用する場合の例です。

.Button

Child Selector

下位コントロールにスタイルプロパティを適用する対象を指定します。

下記は、Comboコンポーネントのテキスト編集領域に対してスタイルを適用する場合の例です。親Selectorである「.Combo」とChild Selectorである「.comboedit」の間には、" "（半角スペース）を１つ挿入する必要があります。

.Combo .comboedit

Class Selector

cssclassプロパティ値として設定するクラス名に該当します。セレクターの定義としてクラス名を指定する際には必ず先頭にObject Type Nameを付ける必要があります。

user cssclass名は必ずObject Type Nameと一緒に使用する必要があります。

下記は、Buttonコンポーネントに対して「myButton」というクラス名を指定する場合の例です。

.Button.myButton

セレクターの優先度

セレクターにはスタイルが適用される優先度があります。

Class Selector >（Child Selector）> Selectorの順で適用されます。

コンポーネントの場合

Comboコンポーネントの例

Class Selectorの定義があった場合、Selectorの定義より優先されます。

コントロールの場合

Comboコンポーネントの例

ドロップダウンボタン（dropbutton）に対して、Class Selectorの定義があった場合、Child Selectorの定義より優先されます。また、Class Selectorの定義もChild Selectorの定義もない場合はButtonControlの定義が適用されます。

ステータス情報

nexacro platformでは、利用者の操作などで変化するコンポーネントのステータス情報として、statusとuserstatusを指定することができます。

ステータス一覧

ステータスの記述方法

ステータスは[]で囲んで記述します。記述例は下記のとおりです。

//Comboコンポーネントに対してフォーカスを受けている状態
.Combo[status=focused]

//Comboコンポーネントのボタン領域に対してマウスオーバー状態
.Combo .comboedit[status=focused]

//Buttonコンポーネントのクラス名「myButton」に対してボタンが押されている状態
.Button.myButton[userstatus=pushed]

下位コントロールに伝播するstatusは、disabled / enabled / readonlyの３つです。例えば、Calendarコンポーネントの statusが「readonly」である場合、calendareditも「readonly」になります。しかし、Cellのstatusが「selected」であっても、cellcheckboxには影響しません。

スタイルプロパティ処理の優先度

同一レベル（コントロール）

1.0. inline
1.1. class + status
1.2. status
1.3. typename + status
1.4. class + normal
1.5. normal
1.6. control normal

親レベル（上位継承）

2.0. inline
2.1. class + status
2.2. status
2.3. typename + status
2.4. class + normal
2.5. normal
2.6. control normal

例えば、Comboコンポーネントのドロップボタンにマウスオーバー時のスタイルプロパティの処理順は下記のとおりです。