CSS 對比 | 文件 - Roblox 創作者中心

大多數 CSS 概念映射到 Roblox 樣式概念。以下示例顯示 CSS 和 HTML 如何與 Luau 和 Roblox 類別/屬性對齊。

要測試以下每個 Luau 腳本示例：

在 Explorer 中創建以下內容：
1. 在 ReplicatedStorage 內創建 StyleSheet 實例。
2. 在 StarterGui 中創建 ScreenGui 容器。
3. 在 ScreenGui 中創建 LocalScript 實例。
4. 在 ScreenGui 中創建 StyleLink 物件。

在 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")

標識符

Roblox 中與 CSS id 最接近的比較是 #[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。然後，當查詢處於活動狀態時，要將樣式應用於實例或其孩子，創建帶有 @[identifier] 前綴的 StyleRule 其 Selector，例如 @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() （多重）。

此功能目前處於測試階段。通過檔案 ⟩ 測試版功能 ⟩ 樣式轉場啟用它。

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