Sebagian besar konsep CSS mengalihkan ke konsep penataan Roblox. Contoh berikut menunjukkan bagaimana CSS dan HTML sesuai dengan Luau dan kelas/proporsi Roblox.
Untuk menguji masing-masing contoh skrip Luau berikut:
Di dalam Explorer, buat berikut:
- Instansi kosong StyleRule sebagai anak dari CoreSheet .
- ScreenGui wadah di StarterGui .
- LocalScript instansi di dalam ScreenGui .
Di dalam LocalScript, tempelkan kode dukungan berikut:
Skrip Lokallocal CollectionService = game:GetService("CollectionService")local ReplicatedStorage = game:GetService("ReplicatedStorage")local coreSheet = ReplicatedStorage:FindFirstChild("CoreSheet")local rule = coreSheet:FindFirstChildWhichIsA("StyleRule")local screenGui = script.ParentUntuk setiap contoh di bawah ini, tempelkan baris kode Luau setelah baris dukungan 1–6.
Pemilih
Properti Selector dari sebuah StyleRule menentukan instans mana aturan harus mempengaruhi.Jenis pemilih berikut menyatukan peta dari CSS ke Luau dan dapat digunakan dengan kombinator.
Elemen
Setara dengan selektor elemen CSS adalah Roblox pemilih kelas yang memilih semua instansi dari kelas tertentu, misalnya GuiObject , Frame , ImageLabel , TextButton , dll.
CSS
button {background-color: #335FFF;color: #E1E1E1;width: 15%;height: 40px;border: none;}
HTML
<button>Main Menu</button>
Luawu
-- Pemilih kelasrule.Selector = "TextButton"-- Tetapkan properti aturanrule: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
Kelas
Roblox yang setara dengan CSS class selektor adalah selektor tag yang menggunakan tag yang diterapkan melalui CollectionService .
CSS
.button-primary {background-color: #335FFF;color: #E1E1E1;}
HTML
<button class="button-primary">Main Menu</button>
Luawu
-- Pemilih tagrule.Selector = ".ButtonPrimary"-- Tetapkan properti aturanrule: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-- Terapkan tag ke tombolCollectionService:AddTag(button, "ButtonPrimary")
Pengenal
Perbandingan Roblox terdekat dengan CSS id adalah pemilih #[name] yang memilih sesuai dengan nilai Instance.Name .Tidak seperti spesifikasi W3C dari atribut id, nama tidak diharapkan unik.
CSS
#modal-frame {background-color: #000022;opacity: 0.5;width: 50%;min-height: 100px;}
HTML
<div id="modal-frame"></div>
Luawu
-- Pemilih nama instancerule.Selector = "#ModalFrame"-- Tetapkan properti aturanrule: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-- Ganti nama frame untuk cocok dengan pemilihframe.Name = "ModalFrame"
Kombinasi
Kombinator memungkinkan Anda mencampur selektor dasar untuk mencocokkan hubungan hierarki yang lebih dalam.
Anak
Pemilih anak dari > adalah identik antara CSS dan 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>
Luawu
-- Pemilih anakrule.Selector = ".MenuContainer > TextButton"-- Tetapkan properti aturan untuk anakrule:SetProperties({["BackgroundColor3"] = Color3.fromHex("335FFF"),["TextColor3"] = Color3.fromHex("E1E1E1"),["Size"] = UDim2.new(0.8, 0, 0, 40),["BorderSizePixel"] = 0})-- Buat wadah menulocal menuContainer = Instance.new("Frame")menuContainer.Size = UDim2.new(0.25, 0, 0, 0)menuContainer.AutomaticSize = Enum.AutomaticSize.YmenuContainer.Parent = screenGui-- Terapkan labelCollectionService:AddTag(menuContainer, "MenuContainer")-- Buat tombollocal button = Instance.new("TextButton")button.Text = "Options"-- Tetapkan wadah menu sebagai orangtua tombolbutton.Parent = menuContainer
Turunan
Tidak seperti syntax white space CSS, misalnya .menu-container button dilihat di sini, Roblox menggunakan kombinator >> untuk menunjukkan hubungan keturunan.
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>
Luawu
-- Pemilih keturunanrule.Selector = ".MenuContainer >> TextButton"-- Tetapkan properti aturan untuk keturunanrule:SetProperties({["BackgroundColor3"] = Color3.fromHex("335FFF"),["TextColor3"] = Color3.fromHex("E1E1E1"),["Size"] = UDim2.new(0.8, 0, 0, 40),["BorderSizePixel"] = 0})-- Buat wadah menulocal menuContainer = Instance.new("Frame")menuContainer.Size = UDim2.new(0.25, 0, 0, 0)menuContainer.AutomaticSize = Enum.AutomaticSize.YmenuContainer.Parent = screenGui-- Terapkan labelCollectionService:AddTag(menuContainer, "MenuContainer")-- Buat sub-kontainerlocal subContainer = Instance.new("Frame")subContainer.Size = UDim2.new(0.75, 0, 0, 0)subContainer.AutomaticSize = Enum.AutomaticSize.Y-- Tetapkan wadah menu sebagai orangtua dari sub-kontainersubContainer.Parent = menuContainer-- Buat tombollocal button = Instance.new("TextButton")button.Text = "Options"-- Tetapkan sub-kontainer sebagai orangtua tombolbutton.Parent = subContainer
Daftar pemilih
Beberapa selektor (termasuk selektor dengan kombinator) dapat dideklarasikan dengan blok properti yang sama, dipisahkan oleh koma, untuk mengurangi redundansi.
CSS
img, p {background-color: #FF0033;}
HTML
<img src="gear.png" width="100" height="100"><p>Main Menu</p>
Luawu
-- Pemilih untuk label gambar DAN label teksrule.Selector = "ImageLabel, TextLabel"-- Tetapkan properti umum untuk kelasrule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))-- Buat label gambarlocal imageLabel = Instance.new("ImageLabel")imageLabel.Image = "rbxassetid://104919049969988"imageLabel.Size = UDim2.new(0, 100, 0, 100)imageLabel.Parent = screenGui-- Buat label tekslocal 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
Kelas Palsu
Roblox yang setara dengan CSS pseudo-kelas selektor adalah selektor negara yang sesuai dengan salah satu dari empat nilai Enum.GuiState seperti Hover atau Press .
CSS
img:hover {opacity: 0.5;}
HTML
<img src="gear.png" width="100" height="100">
Luawu
-- Pemilih negararule.Selector = "ImageLabel:Hover"-- Tetapkan properti aturanrule:SetProperty("ImageTransparency", 0.5)-- Buat label gambarlocal label = Instance.new("ImageLabel")label.Image = "rbxassetid://104919049969988"label.Size = UDim2.new(0, 100, 0, 100)label.BackgroundTransparency = 1label.Parent = screenGui
Instansi palsu
Mirip dengan bagaimana CSS pseudo-elemen dapat mengubah bagian tertentu dari elemen, Roblox dapat membuat phantom UIComponents melalui properti aturan gaya Selector.Sebagai contoh, aturan berikut secara efektif membuat modifikasi UICorner di bawah setiap Frame yang ditagih dengan RoundedCorner20 dan menetapkan setiap modifikator CornerRadius ke 20 piksel.
Luawu
-- Pemilih komponen UIrule.Selector = "Frame.RoundedCorner20::UICorner"-- Tetapkan properti aturanrule:SetProperty("CornerRadius", UDim.new(0, 20))-- Buat framelocal frame = Instance.new("Frame")frame.Size = UDim2.new(0.4, 0, 0.2, 0)frame.Parent = screenGui-- Terapkan tag ke frameCollectionService:AddTag(frame, "RoundedCorner20")
Variabel
CSS memungkinkan Anda menyatakan dan merujuk pada variabel selama seluruh sistem gaya.Roblox mencapai ini melalui token dan sistem instance aturan.Menggunakan $ sebagai prefiks, Anda dapat merujuk atribut yang dideklarasikan dalam sebuah StyleRule atau StyleSheet rantai warisan saat menetapkan properti gaya.
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>
Luawu
-- Tetapkan token gaya halaman menggunakan atributcoreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))-- Pemilih kelasrule.Selector = "TextButton"-- Tetapkan properti aturanrule:SetProperties({["BackgroundColor3"] = "$ButtonBgColor",["TextColor3"] = "$ButtonTextColor"})-- Buat tombollocal button = Instance.new("TextButton")button.AutomaticSize = Enum.AutomaticSize.XYbutton.Text = "Main Menu"button.Parent = screenGui
Nested dan bergabung
Meminjam konsep dari SCSS, StyleRules dapat disatukan bersama dan selektornya akan bergabung .
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>
Luawu
-- Aturan bingkat 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})-- Aturan tata letak menulocal menuLayoutRule = Instance.new("StyleRule")menuLayoutRule.Parent = menuFrameRule -- Tetapkan aturan menu frame sebagai orangtuamenuLayoutRule.Selector = "::UIListLayout"menuLayoutRule:SetProperties({["FillDirection"] = Enum.FillDirection.Vertical,["VerticalFlex"] = Enum.UIFlexAlignment.SpaceEvenly,["HorizontalAlignment"] = Enum.HorizontalAlignment.Center})-- Aturan tombollocal buttonRule = Instance.new("StyleRule")buttonRule.Parent = menuFrameRule -- Tetapkan aturan menu frame sebagai orangtuabuttonRule.Selector = "> TextButton"buttonRule:SetProperties({["BackgroundColor3"] = Color3.fromHex("335FFF"),["TextColor3"] = Color3.fromHex("E1E1E1"),["Size"] = UDim2.new(0.8, 0, 0, 40),["BorderSizePixel"] = 0})-- Aturan penyekatan tombollocal buttonHoverRule = Instance.new("StyleRule")buttonHoverRule.Parent = buttonRule -- Tetapkan aturan tombol sebagai orangtuabuttonHoverRule.Selector = ":hover"buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)-- Buat frame orang tualocal menuFrame = Instance.new("Frame")menuFrame.Parent = screenGuimenuFrame.Name = "MenuFrame"-- Buat tombol di dalam framelocal 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