Style UI with USS

每个 VisualElement 都包含样式属性，这些属性用于设置元素的尺寸以及元素在屏幕上的绘制方式，例如 backgroundColor 或 borderColor。

样式属性可以在 C# 中设置，也可以在样式表中设置。样式属性有其自己的数据结构（IStyle 接口）。

UI 工具包支持用 USS（Unity 样式表）编写的样式表。USS 文件是受 HTML 中的层叠样式表 (CSS) 启发的文本文件。USS 格式与 CSS 类似，但 USS 包括一些覆盖和自定义以便于更好地与 Unity 协同工作。

本节详细介绍 USS、其语法以及与 CSS 的差异。

有关受支持的 USS 属性的快速参考，请参阅 USS 属性参考。

Unity 样式表的定义

Unity 样式表 (USS) 的基本构成元素如下：

• USS 是被视为资源的文本文件。此文本文件必须具有 .uss 扩展名。
• USS 仅支持样式规则。
• 样式规则由选择器和声明块组成。
• 选择器确定样式规则影响的视觉元素。
• 由花括号括起来的声明块包含一个或多个样式声明。每个样式声明都由属性和值组成。每个样式声明以分号结尾。
• 每个样式属性的值是一个字面值，在解析时，必须与目标属性名称匹配。

样式规则的一般语法如下：

selector {
  property1:value;
  property2:value;
}

Attach USS to visual elements

可以将 Unity 样式表 (USS) 附加到任何视觉元素。样式规则适用于视觉元素及其所有后代。必要时，还会自动重新应用样式表。

应使用标准 Unity API（如 AssetDatabase.Load() 或 Resources.Load()）来加载 StyleSheet 对象。使用 VisualElement.styleSheets.Add() 方法可将样式表附加到视觉元素。

如果在 EditorWindow 运行时修改 USS 文件，则会立即应用样式更改。

样式的应用过程对于使用 UI 工具包 的开发者是透明的。需要时（层级视图更改、样式表重新加载）会自动重新应用样式表。

样式与规则匹配

定义样式表时，可以将其应用于视觉树。选择器将与元素进行对比，从而解析从 USS 文件应用的属性。如果选择器与元素匹配，则样式声明将应用于元素。

例如，以下规则匹配任何 Button 对象：

Button {
  width: 200px;
}

VisualElement 匹配

UI 工具包使用以下条件将视觉元素与其样式规则相匹配：

• 其 C# 类名（始终是派生层次最深的类）。
• 字符串形式的 name 属性
• 表示为一组字符串的类列表。
• VisualElement 在视觉树中的祖先和位置。

以上这些特征可用于样式表中的选择器。

如果您熟悉 CSS，应该可以看出其与 HTML 标签名称、id 属性和 class 属性之间的相似性。