大多數 CSS 概念映射到 Roblox 風格概念。以下例子顯示 CSS 和 HTML 如何與 Luau 和 Roblox 類別/屬性對齊。
要測試以下 Luau 腳本範例的每個:
在 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.YmenuContainer.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.YmenuContainer.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.YtextLabel.TextXAlignment = Enum.TextXAlignment.LefttextLabel.TextYAlignment = Enum.TextYAlignment.ToptextLabel.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 = 1label.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.XYbutton.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 = coreSheetmenuFrameRule.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 = screenGuimenuFrame.Name = "MenuFrame"-- 在框內創建按鈕local button1 = Instance.new("TextButton")button1.Text = "Charms"button1.Parent = menuFramelocal button2 = Instance.new("TextButton")button2.Text = "Mana"button2.Parent = menuFramelocal button3 = Instance.new("TextButton")button3.Text = "Scrolls"button3.Parent = menuFrame