การเปรียบเทียบ CSS

*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่

แนวคิด CSS ส่วนใหญ่เชื่อมโยงกับแนวคิดการจัดรูปแบบของ Roblox ตัวอย่างต่อไปนี้แสดงให้เห็นว่า CSS และ HTML สอดคล้องกับ Luau และคลาส/คุณสมบัติของ Roblox อย่างไร

ในการทดสอบตัวอย่างสคริปต์ Luau ต่อไปนี้แต่ละตัวอย่าง:

  1. ใน Explorer ให้สร้างสิ่งต่อไปนี้:

    1. อินสแตนซ์ StyleSheet ภายใน ReplicatedStorage
    2. คอนเทนเนอร์ ScreenGui ใน StarterGui
    3. อินสแตนซ์ LocalScript ภายใน ScreenGui
    4. ออบเจ็กต์ StyleLink ภายใน ScreenGui

  2. ใน LocalScript ให้วางโค้ดสนับสนุนต่อไปนี้:

    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

  3. สำหรับแต่ละตัวอย่างด้านล่าง ให้วางบรรทัดโค้ด Luau ตามบรรทัดสนับสนุน 1–7

ตัวเลือก

คุณสมบัติ Selector ของ StyleRule ระบุว่าสิ่งใดบ้างที่กฎควรมีผลกระทบ ตัวเลือกประเภทต่อไปนี้เชื่อมโยงจาก CSS ไปยัง Luau และสามารถใช้ร่วมกับตัวประกอบได้

องค์ประกอบ

เทียบเท่ากับตัวเลือกองค์ประกอบ CSS คือ class selectors ของ Roblox ซึ่งเลือกอินสแตนซ์ทั้งหมดของคลาส GuiObject ที่กำหนด เช่น Frame, ImageLabel, TextButton เป็นต้น

CSS
button {

	background-color: #335FFF;

	color: #E1E1E1;

	width: 15%;

	height: 40px;

	border: none;

}
HTML
<button>เมนูหลัก</button>

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

rule.Parent = coreSheet



rule.Selector = "TextButton" -- Roblox class selector

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 = "เมนูหลัก"

button.Parent = screenGui

คลาส

เทียบเท่ากับตัวเลือก class ของ CSS ใน Roblox คือ tag selectors ซึ่งใช้ tags ที่ใช้ผ่าน CollectionService

CSS
.button-primary {

	background-color: #335FFF;

	color: #E1E1E1;

}
HTML
<button class="button-primary">เมนูหลัก</button>

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

rule.Parent = coreSheet



rule.Selector = ".ButtonPrimary" -- Roblox tag selector

rule:SetProperties({

	BackgroundColor3 = Color3.fromHex("335FFF"),

	TextColor3 = Color3.fromHex("E1E1E1"),

	AutomaticSize = Enum.AutomaticSize.XY

})



local button = Instance.new("TextButton")

button.Text = "เมนูหลัก"

button.Parent = screenGui

-- ใช้แท็กกับปุ่ม

CollectionService:AddTag(button, "ButtonPrimary")

ตัวระบุ

การเปรียบเทียบที่ใกล้เคียงที่สุดของ Roblox กับ id ของ CSS คือ ตัวเลือก #[name] ซึ่งเลือกตามค่าของ Instance.Name แตกต่างจากข้อกำหนดของ W3C สำหรับแอตทริบิวต์ id ชื่อไม่จำเป็นต้องไม่ซ้ำกัน

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" -- Instance name selector

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

-- เปลี่ยนชื่อเฟรมให้ตรงกับตัวเลือก

frame.Name = "ModalFrame"

ตัวประกอบ

ตัวประกอบช่วยให้คุณผสมผสาน ตัวเลือก พื้นฐานเพื่อจับคู่ความสัมพันธ์ในลำดับชั้นที่ลึกขึ้น

ลูก

ตัวเลือกลูกของ > เหมือนกันระหว่าง CSS และ 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>ตัวเลือก</button>

</div>

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

rule.Parent = coreSheet



rule.Selector = ".MenuContainer > TextButton" -- Child selector

rule:SetProperties({

	BackgroundColor3 = Color3.fromHex("335FFF"),

	TextColor3 = Color3.fromHex("E1E1E1"),

	Size = UDim2.new(0.8, 0, 0, 40),

	BorderSizePixel = 0

})



-- สร้างเมนูคอนเทนเนอร์

local menuContainer = Instance.new("Frame")

menuContainer.Size = UDim2.new(0.25, 0, 0, 0)

menuContainer.AutomaticSize = Enum.AutomaticSize.Y

menuContainer.Parent = screenGui

-- ใช้แท็ก

CollectionService:AddTag(menuContainer, "MenuContainer")



-- สร้างปุ่ม

local button = Instance.new("TextButton")

button.Text = "ตัวเลือก"

-- ตั้งค่าเมนูคอนเทนเนอร์เป็นพ่อของปุ่ม

button.Parent = menuContainer

ทายาท

แตกต่างจากไวยากรณ์ช่องว่าง CSS เช่น .menu-container button ที่เห็นที่นี่ Roblox ใช้ตัวประกอบ >> เพื่อระบุความสัมพันธ์ของทายาท

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>ตัวเลือก</button>

	</div>

</div>

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

rule.Parent = coreSheet



rule.Selector = ".MenuContainer >> TextButton" -- Descendant selector

rule:SetProperties({

	BackgroundColor3 = Color3.fromHex("335FFF"),

	TextColor3 = Color3.fromHex("E1E1E1"),

	Size = UDim2.new(0.8, 0, 0, 40),

	BorderSizePixel = 0

})



-- สร้างเมนูคอนเทนเนอร์

local menuContainer = Instance.new("Frame")

menuContainer.Size = UDim2.new(0.25, 0, 0, 0)

menuContainer.AutomaticSize = Enum.AutomaticSize.Y

menuContainer.Parent = screenGui

-- ใช้แท็ก

CollectionService:AddTag(menuContainer, "MenuContainer")



-- สร้างซับคอนเทนเนอร์

local subContainer = Instance.new("Frame")

subContainer.Size = UDim2.new(0.75, 0, 0, 0)

subContainer.AutomaticSize = Enum.AutomaticSize.Y

-- ตั้งค่าเมนูคอนเทนเนอร์เป็นพ่อของซับคอนเทนเนอร์

subContainer.Parent = menuContainer



-- สร้างปุ่ม

local button = Instance.new("TextButton")

button.Text = "ตัวเลือก"

-- ตั้งค่าให้ซับคอนเทนเนอร์เป็นพ่อของปุ่ม

button.Parent = subContainer

รายการตัวเลือก

ตัวเลือกหลายตัว (รวมถึงตัวเลือกที่มีตัวประกอบ) สามารถประกาศด้วยบล็อกคุณสมบัติเหมือนกัน โดยแยกด้วยเครื่องหมายจุลภาคเพื่อลดความซ้ำซ้อน

CSS
img, p {

	background-color: #FF0033;

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



<p>เมนูหลัก</p>

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

rule.Parent = coreSheet



rule.Selector = "ImageLabel, TextLabel" -- Selector for image labels AND text labels

rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))



-- สร้าง image label

local imageLabel = Instance.new("ImageLabel")

imageLabel.Image = "rbxassetid://104919049969988"

imageLabel.Size = UDim2.new(0, 100, 0, 100)

imageLabel.Parent = screenGui



-- สร้าง text label

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 = "เมนูหลัก"

textLabel.Parent = screenGui

คลาสจำลอง

เทียบเท่ากับตัวเลือก pseudo-class ของ CSS ใน Roblox คือ state selectors ซึ่งสอดคล้องกับค่าหนึ่งในสี่ค่าของ Enum.GuiState เช่น Hover หรือ 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" -- State selector

rule:SetProperty("ImageTransparency", 0.5)



-- สร้าง image label

local imageLabel = Instance.new("ImageLabel")

imageLabel.Image = "rbxassetid://104919049969988"

imageLabel.Size = UDim2.new(0, 100, 0, 100)

imageLabel.BackgroundTransparency = 1

imageLabel.Parent = screenGui

ตัวอินสแตนซ์จำลอง

คล้ายกับที่ CSS pseudo-elements สามารถปรับเปลี่ยนส่วนเฉพาะขององค์ประกอบได้ Roblox สามารถสร้าง UIComponents ที่เป็นภาพลวงตาผ่านคุณสมบัติ Selector ของกฎสไตล์ ตัวอย่างเช่น กฎต่อไปนี้จะสร้างตัวปรับ UICorner ภายใต้ Frame ทุกตัวที่มีแท็ก RoundedCorner20 และตั้งค่าความโค้งของแต่ละตัวปรับเป็น 20 พิกเซล

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

rule.Parent = coreSheet



rule.Selector = "Frame.RoundedCorner20::UICorner" -- UI component selector

rule:SetProperty("CornerRadius", UDim.new(0, 20))



-- สร้างเฟรม

local frame = Instance.new("Frame")

frame.Size = UDim2.new(0.4, 0, 0.2, 0)

frame.Parent = screenGui

-- ใช้แท็กกับเฟรม

CollectionService:AddTag(frame, "RoundedCorner20")

คิวรี

style queries ของ Roblox เชื่อมช่องว่างระหว่าง media queries และ container queries ของ CSS โดยใช้ @ เป็นคำนำหน้า คุณสามารถสลับสไตล์ตามขนาดของพ่อแม่ ประเภทอุปกรณ์นำเข้า หรือการตั้งค่าการเข้าถึงของผู้ใช้

ใน CSS @container ใช้เพื่อใช้สไตล์ตามขนาดขององค์ประกอบพ่อแม่ ใน Roblox คุณกำหนดการสอบถาม pseudo‑instance โดยใช้ ::StyleQuery ตามด้วย identifier สำหรับคุณสมบัติ Selector ของเงื่อนไข เช่น "::StyleQuery #WideContainer" พร้อมกับชื่อเงื่อนไข StyleQuery เช่น "MinSize" เพื่อประเมิน GuiObject.AbsoluteSize ของพ่อแม่ จากนั้นเพื่อใช้สไตล์กับอินสแตนซ์หรือบุตรของมันเมื่อการสอบถามใช้งานอยู่ ให้สร้าง StyleRule โดยมี @[identifier] เป็น Selector เช่น @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>เมนูหลัก</button>

</div>

Luau
-- กฎคอนเทนเนอร์

local containerRule = Instance.new("StyleRule")

containerRule.Selector = "Frame" -- Roblox class selector

containerRule:SetProperties({

	BackgroundColor3 = Color3.fromRGB(0, 0, 34),

	BackgroundTransparency = 0.5,

	BorderSizePixel = 0

})

containerRule.Parent = coreSheet



-- กฎปุ่ม

local buttonRule = Instance.new("StyleRule")

buttonRule.Selector = "TextButton" -- Roblox class selector

buttonRule:SetProperties({

	BackgroundColor3 = Color3.fromHex("335FFF"),

	TextColor3 = Color3.fromHex("E1E1E1"),

	Size = UDim2.new(0.75, 0, 0, 40),

	BorderSizePixel = 0

})

buttonRule.Parent = containerRule -- ลูกของกฎคอนเทนเนอร์



-- เงื่อนไขการสอบถาม (#WideContainer)

local queryCondition = Instance.new("StyleRule")

queryCondition.Selector = "::StyleQuery #WideContainer"

queryCondition:SetProperty("MinSize", Vector2.new(400, 0))

queryCondition.Parent = containerRule -- ลูกของกฎคอนเทนเนอร์



-- กฎที่ใช้เมื่อเงื่อนไขใช้งาน (@WideContainer)

local queryStyle = Instance.new("StyleRule")

queryStyle.Selector = "@WideContainer Frame > TextButton" -- Child selector

queryStyle:SetProperty("BackgroundColor3", Color3.fromHex("CC0033"))

queryStyle.Parent = containerRule -- ลูกของกฎคอนเทนเนอร์



-- สร้างอินสแตนซ์

local container = Instance.new("Frame")

container.Size = UDim2.new(0.8, 0, 0, 200)

container.Parent = screenGui

local button = Instance.new("TextButton")

button.Text = "เมนูหลัก"

button.Parent = container

Roblox ยังมี built-in queries ที่เชื่อมโยงโดยตรงกับสถานะของสภาพแวดล้อมทั่วโลก เช่น ViewportDisplaySize หรือ ReducedMotionEnabled ซึ่งไม่ต้องการการกำหนด ::StyleQuery และสามารถใช้ได้โดยตรงด้วยคำนำหน้า @

คุณสมบัติสื่อ CSSตัวเลือกสไตล์ Roblox
(max-width: 600px)@ViewportDisplaySizeSmall
(min-width: 601px) and (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
-- กฎคอนเทนเนอร์

local containerRule = Instance.new("StyleRule")

containerRule.Selector = "Frame" -- Roblox class selector

containerRule:SetProperties({

	BackgroundColor3 = Color3.fromRGB(0, 0, 34),

	BackgroundTransparency = 0.5,

	BorderSizePixel = 0

})

containerRule.Parent = coreSheet



-- การสอบถามในตัว

local motionRule = Instance.new("StyleRule")

motionRule.Selector = "@ReducedMotionEnabledTrue Frame"

motionRule:SetProperty("BackgroundTransparency", 0)

motionRule.Parent = containerRule -- ลูกของกฎคอนเทนเนอร์



-- สร้างอินสแตนซ์

local container = Instance.new("Frame")

container.Size = UDim2.new(0.8, 0, 0, 200)

container.Parent = screenGui

ตัวแปร

CSS ช่วยให้คุณประกาศและอ้างอิง ตัวแปร ทั่วทั้งระบบสไตล์ Roblox ทำสิ่งนี้ผ่านโทเค็นและระบบ instance attributes โดยใช้ $ เป็นคำนำหน้า คุณสามารถอ้างอิงคุณสมบัติที่ประกาศใน StyleRule หรือ StyleSheet inheritance chain เมื่อกำหนดคุณสมบัติสไตล์

CSS
:root {

	--button-bg-color: #335FFF;

	--button-text-color: #E1E1E1;

}



button {

	background-color: var(--button-bg-color);

	color: var(--button-text-color);

}
HTML
<button>เมนูหลัก</button>

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

rule.Parent = coreSheet



-- ตั้งค่าโทเค็นสไตล์ชีตโดยใช้แอตทริบิวต์

coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))

coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))



rule.Selector = "TextButton" -- Class selector

rule:SetProperties({

	BackgroundColor3 = "$ButtonBgColor",

	TextColor3 = "$ButtonTextColor"

})



-- สร้างปุ่ม

local button = Instance.new("TextButton")

button.AutomaticSize = Enum.AutomaticSize.XY

button.Text = "เมนูหลัก"

button.Parent = screenGui

การเปลี่ยนผ่าน

CSS transitions ช่วยให้คุณเปลี่ยนค่าในคุณสมบัติในระยะเวลาที่กำหนด คุณสามารถทำสิ่งนี้ใน Roblox โดยการตั้งค่าการเปลี่ยนแปลงคุณสมบัติใน StyleRule ผ่าน SetPropertyTransition() (เดี่ยว) หรือ SetPropertyTransitions() (หลาย)

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>เมนูหลัก</button>

Luau
-- กฎปุ่ม

local buttonRule = Instance.new("StyleRule")

buttonRule.Selector = "TextButton" -- Roblox class selector

buttonRule:SetProperties({

	BackgroundColor3 = Color3.fromHex("335FFF"),

	TextColor3 = Color3.fromHex("E1E1E1"),

	Size = UDim2.new(0.15, 0, 0, 40),

	BorderSizePixel = 0

})

-- ตั้งค่าพฤติกรรมการเปลี่ยนแปลงคุณสมบัติ

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



-- กฎ hover ของปุ่ม

local hoverRule = Instance.new("StyleRule")

hoverRule.Selector = "TextButton:Hover" -- State selector

hoverRule:SetProperties({

	AutoButtonColor = false,

	BackgroundColor3 = Color3.fromHex("33AAFF"),

	Rotation = -5

})

hoverRule.Parent = coreSheet



-- สร้างปุ่มข้อความ

local button = Instance.new("TextButton")

button.Text = "เมนูหลัก"

button.Parent = screenGui

การซ้อนและการรวม

ยืมแนวคิดจาก SCSS StyleRules สามารถซ้อนกันและตัวเลือกของพวกเขาจะ รวมกัน

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>เครื่องราง</button>

	<button>มานา</button>

	<button>ม้วน</button>  

</div>

Luau
-- กฎเฟรมเมนู

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



-- กฎเลย์เอาต์เมนู

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 -- ตั้งกฎเฟรมเมนูเป็นพ่อ



-- กฎปุ่ม

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 -- ตั้งกฎเฟรมเมนูเป็นพ่อ



-- กฎ hover ของปุ่ม

local buttonHoverRule = Instance.new("StyleRule")

buttonHoverRule.Selector = ":Hover"

buttonHoverRule:SetProperties({

	AutoButtonColor = false,

	BackgroundTransparency = 0.5,

	TextTransparency = 0.5

})

buttonHoverRule.Parent = buttonRule -- ตั้งกฎปุ่มเป็นพ่อ



-- สร้างเฟรมพ่อ

local menuFrame = Instance.new("Frame")

menuFrame.Name = "MenuFrame"

menuFrame.Parent = screenGui



-- สร้างปุ่มภายในเฟรม

local button1 = Instance.new("TextButton")

button1.Text = "เครื่องราง"

button1.Parent = menuFrame

local button2 = Instance.new("TextButton")

button2.Text = "มานา"

button2.Parent = menuFrame

local button3 = Instance.new("TextButton")

button3.Text = "ม้วน"

button3.Parent = menuFrame
©2026 Roblox Corporation. Roblox, โลโก้ Roblox และ Powering Imagination เป็นส่วนหนึ่งของเครื่องหมายการค้าที่จดทะเบียน และไม่ได้จดทะเบียนของเราในสหรัฐฯ และประเทศอื่นๆ
เงื่อนไข·ความเป็นส่วนตัว·การเข้าถึง·ฝ่ายบริการช่วยเหลือ
ภาษาไทย