مقارنات CSS

*This content is translated using AI (Beta) and may contain errors. To view this page in English, click here.

تتطابق معظم مفاهيم 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 هو محددات الفئة في 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

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 هو محددات العلامة التي تستخدم العلامات المطبقة من خلال 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

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" -- محدد اسم المثيل

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" -- محدد الطفل

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" -- محدد السليل

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" -- محدد لعلامات الصور وعلامات النص

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



-- إنشاء علامة الصورة

local imageLabel = Instance.new("ImageLabel")

imageLabel.Image = "rbxassetid://104919049969988"

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

imageLabel.Parent = screenGui



-- إنشاء علامة النص

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

الفئات الزائفة

ما يعادل محددات الفئة الزائفة في CSS في Roblox هو محددات الحالة التي تتوافق مع واحدة من قيم 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" -- محدد الحالة

rule:SetProperty("ImageTransparency", 0.5)



-- إنشاء علامة الصورة

local imageLabel = Instance.new("ImageLabel")

imageLabel.Image = "rbxassetid://104919049969988"

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

imageLabel.BackgroundTransparency = 1

imageLabel.Parent = screenGui

المثيلات الزائفة

على غرار كيفية تعديل العناصر الزائفة في CSS أجزاء معينة من عنصر، يمكن لـ Roblox إنشاء UIComponents وهمية من خلال خاصية Selector لقواعد النمط. على سبيل المثال، القاعدة التالية تخلق فعليًا مُعدل UICorner تحت كل Frame تم وضع علامة عليها بـ RoundedCorner20 وتضبط كل مُعدل على CornerRadius إلى 20 بكسل.

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

rule.Parent = coreSheet



rule.Selector = "Frame.RoundedCorner20::UICorner" -- محدد مكون واجهة المستخدم

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")

الاستعلامات

تربط استعلامات النمط في Roblox الفجوة بين استعلامات الوسائط و استعلامات الحاويات في CSS. باستخدام البادئة @، يمكنك تبديل الأنماط بناءً على أبعاد الأب، أو أنواع أجهزة الإدخال، أو إعدادات وصول المستخدم.

في CSS، يطبق @container الأنماط بناءً على حجم عنصر الأب. في Roblox، تحدد استعلامًا وهميًا باستخدام ::StyleQuery متبوعًا بـ معرف لخاصية 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

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

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" -- محدد الطفل

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 أيضًا استعلامات مدمجة تتوافق مباشرة مع حالات البيئة العالمية مثل 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

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 ذلك من خلال الرموز ونظام سمات المثيل. باستخدام $ كبادئة، يمكنك الإشارة إلى السمات المعلنة في سلسلة وراثة StyleRule أو StyleSheet عند تعيين خصائص الأنماط.

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" -- محدد الفئة

rule:SetProperties({

	BackgroundColor3 = "$ButtonBgColor",

	TextColor3 = "$ButtonTextColor"

})



-- إنشاء الزر

local button = Instance.new("TextButton")

button.AutomaticSize = Enum.AutomaticSize.XY

button.Text = "القائمة الرئيسية"

button.Parent = screenGui

الانتقالات

تتيح لك الانتقالات في CSS تحريك قيم الخصائص على مدى فترة محددة. يمكنك تحقيق ذلك في 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

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



-- قاعدة تمرير الزر

local hoverRule = Instance.new("StyleRule")

hoverRule.Selector = "TextButton:Hover" -- محدد الحالة

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 -- تعيين قاعدة تخطيط القائمة كأب



-- قاعدة تمرير الزر

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 وشعار "توسيع حدود المخيلة"، من ضمن علاماتنا التجارية المسجّلة وغير المسجّلة في الولايات المتحدة وبلدان أخرى.
الشروط·الخصوصية·إمكانية الوصول·الدعم
العربية