CSS 比較

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

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

要測試以下 Luau 腳本範例的每個:

  1. 導航器 中,創建以下內容:

    1. StyleSheet 名為 CoreSheet 的實例在 ReplicatedStorage 內。
    2. StyleRule 實例作為 CoreSheet 的兒子。
    3. 容器在中。
    4. LocalScript 內的 ScreenGui 實例。
    5. StyleLink 物件內的 ScreenGuiStyleSheet 屬性與 CoreSheet 相關。
  2. 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
  3. 對於以下每個例子,請在支持行 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.GuiStateHoverPress 之一相對應。

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 透過代幣和 實例特性 系統實現這一目標。使用 $ 作為前缀,您可以在設置風格屬性時參考在 StyleRuleStyleSheet 繼承鏈中宣言的屬性。

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