Vorlesung 3: Farben und Hintergründe in CSS

In dieser Vorlesung erfahren Sie, wie Sie Farben und Hintergründe verwenden, um Ihre Website optisch ansprechend zu gestalten. Zu verstehen, wie man Farben und Hintergründe effektiv anwendet, ist der Schlüssel zur Erstellung ansprechender und ästhetisch ansprechender Webdesigns.

Farben in CSS verwenden

Mit CSS können Sie Farben auf verschiedene Arten angeben, einschließlich der Verwendung von Farbnamen, Hexadezimalwerten, RGB, RGBA, HSL und HSLA.

1. Farbnamen

CSS bietet eine breite Palette vordefinierter Farbnamen.

• Beispiel:

  h1 {
    color: red;
  }

Dadurch wird die Textfarbe aller

-Elemente auf Rot gesetzt.

2. Hexadezimale Farben

Hex-Codes sind eine sechsstellige Kombination aus Zahlen und Buchstaben, die durch ihre Mischung aus roten, grünen und blauen (RGB) Werten definiert wird.

• Beispiel:

  p {
    color: #3498db; /* A shade of blue */
  }

3. RGB und RGBA

RGB steht für Rot, Grün und Blau. RGBA fügt einen Alpha-Kanal für die Deckkraft hinzu.

• Beispiel (RGB):

  div {
    color: rgb(255, 99, 71); /* Tomato color */
  }

• Beispiel (RGBA):

  div {
    background-color: rgba(255, 99, 71, 0.5); /* Semi-transparent tomato color */
  }

4. HSL und HSLA

HSL steht für Farbton, Sättigung und Helligkeit. HSLA beinhaltet einen Alpha-Kanal.

• Beispiel (HSL):

  h2 {
    color: hsl(120, 100%, 50%); /* Pure green */
  }

• Beispiel (HSLA):

  h2 {
    color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green */
  }

Hintergründe anwenden

Hintergründe in CSS können das Design verbessern, indem sie Elementen Farben, Bilder, Farbverläufe und mehr hinzufügen.

1. Hintergrundfarbe

Sie können die Hintergrundfarbe jedes HTML-Elements mithilfe der Eigenschaft „background-color“ festlegen.

• Beispiel:

  body {
    background-color: #f4f4f4; /* Light gray background */
  }

2. Hintergrundbilder

Mit CSS können Sie Bilder als Hintergründe verwenden.

• Beispiel:

  .banner {
    background-image: url('banner.jpg');
    background-size: cover;
    background-position: center;
  }

Dadurch wird ein Hintergrundbild für ein Element mit dem Klassenbanner festgelegt. Das Bild deckt den gesamten Bereich ab und wird zentriert.

3. Hintergrundwiederholung

Steuern Sie, ob sich ein Hintergrundbild horizontal, vertikal oder überhaupt nicht wiederholt.

• Beispiel:

  .tile {
    background-image: url('tile.png');
    background-repeat: repeat; /* Repeats both horizontally and vertically */
  }

4. Hintergrundposition

Sie können die Startposition des Hintergrundbilds steuern.

• Beispiel:

  .header {
    background-image: url('header.jpg');
    background-position: top right;
  }

5. Hintergrundverlauf

Verläufe ermöglichen es Ihnen, sanfte Übergänge zwischen zwei oder mehr Farben zu erstellen.

• Beispiel (linearer Farbverlauf):

  .gradient-box {
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient from left to right */
  }

• Beispiel (Radialer Farbverlauf):

  .circle-gradient {
    background: radial-gradient(circle, #ff7e5f, #feb47b); /* Circular gradient */
  }

Praxisbeispiel:

Lassen Sie uns diese Konzepte anhand eines Beispiels in die Praxis umsetzen, das Farben, ein Hintergrundbild und einen Farbverlauf verwendet.

HTML:

  
Welcome to My Website
  
This is a simple example of using colors and backgrounds in CSS.

CSS:

/* Background color */
body {
  background-color: #f4f4f4;
}

/* Text color */
h1 {
  color: #2c3e50;
}

/* Background image with gradient overlay */
.content {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg');
  background-size: cover;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Text color for paragraph */
p {
  color: #ecf0f1;
}

In diesem Beispiel:

• Der Körper hat eine hellgraue Hintergrundfarbe.
• Der

  -Text ist dunkelblau.

• Das .content-Div hat ein Hintergrundbild mit einer dunklen Farbverlaufsüberlagerung, wodurch der weiße Text hervorsticht.
• Der

  -Text ist in einem hellen Farbton gehalten, um den Hintergrund zu ergänzen.

Übungsübung

1. Erstellen Sie eine Webseite, die Überschriften, Absätze und Abschnitte enthält.
2. Experimentieren Sie mit verschiedenen Farbformaten (Hex, RGB, HSL), um Text und Hintergründe zu gestalten.
3. Wenden Sie ein Hintergrundbild auf einen Abschnitt an und spielen Sie mit dessen Position, Größe und Wiederholungseigenschaften.
4. Erstellen Sie einen Abschnitt mit einem linearen oder radialen Verlaufshintergrund.

Nächstes Thema: In der nächsten Lektion befassen wir uns mit Typografie und Schriftgestaltung in CSS, wo Sie lernen, wie Sie Schriftarten auswählen und anpassen, um die Lesbarkeit Ihrer Website zu verbessern und Berufung. Wir sehen uns dort!