Confronti CSS

*Questo contenuto è tradotto usando AI (Beta) e potrebbe contenere errori. Per visualizzare questa pagina in inglese, clicca qui.

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:

  1. Nell' Explorer , crea quanto segue:

    1. StyleSheet istanza chiamata CoreSheet all'interno di ReplicatedStorage .
    2. Istanza vuota StyleRule come figlia di CoreSheet .
    3. ScreenGui container in StarterGui .
    4. LocalScript istanza all'interno del ScreenGui.
    5. StyleLink oggetto all'interno del ScreenGui il cui StyleSheet proprietà è collegata a CoreSheet .
  2. Nel LocalScript, incolla il seguente codice di supporto:

    Script locale

    local CollectionService = game:GetService("CollectionService")
    local ReplicatedStorage = game:GetService("ReplicatedStorage")
    local coreSheet = ReplicatedStorage:FindFirstChild("CoreSheet")
    local rule = coreSheet:FindFirstChildWhichIsA("StyleRule")
    local screenGui = script.Parent
  3. Per 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 classe
rule.Selector = "TextButton"
-- Imposta le proprietà delle regole
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

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 tag
rule.Selector = ".ButtonPrimary"
-- Imposta le proprietà delle regole
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
-- Applica il tag al pulsante
CollectionService: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'istanza
rule.Selector = "#ModalFrame"
-- Imposta le proprietà delle regole
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
-- Rinomina il frame per corrispondere al selettore
frame.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 bambino
rule.Selector = ".MenuContainer > TextButton"
-- Imposta le proprietà delle regole per il figlio
rule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("335FFF"),
["TextColor3"] = Color3.fromHex("E1E1E1"),
["Size"] = UDim2.new(0.8, 0, 0, 40),
["BorderSizePixel"] = 0
})
-- Crea contenitore menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Applica il tag
CollectionService:AddTag(menuContainer, "MenuContainer")
-- Crea pulsante
local button = Instance.new("TextButton")
button.Text = "Options"
-- Imposta il contenitore del menu come padre del pulsante
button.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 discendente
rule.Selector = ".MenuContainer >> TextButton"
-- Imposta le proprietà delle regole per il discendente
rule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("335FFF"),
["TextColor3"] = Color3.fromHex("E1E1E1"),
["Size"] = UDim2.new(0.8, 0, 0, 40),
["BorderSizePixel"] = 0
})
-- Crea contenitore menu
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Applica il tag
CollectionService:AddTag(menuContainer, "MenuContainer")
-- Crea sub- contenitore
local 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 sottocontenitore
subContainer.Parent = menuContainer
-- Crea pulsante
local button = Instance.new("TextButton")
button.Text = "Options"
-- Imposta il contenitore secondario come padre del pulsante
button.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 testo
rule.Selector = "ImageLabel, TextLabel"
-- Imposta proprietà comune per le classi
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))
-- Crea etichetta immagine
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui
-- Crea etichetta di testo
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

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 stato
rule.Selector = "ImageLabel:Hover"
-- Imposta la proprietà delle regole
rule:SetProperty("ImageTransparency", 0.5)
-- Crea etichetta immagine
local label = Instance.new("ImageLabel")
label.Image = "rbxassetid://104919049969988"
label.Size = UDim2.new(0, 100, 0, 100)
label.BackgroundTransparency = 1
label.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 UI
rule.Selector = "Frame.RoundedCorner20::UICorner"
-- Imposta la proprietà delle regole
rule:SetProperty("CornerRadius", UDim.new(0, 20))
-- Crea quadro
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Applica il tag al frame
CollectionService: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 attributi
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))
-- Selettore di classe
rule.Selector = "TextButton"
-- Imposta le proprietà delle regole
rule:SetProperties({
["BackgroundColor3"] = "$ButtonBgColor",
["TextColor3"] = "$ButtonTextColor"
})
-- Crea pulsante
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.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 frame
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
})
-- Regola di distribuzione del menu
local menuLayoutRule = Instance.new("StyleRule")
menuLayoutRule.Parent = menuFrameRule -- Imposta la regola del menu frame come padre
menuLayoutRule.Selector = "::UIListLayout"
menuLayoutRule:SetProperties({
["FillDirection"] = Enum.FillDirection.Vertical,
["VerticalFlex"] = Enum.UIFlexAlignment.SpaceEvenly,
["HorizontalAlignment"] = Enum.HorizontalAlignment.Center
})
-- Regola del pulsante
local buttonRule = Instance.new("StyleRule")
buttonRule.Parent = menuFrameRule -- Imposta la regola del menu frame come padre
buttonRule.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 pulsante
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Parent = buttonRule -- Imposta la regola del pulsante come padre
buttonHoverRule.Selector = ":hover"
buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)
-- Crea frame padre
local menuFrame = Instance.new("Frame")
menuFrame.Parent = screenGui
menuFrame.Name = "MenuFrame"
-- Crea pulsanti all'interno del 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