CSS Karşılaştırmaları

öznitelikler.leadIn Dosya > Beta Özellikleri > öznitelikler.betaName öznitelikler.leadOut

Çoğu CSS konsepti Roblox tarz konseptlerine eşleşir. Aşağıdaki örnekler, CSS ve HTML'nin Luau ve Roblox sınıfları/özellikleriyle nasıl uyumlu olduğunu gösterir.

Aşağıdaki Luau senaryo örneklerinin her birini test etmek için:

In the Kâşif , aşağıdakileri oluştur:
1. StyleSheet içinde adlandırılan CoreSheet örneği ReplicatedStorage .
2. Boş StyleRule örnek, CoreSheet 'in bir çocuğu olarak.
3. ScreenGui konteyneri içinde StarterGui .
4. LocalScript içindeki ScreenGui içindeki örnek.
5. StyleLink nesne içindeki ScreenGui özelliğinin StyleSheet özelliği CoreSheet 'a bağlıdır.

LocalScript , aşağıdaki destek kodunu yapıştırın:

YerelScript
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

Aşağıdaki her örnek için, destekleyici çizgilerden sonra Luau kod satırlarını yapıştırın 1–6.

Seçiciler

Bir Selector özelliğinin StyleRule bir kuralın hangi örnekleri etkilemesi gerektiğini belirtir.Aşağıdaki seçici türleri CSS'den Luau'ya haritalar ve kombinatörlerle kullanılabilir.

Eleman

CSS öğe seçicilerine eşdeğer olan Roblox sınıf seçicileri , örneğin GuiObject , Frame , ImageLabel , TextButton , vb. tüm örnekleri seçen sınıfları seçer.

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

HTML
<button>Main Menu</button>

Luau
-- Sınıf seçici
rule.Selector = "TextButton"

-- Kural özelliklerini ayarla
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

Sınıf

CSS'ye eşdeğer Roblox class, etiket seçicileri kullanır ve bunlar etiketler uygulanarak CollectionService kullanılır.

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

HTML
<button class="button-primary">Main Menu</button>

Luau
-- Etiket seçicisi
rule.Selector = ".ButtonPrimary"

-- Kural özelliklerini ayarla
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
-- Butona etiketi uygula
CollectionService:AddTag(button, "ButtonPrimary")

Kimlikleyici

CSS'ye en yakın Roblox karşılaştırması id , #[name] değerine göre seçen Instance.Name 'dir.id özniteliğinin W3C özelliklerinden farklı olarak, isimlerin benzersiz olması beklenmez.

CSS
#modal-frame {
	background-color: #000022;
	opacity: 0.5;
	width: 50%;
	min-height: 100px;
}

HTML
<div id="modal-frame"></div>

Luau
-- İstisna adı seçicisi
rule.Selector = "#ModalFrame"

-- Kural özelliklerini ayarla
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
-- Seçiciye uyan çerçeveyi yeniden adlandır
frame.Name = "ModalFrame"

Kombinatörler

Kombinatörler, daha derin hierarşi ilişkilerine uymak için temel seçicileri karıştırmanıza izin verir.

Çocuk

> 'nin çocuk seçicisi CSS ile Roblox arasında aynıdır.

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
-- Çocuk seçicisi
rule.Selector = ".MenuContainer > TextButton"

-- Çocuk için kural özelliklerini ayarla
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Menü konteyneri oluştur
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Etiketi uygula
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Buton oluştur
local button = Instance.new("TextButton")
button.Text = "Options"
-- Butonun ebeveyni olarak menü konteyneri ayarla
button.Parent = menuContainer

Yarışmacı

Örneğin CSS beyaz alan sözdizimi aksine, burada görüldüğü gibi .menu-container button Roblox, bir alt ilişki göstermek için >> kombinatörünü kullanır.

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
-- Aşağıdaki seçici
rule.Selector = ".MenuContainer >> TextButton"

-- Mirasçı için kural özelliklerini ayarla
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Menü konteyneri oluştur
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Etiketi uygula
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Alt konteyner oluştur Create sub-container
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Alt konteynerin ebeveyni olarak menü konteyneri ayarla
subContainer.Parent = menuContainer

-- Buton oluştur
local button = Instance.new("TextButton")
button.Text = "Options"
-- Butonun ebeveyni olarak alt konteyneri ayarla
button.Parent = subContainer

Seçici listesi

Kombinatörlü seçiciler (seçiciler dahil) aynı özellik bloğu ile aynı anda ilan edilebilir, virgüllerle ayrılmış olarak, redundans azaltmak için.

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

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

<p>Main Menu</p>

Luau
-- Resim etiketleri VE metin etiketleri için seçici
rule.Selector = "ImageLabel, TextLabel"

-- Sınıflar için ortak özellik ayarlama
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

-- Resim etiketi oluştur
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui

-- Metin etiketi oluştur
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

Sahte sınıflar

CSS'ye eşdeğer olan Roblox pseudo-sınıf seçicileri, devlet seçicileri , örneğin veya gibi dört değerden birine karşılık gelen durum seçicileridir.

CSS
img:hover {
	opacity: 0.5;
}

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

Luau
-- Devlet seçicisi
rule.Selector = "ImageLabel:Hover"

-- Kural özelliğini ayarla
rule:SetProperty("ImageTransparency", 0.5)

-- Resim etiketi oluştur
local label = Instance.new("ImageLabel")
label.Image = "rbxassetid://104919049969988"
label.Size = UDim2.new(0, 100, 0, 100)
label.BackgroundTransparency = 1
label.Parent = screenGui

CSS sahte elemanlar bir elemanın belirli bölümlerini değiştirebilen şekilde, Roblox bir stil kuralının özelliği aracılığıyla hayalet oluşturabilir.Örneğin, aşağıdaki kural etkili bir şekilde her etiketli altında bir değiştirici oluşturur ve her değiştiricinin pikselini her birine ayarlar.

Luau
-- Arayüz bileşen seçicisi
rule.Selector = "Frame.RoundedCorner20::UICorner"

-- Kural özelliğini ayarla
rule:SetProperty("CornerRadius", UDim.new(0, 20))

-- Çerçeve oluştur
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Etiketi çerçeveye uygula
CollectionService:AddTag(frame, "RoundedCorner20")

Değişkenler

CSS, bir stil sistemi boyunca değişkenleri ilan etmenizi ve referans vermenizi sağlar.Roblox bunu jetonlar ve instans öznitelikleri sistemi aracılığıyla başarır.Bir ön ek olarak $ kullanarak, stil özelliklerini ayarlarken bir StyleRule veya StyleSheet miras zincirinde ilan edilen özniteliklere referans verebilirsiniz.

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
-- Öznitelikleri kullanarak stiller sayfası jetonları ayarla
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

-- Sınıf seçici
rule.Selector = "TextButton"

-- Kural özelliklerini ayarla
rule:SetProperties({
	["BackgroundColor3"] = "$ButtonBgColor",
	["TextColor3"] = "$ButtonTextColor"
})

-- Buton oluştur
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Main Menu"
button.Parent = screenGui

Yerleştirme ve birleştirme

Bir konsepti SCSS 'den ödünç almak, StyleRules birbirine dahil edilebilir ve seçicileri birleştirilebilir birleştirilebilir .

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
-- Menü çerçeve kuralı
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
})

-- Menü düzenleme kuralı
local menuLayoutRule = Instance.new("StyleRule")
menuLayoutRule.Parent = menuFrameRule  -- Menü çerçeve kuralını ebeveyn olarak ayarla
menuLayoutRule.Selector = "::UIListLayout"
menuLayoutRule:SetProperties({
	["FillDirection"] = Enum.FillDirection.Vertical,
	["VerticalFlex"] = Enum.UIFlexAlignment.SpaceEvenly,
	["HorizontalAlignment"] = Enum.HorizontalAlignment.Center
})

-- Buton kuralı
local buttonRule = Instance.new("StyleRule")
buttonRule.Parent = menuFrameRule  -- Menü çerçeve kuralını ebeveyn olarak ayarla
buttonRule.Selector = "> TextButton"
buttonRule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Buton gezinti kuralı
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Parent = buttonRule  -- Buton kuralını ebeveyn olarak ayarla
buttonHoverRule.Selector = ":hover"
buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)

-- Ebeveyn çerçevesi oluştur
local menuFrame = Instance.new("Frame")
menuFrame.Parent = screenGui
menuFrame.Name = "MenuFrame"

-- Çerçevenin içinde düğmeler oluştur Create buttons inside 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