JavaFX - 相同节点类型的不同css类

时间:2014-06-30 09:05:34

标签: css javafx

我正在尝试将两种不同的样式分配给JavaFX应用程序的相同类型的节点。

例如,假设我有两个Text节点

<Text text="Welcome" GridPane.columnSpan="2" GridPane.halignment="CENTER" 
        GridPane.rowIndex="0" />
<Text text="Goodbye" GridPane.columnSpan="2" GridPane.halignment="CENTER" 
        GridPane.rowIndex="0" />

和application.css

Text {
    -fx-font-size: 15pt;
    -fx-font-family: Tahoma;
    -fx-font-weight: bold;
}

这样,我将使用相同的类来设置两个文本的样式。如何为两个Text实例创建和分配两种不同的样式?

1 个答案:

答案 0 :(得分:3)

您可以使用id属性来区分两个Text节点并在其上应用不同的CSS

<Text text="Welcome" GridPane.columnSpan="2" GridPane.halignment="CENTER" 
        GridPane.rowIndex="0" id="text1"/>
<Text text="Goodbye" GridPane.columnSpan="2" GridPane.halignment="CENTER" 
        GridPane.rowIndex="0" id="text2"/>

并在css文件中,您可以拥有

#text1{
    -fx-font-size: 10pt;
    -fx-font-family: Tahoma;
    -fx-font-weight: bold;
}

#text2{
        -fx-font-size: 15pt;
        -fx-font-family: Tahoma;
        -fx-font-weight: regular;
}

P.S。您也可以使用不同的css类为两个文本分隔相同的内容。请关注this link了解详情