CSS 比较

props.leadIn 文件 > 测试版功能 > props.betaName props.leadOut

大多数 CSS 概念映射到 Roblox 风格概念。以下示例显示 CSS 和 HTML 如何与 Luau 和 Roblox 类/属性匹配。

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

在探索器中，创建以下内容：
1. StyleSheet 名为 CoreSheet 的实例在 ReplicatedStorage 内。
2. 空的 StyleRule 实例作为 CoreSheet 的孩子。
3. ScreenGui 容器在 StarterGui 。
4. LocalScript 在 ScreenGui 内的实例。
5. StyleLink 对象内的 ScreenGui 其 StyleSheet 属性与 CoreSheet 相关。

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

本地脚本
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local coreSheet = ReplicatedStorage:FindFirstChild("CoreSheet")
local rule = coreSheet:FindFirstChildWhichIsA("StyleRule")
local screenGui = script.Parent

对于以下每个例子，粘贴支持线 1–6 后的 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>Main Menu</button>

卢奥
-- 类别选择器
rule.Selector = "TextButton"

-- 设置规则属性
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 = "Main Menu"
button.Parent = screenGui

类

Roblox 与 CSS 相当的选择器 class 是标签选择器，它们使用标签通过 CollectionService 应用。

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

HTML
<button class="button-primary">Main Menu</button>

卢奥
-- 标签选择器
rule.Selector = ".ButtonPrimary"

-- 设置规则属性
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["AutomaticSize"] = Enum.AutomaticSize.XY
})

local button = Instance.new("TextButton")
button.Text = "Main Menu"
button.Parent = screenGui
-- 将标签应用到按钮
CollectionService:AddTag(button, "ButtonPrimary")

标识符

CSS 最接近 Roblox 比较的是选择按照值进行选择的选择器。与 id 属性的 W3C 规格不同，名称不应是唯一的。

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

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

卢奥
-- 实例名称选择器
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>Options</button>
</div>

卢奥
-- 子选择器
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 = "Options"
-- 将菜单容器设为按钮的父级
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>Options</button>
	</div>
</div>

卢奥
-- 下级选择器
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 = "Options"
-- 将子容器设为按钮的父级
button.Parent = subContainer

选择器列表

多个选择器（包括带有组合器的选择器）可以使用相同的属性块（用逗号分开）进行宣言，以减少重复。

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

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

<p>Main Menu</p>

卢奥
-- 图像标签和文本标签选择器
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 = "Main Menu"
textLabel.Parent = screenGui

假类别

Roblox 对应 CSS 的 pseudo-class 选择器是状态选择器，这与四个值 Enum.GuiState 或 Hover 或 Press 之一相对应。

CSS
img:hover {
	opacity: 0.5;
}

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

卢奥
-- 状态选择器
rule.Selector = "ImageLabel:Hover"

-- 设置规则属性
rule:SetProperty("ImageTransparency", 0.5)

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

假实例

与 CSS 假元素可以修改元素的特定部分类似，Roblox 可以通过样式规则的 UIComponents 属性创建幻影 Selector。例如，以下规则有效地在每个标有和标签的标签下创建一个修改器，并将每个修改器的设置为像素。

卢奥
-- 用户界面组件选择器
rule.Selector = "Frame.RoundedCorner20::UICorner"

-- 设置规则属性
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")

变量

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>Main Menu</button>

卢奥
-- 使用属性设置风格表单代币
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 = "Main Menu"
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>Charms</button>
	<button>Mana</button>
	<button>Scrolls</button>  
</div>

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

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

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

-- 按钮悬停规则
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Parent = buttonRule  -- 将按钮规则设置为父级
buttonHoverRule.Selector = ":hover"
buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)

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

-- 在框内创建按钮
local button1 = Instance.new("TextButton")
button1.Text = "Charms"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "Mana"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "Scrolls"
button3.Parent = menuFrame

在此页面