La maggior parte dei concetti CSS si traduce in concetti di stile Roblox. Gli esempi seguenti mostrano come CSS e HTML si allineino con le classi/proprietà Luau e Roblox.
Per testare ciascuno degli esempi di script Luau seguenti:
Nell' Explorer , crea quanto segue:
- Istanza vuota StyleRule come figlia di CoreSheet .
- ScreenGui container in StarterGui .
- LocalScript istanza all'interno del ScreenGui.
Nel LocalScript, incolla il seguente codice di supporto:
Script localelocal CollectionService = game:GetService("CollectionService")local ReplicatedStorage = game:GetService("ReplicatedStorage")local coreSheet = ReplicatedStorage:FindFirstChild("CoreSheet")local rule = coreSheet:FindFirstChildWhichIsA("StyleRule")local screenGui = script.ParentPer ciascun esempio qui sotto, incolla le linee di codice Luau seguendo le linee di supporto 1–6.
Selettori
La proprietà Selector di un StyleRule specifica quali istanze la regola dovrebbe interessare.I seguenti tipi di selettore mappano da CSS a Luau e possono essere utilizzati con combinatori.
Elemento
Equivalenti ai selettori degli elementi CSS sono i selettori di classe Roblox che selezionano tutte le istanze di una classe data, ad esempio , , , , ecc.
CSS
button {background-color: #335FFF;color: #E1E1E1;width: 15%;height: 40px;border: none;}
HTML
<button>Main Menu</button>
Luau
-- Selettore di classerule.Selector = "TextButton"-- Imposta le proprietà delle regolerule: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
Classe
Gli equivalenti Roblox di CSS class selezionatori sono selezionatori di tag che utilizzano tag applicati attraverso CollectionService .
CSS
.button-primary {background-color: #335FFF;color: #E1E1E1;}
HTML
<button class="button-primary">Main Menu</button>
Luau
-- Selettore di tagrule.Selector = ".ButtonPrimary"-- Imposta le proprietà delle regolerule: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-- Applica il tag al pulsanteCollectionService:AddTag(button, "ButtonPrimary")
Identificatore
La confridenza Roblox più vicina a CSS id è il selettore #[name] che seleziona in base al valore di Instance.Name .A differenza della specifica W3C dell'attributo id , i nomi non sono previsti essere unici.
CSS
#modal-frame {background-color: #000022;opacity: 0.5;width: 50%;min-height: 100px;}
HTML
<div id="modal-frame"></div>
Luau
-- Selettore del nome dell'istanzarule.Selector = "#ModalFrame"-- Imposta le proprietà delle regolerule: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-- Rinomina il frame per corrispondere al selettoreframe.Name = "ModalFrame"
Combinatori
I combinatori ti consentono di mescolare selettori di base per abbinare relazioni di gerarchia più profonde.
Bambino
Il selettore figlio di > è identico tra CSS e 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
-- Selettore bambinorule.Selector = ".MenuContainer > TextButton"-- Imposta le proprietà delle regole per il figliorule:SetProperties({["BackgroundColor3"] = Color3.fromHex("335FFF"),["TextColor3"] = Color3.fromHex("E1E1E1"),["Size"] = UDim2.new(0.8, 0, 0, 40),["BorderSizePixel"] = 0})-- Crea contenitore menulocal menuContainer = Instance.new("Frame")menuContainer.Size = UDim2.new(0.25, 0, 0, 0)menuContainer.AutomaticSize = Enum.AutomaticSize.YmenuContainer.Parent = screenGui-- Applica il tagCollectionService:AddTag(menuContainer, "MenuContainer")-- Crea pulsantelocal button = Instance.new("TextButton")button.Text = "Options"-- Imposta il contenitore del menu come padre del pulsantebutton.Parent = menuContainer
Discendente
A differenza della sintassi dello spazio bianco CSS, ad esempio .menu-container button visto qui, Roblox utilizza il combinator >> per indicare una relazione discendente.
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
-- Selettore discendenterule.Selector = ".MenuContainer >> TextButton"-- Imposta le proprietà delle regole per il discendenterule:SetProperties({["BackgroundColor3"] = Color3.fromHex("335FFF"),["TextColor3"] = Color3.fromHex("E1E1E1"),["Size"] = UDim2.new(0.8, 0, 0, 40),["BorderSizePixel"] = 0})-- Crea contenitore menulocal menuContainer = Instance.new("Frame")menuContainer.Size = UDim2.new(0.25, 0, 0, 0)menuContainer.AutomaticSize = Enum.AutomaticSize.YmenuContainer.Parent = screenGui-- Applica il tagCollectionService:AddTag(menuContainer, "MenuContainer")-- Crea sub- contenitorelocal subContainer = Instance.new("Frame")subContainer.Size = UDim2.new(0.75, 0, 0, 0)subContainer.AutomaticSize = Enum.AutomaticSize.Y-- Imposta il container del menu come padre del sottocontenitoresubContainer.Parent = menuContainer-- Crea pulsantelocal button = Instance.new("TextButton")button.Text = "Options"-- Imposta il contenitore secondario come padre del pulsantebutton.Parent = subContainer
Lista selezionatori
Più selezionatori (inclusi selezionatori con combinatori) possono essere dichiarati con lo stesso blocco di proprietà, separati da virgole, per ridurre la ridondanza.
CSS
img, p {background-color: #FF0033;}
HTML
<img src="gear.png" width="100" height="100"><p>Main Menu</p>
Luau
-- Selettore per etichette di immagine E etichette di testorule.Selector = "ImageLabel, TextLabel"-- Imposta proprietà comune per le classirule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))-- Crea etichetta immaginelocal imageLabel = Instance.new("ImageLabel")imageLabel.Image = "rbxassetid://104919049969988"imageLabel.Size = UDim2.new(0, 100, 0, 100)imageLabel.Parent = screenGui-- Crea etichetta di testolocal textLabel = Instance.new("TextLabel")textLabel.Size = UDim2.new(1, 0, 0, 0)textLabel.AutomaticSize = Enum.AutomaticSize.YtextLabel.TextXAlignment = Enum.TextXAlignment.LefttextLabel.TextYAlignment = Enum.TextYAlignment.ToptextLabel.Text = "Main Menu"textLabel.Parent = screenGui
Classi pseudo
Gli equivalenti Roblox di CSS pseudo-class selezionatori sono selettori di stato che corrispondono a uno dei quattro valori Enum.GuiState come Hover o Press .
CSS
img:hover {opacity: 0.5;}
HTML
<img src="gear.png" width="100" height="100">
Luau
-- Selettore di statorule.Selector = "ImageLabel:Hover"-- Imposta la proprietà delle regolerule:SetProperty("ImageTransparency", 0.5)-- Crea etichetta immaginelocal label = Instance.new("ImageLabel")label.Image = "rbxassetid://104919049969988"label.Size = UDim2.new(0, 100, 0, 100)label.BackgroundTransparency = 1label.Parent = screenGui
Pseudo-istanze
Simile a come i CSS pseudo-elementi possono modificare parti specifiche di un elemento, Roblox può creare fantasma UIComponents attraverso la proprietà di una regola di stile Selector.Ad esempio, la seguente regola crea effettivamente un modificatore sotto ogni contrassegnato con e imposta ogni modificatore su pixel.
Luau
-- Selettore componente UIrule.Selector = "Frame.RoundedCorner20::UICorner"-- Imposta la proprietà delle regolerule:SetProperty("CornerRadius", UDim.new(0, 20))-- Crea quadrolocal frame = Instance.new("Frame")frame.Size = UDim2.new(0.4, 0, 0.2, 0)frame.Parent = screenGui-- Applica il tag al frameCollectionService:AddTag(frame, "RoundedCorner20")
Variabili
CSS ti consente di dichiarare e fare riferimento a variabili in tutto un sistema di stile.Roblox raggiunge questo attraverso i token e il sistema degli attributi dell'istanza .Usando $ come prefisso, puoi fare riferimento agli attributi dichiarati in una catena di eredità StyleRule o StyleSheet quando impostare le proprietà di stile.
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
-- Imposta i token di foglio di stile utilizzando gli attributicoreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))-- Selettore di classerule.Selector = "TextButton"-- Imposta le proprietà delle regolerule:SetProperties({["BackgroundColor3"] = "$ButtonBgColor",["TextColor3"] = "$ButtonTextColor"})-- Crea pulsantelocal button = Instance.new("TextButton")button.AutomaticSize = Enum.AutomaticSize.XYbutton.Text = "Main Menu"button.Parent = screenGui
Nidificazione e fusione
Prendendo in prestito un concetto da SCSS , può essere annidato insieme e i loro selettori si uniranno >.
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
-- Regola del menu framelocal menuFrameRule = Instance.new("StyleRule")menuFrameRule.Parent = coreSheetmenuFrameRule.Selector = "#MenuFrame"menuFrameRule:SetProperties({["BackgroundColor3"] = Color3.fromHex("000022"),["Size"] = UDim2.new(0.25, 0, 0, 200),["AutomaticSize"] = Enum.AutomaticSize.Y})-- Regola di distribuzione del menulocal menuLayoutRule = Instance.new("StyleRule")menuLayoutRule.Parent = menuFrameRule -- Imposta la regola del menu frame come padremenuLayoutRule.Selector = "::UIListLayout"menuLayoutRule:SetProperties({["FillDirection"] = Enum.FillDirection.Vertical,["VerticalFlex"] = Enum.UIFlexAlignment.SpaceEvenly,["HorizontalAlignment"] = Enum.HorizontalAlignment.Center})-- Regola del pulsantelocal buttonRule = Instance.new("StyleRule")buttonRule.Parent = menuFrameRule -- Imposta la regola del menu frame come padrebuttonRule.Selector = "> TextButton"buttonRule:SetProperties({["BackgroundColor3"] = Color3.fromHex("335FFF"),["TextColor3"] = Color3.fromHex("E1E1E1"),["Size"] = UDim2.new(0.8, 0, 0, 40),["BorderSizePixel"] = 0})-- Regola di hover del pulsantelocal buttonHoverRule = Instance.new("StyleRule")buttonHoverRule.Parent = buttonRule -- Imposta la regola del pulsante come padrebuttonHoverRule.Selector = ":hover"buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)-- Crea frame padrelocal menuFrame = Instance.new("Frame")menuFrame.Parent = screenGuimenuFrame.Name = "MenuFrame"-- Crea pulsanti all'interno del framelocal button1 = Instance.new("TextButton")button1.Text = "Charms"button1.Parent = menuFramelocal button2 = Instance.new("TextButton")button2.Text = "Mana"button2.Parent = menuFramelocal button3 = Instance.new("TextButton")button3.Text = "Scrolls"button3.Parent = menuFrame