StyleableObjectPropertyを使用して、ノードに定義された css 属性を動的にオーバーライドできることを知っています。すべてのノードがこの変更を継承するように、css スタイルシートの「.root」クラスで宣言されたルート プロパティを変更する方法を尋ねています。
たとえば、アプリケーションのすべてのテキストに使用されるフォントの色属性を変更したいと思います。この色はアプリケーションで動的に変更でき、それを使用するすべてのノードに適用する必要があります。
ありがとう
質問する
4293 次
2 に答える
2
一般に、CSS 設定を理解する最善の方法は、デフォルト スタイルシートのソース コードを調べることです。
たとえば、フォントの色は、背景の強度に応じて 3 つの固定フォント色のいずれかを自動的に選択することによって実際に管理されます (たとえば、白い背景に白いテキストが表示されることはありません)。
/* One of these colors will be chosen based upon a ladder calculation
* that uses the brightness of a background color. Instead of using these
* colors directly as -fx-text-fill values, the sections in this file should
* use a derived color to match the background in use. See also:
*
* -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
* -fx-text-background-color for text on top of -fx-background
* -fx-text-inner-color for text on top of -fx-control-inner-color
* -fx-selection-bar-text for text on top of -fx-selection-bar
*/
-fx-dark-text-color: black;
-fx-mid-text-color: #333;
-fx-light-text-color: white;
したがって、これらを次のようなものでオーバーライドできます
.root {
-fx-dark-text-color: navy;
-fx-mid-text-color: blue;
-fx-light-text-color: lightskyblue;
}
外部スタイル シートで、アプリケーション全体のフォントの色を変更します。(背景が問題にならないことが確実な場合は、すべて同じ色にすることもできますが、それはお勧めしません。)
ここで設定されたプロパティは、実際には「ルックアップされた色」です。ルックアップされた色の値は親ノードから継承されるため、これらの値はシーン グラフ全体に適用されます。
コードからこれを行いたい場合は、次の方法で同じことを達成できます
root.setStyle(
"-fx-dark-text-color: navy ;"+
"-fx-mid-text-color: blue ;"+
"-fx-light-text-color: lightskyblue ;");
于 2016-03-08T12:55:24.287 に答える
1
これは、modena.css @ jfxrt.jar (com/sun/javafx/scene/control/skin/)からのもので、JavaFX ランタイム JAR ファイルにあります。ただし、caspian.css がデフォルトのスタイルシートになる可能性があります。
は-fx-base: #ececec;、アプリ全体に大きな影響を与えます。
//add css example
scene.getStylesheets().add(getClass()
.getResource("/theshow/jimmylandstudios/gui/THESHOW5.css")
.toExternalForm());
/**************************************************** ******************************
* *
* コア インフラストラクチャ ビットの CSS スタイル。.root セクションは * を提供します
* 残りのセクションで使用される全体的なデフォルトの色。*
* *
****************************************************** ****************************/
。根 {
/**************************************************** **************************
* *
* 残りの色が派生するメインのカラー パレット。*
* *
****************************************************** ************************/
/* オブジェクトのベース カラーであるライト グレー。使用する代わりに
* -fx-base 直接、このファイルのセクションは通常 -fx-color を使用します。
*/
-fx ベース: #ececec;
/* ウィンドウの背景に使用される非常に明るいグレー。こちらもご覧ください
* -fx-text-fill として使用する -fx-text-background-color
* -fx-background で色付けされた背景の上に描画されるテキストの値。
*/
-fx-background: 派生(-fx-base,26.4%);
/* テキスト ボックス、パスワード ボックス、リスト、ツリー、および
* テーブル。-fx-text-inner-color も参照してください。
* -fx-text-fill 色付きの背景の上にペイントされたテキストの値
* -fx-control-inner-background を使用。
*/
-fx-control-inner-background: 派生(-fx-base,80%);
/* 代替行の -fx-control-inner-background のバージョン */
-fx-control-inner-background-alt: 派生(-fx-control-inner-background,-2%);
/* これらの色の 1 つがラダー計算に基づいて選択されます
* 背景色の明るさを使用します。これらを使用する代わりに
* 色を -fx-text-fill 値として直接指定する場合、このファイルのセクションは
*使用中の背景に合わせて派生色を使用します。以下も参照してください。
*
* -fx-base、-fx-color、および -fx-body-color の上のテキストの -fx-text-base-color
* -fx-background の上にあるテキストの -fx-text-background-color
* -fx-control-inner-color の上にあるテキストの -fx-text-inner-color
* -fx-selection-bar の上にあるテキストの -fx-selection-bar-text
*/
-fx-dark-text-color: 黒;
-fx-mid-text-color: #333;
-fx-light-text-color: 白;
/* オブジェクトをハイライト/アクセントにするための明るい青。例: 選択済み
* 文章; メニュー、リスト、ツリー、およびテーブルで選択されたアイテム。プログレスバー */
-fx-アクセント: #0096C9;
/* デフォルトのボタンの色。これはアクセントに似ていますが、より微妙です */
-fx-default-button: #ABD8ED;
/* オブジェクトのフォーカス インジケータの明るい青色。通常、
* 「フォーカスされた」疑似クラスの -fx-background-color の最初の色。また
* 通常、光る効果を提供するために -1.4 のインセットで使用されます。
*/
-fx-focus-color: #039ED3;
-fx-faint-focus-color: #039ED322;
/* スタイリング コントロールで使用される色。デフォルト値は
* -fx-base で、疑似クラスによってベース カラーを変更するように変更されます。
* たとえば、「hover」疑似クラスは通常、-fx-color を
* -fx-hover-base (下記参照) と「武装」疑似クラスは通常
* -fx-color を -fx-pressed-base に設定します。
*/
-fx-color: -fx-base;
/* グラフのカラー パレット */
CHART_COLOR_1: #f3622d;
CHART_COLOR_2: #fba71b;
CHART_COLOR_3: #57b757;
CHART_COLOR_4: #41a9c9;
CHART_COLOR_5: #4258c9;
CHART_COLOR_6: #9a42c8;
CHART_COLOR_7: #c84164;
CHART_COLOR_8: #888888;
/* チャート カラー パレット半透明
* これらは、BubbleChart など、上記の色の半透明バージョンを必要とするグラフで使用されます。彼ら
* アルファだけで上記とまったく同じ色です
*
* 不透明度 20%
*/
CHART_COLOR_1_TRANS_20: #f3622d33;
CHART_COLOR_2_TRANS_20: #fba71b33;
CHART_COLOR_3_TRANS_20: #57b75733;
CHART_COLOR_4_TRANS_20: #41a9c933;
CHART_COLOR_5_TRANS_20: #4258c933;
CHART_COLOR_6_TRANS_20: #9a42c833;
CHART_COLOR_7_TRANS_20: #c8416433;
CHART_COLOR_8_TRANS_20: #88888833;
/* 不透明度 70% */
CHART_COLOR_1_TRANS_70: #f3622db3;
CHART_COLOR_2_TRANS_70: #fba71bb3;
CHART_COLOR_3_TRANS_70: #57b757b3;
CHART_COLOR_4_TRANS_70: #41a9c9b3;
CHART_COLOR_5_TRANS_70: #4258c9b3;
CHART_COLOR_6_TRANS_70: #9a42c8b3;
CHART_COLOR_7_TRANS_70: #c84164b3;
CHART_COLOR_8_TRANS_70: #888888b3;
/**************************************************** **************************
* *
* メイン カラー パレットから派生した色。*
* *
****************************************************** ************************/
/* -fx-base よりも少し明るく、-fx-color として使用されます
* 「ホバー」疑似クラス状態。
*/
-fx-hover-base: はしご(
-fx ベース、
派生 (-fx ベース、20%) 20%、
派生 (-fx ベース、30%) 35%、
派生 (-fx ベース、40%) 50%
);
/* -fx-base より少し暗く、-fx-color として使用されます
* 「武装した」疑似クラス状態。
*
* TODO: これは -fx-armed-base に名前を変更する必要がありますか?
*/
-fx-pressed-base: 派生(-fx-base,-6%);
/* テキストが上に描画されるときに -fx-text-fill に使用する色
* -fx-background 色で塗りつぶされた背景。
*/
-fx-text-background-color: はしご(
-fx-背景、
-fx-light-text-color 45%,
-fx-dark-text-color 46%,
-fx-dark-text-color 59%,
-fx-mid-text-color 60%
);
/* -fx-color よりも少し暗く、オブジェクトの周囲にボックスを描画するために使用されます
* プログレス バー、スクロール バー、スクロール ペイン、ツリー、テーブル、およびリストとして。
*/
-fx-box-border: ラダー(
-fx-color,
ブラック 20%、
派生(-fx-color,-15%) 30%
);
/* -fx-background よりも暗く、テキスト ボックスの周りにボックスを描画するために使用されます。
*パスワードボックス。
*/
-fx-text-box-border: はしご(
-fx-背景、
黒 10%、
派生 (-fx-背景、-15%) 30%
);
/* -fx-background よりも明るく、小さなハイライトを提供するために使用されます。
* -fx-background の上に必要です。これは決してモデナの影ではありませんが、
* -fx-shadow-highlight-color 名を Caspian と互換性があるように保持します。
*/
-fx-shadow-highlight-color: ラダー(
-fx-背景、
rgba(255,255,255,0.07) 0%,
rgba(255,255,255,0.07) 20%、
rgba(255,255,255,0.07) 70%、
rgba(255,255,255,0.7) 90%、
rgba(255,255,255,0.75) 100%
);
/* 上の -fx-color より少し暗い色から上のグラデーション
* 下部の -fx-color よりもさらに暗い。通常は2番目です
* -fx-background-color リストの色を小さな細い境界線として
* コントロール。通常、コントロールと同じサイズです (つまり、インセット
* は 0)。
*/
-fx-outer-border: 派生(-fx-color,-23%);
/* 上部の -fx-color よりも少し明るいグラデーションから
※下の方が少し濃いです。通常、3 番目の色です。
* -fx-background-color のリストは、外側の境界線の内側に薄いハイライトとして表示されます。
* インセットは通常 1 です。
*/
-fx-inner-border: 線形グラデーション (下へ、
はしご（
-fx-color,
導出(-fx-color,30%) 0%,
導出(-fx-color,20%) 40%,
導出(-fx-color,25%) 60%,
導出(-fx-color,55%) 80%,
導出(-fx-color,55%) 90%,
導出(-fx-color,75%) 100%
)、
はしご（
-fx-color,
派生 (-fx-色,20%) 0%,
導出(-fx-color,10%) 20%,
導出(-fx-color,5%) 40%,
導出(-fx-color,-2%) 60%,
派生 (-fx-色,-5%) 100%
));
-fx-inner-border-horizontal: linear-gradient(右へ、deliver(-fx-color,55%)、deliver(-fx-color,-5%));
-fx-inner-border-bottomup: linear-gradient(上へ、deliver(-fx-color,55%)、deliver(-fx-color,-5%));
/* 上部の -fx-color より少し明るい色から
* 下部の -fx-color よりも少し暗く、塗りつぶしに使用されます
* ボタンなどの多くのコントロールの本体。
*/
-fx-body-color: 線形グラデーション (下へ、
はしご（
-fx-color,
導出(-fx-color,8%) 75%,
派生 (-fx-color,10%) 80%
)、
派生 (-fx-色、-8%));
-fx-body-color-bottomup: linear-gradient(上へ、derive(-fx-color,10%) ,derive(-fx-color,-6%));
-fx-body-color-to-right: linear-gradient(右へ、derive(-fx-color,10%) ,derive(-fx-color,-6%));
/* 上にテキストをペイントするときに -fx-text-fill として使用する色
* -fx-base、-fx-color、および -fx-body-color で塗りつぶされた背景。
*/
-fx-text-base-color:ladder(
-fx-color,
-fx-light-text-color 45%,
-fx-dark-text-color 46%,
-fx-dark-text-color 59%,
-fx-mid-text-color 60%
);
/* 上にテキストをペイントするときに -fx-text-fill として使用する色
* -fx-control-inner-background で塗りつぶされた背景。
*/
-fx-text-inner-color: ラダー(
-fx-control-inner-background,
-fx-light-text-color 45%,
-fx-dark-text-color 46%,
-fx-dark-text-color 59%,
-fx-mid-text-color 60%
);
/* チェック オン チェックなどの小さなマークのようなオブジェクトに使用する色
* ボックス、ラジオ ボタンの円で囲まれたもの、スクロール バーの矢印など。
*/
-fx-mark-color: はしご(
-fx-color,
ホワイト 30%、
派生(-fx-color,-63%) 31%
);
/* マークのようなオブジェクトの小さな薄い光の「影」。一般的に使用される
* 1 0 -1 0 のインセットで -fx-mark-color と組み合わせる */
-fx-mark-highlight-color: ハシゴ(
-fx-color,
派生(-fx-color,80%) 60%,
白 70%
);
/* メニュー、リスト、ツリー、
* とテーブル。*/
-fx-selection-bar: -fx-accent;
/* リスト セルの選択などに使用する背景色。
* コントロールにフォーカスがないか、以前に選択された項目の行がありません。*/
-fx-selection-bar-non-focused: ライトグレー;
/* 上にテキストをペイントするときに -fx-text-fill として使用する色
* -fx-selection-bar で塗りつぶされた背景。
*
* TODO: これは削除できます
*/
-fx-selection-bar-text: -fx-text-background-color;
/* これらはポップアップに必要です */
-fx-background-color: 継承;
-fx-background-radius: 継承;
-fx-background-insets: 継承;
-fx-padding: 継承;
/* ホバーを示すために ListView/TreeView/TableView で使用する色。*/
-fx-cell-hover-color: #cce3f4;
/** セル ベースのコントロールでのキーボード フォーカス トラバーサルのフォーカス ライン */
-fx-cell-focus-inner-border: 派生(-fx-selection-bar,30%);
/* ページネーションで使用する色 */
-fx-page-bullet-border: #acacac;
-fx-page-indicator-hover-border: #accee5;
-fx-focused-text-base-color : はしご(
-fx-選択バー、
-fx-light-text-color 45%,
-fx-dark-text-color 46%,
-fx-dark-text-color 59%,
-fx-mid-text-color 60%
);
-fx-focused-mark-color : -fx-focused-text-base-color ;
/**************************************************** **************************
* *
*シーンのデフォルトの背景色を設定*
* *
****************************************************** ************************/
-fx-background-color: -fx-background;
}
于 2016-05-19T18:22:46.337 に答える