JavaFx：CSS 元素無法繼承其 ID 的屬性

Question

我用 JavaFx 創建了一個選項菜單，並用 CSS 設計了它的樣式。我使用 FXML 來設計選項 window。在選項 window 中，我在頂部創建了一個 label 並為其指定了 ID“title”。 以下是我的 FXML 代碼和 CSS 代碼：

*{
 -fx-font-size: 14px;
    font-size: 14px;
 }

 
#title{
    -fx-font-size: 20px;
    font-size: 20px;
    -fx-text-fill: #35568c;
}

Label 的 FXML：

<Label id="title" alignment="CENTER" contentDisplay="CENTER" layoutX="80.0" layoutY="14.0" prefHeight="31.0" prefWidth="200.0" styleClass="big" text="Options">
         <font>
            <Font name="Bell MT Bold" size="20.0" />
         </font>
      </Label>

我的 output 的問題是 label 應該從 CSS 的#title 部分繼承屬性，但相反，它從 * 部分繼承字體大小，從 #title 部分繼承文本填充。

output截圖

編輯：

我將 #title 的 CSS 代碼更改為

#title{
    -fx-font: 20 'Bell MT';
    font: 20 'Bell MT';
    -fx-text-fill: #35568c;
}

現在我的代碼可以正常工作了。 我將 -fx-font-size 更改為 -fx-font。 但我仍然不明白為什么 font-size 不起作用。

Answer 1

無需設置非 JavaFX CSS 屬性，如font而不是-fx-font ，那些非 JavaFX CSS 屬性將被忽略（或可能導致問題）。

如果您在 FXML 中設置字體（不推薦），那么我認為這通常會覆蓋您在 CSS 中設置的值。

通常，對於 styles 之類的標題，最好使用樣式 class 而不是 id。

我不認為使用*通用選擇器是個好主意。 也許沒關系，也許不是。 標准 JavaFX modena.css樣式表默認使用.root的語法，也許這對您來說更好。

Scene JavaFX CSS中root樣式class的描述：

場景 object 沒有可設置的 CSS 屬性，也沒有任何偽類。 然而，場景的根節點被分配了樣式 class “root”（除了已經分配給節點的樣式類）。 這很有用，因為場景的根節點是所有活動場景圖節點的根容器。 因此，它可以作為繼承或查找的屬性的容器。

此外，您標記了您的問題 javafx-8。 JavaFX 8 已過時，建議使用更現代的版本 JavaFX。

更改默認值 colors

如果您想更改應用程序的默認值 colors，那么您可以通過覆蓋默認modena.css樣式表的.root部分中定義的查找 colors 來實現。

您可能會覆蓋的主要查找顏色是-fx-base ，它為整個應用程序設置默認顏色樣式。

如果您想了解有關查找 colors 的更多信息，請研究 JavaFX CSS 參考資料。

例如，以下樣式表規則將默認字體大小設置為 20，並將標簽中文本的默認顏色設置為深綠色。

.root {
    -fx-font-size: 20;
    -fx-text-background-color: darkgreen;
}

示例應用程序

該示例在.root部分中定義了應用程序中文本的默認大小。 默認樣式大小在.title部分被覆蓋，因此標題可以更大。 示例應用程序需要 JavaFX 17+。

示例應用程序未設置默認值 colors，但如果您想這樣做，您可以通過更改提供的 CSS 以匹配答案的默認 colors 部分中的 CSS 進行試驗。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class RootFontSizeApp extends Application {

    public static final String CSS = "data:text/css," + // language=CSS
            """
            .root {
                -fx-font-size: 20;
            }
            
            .title {
                -fx-font-size: 30;
            }
            """;

    @Override
    public void start(Stage stage) throws Exception {
        Label title = new Label("Greetings earthlings");
        title.getStyleClass().add("title");

        Scene scene = new Scene(
                new VBox(20,
                        title,
                        new Label("hello, world")
                )
        );
        scene.getStylesheets().setAll(CSS);

        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}