JavaFX CSS

2024 年 8 月 29 日 | 阅读 6 分钟

什么是 CSS？

CSS（层叠样式表）是一种设计语言，用于增强网页的外观，而无需更改其功能。它只处理网页在 Web 浏览器中的呈现方式。

使用 CSS，我们可以为网页定义颜色、大小、字体样式、段落之间的间距、对齐方式以及更多内容，使其看起来更精确、更好。我们还可以配置应用程序的背景、布局、设计和各种不同大小设备的显示方式。

JavaFX 中的 CSS

JavaFX 作为新一代 UI 库，提供了配置应用程序主题的功能。JavaFX 提供了包 javafx.css，其中包含将 CSS 应用于 JavaFX 应用程序的所有类。

将 CSS 应用于 JavaFX 应用程序与将 CSS 应用于 HTML 页面类似。在本教程的这一部分中，我们将讨论样式规则以及在 JavaFX 中调用它们的方法。

默认样式表

JavaFX 使用 caspian.css 作为默认 CSS 文件。它可以在 JavaFX 运行时 JAR 文件 jfxrt.jar 中找到。此样式表定义了根节点和 UI 控件的默认样式规则。此文件位于 JDK 安装目录下的路径 /jre/lib 中。可以使用以下命令从 JAR 文件中提取样式表。

# jar xf jfxrt.jar  
# com/sun/javafx/scene/control/skin/caspian/caspian.css

向场景添加样式表

但是，JavaFX 为我们提供了覆盖默认样式表并为应用程序的每个节点定义我们自己的样式的能力。我们创建的样式表必须具有扩展名 .css，并且必须位于应用程序主类所在的目录中。

在 JavaFX 中，应用 CSS 到场景有一个特定的语法。语法如下；

Scene scene = new Scene(root,500,400);
scene.getStylesheet().add("path/Stylesheet.css");

在样式表中定义样式

可以通过使用样式的名称（也称为选择器）和一系列设置样式属性的规则来给出样式定义。样式规则在花括号内给出。请考虑以下名为 mystyle.css 的示例。它定义了在其容器应用程序中使用的每个按钮节点的样式定义。

示例

.button {
	-fx-font : 14px "serief";
	-fx-padding : 10;
	-fx-background-color : #CCFF99;
} 

选择器

JavaFX 中使用了各种类型的样式。但是，每种类型都考虑了其关于选择器的约定。样式类选择器命名约定如下：

如果样式类选择器由多个单词组成，请在它们之间使用连字符。
样式类选择器名称前面是点 (.)。

选择器的示例是

.button  
.check-box
.label 

可以通过使用节点的 ID 来定义特定节点的样式。可以使用 setId() 方法设置此 ID。在 Node_ID 之前使用 # 符号来为该节点创建样式名称。例如，具有 ID my_label 的节点可以具有以下类型的选择器名称。

在样式表中定义规则

样式定义的规则为属性分配值。属性名称有一些约定，如下所示。

如果属性名称由多个单词组成，则使用连字符 (-) 分隔它们。
样式的属性名称前缀为 -fx-。
属性名称和值之间用冒号 (:) 分隔。
规则用分号 (;) 分隔。

定义属性规则的示例如下。

-fx-background-color : #333356;
-fx-font : 16px "serief"; 

在 javafx 中定义了一个名为 .root 的特殊样式类。它应用于场景对象的根节点。由于应用程序的所有节点都是根节点的子节点，因此应用于此类的样式规则可以应用于应用程序的整个场景图。

.root 
{
-fx-font-family : "serief";
-fx-background1 : rgb(225,227,2255);
}

类样式

可以通过将它的定义添加到我们的样式表中来创建类样式。例如；

.label1{
	-fx-background-color : rgb(123,126,227);
	-fx-padding : 5;
	-fx-text-fill : rgb(245,123,201);
}

要将上述样式类添加到适当的节点，请使用 方法 getStyleClass().add() 方法序列。

Button button = new Button("SUBMIT");
button.getStyleClass().add(button1);

示例

package application;  
import javafx.application.Application;  
import javafx.scene.Scene;  
import javafx.scene.control.Button;  
import javafx.scene.control.Label;  
import javafx.scene.control.TextField;  
import javafx.scene.layout.GridPane;  
import javafx.stage.Stage;  
public class JavaFX_CSSExample extends Application { 

@Override
public void start(Stage primaryStage) throws Exception {  
Label first_name=new Label("First Name");  
Label last_name=new Label("Last Name");  
TextField tf1=new TextField();  
TextField tf2=new TextField();  
Button Submit=new Button ("Submit");   
GridPane root=new GridPane();  
root.setHgap(10);
root.setVgap(15);
Scene scene = new Scene(root,400,200);  
root.addRow(0, first_name,tf1);  
root.addRow(1, last_name,tf2);  
root.addRow(2, Submit);  
//Adding CSS file to the root 
root.getStylesheets().add("Style.css");
primaryStage.setScene(scene);  
primaryStage.show();  
}  
public static void main(String[] args) {  
launch(args);  
}  

} 

// style.css 
.label
{
	-fx-background-color:Black; 
	-fx-text-fill:white; 
	-fx-font-size:16;
	-fx-border-color: Wheat;
-fx-border-radius: 5;
}
.button
{
	-fx-background-color:Black; 
	-fx-font-family:courier_new; 
	-fx-text-fill:White;
	-fx-border-color: Wheat;
-fx-border-radius: 5;
	-fx-font-size:16;

ID 样式

JavaFX 为我们提供了为单个节点创建样式的能力。样式名称可以作为 ID 名称给出，前面带有井号 (#) 符号。

#submit-button{
	-fx-font : bold 18pt "serief";
	-fx-background-color : rgb(120,190,201);
} 

示例

package application;  
import javafx.application.Application;  
import javafx.scene.Scene;  
import javafx.scene.control.Button;  
import javafx.scene.control.Label;  
import javafx.scene.control.TextField;  
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.stage.Stage;  
public class SignUP extends Application {  

@Override
public void start(Stage primaryStage) throws Exception {  
	
	//Adding Labels to the form 
	Label first_name = new Label("First Name");  
Label last_name = new Label("Last Name");
Label Email = new Label("Email ID");
Label Password = new Label("Password");

//Adding text-field to the form 
TextField tf1=new TextField();  
TextField tf2=new TextField();  
TextField tf3=new TextField();  
TextField tf4=new TextField(); 

//creating submit button 
Button Submit=new Button ("Submit");

//setting ID for the submit button so that the particular style rules can be applied to it. 
Submit.setId("submit");

//Creating reset button 
Button Reset=new Button ("Reset");

//Creating title 
Text title = new Text();
title.setText("Sign Up");
title.setX(120);
title.setY(120);
title.setUnderline(true);
title.setId("title");
//creating grid-pane
GridPane root=new GridPane();  

//creating Scene object 
Scene scene = new Scene(root,400,400);

//adding the the nodes to the GridPane's rows 
root.addRow(0, title);
root.addRow(2, first_name,tf1);  
root.addRow(3, last_name,tf2); 
root.addRow(4, Email,tf3);  
root.addRow(5, Password,tf4); 
root.addRow(7, Submit,Reset);  

//setting horizontal and vertical gaps between the rows 
root.setHgap(10);
root.setVgap(10);

//adding style-sheet to the Scene 
root.getStylesheets().add("form.css");

primaryStage.setScene(scene);  
primaryStage.show();  
}  
public static void main(String[] args) {  
launch(args);  
}  

}

//form.css
.root{
	-fx-background-color:Wheat;
	-fx-alignment:center;
	-fx-background-radius: 100;
}
.label{
	-fx-font-size:18pt;
	-fx-font:bold 10pt"Arial";
	-fx-padding:10
}
.button
{
	-fx-effect:dropshadow(one-pass-box,black,8,0.0,2,0);
	-fx-border-radius:20;
	-fx-font:bold10pt"Arial";
}
#title
{
	-fx-font:bold20pt"Arial"; 
	-fx-effect:dropshadow(one-pass-box,GREEN,8,0.0,2,0);
	
}

设置内联样式

JavaFX 允许我们在 JavaFX 应用程序代码本身中定义 CSS 规则。但是，在 JavaFX 应用程序代码中定义的规则优先于样式表中的样式。

在下面的示例中，我们在代码文件中定义了 CSS 规则，它显示了如何使用 CSS 规则更改标签的颜色和字体。

Label label1 = new Label("Name: ");
label1.setStyle("-fx-background-color : blue, -fx-text-fill : white");

示例

package application;  
import javafx.application.Application;  
import javafx.scene.Scene;  
import javafx.scene.control.Button;  
import javafx.scene.control.Label;  
import javafx.scene.control.TextField;  
import javafx.scene.layout.GridPane;  
import javafx.stage.Stage;  
public class JavaFX_CSSExample extends Application { 

@Override
public void start(Stage primaryStage) throws Exception {  
Label first_name=new Label("First Name");  
	// setting style for the label first_name 
	first_name.setStyle("-fx-background-color:Black; -fx-text-fill:white; -fx-font-size:16");
Label last_name=new Label("Last Name");  
//setting style for the label last name 
	last_name.setStyle("-fx-background-color:Black; -fx-text-fill:white;-fx-font-size:16");
TextField tf1=new TextField(); 
	//setting style for the first text field
tf1.setStyle("-fx-background-color:Wheat; -fx-text-fill:Black; -fx-font-size:16");
TextField tf2=new TextField();  
	//setting style for the second TextField 
tf2.setStyle("-fx-background-color:Wheat; -fx-text-fill:Black; -fx-font-size:16");
	
Button Submit=new Button ("Submit");
	//setting styles for the button 
Submit.setStyle("-fx-background-color:Black; -fx-font-family:courier_new; -fx-text-fill:white;-fx-font-size:16");
GridPane root=new GridPane();  
root.setHgap(10);
root.setVgap(15);
Scene scene = new Scene(root,400,200);  
root.addRow(0, first_name,tf1);  
root.addRow(1, last_name,tf2);  
root.addRow(2, Submit);  
primaryStage.setScene(scene);  
primaryStage.show();  
}  
public static void main(String[] args) {  
launch(args);  
}  

}  