So sánh CSS | Tài liệu - Trung Tâm Nhà Sáng Tạo Roblox

Hầu hết các khái niệm CSS ánh xạ đến các khái niệm kiểu dáng của Roblox. Các ví dụ sau đây cho thấy cách CSS và HTML tương ứng với các lớp/thuộc tính của Luau và Roblox.

Để kiểm tra từng ví dụ mã Luau sau đây:

Trong Explorer, tạo các đối tượng sau:
1. Thể hiện StyleSheet bên trong ReplicatedStorage.
2. Thể hiện ScreenGui trong StarterGui.
3. Thể hiện LocalScript bên trong ScreenGui.
4. Đối tượng StyleLink bên trong ScreenGui.

Trong LocalScript, dán mã hỗ trợ sau:

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

Đối với mỗi ví dụ bên dưới, dán các dòng mã Luau theo sau các dòng hỗ trợ 1–7.

Bộ chọn

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

Phần tử

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

CSS

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

HTML

<button>Menu Chính</button>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "TextButton" -- Bộ chọn lớp 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 = "Menu Chính"
button.Parent = screenGui

Lớp

Tương đương của Roblox với các bộ chọn class CSS là các bộ chọn thẻ 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">Menu Chính</button>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = ".ButtonPrimary" -- Bộ chọn thẻ Roblox
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	AutomaticSize = Enum.AutomaticSize.XY
})

local button = Instance.new("TextButton")
button.Text = "Menu Chính"
button.Parent = screenGui
-- Áp dụng thẻ cho nút
CollectionService:AddTag(button, "ButtonPrimary")

Định danh

So sánh gần nhất của Roblox với id CSS là bộ chọn #[name] 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 kỳ vọng 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

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "#ModalFrame" -- Bộ chọn tên thể hiện
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 để khớp với bộ chọn
frame.Name = "ModalFrame"

Tổ hợp

Các tổ hợp cho phép bạn kết hợp các bộ chọn cơ bản để khớp với các mối quan hệ phân cấp sâu hơn.

Con

Bộ chọn con > là giống hệt 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>Tùy chọn</button>
</div>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = ".MenuContainer > TextButton" -- Bộ chọn con
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})

-- Tạo khung 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 = "Tùy chọn"
-- Đặt khung menu làm cha của nút
button.Parent = menuContainer

Hậu duệ

Không giống như cú pháp khoảng trắng CSS, ví dụ như .menu-container button thấy ở đây, Roblox sử dụng tổ hợp >> để chỉ ra một mối quan hệ hậu duệ.

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>Tùy chọn</button>
	</div>
</div>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = ".MenuContainer >> TextButton" -- Bộ chọn hậu duệ
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})

-- Tạo khung 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 khung con
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Đặt khung menu làm cha của khung con
subContainer.Parent = menuContainer

-- Tạo nút
local button = Instance.new("TextButton")
button.Text = "Tùy chọn"
-- Đặt khung con làm cha của nút
button.Parent = subContainer

Danh sách bộ chọn

Nhiều bộ chọn (bao gồm cả bộ chọn với tổ hợp) có thể được khai báo với cùng một khối thuộc tính, phân tách bằng dấu phẩy, để giảm thiểu sự dư thừa.

CSS

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

HTML

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

<p>Menu Chính</p>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "ImageLabel, TextLabel" -- Bộ chọn cho nhãn hình ảnh VÀ nhãn văn bản
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 = "Menu Chính"
textLabel.Parent = screenGui

Pseudo-lớp

Tương đương của Roblox với các bộ chọn pseudo-class CSS là các bộ chọn 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

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "ImageLabel:Hover" -- Bộ chọn trạng thái
rule:SetProperty("ImageTransparency", 0.5)

-- 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.BackgroundTransparency = 1
imageLabel.Parent = screenGui

Tương tự như cách các pseudo-elements CSS có thể sửa đổi các phần cụ thể của một phần tử, Roblox có thể tạo ra các UIComponents ảo thông qua thuộc tính Selector của quy tắc kiểu. Ví dụ, quy tắc sau đây tạo ra một bộ điều chỉnh UICorner dưới mỗi Frame được gán thẻ RoundedCorner20 và đặt bán kính của mỗi bộ điều chỉnh thành 20 pixel.

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "Frame.RoundedCorner20::UICorner" -- Bộ chọn thành phần UI
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")

Truy vấn

Các truy vấn kiểu của Roblox kết nối khoảng cách giữa các media queries CSS và container queries. Sử dụng tiền tố @, bạn có thể chuyển đổi kiểu dựa trên kích thước của cha, loại thiết bị đầu vào hoặc cài đặt truy cập của người dùng.

Trong CSS, @container áp dụng kiểu dựa trên kích thước của một phần tử cha. Trong Roblox, bạn định nghĩa một truy vấn thể hiện ảo bằng cách sử dụng ::StyleQuery theo sau là một định danh cho thuộc tính Selector của điều kiện, ví dụ "::StyleQuery #WideContainer", cùng với một tên điều kiện StyleQuery như "MinSize" để đánh giá kích thước GuiObject.AbsoluteSize của cha. Sau đó, để áp dụng kiểu cho thể hiện hoặc các con của nó khi truy vấn đang hoạt động, hãy tạo một StyleRule với tiền tố @[identifier] làm Selector, ví dụ @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>Menu Chính</button>
</div>

Luau

-- Quy tắc khung
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- Bộ chọn lớp Roblox
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- Quy tắc nút
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Bộ chọn lớp Roblox
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.75, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = containerRule -- Con của quy tắc khung

-- Điều kiện truy vấn (#WideContainer)
local queryCondition = Instance.new("StyleRule")
queryCondition.Selector = "::StyleQuery #WideContainer"
queryCondition:SetProperty("MinSize", Vector2.new(400, 0))
queryCondition.Parent = containerRule -- Con của quy tắc khung

-- Quy tắc áp dụng khi điều kiện đang hoạt động (@WideContainer)
local queryStyle = Instance.new("StyleRule")
queryStyle.Selector = "@WideContainer Frame > TextButton" -- Bộ chọn con
queryStyle:SetProperty("BackgroundColor3", Color3.fromHex("CC0033"))
queryStyle.Parent = containerRule -- Con của quy tắc khung

-- Tạo các thể hiện
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui
local button = Instance.new("TextButton")
button.Text = "Menu Chính"
button.Parent = container

Roblox cũng cung cấp các truy vấn tích hợp ánh xạ trực tiếp đến các trạng thái môi trường toàn cầu như ViewportDisplaySize hoặc ReducedMotionEnabled. Những điều này không yêu cầu định nghĩa ::StyleQuery và có thể được sử dụng trực tiếp với tiền tố @.

Tính năng Media CSS	Bộ chọn Truy vấn Kiểu 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

-- Quy tắc khung
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- Bộ chọn lớp Roblox
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- Truy vấn tích hợp
local motionRule = Instance.new("StyleRule")
motionRule.Selector = "@ReducedMotionEnabledTrue Frame"
motionRule:SetProperty("BackgroundTransparency", 0)
motionRule.Parent = containerRule -- Con của quy tắc khung

-- Tạo các thể hiện
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui

Biến

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

CSS

:root {
	--button-bg-color: #335FFF;
	--button-text-color: #E1E1E1;
}

button {
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
}

HTML

<button>Menu Chính</button>

Luau

local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

-- Đặt các token kiểu bằng cách sử dụng thuộc tính
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

rule.Selector = "TextButton" -- Bộ chọn lớp
rule:SetProperties({
	BackgroundColor3 = "$ButtonBgColor",
	TextColor3 = "$ButtonTextColor"
})

-- Tạo nút
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Menu Chính"
button.Parent = screenGui

Chuyển tiếp

CSS chuyển tiếp cho phép bạn tween các giá trị thuộc tính trong một khoảng thời gian nhất định. Bạn có thể đạt được điều này trong Roblox bằng cách thiết lập các chuyển tiếp thuộc tính trên một StyleRule thông qua SetPropertyTransition() (đơn) hoặc SetPropertyTransitions() (nhiều).

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>Menu Chính</button>

Luau

-- Quy tắc nút
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- Bộ chọn lớp Roblox
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})
-- Đặt hành vi chuyển tiếp thuộc tính
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

-- Quy tắc hover nút
local hoverRule = Instance.new("StyleRule")
hoverRule.Selector = "TextButton:Hover" -- Bộ chọn trạng thái
hoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundColor3 = Color3.fromHex("33AAFF"),
	Rotation = -5
})
hoverRule.Parent = coreSheet

-- Tạo nút văn bản
local button = Instance.new("TextButton")
button.Text = "Menu Chính"
button.Parent = screenGui

Lồng ghép và hợp nhất

Vay mượn một khái niệm từ SCSS, StyleRules có thể được lồng ghép với nhau và các bộ 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>Đồ trang sức</button>
	<button>Mana</button>
	<button>Cuộn</button>  
</div>

Luau

-- Quy tắc khung menu
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

-- Quy tắc bố cục menu
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 -- Đặt quy tắc khung menu làm cha

-- Quy tắc nút
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 -- Đặt quy tắc khung menu làm cha

-- Quy tắc hover nút
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Selector = ":Hover"
buttonHoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundTransparency = 0.5,
	TextTransparency = 0.5
})
buttonHoverRule.Parent = buttonRule -- Đặt quy tắc nút làm cha

-- Tạo khung cha
local menuFrame = Instance.new("Frame")
menuFrame.Name = "MenuFrame"
menuFrame.Parent = screenGui

-- Tạo các nút bên trong khung
local button1 = Instance.new("TextButton")
button1.Text = "Đồ trang sức"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "Mana"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "Cuộn"
button3.Parent = menuFrame