如何使用 CSS 样式表对 JavaFX 中的文本形状进行样式化而不为其分配样式类？

Question

我有一个相当简单的 JavaFX 控件，我正在尝试使用 CSS 样式表对其进行样式化。 我的背景设置得很好，但我有几个必要的文本形状，因为控件本身的大小可能会有所不同，我想用控件缩放文本。

我正在尝试使用 .text{/*CSS Code*/} 对 CSS 中的文本进行样式化，但它不起作用：

.text{
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );   
}

当我在 Scene Builder 中打开 FXML 文件时，我必须先将其应用一个样式类，然后才能看到效果。

我不在乎，但我也想在悬停或单击文本形状时应用效果，并且显然使用样式类访问伪类 :hover 不起作用，并且通过扩展我将假定没有其他伪-class 可以：

.text:hover{
    -fx-fill: #818181; 
}

这是我剩下的：

root {
    display: block
}

.root{
    -fx-background-color: linear-gradient(
        from 0% 0% to 100% 100%, #b478ff 0%, #9400d3 100%
    );
}

我将根布局（一个网格窗格）样式类设置为“根”并且可以正常工作（我可以很好地看到背景渐变颜色）。

我喜欢 CSS 的想法，但我似乎永远无法让它发挥作用，它让我发疯。我在这里做错了什么？文本形状没有可访问的 CSS 伪类？甚至根本不上课？我错过了什么？

Answer 1

您已将 -fx-fill 设置为 text 和 text:hover 中相同的颜色。

对我来说，当我使用您的 CSS 时，它可以工作：标签和按钮的文本显示悬停效果（我将 fx-fill 更改为 text:hover 中的另一个值）。

示例代码：http://pastebin.com/GNDwz626

Answer 2

...在看到效果之前，我必须将它应用到样式类。

有时你必须这样做，除非你使用特殊的 css 类

---

我喜欢 CSS 的想法...对于没有可访问的 CSS 伪类的文本形状？ ...？

您需要做的是阅读 modena.css 它在 jfxrt.jar (location jre\lib\ext) 在你的 jre 路径中搜索它 modena.css 位于

---

from modena.css

这里是从 css 中提取的一些信息。

/*******************************************************
 *                                                     *
 * Text COMMON                                         *
 *                                                     *
 ******************************************************/

.text-input {
    /* ... */
}
.text-input:focused {
    /* ... */
}

/*******************************************************
 *                                                     *
 * TextArea                                            *
 *                                                     *
 ******************************************************/

.text-area {
    /* ... */
}
.text-area > .scroll-pane {
    /* ... */
}
.text-area > .scroll-pane > .scroll-bar:horizontal {
    /* ... */
}
.text-area > .scroll-pane > .scroll-bar:vertical {
    -/* ... */
}
.text-area > .scroll-pane > .corner {
    /* ... */
}
.text-area .content {
    /* ... */
}
.text-area:focused .content {
    /* ... */
}

风景视图

有一个软件叫scenery view，你可以从fx体验网站获取。您也可以使用该软件来查找有关控件的 css 类的信息。

Answer 3

这是因为文本是一种形状。所以略有不同。

// 把这个放到你的css中

/* This sets the fill for the Text Shape */
Text {
    -fx-fill: white;
}