初始化stylesheets變量添加css樣式
首先我們需要有場景才能運用css
Scene scene = new Scene(grid, 300, 275);
把場景加入到stage
primaryStage.setScene(scene);
然后就可以為需要的場景添加css樣式了
scene.getStylesheets().add(Login.class.getResource(“Login.css”).toExternalForm());
讓stage顯示出來
primaryStage.show();
接下來定義css樣式下面演示如何改進(jìn)標(biāo)簽控件的外觀。
背景圖被應(yīng)用到了.root樣式上，它表示會將樣式應(yīng)用到Scene實例的root節(jié)點上
.root {
記住對應(yīng)的路徑是與樣式表的相對路徑。
?? -fx-background-image: url(“url”);
}
下面演示如何改進(jìn)標(biāo)簽控件的外觀
.label {
本例中增加了字體的大小和字重，并且應(yīng)用了一個灰色(#333333)的陰影。陰影的目的是增加深灰色字體與淺灰色背景之間的對比度。
? -fx-font-size: 12px;
? -fx-font-weight: bold;
? -fx-text-fill: #333333;
? -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}
觀我們還可以為節(jié)點用.setId方法來為節(jié)點設(shè)置id從而為id設(shè)置css樣式
創(chuàng)建一個文本框
Text scenetitle = new Text(“Welcome”);
為這個文本框設(shè)置id
scenetitle.setId(“welcome-text”);
在css樣式單中:用#welcome-text為這個id添加css樣式
#welcome-text {
文本”Welcome” 的字體大小增加到32點，并且字體變成了Arial Black。文本的填充顏色被設(shè)置為深灰色(#818181)并且應(yīng)用了一個內(nèi)陰影效果，創(chuàng)建了一個浮雕效果。你可以通過將文本的填充顏色設(shè)置為比背景色深一些的顏色來產(chǎn)生內(nèi)陰影效果。
?? -fx-font-size: 32px;
?? -fx-font-family: “Arial Black”;
?? -fx-fill: #818181;
?? -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
為按鈕增加css樣式
.button {
? -fx-text-fill: white;
? -fx-font-family: “Arial Narrow”;
? -fx-font-weight: bold;
? -fx-background-color: linear-gradient(#61a2b1, #2A5058);
? -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}
.button:hover用在當(dāng)用戶將鼠標(biāo)懸停在按鈕上時,讓按鍵發(fā)生變化這樣的改變將使得用戶能感知到按鈕當(dāng)前是否被激活。你可以使用hover偽類(pseudo-class)來實現(xiàn)。一個偽類由類選擇器、冒號以及偽類名稱構(gòu)成
.button:initial表示沒有效果
.button:hover {
? -fx-background-color: linear-gradient(#2A5058, #61a2b1);
}
為更多的樣式修改請查看官網(wǎng)給出的css參考指南
https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#menubutton
