CSS-Vergleiche

*Dieser Inhalt wurde mit KI (Beta) übersetzt und kann Fehler enthalten. Um diese Seite auf Englisch zu sehen, klicke hier.

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:

  1. Im Explorer erstellen Sie Folgendes:

    1. StyleSheet instanz mit dem namen CoreSheet innerhalb von ReplicatedStorage.
    2. Leere StyleRule Instanz als Kind von CoreSheet.
    3. ScreenGui container in StarterGui .
    4. LocalScript instanz innerhalb der ScreenGui.
    5. StyleLink objekt innerhalb des ScreenGui , dessen StyleSheet eigenschaft mit CoreSheet verbunden ist.
  2. In der LocalScript , füge den folgenden unterstützenden Code ein:

    Lokales Skript

    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. Fü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

-- Klassenauswahl
rule.Selector = "TextButton"
-- Regel属性 setzen
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

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-Auswahl
rule.Selector = ".ButtonPrimary"
-- Regel属性 setzen
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
-- Tag auf die Schaltfläche anwenden
CollectionService: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 Selector
rule.Selector = "#ModalFrame"
-- Regel属性 setzen
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 umbenennen, um dem Auswahl器 zu entsprechen
frame.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

-- Kindauswahl
rule.Selector = ".MenuContainer > TextButton"
-- Regel属性 für Kind festlegen
rule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("335FFF"),
["TextColor3"] = Color3.fromHex("E1E1E1"),
["Size"] = UDim2.new(0.8, 0, 0, 40),
["BorderSizePixel"] = 0
})
-- Menü-Container erstellen
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Tag anwenden
CollectionService:AddTag(menuContainer, "MenuContainer")
-- Erstellungs-Button
local button = Instance.new("TextButton")
button.Text = "Options"
-- Menücontainer als Vater von Schaltfläche festlegen
button.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-Auswahl
rule.Selector = ".MenuContainer >> TextButton"
-- Regel属性 für Nachkomme festlegen
rule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("335FFF"),
["TextColor3"] = Color3.fromHex("E1E1E1"),
["Size"] = UDim2.new(0.8, 0, 0, 40),
["BorderSizePixel"] = 0
})
-- Menü-Container erstellen
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- Tag anwenden
CollectionService:AddTag(menuContainer, "MenuContainer")
-- Untercontainer erstellen
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- Menücontainer als Vater des Subcontainers festlegen
subContainer.Parent = menuContainer
-- Erstellungs-Button
local button = Instance.new("TextButton")
button.Text = "Options"
-- Sub-Container als Eltern des Buttons festlegen
button.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-Label
rule.Selector = "ImageLabel, TextLabel"
-- Gewöhnliche Eigenschaft für Klassen festlegen
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))
-- Bild-Label erstellen
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui
-- Erstelle Text-Etikett
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

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

-- Zustandsauswahl
rule.Selector = "ImageLabel:Hover"
-- Regel-Eigenschaft festlegen
rule:SetProperty("ImageTransparency", 0.5)
-- Bild-Label erstellen
local label = Instance.new("ImageLabel")
label.Image = "rbxassetid://104919049969988"
label.Size = UDim2.new(0, 100, 0, 100)
label.BackgroundTransparency = 1
label.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-Komponentenauswahl
rule.Selector = "Frame.RoundedCorner20::UICorner"
-- Regel-Eigenschaft festlegen
rule:SetProperty("CornerRadius", UDim.new(0, 20))
-- Rahmen erstellen
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- Tag zum Rahmen anwenden
CollectionService: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 festlegen
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))
-- Klassenauswahl
rule.Selector = "TextButton"
-- Regel属性 setzen
rule:SetProperties({
["BackgroundColor3"] = "$ButtonBgColor",
["TextColor3"] = "$ButtonTextColor"
})
-- Erstellungs-Button
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.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ürahmenregel
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
})
-- Menülayoutregel
local menuLayoutRule = Instance.new("StyleRule")
menuLayoutRule.Parent = menuFrameRule -- Menürahmenregel als Eltern definieren
menuLayoutRule.Selector = "::UIListLayout"
menuLayoutRule:SetProperties({
["FillDirection"] = Enum.FillDirection.Vertical,
["VerticalFlex"] = Enum.UIFlexAlignment.SpaceEvenly,
["HorizontalAlignment"] = Enum.HorizontalAlignment.Center
})
-- Knopfregel
local buttonRule = Instance.new("StyleRule")
buttonRule.Parent = menuFrameRule -- Menürahmenregel als Eltern definieren
buttonRule.Selector = "> TextButton"
buttonRule:SetProperties({
["BackgroundColor3"] = Color3.fromHex("335FFF"),
["TextColor3"] = Color3.fromHex("E1E1E1"),
["Size"] = UDim2.new(0.8, 0, 0, 40),
["BorderSizePixel"] = 0
})
-- Knopf-Hover-Regel
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Parent = buttonRule -- Knopfregel als Eltern definieren
buttonHoverRule.Selector = ":hover"
buttonHoverRule:SetProperty("BackgroundTransparency", 0.5)
-- Elternrahmen erstellen
local menuFrame = Instance.new("Frame")
menuFrame.Parent = screenGui
menuFrame.Name = "MenuFrame"
-- Erstellen von Schaltflächen innerhalb des Rahmens
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