指定方法
ID指定
#<id> {}
class指定
.<class-name> {}
.label {}
Scene全体の設定も.rootでできる
色の定義とかもここでするとよいかも
.root { /* colors */ gray: #424242; blue: #0288D1; /* default setting */ -fx-background-color: gray; -fx-font-size: 14.0; }
文字関連
.label { -fx-font-size: 24; # フォントサイズ -fx-font-family: serif; # フォントファミリー: 個別もしくは [serif | sans-serif | cursive | fantasy | monospace] -fx-text-fill: red; # 文字の色 -fx-font-style: italic; # 文字のスタイル: [normal | italic | oblique] -fx-font-weight: bold; # 文字の太さ: [normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] }
色関連
.label { -fx-background-color: white; # 背景色 -fx-text-fill: red; # 文字の色 }
ボタンの状態で色を変化させ
:pressedなどの擬似クラスで指定できるよう
デフォルトの場合
.button { -fx-text-fill: white; # テキストの色 -fx-background-color: #757575; # ボタンの色 }
カーソルが上にある場合
.button:hover { -fx-text-fill: white; -fx-background-color: #BDBDBD; }
押された場合
.button:pressed { -fx-text-fill: #424242; -fx-background-color: white; }
配置関連
.label { -fx-padding: 5.0; # すべてのpaddingを5.0にする }
サイズ関連
.label { -fx-min-width: 300.0; # 最小サイズ -fx-min-height: 100.0; -fx-pref-width: 300.0; # おすすめサイズ -fx-pref-height: 100.0; -fx-max-width: 300.0; # 最大サイズ -fx-max-height: 100.0; }
