将CSS转换为JavaFx CSS

Question

我有一个Web应用程序，并且为此我们使用了CSS。我们正在将UI移植到JavaFX，并打算以与Web应用程序中相同的方式进行样式设置。我尝试加载在Web项目中使用的CSS，但样式没有得到反映。经过一番搜索后，我发现Oracle创建了类似于CSS但不完全相同的东西，称为JavaFX CSS。

我想知道的是：是否有一种简单的方法可以将我的（Web）CSS转换为JavaFX CSS？

- harshkumar1

Answer 1

有一些简单的方法可以将我的（Web）CSS转换为JavaFx CSS，但没有自动化的转换工具可用。建议您手动转换一小部分CSS样式。您可以使用分析工具（例如SceneBuilder中的CSS分析器）来帮助完成此任务。在执行转换时，请参考JavaFX CSS参考文档。如果您在转换JavaFX和HTML CSS文件之间的元素或属性时遇到特定问题，请发布涉及这些转换困难的新问题。我们正在将UI移植到JavaFx，并打算以与Web应用程序相同的方式进行样式设置。

如果您有大量CSS，那么这可能会有些棘手。JavaFX CSS与基于Web的HTML CSS不同。JavaFX CSS文件与HTML CSS共享一个通用的语法格式，但是JavaFX中所有的CSS属性都与HTML CSS中的不同。

HTML CSS可以指定由HTML渲染引擎呈现的布局属性。JavaFX布局和渲染引擎与HTML工作方式不同，因此基于HTML CSS的布局规范在任何JavaFX CSS、JavaFX代码或FXML定义的布局管理器中都没有直接的等效物。

尽管如此，JavaFX CSS非常灵活。许多东西与HTML CSS类似（例如区域背景和颜色规范），因此可以在合理的时间内将HTML CSS的要点转换为具有可接受精度的JavaFX CSS，前提是您在两种CSS形式上都相当熟练。只是不要期望您的JavaFX应用程序和Web应用程序看起来或行为完全相同。

Oracle创建了一个名为JavaFX CSS的东西，它类似于CSS但不完全是CSS。

JavaFX CSS实际上就是CSS，其语法和文件格式与W3C CSS的基本语法和数据类型相同。

W3C CSS是你在问题中所称的普通CSS或（Web）CSS。有许多扩展和建议扩展到W3C CSS，其中许多扩展甚至在主要浏览器中也得不到很好的支持。

考虑使用WebView来处理应用程序的某些部分

与其将整个应用程序从HTML移植到JavaFX，您可能希望保留一些应用程序的HTML部分，并将其他部分移植到JavaFX控件中。

JavaFX包括一个WebView组件，可以轻松地嵌入JavaFX应用程序中。 WebView可以准确地呈现HTML，并且可以解析和理解W3C CSS。 您可以使用现有的一些CSS和HTML来为JavaFX应用程序的部分设置样式并进行渲染。

因为JavaFX CSS和W3C CSS共享相同的文件格式，您甚至可以将JavaFX CSS样式和W3C CSS样式放在同一个CSS文件中，JavaFX和WebView运行时将聪明地在呈现其特定组件时应用适当的样式。

另请参见：

- JavaFX CSS参考指南 - 学习CSS（JavaFx风格）

- jewelsea