CSS 比較

*此內容是使用 AI（Beta 測試版）翻譯，可能含有錯誤。若要以英文檢視此頁面，請按一下這裡。

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

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

  1. 在 Explorer 中，創建以下內容：

    1. 在 ReplicatedStorage 中創建 StyleSheet 實例。
    2. 在 StarterGui 中創建 ScreenGui 容器。
    3. 在 ScreenGui 中創建 LocalScript 實例。
    4. 在 ScreenGui 中創建 StyleLink 對象。

  2. 在 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

  3. 對於下面的每個示例，將 Luau 代碼行粘貼到支持行 1-7 之後。

選擇器

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"，以及像 "MinSize" 這樣的 StyleQuery 條件名稱來評估父級的 GuiObject.AbsoluteSize。然後，為了在查詢處於活動狀態時將樣式應用於實例或其子項，創建一個 StyleRule，其 @[identifier] 前綴作為其 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
©2026 Roblox Corporation、Roblox、Roblox 標誌及 Powering Imagination 是我們在美國及其他國家地區的部分註冊與未註冊商標。
條款·隱私權·無障礙功能·支援
中文(繁體)