通过CSS样式美化组件

轻语言视窗程序支持使用类似在HTML中使用 CSS 那样美化界面。

CSS（层叠样式表）是一种用于定义用户界面元素外观的样式语言。它允许开发者分离应用程序的视觉设计与功能逻辑，使得修改和维护应用的界面变得更加容易。通过使用 CSS 您可以为您编写的轻语言视窗程序中的的控件设置如颜色、字体、大小等样式属性。

支持的样式属性

JavaFx 官方 CSS 支持属性：查看 JavaFx CSS样式属性

CSS样式的作用

统一风格：通过一个或多个 CSS 文件，可以确保整个应用程序保持一致的外观。
易于维护：将样式从代码中分离出来，可以在不影响功能代码的情况下更新UI。
灵活性：可以在运行时动态更改样式，提供更灵活的用户体验。

在代码中使用

在轻语言视窗程序中使用CSS样式有 2 种方式。

1.使用可视组件自带函数

使用每个可视组件自带的函数 置样式 设置键值对样式值。

例如：

标签1.置样式("-fx-background-color:#225678;-fx-text-fill:#ffffff;")

2.使用样式表

样式表可以方便我们管理多个样式类，与HTML一样，可以将多个样式通过名称分类编写到一个 .css 样式表中。

首先在项目根文件夹中的 static 文件夹中新建一个 CSS 样式文件，这里命名为：mystyle.css

然后编写不同的样式类：

.my-btn {
    -fx-background-color: #4CAF50; /* 设置按钮背景颜色 */
    -fx-text-fill: white; /* 设置文本颜色 */
}

/* 圆角按钮 */
.my-btn2 {
	-fx-background-color: #908978;
    -fx-text-fill: #ffffff;
    -fx-border-radius:20px;
    -fx-border-color:#335566;
    -fx-background-radius:20px;
    -fx-cursor:hand;
}

/* 圆角渐变按钮 */
.my-btn3 {
	-fx-background-color: radial-gradient(center 50% 50%, radius 50%, #1E90FF, #4C8897);
    -fx-text-fill: #ffffff;
    -fx-background-radius:20px;
    -fx-cursor:hand;
}

/* 圆角标签 */
.my-bel{
    -fx-background-color: #3CB371;
    -fx-text-fill: #ffffff;
    -fx-background-radius:5px;
    -fx-padding:4px;
}

/* 圆角背景渐变标签 */
.my-bel2{
    -fx-background-color: linear-gradient(to right, #4CAF50, #FFEB3B);
    -fx-text-fill: #ffffff;
    -fx-background-radius:5px;
    -fx-padding:4px;
}

.my-btn-cs {
    -fx-background-color: linear-gradient(to bottom right, #6a11cb, #2575fc); /* 渐变背景 */
    -fx-text-fill: white; /* 文本颜色 */
    -fx-font-size: 14px; /* 字体大小 */
    -fx-padding: 10 20; /* 内边距 */
    -fx-background-radius: 30; /* 圆角半径 */
    -fx-border-radius: 30; /* 边框圆角半径 */
    -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.3), 10, 0.5, 0, 5); /* 阴影效果 */
    -fx-cursor: hand; /* 鼠标指针悬停时变为手型 */
}

.my-btn-cs:hover {
    -fx-background-color: linear-gradient(to bottom right, #8c2ce4, #4aa8fe); /* 悬停时的背景颜色 */
}

.my-btn-cs:pressed {
    -fx-background-color: linear-gradient(to top left, #6a11cb, #2575fc); /* 点击时的背景颜色 */
}

在窗口逻辑代码中使用：

事件 窗口创建完毕()
    标签1.标题 = "窗口创建完毕"
    
    ' 设置样式属性值，修改标签背景颜色和文本颜色
    标签1.置样式("-fx-background-color:#225678;-fx-text-fill:#ffffff;")
    
    ' 加载位于项目/static文件夹中的样式表文件
    本对象.加载样式表("mystyle.css")
    
    ' 将样式表中指定样式（根据名称）添加给按钮
    按钮1.添加样式类("my-btn")
    按钮2.添加样式类("my-btn2")
    按钮3.添加样式类("my-btn3")
    按钮4.添加样式类("my-btn-cs")
    ' 将样式表中的样式添加到标签中
    标签2.添加样式类("my-bel")
    标签3.添加样式类("my-bel2")
结束 事件

编译运行效果：