CSS 比较 | 文档 - Roblox 创作者中心

大多数 CSS 概念对应于 Roblox 样式概念。以下示例演示了 CSS 和 HTML 如何与 Luau 以及 Roblox 类/属性对齐。

要测试以下每个 Luau 脚本示例：

在资源管理器中创建以下内容：
1. StyleSheet 实例在 ReplicatedStorage 中。
2. ScreenGui 容器在 StarterGui 中。
3. LocalScript 实例在 ScreenGui 内部。
4. StyleLink 对象在 ScreenGui 内部。

在 LocalScript 中粘贴以下支持代码：

LocalScript
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local coreSheet = ReplicatedStorage:FindFirstChildWhichIsA("StyleSheet")
local screenGui = script.Parent
local styleLink = screenGui:FindFirstChildWhichIsA("StyleLink")
styleLink.StyleSheet = coreSheet

对于下面的每个示例，在支持行 1-7 之后粘贴 Luau 代码行。

选择器

Selector 属性的 StyleRule 指定了规则应影响哪些实例。以下选择器类型从 CSS 映射到 Luau，并可以与组合器一起使用。

元素

与 CSS 元素选择器等效的是 Roblox 类选择器，它选择给定的 GuiObject 类的所有实例，例如 Frame、ImageLabel、TextButton 等。

CSS
button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 15%;
	height: 40px;
	border: none;
}

HTML
<button>主菜单</button>

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "TextButton" -- Roblox 类选择器
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})

local button = Instance.new("TextButton")
button.Text = "主菜单"
button.Parent = screenGui

类

Roblox 中与 CSS class 选择器相等的是标签选择器，它利用通过 CollectionService 应用的标签。

CSS
.button-primary {
	background-color: #335FFF;
	color: #E1E1E1;
}

HTML
<button class="button-primary">主菜单</button>

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = ".ButtonPrimary" -- Roblox 标签选择器
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	AutomaticSize = Enum.AutomaticSize.XY
})

local button = Instance.new("TextButton")
button.Text = "主菜单"
button.Parent = screenGui
-- 为按钮应用标签
CollectionService:AddTag(button, "ButtonPrimary")

标识符

与 CSS id 最接近的 Roblox 比较是 #[name] 选择器，它根据 Instance.Name 的值进行选择。不像 W3C 对 id 属性的规范，名称不要求是唯一的。

CSS
#modal-frame {
	background-color: #000022;
	opacity: 0.5;
	width: 50%;
	min-height: 100px;
}

HTML
<div id="modal-frame"></div>

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "#ModalFrame" -- 实例名称选择器
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("000022"),
	BackgroundTransparency = 0.5,
	Size = UDim2.new(0.5, 0, 0, 100),
	AutomaticSize = Enum.AutomaticSize.Y
})

local frame = Instance.new("Frame")
frame.Parent = screenGui
-- 更改帧名称以匹配选择器
frame.Name = "ModalFrame"

组合器

组合器让你混合基本选择器以匹配更深层次的层级关系。

子元素

子选择器 > 在 CSS 和 Roblox 之间是相同的。

CSS
.menu-container {
	width: 25%;
}

.menu-container > button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 80%;
	height: 40px;
	border: none;
}

HTML
<div class="menu-container">
	<button>选项</button>
</div>

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = ".MenuContainer > TextButton" -- 子选择器
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})

-- 创建菜单容器
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- 应用标签
CollectionService:AddTag(menuContainer, "MenuContainer")

-- 创建按钮
local button = Instance.new("TextButton")
button.Text = "选项"
-- 将菜单容器设置为按钮的父级
button.Parent = menuContainer

后代

与 CSS 空格语法不同，例如在这里看到的 .menu-container button，Roblox 使用 >> 组合器来表示后代关系。

CSS
.menu-container {
	width: 25%;
}

.sub-container {
	width: 75%;
}

.menu-container button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 80%;
	height: 40px;
	border: none;
}

HTML
<div class="menu-container">
	<div class="sub-container">
		<button>选项</button>
	</div>
</div>

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = ".MenuContainer >> TextButton" -- 后代选择器
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})

-- 创建菜单容器
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- 应用标签
CollectionService:AddTag(menuContainer, "MenuContainer")

-- 创建子容器
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- 将菜单容器作为子容器的父级
subContainer.Parent = menuContainer

-- 创建按钮
local button = Instance.new("TextButton")
button.Text = "选项"
-- 将子容器设置为按钮的父级
button.Parent = subContainer

选择器列表

多个选择器（包括带组合器的选择器）可以使用相同的属性块声明，使用逗号分隔，以减少冗余。

CSS
img, p {
	background-color: #FF0033;
}

HTML
<img src="gear.png" width="100" height="100">

<p>主菜单</p>

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "ImageLabel, TextLabel" -- 图像标签和文本标签的选择器
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

-- 创建图像标签
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui

-- 创建文本标签
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 0, 0)
textLabel.AutomaticSize = Enum.AutomaticSize.Y
textLabel.TextXAlignment = Enum.TextXAlignment.Left
textLabel.TextYAlignment = Enum.TextYAlignment.Top
textLabel.Text = "主菜单"
textLabel.Parent = screenGui

伪类

Roblox 中与 CSS 伪类选择器相等的是状态选择器，对应于四个 Enum.GuiState 值之一，例如 Hover 或 Press。

CSS
img:hover {
	opacity: 0.5;
}

HTML
<img src="gear.png" width="100" height="100">

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "ImageLabel:Hover" -- 状态选择器
rule:SetProperty("ImageTransparency", 0.5)

-- 创建图像标签
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.BackgroundTransparency = 1
imageLabel.Parent = screenGui

伪实例

类似于 CSS 伪元素可以修改元素的特定部分，Roblox 可以通过样式规则的 Selector 属性创建虚拟 UIComponents。例如，以下规则有效地在每个带有 RoundedCorner20 标签的 Frame 下创建一个 UICorner 修改器，并将每个修改器的 CornerRadius 设置为 20 像素。

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "Frame.RoundedCorner20::UICorner" -- UI 组件选择器
rule:SetProperty("CornerRadius", UDim.new(0, 20))

-- 创建帧
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- 将标签应用于框架
CollectionService:AddTag(frame, "RoundedCorner20")

查询

Roblox 样式查询在 CSS 媒体查询和容器查询之间架起了桥梁。使用 @ 前缀，您可以根据父级的尺寸、输入设备类型或用户可访问性设置来切换样式。

在 CSS 中，@container 根据父元素的大小应用样式。在 Roblox 中，您可以使用 ::StyleQuery 前缀定义伪实例查询，后接条件的 Selector 属性的标识符，例如 "::StyleQuery #WideContainer"，以及 StyleQuery 条件名称，例如 "MinSize"，以评估父级的 GuiObject.AbsoluteSize。然后，若要在查询处于活动状态时将样式应用于实例或其子项，请创建一个以 @[标识符] 前缀作为其 Selector 的 StyleRule，例如 @WideContainer。

CSS
.container {
	container-type: inline-size;
	background-color: rgba(0, 0, 34, 0.5);
}
button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 75%;
	height: 40px;
	border: none;
}

@container (min-width: 400px) {
	button {
		background-color: #cc0033;
	}
}

HTML
<div class="container" style="width: 80%; height: 200px;">
	<button>主菜单</button>
</div>

Luau
-- 容器规则
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- Roblox 类选择器
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- 按钮规则
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Roblox 类选择器
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.75, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = containerRule -- 容器规则的子项

-- 查询条件 (#WideContainer)
local queryCondition = Instance.new("StyleRule")
queryCondition.Selector = "::StyleQuery #WideContainer"
queryCondition:SetProperty("MinSize", Vector2.new(400, 0))
queryCondition.Parent = containerRule -- 容器规则的子项

-- 当条件处于活动状态时应用的规则 (@WideContainer)
local queryStyle = Instance.new("StyleRule")
queryStyle.Selector = "@WideContainer Frame > TextButton" -- 子选择器
queryStyle:SetProperty("BackgroundColor3", Color3.fromHex("CC0033"))
queryStyle.Parent = containerRule -- 容器规则的子项

-- 创建实例
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui
local button = Instance.new("TextButton")
button.Text = "主菜单"
button.Parent = container

Roblox 还提供直接映射到全局环境状态的内置查询，例如 ViewportDisplaySize 或 ReducedMotionEnabled。这些不需要 ::StyleQuery 定义，可以直接与 @ 前缀一起使用。

CSS 媒体特性	Roblox 样式查询选择器
(max-width: 600px)	@ViewportDisplaySizeSmall
(min-width: 601px) and (max-width: 1200px)	@ViewportDisplaySizeMedium
(min-width: 1201px)	@ViewportDisplaySizeLarge
(pointer: fine)	@PreferredInputKeyboardAndMouse
(pointer: coarse)	@PreferredInputTouch
(any-pointer: coarse)	@PreferredInputGamepad
(prefers-reduced-motion: reduce)	@ReducedMotionEnabledTrue
(prefers-reduced-motion: no-preference)	@ReducedMotionEnabledFalse

CSS
.container {
	container-type: inline-size;
	background-color: rgba(0, 0, 34, 0.5);
}

@media (prefers-reduced-motion: reduce) {
	.container {
		background-color: rgba(0, 0, 34, 1);
	}
}

HTML
<div class="container" style="width: 80%; height: 200px;">

</div>

Luau
-- 容器规则
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- Roblox 类选择器
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- 内置查询
local motionRule = Instance.new("StyleRule")
motionRule.Selector = "@ReducedMotionEnabledTrue Frame"
motionRule:SetProperty("BackgroundTransparency", 0)
motionRule.Parent = containerRule -- 容器规则的子项

-- 创建实例
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui

变量

CSS 允许您在样式系统中声明和引用变量。Roblox 通过令牌和实例属性系统实现此功能。使用 $ 作为前缀，您可以在设置样式属性时引用在 StyleRule 或 StyleSheet 继承链中声明的属性。

CSS
:root {
	--button-bg-color: #335FFF;
	--button-text-color: #E1E1E1;
}

button {
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
}

HTML
<button>主菜单</button>

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

-- 使用属性设置样式表令牌
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

rule.Selector = "TextButton" -- 类选择器
rule:SetProperties({
	BackgroundColor3 = "$ButtonBgColor",
	TextColor3 = "$ButtonTextColor"
})

-- 创建按钮
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "主菜单"
button.Parent = screenGui

过渡

CSS 过渡允许您在设定的持续时间内混合属性值。您可以通过在 StyleRule 上设置属性过渡来实现这一点，使用 SetPropertyTransition()（单个）或 SetPropertyTransitions()（多个）。

此功能目前处于测试版。通过文件 ⟩ Beta功能 ⟩ 样式过渡启用它。

CSS
button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 15%;
	height: 40px;
	border: none;
	transition:
		background-color 1s ease-out,
		transform 1.25s ease-out
}
button:hover {
	background-color: #33AAFF;
	transform: rotate(-5deg);
}

HTML
<button>主菜单</button>

Luau
-- 按钮规则
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Roblox 类选择器
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})
-- 设置属性过渡行为
buttonRule:SetPropertyTransitions({
	BackgroundColor3 = TweenInfo.new(1, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out),
	Rotation = TweenInfo.new(1.25, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out)
})
buttonRule.Parent = coreSheet

-- 按钮悬停规则
local hoverRule = Instance.new("StyleRule")
hoverRule.Selector = "TextButton:Hover" -- 状态选择器
hoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundColor3 = Color3.fromHex("33AAFF"),
	Rotation = -5
})
hoverRule.Parent = coreSheet

-- 创建文本按钮
local button = Instance.new("TextButton")
button.Text = "主菜单"
button.Parent = screenGui

嵌套和合并

借用 SCSS 的一个概念，StyleRules 可以相互嵌套，并且它们的选择器将合并。

SCSS
#menu-frame {
	background-color: #000022;
	width: 25%;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	
	> button {
		background-color: #335FFF;
		color: #E1E1E1;
		width: 80%;
		height: 40px;
		border: none;
		
		&:hover {
			opacity: 0.5;
		}
	}
}

HTML
<div id="menu-frame">
	<button>法杖</button>
	<button>法力</button>
	<button>卷轴</button>  
</div>

Luau
-- 菜单框架规则
local menuFrameRule = Instance.new("StyleRule")
menuFrameRule.Selector = "#MenuFrame"
menuFrameRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("000022"),
	Size = UDim2.new(0.25, 0, 0, 200),
	AutomaticSize = Enum.AutomaticSize.Y
})
menuFrameRule.Parent = coreSheet

-- 菜单布局规则
local menuLayoutRule = Instance.new("StyleRule")
menuLayoutRule.Selector = "::UIListLayout"
menuLayoutRule:SetProperties({
	FillDirection = Enum.FillDirection.Vertical,
	VerticalFlex = Enum.UIFlexAlignment.SpaceEvenly,
	HorizontalAlignment = Enum.HorizontalAlignment.Center
})
menuLayoutRule.Parent = menuFrameRule -- 将菜单框架规则设置为父级

-- 按钮规则
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "> TextButton"
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = menuFrameRule -- 将菜单框架规则设置为父级

-- 按钮悬停规则
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Selector = ":Hover"
buttonHoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundTransparency = 0.5,
	TextTransparency = 0.5
})
buttonHoverRule.Parent = buttonRule -- 将按钮规则设置为父级

-- 创建父框架
local menuFrame = Instance.new("Frame")
menuFrame.Name = "MenuFrame"
menuFrame.Parent = screenGui

-- 在框架内创建按钮
local button1 = Instance.new("TextButton")
button1.Text = "法杖"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "法力"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "卷轴"
button3.Parent = menuFrame