USS支持的属性
本主题列出了支持的USS属性及其接受的值。
USS数据类型
USS数据类型定义USS属性接受的值和关键字。
属性 | 描述 |
---|---|
<length> | 表示距离值。 |
<number> | 表示整数或带小数分量的数字。 |
<integer> | 代表整数。 |
<color> | 代表颜色。可以使用#hexadecimal 代码、rgb() ,或来rgba() 定义颜色。颜色关键字例如blue 或transparent 不受支持。 |
<resource> | 表示Resources文件夹中的资产。 |
<url> | 表示路径指定的资产。它可以表示为相对路径或绝对路径。 |
USS语法
UIElements样式属性使用与W3C CSS文档相同的语法语法:
- 关键字值按原样显示。例如:
auto
,baseline
。 - 基本数据类型出现在尖括号(
<
和>
)之间。例如:<length>
,<color>
。 - 与属性具有相同名称的非终端符号出现在尖括号和单引号(
<'
和'>
)之间。例如,<'width'>
。
如果属性值包含多个组件:
- 并排的词意味着所有这些词必须以给定的顺序出现。
- (
|
)分隔两个或多个备选方案:这些词至少需要出现一个 - (
||
)分隔两个或多个选项:可以出现一个或多个选项,顺序不限 - (
&&
)以任何顺序分隔两个或多个组件,所有组件都必须出现,顺序不限 - (
[
]
)表示分组
每个类型,关键字或尖括号组后面都可以跟修饰符:
- 星号(
*
)表示前面的类型、单词或组出现零次或多次。 - 加号(
+
)表示前面的类型、单词或组出现一次或多次。 - 问号(
?
)表示前面的类型、单词或组是可选的。 - 一对大括号内的数字(
{A,B}
)表示前述类型,单词,或团至少发生A倍
,至多发生B
倍。
继承的属性
如果没有为继承的属性指定值,则该元素将从其父元素获取值。例如,使用继承属性设置所有元素的字体。
css
:root {
-unity-font: resource("Font/consola.ttf");
}
以下属性均是可以继承的:
- color
- font-size
- -unity-font
- -unity-font-style
- -unity-text-align
- visibility
- whitespace
盒子模型
盒子模型
外形尺寸
width: <length> | auto
height: <length> | auto
*min-width: <length> | auto
*min-height: <length> | auto
*max-width: <length> | none
*max-height: <length> | none
的width
和height
指定了元件的尺寸。如果width
未指定,则宽度基于元素内容的宽度。如果height
未指定,则高度基于元素内容的高度。
边距
margin-left: <length> | auto;
margin-top: <length> | auto
margin-right: <length> | auto
margin-bottom: <length> | auto
margin: [<length> | auto]{1,4}
简写
该margin
速记选项应用如下:
选项 | 描述 |
---|---|
1长度 | 适用于所有四个边距。 |
2个长度 | 第一个适用于margin-top 和margin-bottom 。第二个适用于margin-left 和margin-right 。 |
3个长度 | 第一个适用于margin-top 。第二个适用于margin-left 和margin-right 。第三个适用于margin-bottom 。 |
4个长度 | 长度的顺序施加:margin-top ,margin-right ,margin-bottom ,margin-left |
边框
border-left-width: <length>
border-top-width: <length>
border-right-width: <length>
border-bottom-width: <length>
简写
border-width: <length>{1,4}
该border-width
速记选项应用如下:
选项 | 描述 |
---|---|
1长度 | 适用于所有四个边框宽度。 |
2个长度 | 第一个适用于border-top-width 和border-bottom-width 。第二个适用于border-left-width 和border-right-width 。 |
3个长度 | 第一个适用于border-top-width 。第二个适用于border-left-width 和border-right-width 。第三个适用于border-bottom-width 。 |
4个长度 | 长度的顺序施加:border-top-width ,border-right-width ,border-bottom-width ,border-left-width |
填充
padding-left: <length>
padding-top: <length>
padding-right: <length>
padding-bottom: <length>
简写
padding: <length>{1,4}
该padding
速记选项应用如下:
选项 | 描述 |
---|---|
1长度 | 适用于所有四个填充物。 |
2个长度 | 第一个适用于padding-top 和padding-bottom 。第二个适用于padding-left 和padding-right 。 |
3个长度 | 第一个适用于padding-top 。第二个适用于padding-left 和padding-right 。第三个适用于padding-bottom 。 |
4个长度 | 长度的顺序施加:padding-top ,padding-right ,padding-bottom ,padding-left |
Flex布局
本节列出了定位可视元素的属性。UIElements包括一个布局引擎,可根据布局和样式属性定位视觉元素。布局引擎实现了Flexbox的一个子集,即HTML / CSS布局系统。
默认情况下,所有条目都垂直放置在其容器中。
条目
flex-grow: <number>
flex-shrink: <number>
flex-basis: <length> | auto
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | stretch
容器
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
align-content: flex-start | flex-end | center | stretch
align-items: flex-start | flex-end | center | stretch
justify-content: flex-start | flex-end | center | space-between | space-around
相对和绝对定位
定位
position: absolute | relative
relative
默认情况下,此属性设置为基于其父元素定位元素。如果将此属性设置为absolute
,则元素将保留其父布局,并根据父边界指定值。
位置
left: <length> | auto
top: <length> | auto
right: <length> | auto
bottom: <length> | auto
距父边的距离或元素的原始位置。
绘图属性
绘图属性设置可视元素的背景,边框和外观。
背景
background-color: <color>
background-image: <resource> | <url> | none
-unity-background-scale-mode: stretch-to-fill | scale-and-crop | scale-to-fit
-unity-background-image-tint-color: <color>
切片
分配背景图像时,可以根据简化的9切片规范绘制:
-unity-slice-left: <integer>
-unity-slice-top: <integer>
-unity-slice-right: <integer>
-unity-slice-bottom: <integer>
边界
border-color: <color>
border-top-left-radius: <length>
border-top-right-radius: <length>
border-bottom-left-radius: <length>
border-bottom-right-radius: <length>
简写
border-radius: <length>{1,4}
该border-radius
速记选项应用如下:
选项 | 描述 |
---|---|
1长度 | 适用于所有四个边界半径属性。 |
2个长度 | 第一个适用于border-top-left-radius 和border-bottom-right-radius 。第二个适用于border-bottom-left-radius 和border-top-right-radius |
3个长度 | 第一个适用于border-top-left-radius 。第二个适用于border-bottom-left-radius 和border-top-right-radius 。第三个适用于border-bottom-right-radius 。 |
4个长度 | 长度的顺序施加:border-top-left-radius ,border-top-right-radius ,border-bottom-right-radius ,border-bottom-left-radius |
表现
overflow: hidden | visible
-unity-overflow-clip-box: padding-box | content-box
opacity: <number>
visibility: visible | hidden
display: flex | none
该display
默认值是flex
。设置display
以none
删除元素。设置visibility
为hidden
隐藏元素,但元素仍占用布局中的空间。
的-unity-overflow-clip-box
定义为元素内容的剪辑矩形。默认值是padding-box
,填充区域外的矩形(上面框模型图像中的绿色矩形); content-box
表示填充区域内的值(上面框模型图像中的蓝色矩形)。
文字属性
文本属性设置字体资源,字体样式,对齐,自动换行和剪切的颜色,字体,字体大小和Unity特定属性。
color: <color>
-unity-font: <resource> | <url>
font-size: <number>
-unity-font-style: normal | italic | bold | bold-and-italic
-unity-text-align: upper-left | middle-left | lower-left | upper-center | middle-center | lower-center | upper-right | middle-right | lower-right
white-space: normal | nowrap
光标属性
使用cursor
默认纹理类型导入光标的自定义纹理。
cursor: [ [ <resource> | <url> ] [ <integer> <integer>]? , ] [ arrow | text | resize-vertical | resize-horizontal | link | slide-arrow | resize-up-right | resize-up-left | move-arrow | rotate-arrow | scale-arrow | arrow-plus | arrow-minus | pan | orbit | zoom | fps | split-resize-up-down | split-resize-left-right ]