Perbandingan CSS

props.leadIn File > Fitur Beta > props.betaName props.leadOut

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:
1. StyleSheet instansi bernama CoreSheet di dalam ReplicatedStorage .
2. Instansi kosong StyleRule sebagai anak dari CoreSheet .
3. ScreenGui wadah di StarterGui .
4. LocalScript instansi di dalam ScreenGui .
5. StyleLink objek di dalam ScreenGui yang StyleSheet propertinya terhubung ke CoreSheet .

Di dalam LocalScript, tempelkan kode dukungan berikut:

Skrip Lokal
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local coreSheet = ReplicatedStorage:FindFirstChild("CoreSheet")
local rule = coreSheet:FindFirstChildWhichIsA("StyleRule")
local screenGui = script.Parent

Untuk 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 kelas
rule.Selector = "TextButton"

-- Tetapkan properti aturan
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

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 tag
rule.Selector = ".ButtonPrimary"

-- Tetapkan properti aturan
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
-- Terapkan tag ke tombol
CollectionService: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 instance
rule.Selector = "#ModalFrame"

-- Tetapkan properti aturan
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
-- Ganti nama frame untuk cocok dengan pemilih
frame.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 anak
rule.Selector = ".MenuContainer > TextButton"

-- Tetapkan properti aturan untuk anak
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Buat wadah menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Terapkan label
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Buat tombol
local button = Instance.new("TextButton")
button.Text = "Options"
-- Tetapkan wadah menu sebagai orangtua tombol
button.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 keturunan
rule.Selector = ".MenuContainer >> TextButton"

-- Tetapkan properti aturan untuk keturunan
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Buat wadah menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Terapkan label
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Buat sub-kontainer
local 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-kontainer
subContainer.Parent = menuContainer

-- Buat tombol
local button = Instance.new("TextButton")
button.Text = "Options"
-- Tetapkan sub-kontainer sebagai orangtua tombol
button.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 teks
rule.Selector = "ImageLabel, TextLabel"

-- Tetapkan properti umum untuk kelas
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

-- Buat label gambar
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui

-- Buat label teks
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

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 negara
rule.Selector = "ImageLabel:Hover"

-- Tetapkan properti aturan
rule:SetProperty("ImageTransparency", 0.5)

-- Buat label gambar
local label = Instance.new("ImageLabel")
label.Image = "rbxassetid://104919049969988"
label.Size = UDim2.new(0, 100, 0, 100)
label.BackgroundTransparency = 1
label.Parent = screenGui

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 UI
rule.Selector = "Frame.RoundedCorner20::UICorner"

-- Tetapkan properti aturan
rule:SetProperty("CornerRadius", UDim.new(0, 20))

-- Buat frame
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Terapkan tag ke frame
CollectionService: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 atribut
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

-- Pemilih kelas
rule.Selector = "TextButton"

-- Tetapkan properti aturan
rule:SetProperties({
	["BackgroundColor3"] = "$ButtonBgColor",
	["TextColor3"] = "$ButtonTextColor"
})

-- Buat tombol
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.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 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
})

-- Aturan tata letak menu
local menuLayoutRule = Instance.new("StyleRule")
menuLayoutRule.Parent = menuFrameRule  -- Tetapkan aturan menu frame sebagai orangtua
menuLayoutRule.Selector = "::UIListLayout"
menuLayoutRule:SetProperties({
	["FillDirection"] = Enum.FillDirection.Vertical,
	["VerticalFlex"] = Enum.UIFlexAlignment.SpaceEvenly,
	["HorizontalAlignment"] = Enum.HorizontalAlignment.Center
})

-- Aturan tombol
local buttonRule = Instance.new("StyleRule")
buttonRule.Parent = menuFrameRule  -- Tetapkan aturan menu frame sebagai orangtua
buttonRule.Selector = "> TextButton"
buttonRule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Aturan penyekatan tombol
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Parent = buttonRule  -- Tetapkan aturan tombol sebagai orangtua
buttonHoverRule.Selector = ":hover"
buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)

-- Buat frame orang tua
local menuFrame = Instance.new("Frame")
menuFrame.Parent = screenGui
menuFrame.Name = "MenuFrame"

-- Buat tombol di dalam frame
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