推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 USS属性参考 下表列出了 中的 USS 属性用户界面 工具箱。 该表指示继承了哪些属性及其动画性。对于继承的属性，如果未为其指定值，则元素将从其父元素获取值。下面的示例使用继承的属性来设置所有元素的字体。 :root { -unity-font: resource("Font/consola.ttf"); } 单击属性名称可查看有关该属性的详细信息。 注意：与 CSS 属性相同的 USS 属性的使用链接到 Mozilla 开发人员文档。 财产继承动画可性描述align-content不离散如果子项跨越此容器中的多条线，则在交叉轴上对齐整个区域。align-items不离散在此容器的横轴上对齐子项。align-self不离散类似于对齐项，但仅适用于此特定元素。all不完全可动画化允许使用初始关键字重置所有属性。不适用于自定义 USS 属性。background-color不完全可动画化要在元素框中绘制的背景色。background-image不离散要在元素框中绘制的背景图像。bo

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 USS 过渡 USS 过渡在给定持续时间内更改属性值。与 CSS 过渡类似，用户界面 Toolkit 支持许多缓动函数、可变转换持续时间和可配置的转换延迟。您可以更改过渡的外观，并调整过渡发生的顺序。您可以使用缓动函数在过渡的任何时间触发离散动画。 重要提示： * 对于提供值和单位的属性，请确保起始值的单位与结束值的单位匹配。特别注意与默认值之间的转换。例如，属性的默认值为 。这隐式使用translate0像素 作为其单位。如果尝试从此值转换为以百分比表示的值，则会出现单位不匹配。它们之间没有一致转换的单位（如像素和百分比）容易受到单位不匹配的影响。translate * 当属性的当前状态与以前的状态不同时，将触发帧上的过渡动画。中的第一帧现场 没有以前的状态;因此，必须在第一帧之后开始过渡动画。 * 为视觉元素 在层次结构中，如果为继承的属性设置转换，则 USS 转换的行为与 CSS 过渡中的行为相同，例如，应用于父元素的转换级联到子元素。若要了解继承的属性，请参阅

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 USS 转换 变换属性将 2D 变换应用于视觉元素 .您可以使用它们来旋转、缩放或移动可视元素。 如果更改元素的布局，Unity 将重新计算同一层次结构中其他元素的布局。此重新计算可能会降低动画的帧速率。将转换应用于元素可减少重新计算，因为它不会更改层次结构中其他元素的布局。 可以使用转换来定义可视元素的静态外观。但是，转换最适合用于更改和动画。例如，如果要使可视元素在应用程序中发生事件时摇晃，请使用常规布局属性（如 和 ）设置可视元素的位置，然后用于相对于初始位置对齐偏移量。toplefttranslate 转换包括以下属性： 财产美国航空母舰语法描述转换原点transform-origin表示发生旋转、缩放和平移的原点。翻译translate在水平或垂直方向上重新定位可视元素。规模scale更改可视元素的外观大小、填充、边框和边距。负值沿刻度轴翻转可视元素。旋转rotate旋转可视元素。正值表示顺时针旋转，负值表示逆时针旋转。您可以使用 、 、 或单位设置旋转。有关这些单元的更多信息，请

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 USS 属性语法 本页介绍常见的 USS 属性、它们的语法和接受的值，以及与 CSS 的区别。有关 USS 属性的完整列表，请参阅 USS 属性参考。 USS properties use the same grammar syntax as W3C CSS documents: * 关键字值按原样显示。例如：auto、baseline。 * 基本数据类型出现在尖括号（< 和 >）之间。例如：、。 * 与属性同名的非尾端出现在尖括号与单直引号（<' 和 '>）之间。例如：<'width'>。 如果属性值包含多个组件： * 并列的词语意味着它们全部必须按给定顺序出现。 * 条形 （） 分隔两个或多个备选方案：必须恰好出现一个。

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 相对和绝对定位 此示例演示了相对定位和绝对定位之间的差异。此示例还演示了如何使用 C# 和 UXML/USS 进行添加和样式设置。用户界面 控制。 示例概述 该示例使用自动布局系统将框添加到编辑器和运行时 UI。一个框演示 的相对偏移量，而另一个框演示 的绝对位置。25 px25 px, 25 px 该示例使用 C# 脚本构造编辑器 UI，使用 UXML 和 CSS 构造运行时 UI。 您可以在此 GitHub 存储库中找到此示例创建的已完成文件。 先决条件 本指南适用于熟悉 Unity 编辑器、UI 工具包和 C# 脚本的开发人员。在开始之前，请熟悉以下内容： * 可视化树

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 使用布局引擎定位元素 UI 工具包包括一个布局引擎，该引擎根据布局和样式属性定位元素。布局引擎使用Yoga的布局原则，它实现了Flexbox的一个子集，这是一个HTML / CSS布局系统。用户界面 工具包属性与瑜伽布局行为匹配。UI 工具包支持 Flexbox 中的大多数属性。 默认情况下，所有元素都是布局的一部分。布局具有以下默认行为： * 容器垂直分布其子项。 * 容器矩形的位置包括其子矩形。此行为可能受到其他布局属性的限制。 * 带文本的 A 在其大小计算中使用文本大小。此行为可能受到其他布局属性的限制。VisualElement UI 工具包包括标准 UI 组件（如按钮、切换或文本字段）的内置控件。这些内置控件具有影响其布局的样式。 主要样式属性 以下是主要样式属性： * Flex > Direction（在 USS 中）：定义主轴的布局方向。默认值为 ，这使得主轴从上到下运行。flex-directioncolumn * Flex > Grow（

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 USS 共同属性 本页介绍常见的 USS 属性、它们的语法和接受的值，以及与 CSS 的区别。有关 USS 属性的完整列表，请参阅 USS 属性参考。 箱体模型 尺寸 width: | auto height: | auto min-width: | auto min-height: | auto max-width: | none max-height: | none 和 指定元素的大小。如果未指定，则宽度基于元素内容的宽度。如果未指定，则高度基于元素内容的高度。widthheightwidthheight 边缘 margin-left: | auto; margin-top: | auto margin-right: | auto margin-bottom: | auto /* Shorthand

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 USS 数据类型 USS 数据类型定义 USS 属性和函数接受的典型值，包括关键字和单位。 语法 USS 属性使用与 W3C CSS 文档相同的语法： * 关键字值按原样显示。例如：。autobaseline * 基本数据类型显示在尖括号 （ 和 ） 之间。例如：和 。<> * 与属性同名的非终端显示在尖括号和单直引号 （ 和 ） 之间。例如。<''><'width'> 如果属性值具有多个选项，则以下情况适用： * 并排单词意味着所有选项必须按给定顺序出现。 * 条形 （） 分隔两个或多个选项。必须发生其中之一。| * 双条（|'）分隔两个或多个选项。其中一个或多个必须按任意顺序出现。| * 双与号 （&'） 分隔两个或多个选项。必须出现所有选项。& * 方括号 （ ） 表示分组。[] 每个类型、关键字或尖括号组后都可能跟修饰符。下表列出了可能的修饰符：

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：场景编辑器 伪类 伪类缩小了选择器的范围，因此它仅在元素进入特定状态时匹配元素。 将伪类追加到简单选择器，以便在特定元素处于特定状态时匹配它们。例如，当用户将指针悬停在元素上时，以下 USS 规则使用伪类来更改元素的颜色。:hoverButton Button:hover { background-color: palegreen; } 支持的伪类 下表列出了支持的伪类。不能扩展伪类或创建自定义伪类。 伪类在以下情况下匹配元素:hover光标位于元素上。:active用户与元素交互。:inactive用户停止与元素交互。:focus元素具有焦点。:selectedUSS 不支持这种伪状态。请改用。:checked:disabled元素处于禁用状态。:enabled元素处于启用状态。:checked该元素是一个切换 或单选按钮元素，它已被选中。:root该元素是可视化树 . 链伪类 可以将伪类链接在一起，以便对多个并发状态应用相同的样式。例如，以下 USS 规则将 和 伪类链接在一起，以便在用户

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：场景编辑器 (nsdt.cloud) 选择器列表 选择器列表是共享相同样式规则的选择器的逗号分隔列表。 语法 选择器列表由多个以逗号分隔的选择器组成： selector1, selector2 {...} 例 以下两个 USS 片段具有相同的效果。 #container2 { background-color: pink; border-radius: 10px; } Button { background-color: pink; border-radius: 10px; } #container2, Button { background-color: pink; border-radius: 10px; } 其他资源 * USS 的最佳实践 由3D建模学习工作室整理翻译，转载请注明出处！ 上一篇：Unity3D ：多个选择器 (mvrlink.com) 下一篇：

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 多个选择器 多重选择器是多个简单选择器的组合。它选择与所有简单选择器匹配的任何元素。 语法 多重选择器由多个简单选择器组成，没有任何内容可以分隔它们： selector1selector2 {...} 如果 USS 解析器无法区分组合中的每个选择器，则无法解析多重选择器。 例如，以下 USS 规则组合了两个类型选择器：、 和 。ListViewButton ListViewButton{...} USS 解析器无法分离这两种元素类型，它会将它们解释为名为 ListViewButton 的单个类，这可能不是所需的结果。 您可以将 USS 类选择器和名称选择器组合成多个选择器。因为分别有句点 （.） 和数字符号 （#），解析器可以清楚地识别它们。类型选择器没有标识字符，因此只能在多个选择器中使用其中一个，并且它必须是组合中的第一个选择器。例如： ListView.yellow#vertical-list{...} 例 为了演示简单的选择器如何匹配元素，下面是一个示例用户界

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 后代选择器 USS 后代选择器匹配的元素是可视化树 . 语法 子体选择器由多个简单选择器组成，由空格分隔： selector1 selector2 {...} 例 为了演示简单的选择器如何匹配元素，下面是一个示例用户界面 公文。 未应用任何样式，UI 如下所示： 以下后代选择器样式规则与内部元素和第一个按钮匹配。 #container1 .

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 通用选择器 USS 通用选择器（也称为通配符选择器）匹配任何元素。USS通用选择器类似于CSS通用选择器。 语法 以下是 USS 通用选择器的语法： * { ... } 例 为了演示简单的选择器如何匹配元素，下面是一个示例用户界面 公文。 未应用任何样式，UI 如下所示： 以下通用类选择器样式规则匹配每个元素，并将其背景颜色更改为黄色。这包括

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 类选择器 USS 类选择器匹配分配了特定 USS 类的元素。USS 类选择器类似于 CSS 类选择器。 语法 类选择器由以句点为前缀的类名组成。类名区分大小写，不能以数字开头。 .className { ... } 仅在 USS 文件中写入选择器时使用句点。将类分配给 UXML 或 C# 文件中的元素时，不要包含它。例如，不要使用 . 通常，不要在类名中包含句点。Unity 的 USS 解析器将句点解释为新类的开始。例如，如果创建一个名为 的类，并创建以下 USS 规则：。解析器将选择器解释为多重选择器，并尝试查找与类和类匹配的元素。yellow.button.yellow.button{

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 类型选择器 USS 类型选择器根据元素类型匹配元素。USS 类型选择器类似于与 HTML 标记匹配的 CSS 类型选择器。例如，在USS中匹配任何按钮元素的方式与在CSS中匹配任何段落（）标签的方式相同。Button {...}p {...}

语法 以下是类型选择器的语法： TypeName { ... } 编写类型选择器时，请仅指定具体的对象类型。不要在类型名称中包含命名空间。 例如，此选择器有效： Button { ... } 此选择器无效： UnityEngine.UIElements.Button { ... } 例 为了演示简单的选择器如何匹配元素，下面是一个示例用户界面 公文。

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Unity 样式表 Unity 样式表 （USS） 是被识别为支持样式规则的资源的文本文件。USS 文本文件必须具有扩展名。.uss 您可以使用 USS 文件来定义用户界面 游戏和应用程序中的元素。USS 提供了一种将 UI 元素的外观和样式与代码其余部分分开的方法，从而更轻松地管理和维护应用程序的外观。 使用 USS，您可以在单独的 USS 文件中定义按钮、标签、图像和其他 UI 元素的样式，然后在游戏或应用程序代码中应用这些样式。这样就可以通过修改 USS 文件来更改应用程序的外观，而无需更改代码。 USS由以下内容组成： * 包含选择器和声明块的样式规则。 * 用于标识哪个的选择器视觉元素 样式规则会影响。 * 大括号内的声明块，具有一个或多个样式声明。每个样式声明都有一个属性和一个值。每个样式声明都以分号结尾。 语法 以下是样式规则的一般语法： selector { property1: value; property2:

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 为自定义控件创建自定义样式 此示例演示如何在自定义控件中使用自定义 USS 变量。 示例概述 此示例创建一个自定义控件，该控件从 USS 读取两种颜色，并使用它们生成纹理。 您可以在此 GitHub 存储库中找到此示例创建的已完成文件。 先决条件 本指南适用于熟悉 Unity 编辑器的开发人员，用户界面 工具包和 C# 脚本。在开始之前，请熟悉以下内容： * 用户界面生成器 * 可视化树 * 用户体验 * 美国航空母舰 创建自定义控件和自定义样式 创建一个 C# 脚本来定义自定义控件，创建一个 USS 文件来定义自定义样式。 1. 使用任何模板创建 Unity 项目。 2. 创建一个名为用于存储文件的文件夹。create-custom-style-custom-control 3. 在该文件夹中，创建一个名为的 C# 脚本，

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 创建可绑定的自定义控件 此示例演示如何在自定义编辑器窗口中创建可绑定的自定义控件。 示例概述 此示例创建一个绑定到具有双精度数据类型的属性的自定义控件。您可以调整此示例以绑定到具有其他数据类型（如字符串或整数）的属性。 您可以在此 GitHub 存储库中找到此示例创建的已完成文件。 先决条件 本指南适用于熟悉 Unity 编辑器的开发人员，用户界面 工具包和 C# 脚本。在开始之前，请熟悉以下内容： * 用户界面生成器 * 可视化树 * 用户体验 * 序列化对象数据绑定 创建自定义控件类 创建 C# 类以定义自定义控件。 1. 使用任何模板创建 Unity 项目。 2. 创建一个名为用于存储文件的文件夹。ExampleField 3. 在该文件夹中，创建一个名为的 C# 脚本，并将其内容替换为以下内容：ExampleFieldExampleField.cs using UnityEngine.UIElements;

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 使用网格 API 创建径向进度指示器 此示例演示如何使用网孔 用于将视觉内容绘制到一个视觉元素 . 注意：网格 API 是面向高级用户的工具。在版本 2022.1 及更高版本中，如果只想生成简单的几何图形，请改用矢量 API。有关详细信息，请参阅使用矢量 API 创建径向进度指示器。 示例概述 本示例创建一个显示进度的自定义控件，作为加载栏的替代方法。进度指示器在显示百分比的标签周围的部分填充环中显示进度值。它支持 0 到 100 之间的值，该值确定环的填充量。 您可以在此 GitHub 存储库中找到此示例创建的已完成文件。 先决条件 本指南适用于熟悉 Unity 编辑器的开发人员，用户界面 工具包和 C# 脚本。在开始之前，请熟悉以下内容： * 用户界面生成器 * 美国航空母舰 * 处理事件

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 创建滑动切换自定义控件 此示例演示如何创建切换的“类似开关”变体。 示例概述 该示例创建一个自定义控件：用户可以使用鼠标、键盘、游戏板和其他设备翻转的切换开关。它带有一个标签，可以描述切换所代表的内容。 您可以在此 GitHub 存储库中找到此示例创建的已完成文件。 先决条件 本指南适用于熟悉 Unity 编辑器的开发人员，用户界面 工具包和 C# 脚本。在开始之前，请熟悉以下内容： * 用户界面生成器 * 可视化树 * 用户体验 * 美国航空母舰 * 处理事件 创建幻灯片切换开关并设置其样式 使用 C# 脚本创建幻灯片切换类，并使用 USS 文件设置其样式。 1. 使用 3D 模板创建 Unity 项目。对于此示例，3D 模板具有更好的视觉效果。但是，

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 创建具有两个属性的自定义控件 此示例演示如何创建具有两个属性的简单自定义控件。 示例概述 此示例创建一个使用两个属性调用的自定义控件，并将其公开给 UXML 和MyElement用户界面 建筑工人。此示例还演示如何将自定义控件添加到 UI 生成器中的 UI。 您可以在此 GitHub 存储库中找到此示例创建的已完成文件。 先决条件 本指南适用于熟悉 Unity、UI 工具包和 C# 脚本的开发人员。在开始之前，请熟悉以下内容： * 用户体验 * 用户界面生成器 创建示例 若要在 C# 中创建新的自定义控件类，请从该类继承它。这允许您在 C# 中创建和使用此元素，但不会在 UXML 和 UI 生成器中自动公开它。要公开它，请定义派生自 .VisualElementUxmlTraitsInit() 1. 使用任何模板创建 Unity 项目。

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 使用切换创建条件 UI 此示例使用切换开关创建条件用户界面 示例概述 该示例创建一个具有两个切换开关的自定义编辑器窗口。您可以使用切换开关执行以下操作： * 显示或隐藏标签 * 激活或停用按钮 您可以在此 GitHub 存储库中找到此示例创建的已完成文件。 创建示例 要创建示例，请执行以下操作： 1. 使用任何模板创建 Unity 项目。 2. 在项目窗口 ，创建一个名为 的文件夹。Editor 3. 在该文件夹中，创建一个以以下内容命名的 C# 脚本文件：EditorToggleExample using UnityEngine; using UnityEditor; using UnityEngine.UIElements; namespace Samples.Editor.Controls { public class ToggleExample : EditorWindow { private Toggle

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 创建弹出窗口 版本： 2021.3+ 此示例演示如何使用 UnityEditor.PopupWindow 创建弹出窗口。 示例概述 本示例创建一个弹出窗口，该窗口通过自定义编辑器窗口中的按钮显示。弹出窗口有三个切换开关，并在未聚焦时关闭。 您可以在此 GitHub 存储库中找到此示例创建的已完成文件。 先决条件 本指南适用于熟悉 Unity 编辑器的开发人员，用户界面 工具包和 C# 脚本。在开始之前，请熟悉以下内容： * 用户体验 * 美国航空母舰 * UnityEditor.PopupWindow 创建自定义编辑器窗口 创建带有按钮的自定义编辑器窗口。在 UI 文档（UXML 文件）中定义按钮，并在 USS 文件中设置其样式。最后，在 C# 脚本中定义按钮逻辑，以便在单击按钮时显示弹出窗口。