Die meisten CSS-Konzepte entsprechen Roblox-Stilkonzepten. Die folgenden Beispiele zeigen, wie CSS und HTML mit Luau und Roblox-Klassen/Eigenschaften übereinstimmen.
Um jedes der folgenden Luau-Skriptbeispiele zu testen:
Im Explorer erstellen Sie Folgendes:
- Leere StyleRule Instanz als Kind von CoreSheet.
- ScreenGui container in StarterGui .
- LocalScript instanz innerhalb der ScreenGui.
- StyleLink objekt innerhalb des ScreenGui , dessen StyleSheet eigenschaft mit CoreSheet verbunden ist.
In der LocalScript , füge den folgenden unterstützenden Code ein:
Lokales Skriptlocal CollectionService = game:GetService("CollectionService")local ReplicatedStorage = game:GetService("ReplicatedStorage")local coreSheet = ReplicatedStorage:FindFirstChild("CoreSheet")local rule = coreSheet:FindFirstChildWhichIsA("StyleRule")local screenGui = script.ParentFür jedes Beispiel unten fügen Sie die Luau Codezeilen nach den unterstützenden Zeilen 1–6 ein.
Auswahl器
Die Selector Eigenschaft eines StyleRule spezifiziert, welche Instanzen die Regel betreffen soll.Die folgenden Auswahltypen map von CSS zu Luau und können mit Kombinatoren verwendet werden.
Element
Äquivalent zu CSS-Elementauswahlern sind Roblox Klassenauswahlern , die alle Instanzen einer bestimmten Klasse auswählen, zum Beispiel , , usw.
CSS
button {background-color: #335FFF;color: #E1E1E1;width: 15%;height: 40px;border: none;}
HTML
<button>Main Menu</button>
Luau
-- Klassenauswahlrule.Selector = "TextButton"-- Regel属性 setzenrule: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
Klasse
Die Roblox-Äquivalente zu CSS class Auswahlern sind Tag-Auswahlern , die Tags verwenden, die über CollectionService angewendet werden.
CSS
.button-primary {background-color: #335FFF;color: #E1E1E1;}
HTML
<button class="button-primary">Main Menu</button>
Luau
-- Tag-Auswahlrule.Selector = ".ButtonPrimary"-- Regel属性 setzenrule: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-- Tag auf die Schaltfläche anwendenCollectionService:AddTag(button, "ButtonPrimary")
Identifikator
Die engste Roblox-Vergleich mit CSS ist der Selektor, der entsprechend dem Wert von ausgewählt wird.Im Gegensatz zur W3C-Spezifikation des Attributes id sind Namen nicht einzigartig erwartet.
CSS
#modal-frame {background-color: #000022;opacity: 0.5;width: 50%;min-height: 100px;}
HTML
<div id="modal-frame"></div>
Luau
-- Instanzname Selectorrule.Selector = "#ModalFrame"-- Regel属性 setzenrule: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 umbenennen, um dem Auswahl器 zu entsprechenframe.Name = "ModalFrame"
Kombinatoren
Kombinatoren lassen dich grundlegende Selektoren mischen, um tiefere Hierarchiebeziehungen zu entsprechen.
Kinder
Die Kindauswahl von > ist identisch zwischen CSS und 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
-- Kindauswahlrule.Selector = ".MenuContainer > TextButton"-- Regel属性 für Kind festlegenrule:SetProperties({["BackgroundColor3"] = Color3.fromHex("335FFF"),["TextColor3"] = Color3.fromHex("E1E1E1"),["Size"] = UDim2.new(0.8, 0, 0, 40),["BorderSizePixel"] = 0})-- Menü-Container erstellenlocal menuContainer = Instance.new("Frame")menuContainer.Size = UDim2.new(0.25, 0, 0, 0)menuContainer.AutomaticSize = Enum.AutomaticSize.YmenuContainer.Parent = screenGui-- Tag anwendenCollectionService:AddTag(menuContainer, "MenuContainer")-- Erstellungs-Buttonlocal button = Instance.new("TextButton")button.Text = "Options"-- Menücontainer als Vater von Schaltfläche festlegenbutton.Parent = menuContainer
Absteiger
Im Gegensatz zur CSS-Leerzeichen-Syntax, zum Beispiel .menu-container button hier gesehen, verwendet Roblox den >> Kombinator, um eine untergeordnete Beziehung anzugeben.
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
-- Absteiger-Auswahlrule.Selector = ".MenuContainer >> TextButton"-- Regel属性 für Nachkomme festlegenrule:SetProperties({["BackgroundColor3"] = Color3.fromHex("335FFF"),["TextColor3"] = Color3.fromHex("E1E1E1"),["Size"] = UDim2.new(0.8, 0, 0, 40),["BorderSizePixel"] = 0})-- Menü-Container erstellenlocal menuContainer = Instance.new("Frame")menuContainer.Size = UDim2.new(0.25, 0, 0, 0)menuContainer.AutomaticSize = Enum.AutomaticSize.YmenuContainer.Parent = screenGui-- Tag anwendenCollectionService:AddTag(menuContainer, "MenuContainer")-- Untercontainer erstellenlocal subContainer = Instance.new("Frame")subContainer.Size = UDim2.new(0.75, 0, 0, 0)subContainer.AutomaticSize = Enum.AutomaticSize.Y-- Menücontainer als Vater des Subcontainers festlegensubContainer.Parent = menuContainer-- Erstellungs-Buttonlocal button = Instance.new("TextButton")button.Text = "Options"-- Sub-Container als Eltern des Buttons festlegenbutton.Parent = subContainer
Auswahlliste
Mehrere Selektoren (einschließlich Selektoren mit Kombinatoren) können mit demselben Eigenschaftsblock deklariert werden, getrennt durch Kommas, um die Redundanz zu reduzieren.
CSS
img, p {background-color: #FF0033;}
HTML
<img src="gear.png" width="100" height="100"><p>Main Menu</p>
Luau
-- Auswahl für Bild-Label UND Text-Labelrule.Selector = "ImageLabel, TextLabel"-- Gewöhnliche Eigenschaft für Klassen festlegenrule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))-- Bild-Label erstellenlocal imageLabel = Instance.new("ImageLabel")imageLabel.Image = "rbxassetid://104919049969988"imageLabel.Size = UDim2.new(0, 100, 0, 100)imageLabel.Parent = screenGui-- Erstelle Text-Etikettlocal 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
Pseudo-Klassen
Die Roblox-Äquivalente zu CSS--Pseudo-Klassen-Selektoren sind Status-Selektoren , die einem der vier Werte Enum.GuiState wie Hover oder Press entsprechen.
CSS
img:hover {opacity: 0.5;}
HTML
<img src="gear.png" width="100" height="100">
Luau
-- Zustandsauswahlrule.Selector = "ImageLabel:Hover"-- Regel-Eigenschaft festlegenrule:SetProperty("ImageTransparency", 0.5)-- Bild-Label erstellenlocal label = Instance.new("ImageLabel")label.Image = "rbxassetid://104919049969988"label.Size = UDim2.new(0, 100, 0, 100)label.BackgroundTransparency = 1label.Parent = screenGui
Pseudo-Instanzen
Ähnlich wie CSS--Pseudo-Elemente bestimmte Teile eines Elements modifizieren können, kann Roblox durch eine Style-Regel-Eigenschaft phantom-- erstellen.Zum Beispiel erstellt die folgende Regel effektiv einen Modifikator UICorner unter jedem Frame Tag, der mit RoundedCorner20 gekennzeichnet ist, und legt jeden Modifikator CornerRadius auf 20 Pixel fest.
Luau
-- UI-Komponentenauswahlrule.Selector = "Frame.RoundedCorner20::UICorner"-- Regel-Eigenschaft festlegenrule:SetProperty("CornerRadius", UDim.new(0, 20))-- Rahmen erstellenlocal frame = Instance.new("Frame")frame.Size = UDim2.new(0.4, 0, 0.2, 0)frame.Parent = screenGui-- Tag zum Rahmen anwendenCollectionService:AddTag(frame, "RoundedCorner20")
Variablen
CSS ermöglicht es Ihnen, Variablen zu deklarieren und zu referenzieren während eines Stilsystems.Roblox erreicht dies durch Token und das Instanzattribut-System.Wenn du $ als Präfix verwendest, kannst du Attribute referenzieren, die in einer StyleRule oder StyleSheet Erbschaftskette deklariert wurden, wenn du Stileigenschaften festlegst.
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
-- Stilblatt-Token mit Attributen festlegencoreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))-- Klassenauswahlrule.Selector = "TextButton"-- Regel属性 setzenrule:SetProperties({["BackgroundColor3"] = "$ButtonBgColor",["TextColor3"] = "$ButtonTextColor"})-- Erstellungs-Buttonlocal button = Instance.new("TextButton")button.AutomaticSize = Enum.AutomaticSize.XYbutton.Text = "Main Menu"button.Parent = screenGui
Verschachteln und Zusammenführen
Das Ausleihen eines Konzepts aus SCSS , StyleRules kann zusammen verschachtelt werden und ihre Selektoren werden sich zusammenführen .
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
-- Menürahmenregellocal 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})-- Menülayoutregellocal menuLayoutRule = Instance.new("StyleRule")menuLayoutRule.Parent = menuFrameRule -- Menürahmenregel als Eltern definierenmenuLayoutRule.Selector = "::UIListLayout"menuLayoutRule:SetProperties({["FillDirection"] = Enum.FillDirection.Vertical,["VerticalFlex"] = Enum.UIFlexAlignment.SpaceEvenly,["HorizontalAlignment"] = Enum.HorizontalAlignment.Center})-- Knopfregellocal buttonRule = Instance.new("StyleRule")buttonRule.Parent = menuFrameRule -- Menürahmenregel als Eltern definierenbuttonRule.Selector = "> TextButton"buttonRule:SetProperties({["BackgroundColor3"] = Color3.fromHex("335FFF"),["TextColor3"] = Color3.fromHex("E1E1E1"),["Size"] = UDim2.new(0.8, 0, 0, 40),["BorderSizePixel"] = 0})-- Knopf-Hover-Regellocal buttonHoverRule = Instance.new("StyleRule")buttonHoverRule.Parent = buttonRule -- Knopfregel als Eltern definierenbuttonHoverRule.Selector = ":hover"buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)-- Elternrahmen erstellenlocal menuFrame = Instance.new("Frame")menuFrame.Parent = screenGuimenuFrame.Name = "MenuFrame"-- Erstellen von Schaltflächen innerhalb des Rahmenslocal 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