如何使用CSS样式表在JavaFX中样式化文本形状而不为其指定样式类？

Question

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

我正在尝试使用.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不起作用，并且通过扩展我会假设没有其他伪类可以工作：

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

这是我的其余部分：

root {
    display: block
}

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

我将根布局（gridpane）样式类设置为＆＃34; root＆＃34;这是有效的（我可以看到背景渐变颜色很好）。

我喜欢CSS的想法，但我似乎永远无法让它工作，它让我疯狂。我在这做错了什么？文本形状没有可访问的CSS pesudo-classes？甚至可以上课？我错过了什么？

Answer 1

您已将-fx-fill设置为文本和文本中的相同颜色：悬停。

对我而言，当我使用你的CSS时：标签和按钮的文字显示悬停效果（我将fx-fill更改为文本中的另一个值：悬停）。

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

Answer 2

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

除非你使用特殊的css类

，否则你必须这样做

---

我喜欢CSS的想法...文本形状没有可访问的CSS pesudo-classes？ ...？

您需要做的是阅读modena.css 在 jfxrt.jar（location jre \ lib \ ext）中 jre 路径中搜索它的模式位于

<小时/>

来自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 {
    /* ... */
}

ScenicView

有一个叫做风景的软件，你可以从fx体验网站上获得它。您也可以使用该软件查找有关控件的css类的信息。

Answer 3

这是因为Text是一个形状。所以它略有不同。

//把它放在你的CSS中

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