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 đều khớp với các khái niệm kiểu dáng của Roblox. Các ví dụ dưới đây cho thấy cách mà CSS và HTML tương ứng với Luau và các lớp/thuộc tính của Roblox.

Để kiểm tra từng ví dụ script Luau dưới đây:

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

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

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 những thể hiện nào mà quy tắc đó sẽ ảnh hưởng đến. Các loại bộ chọn sau đây tương ứng từ CSS đến Luau và có thể được sử dụng với các tổ hợp.

Thành phần

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

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

HTML
<button>Thực đơn 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 = "Thực đơn chính"
button.Parent = screenGui

Lớp

Tương đương trong Roblox với các bộ chọn lớp CSS là các bộ chọn thẻ sử dụng các thẻ được áp dụng qua CollectionService.

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

HTML
<button class="button-primary">Thực đơn 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 = "Thực đơn 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 trong Roblox với id CSS là bộ chọn #[name], chọn theo giá trị của Instance.Name. Khác với quy định W3C về thuộc tính id, các tên không cần phả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
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 phối hợp các bộ chọn cơ bản để khớp với các mối quan hệ sâu hơn trong cấu trúc phân cấp.

Con

Bộ chọn con của > là 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>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 container 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 container menu làm cha của nút
button.Parent = menuContainer

Kế thừa

Khác với cú pháp khoảng trắng CSS, chẳng hạn như .menu-container button được thấy ở đây, Roblox sử dụng tổ hợp >> để chỉ ra một mối quan hệ kế thừa.

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 kế thừa
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})

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

-- Tạo nút
local button = Instance.new("TextButton")
button.Text = "Tùy chọn"
-- Đặt sub-container 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ả các bộ chọn có 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 sự lặp lại.

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

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

<p>Thực đơn 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 = "Thực đơn chính"
textLabel.Parent = screenGui

Pseudo-lớp

Tương đương 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 mà 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 dáng. Ví dụ, quy tắc dưới đây tạo ra một bộ điều chỉnh UICorner dưới mỗi Frame có thẻ RoundedCorner20 và thiết lập bán kính góc 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 UI component
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 dáng của Roblox nối liền khoảng cách giữa media queries CSS và container queries. Sử dụng tiền tố @, bạn có thể bật hoặc tắt kiểu dáng dựa trên kích thước cha, loại thiết bị đầu vào, hoặc cài đặt khả năng tiếp cận của người dùng.

Trong CSS, @container áp dụng kiểu dáng dựa trên kích thước của một phần tử cha. Trong Roblox, bạn xác định một truy vấ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, chẳng hạn như "::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 dáng 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 thuộc tính 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>Thực đơn chính</button>
</div>

Luau
-- Quy tắc container
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 container

-- Đ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 container

-- 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 container

-- 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 = "Thực đơn chính"
button.Parent = container

Roblox cũng cung cấp các truy vấn tích hợp tương ứng trực tiếp với các trạng thái toàn cục 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ố @.

Đặc điểm Media CSS	Bộ chọn truy vấn kiểu dáng Roblox
(max-width: 600px)	@ViewportDisplaySizeSmall
(min-width: 601px) và (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 container
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 container

-- 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 các biến trong toàn bộ hệ thống kiểu dáng. 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 của StyleRule hoặc StyleSheet khi thiết lập các thuộc tính kiểu dáng.

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

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

HTML
<button>Thực đơn chính</button>

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

-- Đặt các token kiểu dáng 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 = "Thực đơn 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 xác đị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() (một cái) hoặc SetPropertyTransitions() (nhiều cái).

Tính năng này hiện đang trong giai đoạn beta. Bật nó thông qua Tệp ⟩ Các tính năng beta ⟩ Chuyển tiếp kiểu dáng.

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>Thực đơn 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
})
-- Thiết lập 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 = "Thực đơn chính"
button.Parent = screenGui

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

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 layout 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 layout 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 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