java - 为 Scene Builder 集成为 HTML 制作的 CSS 样式表

Question

我为一些 HTML 网站找到了一些很酷的 CSS 表格，并想将它们用于我自己的 JavaFX 元素。

CSS:

.container {
  zoom: 1;
}

.container:before, .container:after {
  content: '';
  display: table;
}

.container:after {
  clear: both;
}

.column {
  position: relative;
  z-index: 1;
  float: left;
  width: 25%;
  padding: 30px 0;
  text-align: center;
  white-space: nowrap;
}

.column .button + .button {
  margin-left: 20px;
}

@media screen and (max-width: 800px) {
  .column {
    width: 50%;
  }
}

@media screen and (max-width: 400px) {
  .column {
    width: 100%;
  }
}

.button {
  display: inline-block;
  position: relative;
  height: 33px;
  line-height: 33px;
  padding: 0 15px;
  font-size: 15px;
  color: white;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  border: 2px solid;
  border-radius: 7px;
  outline: 0;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.25);
}

.button:before, .button:after {
  content: '';
  position: absolute;
}

.button:before {
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  z-index: -1;
  border-radius: 9px;
}

.button:after {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  border-radius: 7px;
}

.button.alt {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.button.alt:before {
  display: none;
}

但是我遇到了一些问题。

首先，如果我为 anchor Pane 选择文件，它会显示一个黄色的小符号和一个错误。对于样式类，我只能在容器和列之间进行选择。

即使我删除了 .container 和 . Css 中的列代码并将 css 工作表添加到我收到以下消息的按钮:

Jan. 24, 2018 2:22:04 VORM. javafx.css.CssParser declaration
WARNING: CSS Error parsing file:/C:/Users/AllinOne/IdeaProjects/MeineApp/out/production/MeineApp/sample/Button.css: Unexpected function '-webkit-linear-gradient(' while parsing 'background-image' at [4,22]
Jan. 24, 2018 2:22:04 VORM. javafx.css.CssParser declaration
WARNING: CSS Error parsing file:/C:/Users/AllinOne/IdeaProjects/MeineApp/out/production/MeineApp/sample/Button.css: Unexpected function '-moz-linear-gradient(' while parsing 'background-image' at [5,22]
Jan. 24, 2018 2:22:04 VORM. javafx.css.CssParser declaration
WARNING: CSS Error parsing file:/C:/Users/AllinOne/IdeaProjects/MeineApp/out/production/MeineApp/sample/Button.css: Unexpected function '-o-linear-gradient(' while parsing 'background-image' at [6,22]

有没有人可以向我解释如何为我的 JavaFX 应用程序设置它？

我读到 HTML 的 CSS 和 Java FX 之间存在一些差异。 是否有 java fx 按钮的免费 CSS 来源？大多数时候，我找不到仅适用于 HTML 的。

Answer 1

JavaFX 使用 CSS(语言)来定义 UI 节点的样式。您可以使用 CSS 设置的 JavaFX 节点的属性集或多或少完全不同于您可以为 HTML 元素设置的属性集。

(特别是，JavaFX 中的 CSS 几乎完全用于样式控件；它不用于布局，因为它可以在 HTML 中使用。但是，即使用于样式，属性名称故意不同。)

因此，没有真正的方法可以获取为 HTML 编写的 CSS 文件并将其应用于 JavaFX 场景图。仅仅因为语法相同，并不意味着它可以在不同的上下文中使用。

参见 reference guide for JavaFX CSS有关每个 JavaFX 节点类型的 CSS 属性的完整列表。您可以转换 button 的一些属性，例如，JavaFX CSS 属性。