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:
Trong Explorer, tạo ra các thứ sau:
- Ví dụ trống StyleRule instance là con của CoreSheet .
- ScreenGui thùng chứa trong StarterGui .
- LocalScript ví trong ScreenGui .
Trong LocalScript, dán mã hỗ trợ sau đây:
Tập lệnh địa phươnglocal CollectionService = game:GetService("CollectionService")local ReplicatedStorage = game:GetService("ReplicatedStorage")local coreSheet = ReplicatedStorage:FindFirstChild("CoreSheet")local rule = coreSheet:FindFirstChildWhichIsA("StyleRule")local screenGui = script.ParentCho 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ớprule.Selector = "TextButton"-- Đặt tính chất quy tắcrule: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ắcrule: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útCollectionService: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 instancerule.Selector = "#ModalFrame"-- Đặt tính chất quy tắcrule: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ọcframe.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ẻ emrule.Selector = ".MenuContainer > TextButton"-- Đặt thuộc tính quy tắc cho conrule:SetProperties({["BackgroundColor3"] = Color3.fromHex("335FFF"),["TextColor3"] = Color3.fromHex("E1E1E1"),["Size"] = UDim2.new(0.8, 0, 0, 40),["BorderSizePixel"] = 0})-- Tạo thùng menulocal menuContainer = Instance.new("Frame")menuContainer.Size = UDim2.new(0.25, 0, 0, 0)menuContainer.AutomaticSize = Enum.AutomaticSize.YmenuContainer.Parent = screenGui-- Áp dụng thẻCollectionService:AddTag(menuContainer, "MenuContainer")-- Tạo nútlocal button = Instance.new("TextButton")button.Text = "Options"-- Chỉnh menu chứa như cha của nútbutton.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 Descendantrule.Selector = ".MenuContainer >> TextButton"-- Đặt các thuộc tính quy tắc cho con trairule:SetProperties({["BackgroundColor3"] = Color3.fromHex("335FFF"),["TextColor3"] = Color3.fromHex("E1E1E1"),["Size"] = UDim2.new(0.8, 0, 0, 40),["BorderSizePixel"] = 0})-- Tạo thùng menulocal menuContainer = Instance.new("Frame")menuContainer.Size = UDim2.new(0.25, 0, 0, 0)menuContainer.AutomaticSize = Enum.AutomaticSize.YmenuContainer.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-containersubContainer.Parent = menuContainer-- Tạo nútlocal button = Instance.new("TextButton")button.Text = "Options"-- Đặt thùng con thứ cấp làm cha của nútbutton.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ảnrule.Selector = "ImageLabel, TextLabel"-- Đặt thuộc tính chung cho các lớprule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))-- Tạo nhãn hình ảnhlocal 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ảnlocal 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
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áirule.Selector = "ImageLabel:Hover"-- Đặt tính chất quy tắcrule:SetProperty("ImageTransparency", 0.5)-- Tạo nhãn hình ảnhlocal label = Instance.new("ImageLabel")label.Image = "rbxassetid://104919049969988"label.Size = UDim2.new(0, 100, 0, 100)label.BackgroundTransparency = 1label.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 UIrule.Selector = "Frame.RoundedCorner20::UICorner"-- Đặt tính chất quy tắcrule:SetProperty("CornerRadius", UDim.new(0, 20))-- Tạo khunglocal frame = Instance.new("Frame")frame.Size = UDim2.new(0.4, 0, 0.2, 0)frame.Parent = screenGui-- Áp dụng thẻ cho khungCollectionService: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ínhcoreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))-- Lựa chọn lớprule.Selector = "TextButton"-- Đặt tính chất quy tắcrule:SetProperties({["BackgroundColor3"] = "$ButtonBgColor",["TextColor3"] = "$ButtonTextColor"})-- Tạo nútlocal button = Instance.new("TextButton")button.AutomaticSize = Enum.AutomaticSize.XYbutton.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 menulocal 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})-- Quy tắc bố trí menulocal menuLayoutRule = Instance.new("StyleRule")menuLayoutRule.Parent = menuFrameRule -- Đặt quy tắc khung menu làm chamenuLayoutRule.Selector = "::UIListLayout"menuLayoutRule:SetProperties({["FillDirection"] = Enum.FillDirection.Vertical,["VerticalFlex"] = Enum.UIFlexAlignment.SpaceEvenly,["HorizontalAlignment"] = Enum.HorizontalAlignment.Center})-- Quy tắc nútlocal buttonRule = Instance.new("StyleRule")buttonRule.Parent = menuFrameRule -- Đặt quy tắc khung menu làm chabuttonRule.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útlocal buttonHoverRule = Instance.new("StyleRule")buttonHoverRule.Parent = buttonRule -- Đặt quy tắc nút làm chabuttonHoverRule.Selector = ":hover"buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)-- Tạo khung chalocal menuFrame = Instance.new("Frame")menuFrame.Parent = screenGuimenuFrame.Name = "MenuFrame"-- Tạo nút bên trong khunglocal 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