Einführung
Willkommen zum Lab für CSS-Farben und Hintergründe! Im Webdesign sind Farben und Hintergründe grundlegend für die Erstellung visuell ansprechender und benutzerfreundlicher Websites. Sie helfen dabei, den Ton anzugeben, die Lesbarkeit zu verbessern und die Aufmerksamkeit des Benutzers zu lenken.
In diesem Lab erhalten Sie praktische Erfahrungen mit einigen der gängigsten CSS-Eigenschaften, die zur Steuerung des Erscheinungsbilds von Elementen verwendet werden. Sie lernen, wie Sie Hintergrundfarben festlegen, Textfarben anwenden, Hintergrundbilder verwenden und steuern, wie diese Bilder angezeigt werden. Wir werden die folgenden Eigenschaften behandeln: background-color, color, background-image, background-repeat und background-position.
Am Ende dieses Labs werden Sie ein solides Verständnis dafür haben, wie Sie die Farben und Hintergründe Ihrer Webseiten gestalten.
Setze die background-color-Eigenschaft mit Hex-Code
In diesem Schritt lernen Sie, wie Sie die Hintergrundfarbe der gesamten Seite ändern. Wir verwenden die Eigenschaft background-color und einen hexadezimalen (hex) Farbbereich. Hex-Codes sind eine gängige Methode zur Darstellung von Farben in der Webentwicklung. Sie beginnen mit einem #, gefolgt von sechs Zeichen (0-9, a-f).
Zuerst müssen Sie die Datei styles.css bearbeiten. Sie finden diese Datei im Dateiexplorer auf der linken Seite der WebIDE.
- Klicken Sie auf die Datei
styles.css, um sie im Editor zu öffnen. - Fügen Sie die folgende CSS-Regel hinzu, um die Hintergrundfarbe für das
<body>-Element festzulegen. Dies wendet den Stil auf die gesamte Seite an.
body {
background-color: #f0f8ff;
}
Diese Regel wählt das body-Element aus und setzt seine Hintergrundfarbe auf einen hellblauen Farbton, der als "AliceBlue" bekannt ist.
Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei (Sie können Strg+S oder Cmd+S verwenden). Um Ihre Änderungen zu sehen, klicken Sie auf den Tab Web 8080 oben in der Benutzeroberfläche. Sie sollten sehen, wie sich der Hintergrund der Seite von Weiß zu Hellblau ändert.
Wende die color-Eigenschaft mit RGB-Werten an
Nachdem Sie die Hintergrundfarbe festgelegt haben, ändern wir nun die Farbe des Hauptüberschriften-Textes. Wir verwenden die Eigenschaft color, die die Farbe des Textinhalts eines Elements festlegt. Hierfür verwenden wir das rgb()-Farbformat.
Die Funktion rgb() definiert eine Farbe anhand ihrer Rot-, Grün- und Blau-Komponenten, wobei jeder Wert von 0 bis 255 reicht.
Bearbeiten Sie weiterhin die Datei styles.css.
- Fügen Sie eine neue CSS-Regel hinzu, um das
<h1>-Element anzusprechen. - Setzen Sie innerhalb dieser Regel die Eigenschaft
colorauf ein dunkles Grau mitrgb(60, 60, 60).
Fügen Sie den folgenden Code zu Ihrer styles.css-Datei hinzu:
h1 {
color: rgb(60, 60, 60);
}
Speichern Sie die Datei und wechseln Sie zum Tab Web 8080, um Ihre Änderungen in der Vorschau anzuzeigen. Die Überschrift "Welcome to LabEx" sollte nun dunkelgrau sein und sich vom hellblauen Hintergrund abheben.
Verwende die background-image-Eigenschaft mit URL
Zusätzlich zu Vollfarben erlaubt CSS die Verwendung von Bildern als Hintergründe. Die Eigenschaft background-image wird für diesen Zweck verwendet. Sie geben den Bildpfad mit der Funktion url() an.
In diesem Schritt fügen Sie dem body der Seite ein Hintergrundbild hinzu. Das Setup-Skript hat bereits eine Bilddatei namens labex.svg in Ihrem Projektverzeichnis erstellt.
- Kehren Sie zu Ihrer
styles.css-Datei zurück. - Ändern Sie die bestehende
body-Regel, um die Eigenschaftbackground-imagehinzuzufügen.
Fügen Sie die folgende Zeile innerhalb der geschweiften Klammern des body-Selectors hinzu:
body {
background-color: #f0f8ff;
background-image: url("labex.svg");
}
Nachdem Sie die Datei gespeichert haben, überprüfen Sie den Tab Web 8080. Sie werden feststellen, dass das Bild (labex.svg) auf der Seite erscheint. Standardmäßig wiederholen sich Hintergrundbilder sowohl horizontal als auch vertikal, um das gesamte Element auszufüllen. Im nächsten Schritt lernen wir, wie wir dieses Verhalten steuern können.
Implementiere die background-repeat-Eigenschaft no-repeat
Wie Sie im vorherigen Schritt gesehen haben, wiederholen sich Hintergrundbilder standardmäßig. Die Eigenschaft background-repeat gibt Ihnen die Kontrolle über dieses Verhalten. Sie kann verschiedene Werte annehmen, darunter repeat (der Standardwert), repeat-x (horizontal wiederholen), repeat-y (vertikal wiederholen) und no-repeat.
In diesem Schritt verhindern Sie, dass sich das Hintergrundbild wiederholt.
- Bearbeiten Sie weiterhin die
body-Regel in Ihrerstyles.css-Datei. - Fügen Sie die Eigenschaft
background-repeathinzu und setzen Sie ihren Wert aufno-repeat.
Ihre body-Regel sollte nun wie folgt aussehen:
body {
background-color: #f0f8ff;
background-image: url("labex.svg");
background-repeat: no-repeat;
}
Speichern Sie die Datei und aktualisieren Sie den Tab Web 8080. Sie sehen nun nur eine einzige Instanz des Hintergrundbilds, die sich in der oberen linken Ecke der Seite befindet.
Füge die background-position-Eigenschaft center hinzu
Derzeit ist das einzelne Hintergrundbild in der oberen linken Ecke der Seite positioniert. Sie können seine Position mit der Eigenschaft background-position ändern. Diese Eigenschaft akzeptiert Werte wie left, right, top, bottom und center sowie spezifische Längen- oder Prozentwerte.
Für diesen letzten Schritt zentrieren Sie das Hintergrundbild sowohl horizontal als auch vertikal.
- Fügen Sie in Ihrer
styles.css-Datei die Eigenschaftbackground-positionzurbody-Regel hinzu. - Setzen Sie ihren Wert auf
center.
Die vollständige body-Regel lautet nun:
body {
background-color: #f0f8ff;
background-image: url("labex.svg");
background-repeat: no-repeat;
background-position: center;
}
Speichern Sie Ihre Änderungen und sehen Sie sich das Ergebnis im Tab Web 8080 an. Das Hintergrundbild sollte nun perfekt auf der Seite zentriert sein.
Zusammenfassung
Herzlichen Glückwunsch zum Abschluss des Labs! Sie haben erfolgreich gelernt, wie Sie Farben und Hintergründe einer Webseite mit grundlegenden CSS-Eigenschaften gestalten.
In diesem Lab haben Sie Folgendes geübt:
- Festlegen der Hintergrundfarbe einer Seite mit
background-colorund einem Hex-Code. - Ändern der Textfarbe mit der
color-Eigenschaft und einemrgb()-Wert. - Hinzufügen eines
background-imagemit derurl()-Funktion. - Steuern der Bildkachelung mit
background-repeat: no-repeat;. - Positionieren eines Hintergrundbilds mit
background-position: center;.
Diese Eigenschaften sind wesentliche Werkzeuge für jeden Webentwickler. Experimentieren Sie gerne weiter, indem Sie die Werte ändern oder verschiedene Bilder ausprobieren, um zu sehen, was Sie erstellen können.
