Comparaciones de CSS

props.leadIn Archivo /> Características beta > > props.betaName props.leadOut

La mayoría de los conceptos de CSS se traduce a conceptos de estilo de Roblox. Los siguientes ejemplos muestran cómo CSS y HTML se alinean con los conceptos de clase/propiedad de Luau y Roblox.

Para probar cada uno de los siguientes ejemplos de script de Luau:

En el Explorador, crea lo siguiente:
1. StyleSheet instancia llamada CoreSheet dentro de ReplicatedStorage.
2. Instancia vacía StyleRule como hijo de CoreSheet .
3. ScreenGui contenedor en StarterGui .
4. LocalScript instancia dentro del ScreenGui.
5. StyleLink objeto dentro del ScreenGui cuya propiedad StyleSheet está vinculada a CoreSheet .

En el LocalScript, pega el siguiente código de soporte:

Guión local
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

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

Para cada ejemplo a continuación, pega las líneas de código Luau siguientes a las líneas de soporte 1–6.

Selectoras

La propiedad Selector de un StyleRule especifica qué instancias debe afectar la regla.Los siguientes tipos de seleccionador se traducen de CSS a Luau y se pueden usar con combinadores.

Elemento

Los equivalentes a los selectores de elementos de CSS son los selectores de clase de Roblox que seleccionan todas las instancias de una clase dada, por ejemplo , , , , etc.

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

HTML
<button>Main Menu</button>

Luau
-- Selector de clase
rule.Selector = "TextButton"

-- Establecer propiedades de regla
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

Clase

Los equivalentes de Roblox a los selectores CSS seleccionan etiquetas que utilizan etiquetas aplicadas a través de .

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

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

Luau
-- Selector de etiquetas
rule.Selector = ".ButtonPrimary"

-- Establecer propiedades de regla
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
-- Aplicar etiqueta al botón
CollectionService:AddTag(button, "ButtonPrimary")

La comparación más cercana de Roblox con CSS id es el seleccionador #[name] que selecciona según el valor de Instance.Name .A diferencia de la especificación de la atribución id de W3C, no se espera que los nombres sean únicos.

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

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

Luau
-- Selector de nombre de instancia
rule.Selector = "#ModalFrame"

-- Establecer propiedades de regla
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
-- Renombrar marco para coincidir con el seleccionador
frame.Name = "ModalFrame"

Combinadores

Los combinadores te permiten mezclar selectores básicos para igualar relaciones de jerarquía más profundas.

Niño

El seleccionador de hijos de > es idéntico entre CSS y 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>

Luau
-- Seleccionador de hijos
rule.Selector = ".MenuContainer > TextButton"

-- Establecer propiedades de regla para el hijo
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Crear contenedor de menú
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Aplicar etiqueta
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Crear botón
local button = Instance.new("TextButton")
button.Text = "Options"
-- Establecer el contenedor de menú como padre del botón
button.Parent = menuContainer

Descendiente

A diferencia de la sintaxis de espacio en blanco de CSS, por ejemplo .menu-container button visto aquí, Roblox usa el combinador >> para indicar una relación descendente.

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
-- Selector de descendencia
rule.Selector = ".MenuContainer >> TextButton"

-- Establecer propiedades de regla para el descendiente
rule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Crear contenedor de menú
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Aplicar etiqueta
CollectionService:AddTag(menuContainer, "MenuContainer")

-- Crear subcontenedor
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Establecer el contenedor de menú como padre del subcontenedor
subContainer.Parent = menuContainer

-- Crear botón
local button = Instance.new("TextButton")
button.Text = "Options"
-- Establecer contenedor subordinado como padre del botón
button.Parent = subContainer

Lista de seleccionadores

Múltiples seleccionadores (incluidos los seleccionadores con combinadores) se pueden declarar con el mismo bloque de propiedad, separados por comas, para reducir la redundancia.

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

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

<p>Main Menu</p>

Luau
-- Selector para etiquetas de imagen y etiquetas de texto
rule.Selector = "ImageLabel, TextLabel"

-- Establecer propiedad común para clases
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

-- Crear etiqueta de imagen
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui

-- Crear etiqueta de texto
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

Clases pseudo

Los equivalentes de Roblox a los selectores pseudo-clase de CSS seleccionan estados que corresponden a uno de los cuatro valores como o .

CSS
img:hover {
	opacity: 0.5;
}

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

Luau
-- Selector de estado
rule.Selector = "ImageLabel:Hover"

-- Establecer la propiedad de regla
rule:SetProperty("ImageTransparency", 0.5)

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

Instancias pseudo

Al igual que cómo los elementos CSS pseudo-elementos pueden modificar partes específicas de un elemento, Roblox puede crear un fantasma UIComponents a través de la propiedad de una regla de estilo Selector.Por ejemplo, la siguiente regla crea efectivamente un modificador UICorner modificador bajo cada etiqueta Frame que esté etiquetada con RoundedCorner20 y establece cada modificador CornerRadius a 20 pixeles.

Luau
-- Selector de componentes de UI
rule.Selector = "Frame.RoundedCorner20::UICorner"

-- Establecer la propiedad de regla
rule:SetProperty("CornerRadius", UDim.new(0, 20))

-- Crear marco
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Aplicar etiqueta al marco
CollectionService:AddTag(frame, "RoundedCorner20")

Variables

CSS te permite declarar y referenciar variables a lo largo de un sistema de estilo.Roblox lo logra a través de tokens y el sistema de atributos de instancias .Al usar $ como prefijo, puedes referenciar atributos declarados en una cadena de herencia StyleRule o StyleSheet al establecer propiedades de estilo.

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
-- Establecer tokens de hoja de estilo usando atributos
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

-- Selector de clase
rule.Selector = "TextButton"

-- Establecer propiedades de regla
rule:SetProperties({
	["BackgroundColor3"] = "$ButtonBgColor",
	["TextColor3"] = "$ButtonTextColor"
})

-- Crear botón
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "Main Menu"
button.Parent = screenGui

Anidamiento y fusión

Tomando prestado un concepto de SCSS , se pueden anidar juntos y sus seleccionadores se fusionarán .

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
-- Regla del marco de menú
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
})

-- Regla de distribución de menú
local menuLayoutRule = Instance.new("StyleRule")
menuLayoutRule.Parent = menuFrameRule  -- Establecer la regla del marco de menú como padre
menuLayoutRule.Selector = "::UIListLayout"
menuLayoutRule:SetProperties({
	["FillDirection"] = Enum.FillDirection.Vertical,
	["VerticalFlex"] = Enum.UIFlexAlignment.SpaceEvenly,
	["HorizontalAlignment"] = Enum.HorizontalAlignment.Center
})

-- Regla de botón
local buttonRule = Instance.new("StyleRule")
buttonRule.Parent = menuFrameRule  -- Establecer la regla del marco de menú como padre
buttonRule.Selector = "> TextButton"
buttonRule:SetProperties({
	["BackgroundColor3"] = Color3.fromHex("335FFF"),
	["TextColor3"] = Color3.fromHex("E1E1E1"),
	["Size"] = UDim2.new(0.8, 0, 0, 40),
	["BorderSizePixel"] = 0
})

-- Regla de colocación de botón
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Parent = buttonRule  -- Establecer la regla de botón como padre
buttonHoverRule.Selector = ":hover"
buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)

-- Crear marco padre
local menuFrame = Instance.new("Frame")
menuFrame.Parent = screenGui
menuFrame.Name = "MenuFrame"

-- Crear botones dentro del marco
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