Javafx 简明教程

JavaFX - CSS

CSS ，也称为 Cascading Style Sheet ，是一种简单的设计语言，旨在简化制作网页并使其易于用户查看的过程。它允许我们定义网页用户界面元素的外观。使用 CSS，我们可以控制文本颜色、字体样式、段落间距、列宽和布局。除此之外，我们还可以控制所使用的背景图片或颜色、布局设计、不同设备和屏幕尺寸的视口变化，以及各种其他效果。

通常，CSS 广泛用于 Web 开发，但它也可以应用于 JavaFX 应用程序。在本教程中，我们将学习如何在 JavaFX 应用程序中使用 CSS。

CSS in JavaFX

JavaFX 为我们提供了使用 CSS 增强应用程序外观的便利性。包 javafx.css 包含用于为 JavaFX 应用程序应用 CSS 的类。

CSS 包含浏览器解释然后应用于文档中相应元素的样式规则。

样式规则由三部分组成，如下所示 −

  1. Selector − 选择器是一个 HTML 标记，将在其中应用样式。这可以是任何标记，如 <h1> 或 <table> 等。

  2. Property − 属性是 HTML 标记的属性类型。用更简单的术语来说，所有 HTML 属性都已转换为 CSS 属性。它们可以是颜色、 border 等。

  3. Value − 值被分配给属性。例如，颜色属性的值可以是 red 或 #F1F1F1 等。

我们可以将 CSS 样式规则语法设为：

selector { property: value }
css style

JavaFX 使用的默认样式表是 modena.css 。它位于 JavaFX 运行时 jar 中。

Adding Style Sheet in JavaFX

我们可以使用 getStylesheets() 方法将我们自己的样式表添加到 JavaFX 中的场景，如下所示：

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

Adding Inline Style Sheets in JavaFX

我们还可以使用 setStyle() 方法添加内联样式。这些样式仅由键值对组成，并且适用于设置它们的节点。以下是将内联样式表设置到按钮的示例代码。

.button {
   -fx-background-color: red;
   -fx-text-fill: white;
}

Example

假设我们开发了一个显示带有文本字段、密码字段、两个按钮的表单的 JavaFX 应用程序。默认情况下，此表单的外观如下图所示 −

grid pane

以下 JavaFX 代码演示了如何使用 CSS 向上述应用程序添加样式。将此代码保存在名为 CssExample.java 的文件中。

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.scene.control.TextField;
import javafx.stage.Stage;

public class CssExample extends Application {
   @Override
   public void start(Stage stage) {
      //creating label email
      Text text1 = new Text("Email");

      //creating label password
      Text text2 = new Text("Password");

      //Creating Text Filed for email
      TextField textField1 = new TextField();

      //Creating Text Filed for password
      PasswordField textField2 = new PasswordField();

      //Creating Buttons
      Button button1 = new Button("Submit");
      Button button2 = new Button("Clear");

      //Creating a Grid Pane
      GridPane gridPane = new GridPane();

      //Setting size for the pane
      gridPane.setMinSize(400, 200);

      //Setting the padding
      gridPane.setPadding(new Insets(10, 10, 10, 10));

      //Setting the vertical and horizontal gaps between the columns
      gridPane.setVgap(5);
      gridPane.setHgap(5);

      //Setting the Grid alignment
      gridPane.setAlignment(Pos.CENTER);

      //Arranging all the nodes in the grid
      gridPane.add(text1, 0, 0);
      gridPane.add(textField1, 1, 0);
      gridPane.add(text2, 0, 1);
      gridPane.add(textField2, 1, 1);
      gridPane.add(button1, 0, 2);
      gridPane.add(button2, 1, 2);

      //Styling nodes
      button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");
      button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");

      text1.setStyle("-fx-font: normal bold 20px 'serif' ");
      text2.setStyle("-fx-font: normal bold 20px 'serif' ");
      gridPane.setStyle("-fx-background-color: BEIGE;");

      // Creating a scene object
      Scene scene = new Scene(gridPane, 400, 300);

      // Setting title to the Stage
      stage.setTitle("CSS Example in JavaFX");

      // Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令，从命令提示符编译并执行已保存的 java 文件。

javac --module-path %PATH_TO_FX% --add-modules javafx.controls CssExample.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls CssExample

执行后，上述程序会生成如下所示的 JavaFX 窗口。

css output