JavaFX CSS教程:从入门到精通

发表时间: 2024-05-28 20:11

JavaFX 提供了强大的 CSS(Cascading Style Sheets,层叠样式表)支持,允许开发者对用户界面进行丰富的视觉设计和自定义。就像网页开发中使用CSS一样,JavaFX的CSS可以用来改变控件的颜色、字体、大小、布局等外观属性,从而提升应用的美观性和用户体验

使用示例:

1. 应用CSS到JavaFX应用

有几种方法可以将CSS应用到JavaFX应用中:

  • 内联样式:直接在Java代码中设置控件的样式属性。
 button.setStyle("-fx-background-color: #FFA500; -fx-text-fill: white;");
  • 外部CSS文件:推荐做法,将样式规则放在单独的.css文件中,然后在应用中加载。
scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());

2. CSS选择器

JavaFX支持CSS2和部分CSS3的选择器,包括但不限于:

  • 类型选择器:直接指定控件类型,如 .button {}
  • ID选择器:为特定控件分配唯一ID并在CSS中引用,如 #myButton {}
  • 类选择器:为控件分配类并在CSS中定义样式,如 .custom-class {}
  • 伪类选择器:如:hover, :pressed等,用于定义交互状态下的样式。

3. 常用CSS属性示例

  • 背景颜色:-fx-background-color: #color;
  • 文字颜色:-fx-text-fill: #color;
  • 字体:-fx-font-family: 'Arial'; -fx-font-size: 14px;
  • 边框:-fx-border-color: #color; -fx-border-width: 2px;
  • 圆角:-fx-background-radius: 5px;

示例:外部CSS文件应用

styles.css

.button {    -fx-background-color: linear-gradient(#61a2b1, #4f899d);    -fx-text-fill: white;}.button:hover {    -fx-background-color: derive(linear-gradient(#61a2b1, #4f899d), 30%);}#specialButton {    -fx-font-weight: bold;    -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 10, 0, 0, 0, 0);}

Main.java

Button button = new Button("Normal Button");Button specialButton = new Button("Special Button");specialButton.setId("specialButton");Scene scene = new Scene(new StackPane(button, specialButton), 300, 250);scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());

通过这种方式,你可以创建一个既美观又具有专业外观的JavaFX应用。