java css 與HTML css 語(yǔ)法類似
Selector 選擇器：
- # ID (選擇某ID的node們)
#closeButton {
-fx-text-fill: red;
}
- . className(選擇定義某個(gè)class的node們)
.button {
-fx-text-fill: blue;
}
.button#closeButton {
-fx-text-fill: red;
}
選擇ID既為closeButton又屬于button類的node
- 歸組同樣的樣式
.button {
-fx-text-fill: blue;
}
.label {
-fx-text-fill: blue;
}
等價(jià)于：
.button, .label {
-fx-text-fill: blue;
}
后代選擇器（選擇某個(gè)類型的后代類型）
/*選則祖先為hbox類樣式的.button樣式節(jié)點(diǎn)*/
.hbox .button {
-fx-text-fill: blue;
}
子節(jié)點(diǎn)選擇器（選擇某個(gè)父類型的子類型）
.hbox > .button {
-fx-text-fill: blue;
}
狀態(tài)選擇器也稱為偽類型選擇器视卢，它會(huì)匹配當(dāng)前所處狀態(tài)的node，比如匹配擁有focus的各墨，鼠標(biāo)的hover等等
.button:hover {
-fx-text-fill: red;
}
樣式皮膚主題的區(qū)別(styles,skin,themes)
styles 控件級(jí)別
skin 應(yīng)用級(jí)別
themes 操作系統(tǒng)級(jí)別
樣式的取名
Property names in JavaFX styles start with -fx-. For example, the property name font-size in normal CSS
styles becomes -fx-font-size in JavaFX CSS style. JavaFX uses a convention to map the style property names
to the instance variables. It takes an instance variable; it inserts a hyphen between two words; if the instance variable
consists of multiple words, it converts the name to the lowercase and prefixes it with -fx-. For example, for an
instance variable named textAlignment, the style property name would be -fx-text-alignment
直接修改應(yīng)用樣式
Application.setUserAgentStylesheet(Application.STYLESHEET_CASPIAN);
setUserAgentStyleSheet方法可以直接替換應(yīng)用的style.
內(nèi)聯(lián)寫法與 樣式表單的區(qū)別（difference between inline style and style sheet style)
設(shè)置css 樣式的優(yōu)先級(jí)
- Inline style (the highest priority) 內(nèi)聯(lián)寫法
node.setStyle("-fx.....");
//不能重復(fù)的setStyle(styleProperty)滓窍，以最后一次setStyle為準(zhǔn)
//錯(cuò)誤的寫法
node.setStyle("-fx-background-color: #9400D3");
node.setStyle("-fx-background-insets: 5");
node.setStyle("-fx-background-radius: 10");
//正確的寫法
node.setStyle("-fx-background-color: #9400D3;-fx-background-insets: 5;-fx-background-radius: 0");
- Parent style sheets 父節(jié)點(diǎn)樣式表單
- Scene style sheets 場(chǎng)景樣式表單
- Values set in the code using JavaFX API(直接API調(diào)用: setFont())
- User agent style sheets (the lowest priority)
css 屬性的繼承
Java fx 對(duì)于css 屬性有兩種繼承機(jī)制：
- 一種是繼承屬性類型 （通過類的繼承關(guān)系繼承）
- 一種是繼承屬性值
public class CSSInheritance extends Application {
public static void main(String[] args) {
Application.launch(args);
}
@Override
public void start(Stage stage) {
Button okBtn = new Button("OK");
Button cancelBtn = new Button("Cancel");
HBox root = new HBox(10); // 10px spacing
root.getChildren().addAll(okBtn, cancelBtn);
// Set styles for the OK button and its parent HBox
root.setStyle("-fx-cursor: hand;-fx-border-color: blue;-fx-border-width: 5px;");
okBtn.setStyle("-fx-border-color: red;-fx-border-width: inherit;");
Scene scene = new Scene(root);
stage.setScene(scene);
stage.setTitle("CSS Inheritance");
stage.show();
}
}
![Upload Paste_Image.png failed. Please try again.]
css 屬性值類型
- inherit : fx-xxx: inherit(繼承父節(jié)點(diǎn)的樣式)
- boolean(true or false) : -fx-display-caret: false
- string : -fx-skin:"com.xxx.xxxSkin"
- number : -fx-opacity:0.60
- angle : -fx-rotate:45deg
- point : 用 x,y 表示橫縱坐標(biāo)
- color-stop: 顏色梯度
- URI ：.image-view {-fx-image: url("http://jdojo.com/myimage.png");} 描述資源位置
- effect ： 陰影效果革为， 使用dropshadow和innershadow兩個(gè)css 函數(shù),參數(shù)
.drop-shadow-1 {-fx-effect: dropshadow(gaussian, gray, 10, 0.6, 10, 10);} - font type:
//散開的寫法
.my-font-style {
-fx-font-family: "serif";
-fx-font-size: 20px;
-fx-font-style: normal;
-fx-font-weight: bolder;
}
一句式寫法
.my-font-style {
-fx-font: italic bolder 20px "serif";
}
- paint
A paint type value specifies a color.(定制你的動(dòng)態(tài)顏色）
.my-style {
-fx-fill: linear-gradient(from 0% 0% to 100% 0%, black 0%, red 100%);
-fx-background-color: radial-gradient(radius 100%, black, red);
}
對(duì)于固定的顏色国瓮，你可以用
Using named colors(已命名定義好的顏色）
.my-style {
-fx-background-color: red;
}
Using looked-up colors
在根節(jié)點(diǎn)中定義扶歪，然后在子節(jié)點(diǎn)中向上查找所得：
.root {
my-color: black;
}
.my-style {
-fx-fill: my-color;
}
Using the rgb() and rgba() functions
/* 使用rgb或者rgba*/
.my-style-1 {
-fx-fill: rgb(0, 0, 255);
}
.my-style-2 {
-fx-fill: rgba(0, 0, 255, 0.5);
}
/*16進(jìn)制 */
.my-style-3 {
-fx-fill: #0000ff;
}
/* 8 進(jìn)制*/
.my-style-4 {
-fx-fill: #0bc;
}
Using the hsb() or hsba() function
.my-style-1 {
-fx-fill: hsb(200, 70%, 40%);
}
.my-style-2 {
-fx-fill: hsba(200, 70%, 40%, 0.30);
}
Using color functions: derive() and ladder()
.root {
my-base-text-color: red;
}
.my-style {
-fx-text-fill: ladder(my-base-text-color, white 29%, black 30%);
}
ladder函數(shù)依賴于my-base-text-color的光亮程度,低于29%為紅色，反之為黑色糙置。
背景色的幾個(gè)屬性
-fx-background-color: 背景顏色
-fx-background-insets: 背景內(nèi)邊框距離外邊框距離
-fx-background-radius: 背景邊框矩形四個(gè)角半徑
邊界的幾個(gè)屬性
-fx-border-color : 邊框顏色
-fx-border-width ： 邊框厚度
-fx-border-radius ： 邊框圓角半徑
-fx-border-insets ： 邊框距離邊界距離（layoutbounds)
-fx-border-style: 邊框線樣式云茸，比如點(diǎn)線：-fx-border-style: dotted
