So sánh CSS

*Nội dung này được dịch bằng AI (Beta) và có thể có lỗi. Để xem trang này bằng tiếng Anh, hãy nhấp vào đây.

Hầu hết các khái niệm CSS được định hình cho các khái niệm phong cách của Roblox. Các ví dụ sau đây cho thấy cách CSS và HTML phù hợp với Luau và các lớp/thuộc tính của Roblox.

Để kiểm tra mỗi ví dụ kịch bản Luau sau đây:

  1. Trong Explorer, tạo ra các thứ sau:

    1. StyleSheet ví dụ có tên là CoreSheet bên trong ReplicatedStorage .
    2. Ví dụ trống StyleRule instance là con của CoreSheet .
    3. ScreenGui thùng chứa trong StarterGui .
    4. StyleLink đối tượng bên trong ScreenGui của đó đặc tính StyleSheet được liên kết với CoreSheet .
  2. Trong LocalScript, dán mã hỗ trợ sau đây:

    Tập lệnh địa phương

    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. Cho mỗi ví dụ dưới đây, sao chép các dòng mã Luau theo các dòng hỗ trợ 1–6.

Lựa chọn

Thuộc tính Selector của một StyleRule quy định các ví dụ mà quy tắc nên ảnh hưởng.Các loại lựa chọn sau đây từ CSS sang Luau và có thể được sử dụng với các kết hợp.

Yếu tố

Tương đương với các lựa chọn thành phần CSS là Roblox lựa chọn lớp mà lựa chọn tất cả các ví dụ của một lớp đã cho GuiObject , ví dụ Frame , ImageLabel , TextButton , v.v.

CSS

button {
background-color: #335FFF;
color: #E1E1E1;
width: 15%;
height: 40px;
border: none;
}
HTML

<button>Main Menu</button>

Luau

-- Lựa chọn lớp
rule.Selector = "TextButton"
-- Đặt tính chất quy tắc
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

Lớp

Các tương đương Roblox với CSS class selectors là selectors nhãn sử dụng thẻ được áp dụng thông qua CollectionService .

CSS

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

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

Luau

-- Lựa chọn thẻ
rule.Selector = ".ButtonPrimary"
-- Đặt tính chất quy tắc
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
-- Áp dụng thẻ cho nút
CollectionService:AddTag(button, "ButtonPrimary")

Nhận dạng

Sự so sánh Roblox gần nhất với CSS là id lựa chọn #[name] mà lựa chọn theo giá trị của Instance.Name.Không giống như đặc tả W3C của thuộc tính id , các tên không được mong đợi là duy nhất.

CSS

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

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

Luau

-- Lựa chọn tên của instance
rule.Selector = "#ModalFrame"
-- Đặt tính chất quy tắc
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
-- Đổi tên khung để phù hợp với bộ lọc
frame.Name = "ModalFrame"

Các kết hợp viên

Các kết hợp cho phép bạn kết hợp các nhà lựa chọn cơ bản để phù hợp với các mối quan hệ cấp sâu hơn.

Con trẻ

Lựa chọn con của > giống nhau giữa CSS và 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>

Luau

-- Lựa chọn trẻ em
rule.Selector = ".MenuContainer > TextButton"
-- Đặt thuộc tính quy tắc cho con
rule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("335FFF"),
["TextColor3"] = Color3.fromHex("E1E1E1"),
["Size"] = UDim2.new(0.8, 0, 0, 40),
["BorderSizePixel"] = 0
})
-- Tạo thùng menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Áp dụng thẻ
CollectionService:AddTag(menuContainer, "MenuContainer")
-- Tạo nút
local button = Instance.new("TextButton")
button.Text = "Options"
-- Chỉnh menu chứa như cha của nút
button.Parent = menuContainer

Những người thừa kế

Không giống như cú pháp không gian trống CSS, ví dụ .menu-container button được thấy ở đây, Roblox sử dụng combinator >> để chỉ ra mối quan hệ con cháu.

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>

Luau

-- Lựa chọn thứ hạng Descendant
rule.Selector = ".MenuContainer >> TextButton"
-- Đặt các thuộc tính quy tắc cho con trai
rule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("335FFF"),
["TextColor3"] = Color3.fromHex("E1E1E1"),
["Size"] = UDim2.new(0.8, 0, 0, 40),
["BorderSizePixel"] = 0
})
-- Tạo thùng menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Áp dụng thẻ
CollectionService:AddTag(menuContainer, "MenuContainer")
-- Tạo thùng chứa phụ
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Xác định menu container là cha của sub-container
subContainer.Parent = menuContainer
-- Tạo nút
local button = Instance.new("TextButton")
button.Text = "Options"
-- Đặt thùng con thứ cấp làm cha của nút
button.Parent = subContainer

Danh sách lựa chọn

Nhiều lựa chọn (bao gồm cả lựa chọn có kết hợp) có thể được tuyên bố với cùng một khối tính năng, được tách bởi dấu phẩy, để giảm sự trùng lặp.

CSS

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

<img src="gear.png" width="100" height="100">
<p>Main Menu</p>

Luau

-- Lựa chọn cho nhãn hình ảnh VÀ nhãn văn bản
rule.Selector = "ImageLabel, TextLabel"
-- Đặt thuộc tính chung cho các lớp
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))
-- Tạo nhãn hình ảnh
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui
-- Tạo nhãn văn bản
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

Lớp giả mạo

Các tương đương Roblox với CSS pseudo-class selectors là selectors trạng thái tương ứng với một trong bốn giá trị Enum.GuiState như Hover hoặc Press .

CSS

img:hover {
opacity: 0.5;
}
HTML

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

Luau

-- Lựa chọn trạng thái
rule.Selector = "ImageLabel:Hover"
-- Đặt tính chất quy tắc
rule:SetProperty("ImageTransparency", 0.5)
-- Tạo nhãn hình ảnh
local label = Instance.new("ImageLabel")
label.Image = "rbxassetid://104919049969988"
label.Size = UDim2.new(0, 100, 0, 100)
label.BackgroundTransparency = 1
label.Parent = screenGui

Ví dụ giả mạo

Tương tự như cách CSS pseudo-éléments có thể thay đổi các phần cụ thể của một thành phần, Roblox có thể tạo ra phantom UIComponents thông qua tính năng của một quy tắc phong cách Selector.Ví dụ, quy tắc sau đây hiệu quả tạo một modifier UICorner dưới mỗi thẻ được gắn với Frame và đặt mỗi modifier RoundedCorner20 đến CornerRadius đến độ phân giải 20.

Luau

-- Lựa chọn thành phần UI
rule.Selector = "Frame.RoundedCorner20::UICorner"
-- Đặt tính chất quy tắc
rule:SetProperty("CornerRadius", UDim.new(0, 20))
-- Tạo khung
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Áp dụng thẻ cho khung
CollectionService:AddTag(frame, "RoundedCorner20")

Biến

CSS cho phép bạn tuyên bố và tham chiếu biến trong suốt một hệ thống phong cách.Roblox đạt được điều này thông qua token và hệ thống thuộc tính instance.Sử dụng $ làm tiền tố, bạn có thể tham chiếu các thuộc tính được tuyên bố trong một chuỗi thừa kế StyleRule hoặc StyleSheet khi đặt tính chất phong cách.

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>

Luau

-- Xác định token phong cách bằng cách sử dụng thuộc tính
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))
-- Lựa chọn lớp
rule.Selector = "TextButton"
-- Đặt tính chất quy tắc
rule:SetProperties({
["BackgroundColor3"] = "$ButtonBgColor",
["TextColor3"] = "$ButtonTextColor"
})
-- Tạo nút
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Main Menu"
button.Parent = screenGui

Xếp chồng và kết hợp

Cho vay một khái niệm từ SCSS, StyleRules có thể được xếp chồng lên nhau và các trình chọn của chúng sẽ hợp nhất .

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>

Luau

-- Quy tắc khung menu
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
})
-- Quy tắc bố trí menu
local menuLayoutRule = Instance.new("StyleRule")
menuLayoutRule.Parent = menuFrameRule -- Đặt quy tắc khung menu làm cha
menuLayoutRule.Selector = "::UIListLayout"
menuLayoutRule:SetProperties({
["FillDirection"] = Enum.FillDirection.Vertical,
["VerticalFlex"] = Enum.UIFlexAlignment.SpaceEvenly,
["HorizontalAlignment"] = Enum.HorizontalAlignment.Center
})
-- Quy tắc nút
local buttonRule = Instance.new("StyleRule")
buttonRule.Parent = menuFrameRule -- Đặt quy tắc khung menu làm cha
buttonRule.Selector = "> TextButton"
buttonRule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("335FFF"),
["TextColor3"] = Color3.fromHex("E1E1E1"),
["Size"] = UDim2.new(0.8, 0, 0, 40),
["BorderSizePixel"] = 0
})
-- Quy tắc di chuột nút
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Parent = buttonRule -- Đặt quy tắc nút làm cha
buttonHoverRule.Selector = ":hover"
buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)
-- Tạo khung cha
local menuFrame = Instance.new("Frame")
menuFrame.Parent = screenGui
menuFrame.Name = "MenuFrame"
-- Tạo nút bên trong khung
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