CSS Hintergründe und Farben: Webseiten gestalten

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 color auf ein dunkles Grau mit rgb(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 Eigenschaft background-image hinzuzufü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 Ihrer styles.css-Datei.
Fügen Sie die Eigenschaft background-repeat hinzu und setzen Sie ihren Wert auf no-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 Eigenschaft background-position zur body-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-color und einem Hex-Code.
Ändern der Textfarbe mit der color-Eigenschaft und einem rgb()-Wert.
Hinzufügen eines background-image mit der url()-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.

CSS Farben und Hintergründe