Was ist CSS?

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und die Formatierung von Webseiten zu steuern. Während HTML den Inhalt von Webseiten definiert, bestimmt CSS, wie dieser Inhalt angezeigt wird (Farben, Schriftarten, Layout usw.). CSS ermöglicht es, den Stil von HTML-Elementen einzeln oder in Gruppen zu definieren, wodurch Webseiten ein konsistentes und ästhetisches Erscheinungsbild erhalten.

Trennungsprinzip: CSS bietet eine übersichtlichere und besser verwaltbare Struktur, indem es Inhalt (HTML) und Präsentation (CSS) voneinander trennt.
Wiederverwendbarkeit: CSS-Regeln können auf mehrere HTML-Elemente angewendet werden, was die Code-Wiederholung reduziert und den Entwicklungsprozess beschleunigt.
Flexibilität: CSS ermöglicht unterschiedliche Stildarstellungen für verschiedene Geräte (Desktop, Tablet, Mobil) (Responsive Design).

Beispiel:


<!DOCTYPE html>
<html>
<head>
  <title>CSS Beispiel</title>
  <style>
    h1 {
      color: blue;
      text-align: center;
    }
    p {
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>Hallo Welt!</h1>
  <p>Dies ist ein CSS-Beispiel. Die Überschrift ist blau und zentriert, der Absatz ist 16 Pixel groß und die Zeilenhöhe ist auf 1,5 eingestellt.</p>
</body>
</html>

Wie funktioniert CSS?

CSS besteht aus einer Reihe von Regeln, die Stilregeln definieren, die auf HTML-Elemente angewendet werden sollen. Jede Regel enthält einen Selektor und eine oder mehrere Deklarationen. Der Selektor gibt das HTML-Element an, auf das der Stil angewendet werden soll, während die Deklarationen die Stileigenschaften und -werte definieren.

Das Funktionsprinzip von CSS besteht aus den folgenden Schritten:

HTML-Parsing: Der Browser parst das HTML-Dokument und erstellt den DOM-Baum (Document Object Model).
CSS-Parsing: Der Browser parst die CSS-Regeln und erstellt den CSSOM-Baum (CSS Object Model).
Erstellung des Renderbaums: Der Browser kombiniert den DOM- und CSSOM-Baum, um den Renderbaum zu erstellen. Der Renderbaum enthält die Elemente und Stile, die auf dem Bildschirm angezeigt werden sollen.
Layout: Der Browser berechnet die Größe und Position jedes Elements im Renderbaum.
Painting: Der Browser malt die Elemente im Renderbaum auf den Bildschirm.

CSS-Quellen: CSS-Regeln können auf drei verschiedene Arten zu einer HTML-Seite hinzugefügt werden:

Inline-CSS: Stilregeln werden direkt im HTML-Element definiert. (Nicht empfohlen)
Internes CSS: Stilregeln werden im <head>-Bereich des HTML-Dokuments innerhalb des <style>-Tags definiert.
Externes CSS: Stilregeln werden in einer separaten .css-Datei definiert und mit dem <link>-Tag mit dem HTML-Dokument verknüpft. (Beste Vorgehensweise)

CSS-Selektoren: CSS-Selektoren werden verwendet, um die HTML-Elemente anzugeben, auf die der Stil angewendet werden soll. Die am häufigsten verwendeten Selektortypen sind:

Elementselektoren: Verwenden des Namens des HTML-Elements (z. B. p, h1, div).
Klassenselektoren: Verwenden des class-Attributs des HTML-Elements (z. B. .ueberschrift, .absatz).
ID-Selektoren: Verwenden des id-Attributs des HTML-Elements (z. B. #haupt-ueberschrift, #inhalt).
Attributselektoren: Verwenden der Attribute des HTML-Elements (z. B. [type="text"], [href^="https://"]).
Pseudoklassen-Selektoren: Verwenden eines bestimmten Zustands des Elements (z. B. :hover, :active, :focus).
Pseudoelement-Selektoren: Verwenden eines bestimmten Teils des Elements (z. B. ::before, ::after, ::first-line).

Grundlegende CSS-Syntax und -Verwendung

Die CSS-Syntax besteht aus Selektoren und Deklarationsblöcken. Ein Deklarationsblock besteht aus Paaren von Eigenschaft (Property) und Wert (Value).

Beispiel:


/* Selektor */
h1 {
  /* Deklarationsblock */
  color: blue; /* Eigenschaft: color, Wert: blue */
  text-align: center; /* Eigenschaft: text-align, Wert: center */
}

Grundlegende CSS-Eigenschaften:

color: Bestimmt die Textfarbe.
font-size: Bestimmt die Textgröße.
font-family: Bestimmt die Textschriftart.
text-align: Bestimmt die Textausrichtung.
background-color: Bestimmt die Hintergrundfarbe.
width: Bestimmt die Breite des Elements.
height: Bestimmt die Höhe des Elements.
margin: Bestimmt den Außenabstand des Elements.
padding: Bestimmt den Innenabstand des Elements.
border: Bestimmt den Rahmen des Elements.

CSS-Werte: Die Werte, die CSS-Eigenschaften annehmen können, variieren je nach Eigenschaft. Einige gängige Werttypen sind:

Farben: Farbnamen (z. B. red, blue, green), Hexadezimalwerte (z. B. #FF0000, #00FF00), RGB-Werte (z. B. rgb(255, 0, 0), rgb(0, 255, 0)), HSL-Werte (z. B. hsl(0, 100%, 50%), hsl(120, 100%, 50%)).
Größen: Pixel (px), em, rem, Prozent (%).
Schlüsselwörter: auto, inherit, initial.

CSS Box Model (Kastenmodell)

Das CSS-Kastenmodell behandelt jedes HTML-Element als eine Box. Diese Box besteht aus vier Abschnitten: Inhalt (content), Innenabstand (padding), Rahmen (border) und Außenabstand (margin).

Bestandteile des Kastenmodells:

Inhalt (Content): Der Inhalt des Elements (Text, Bild usw.).
Innenabstand (Padding): Der Abstand zwischen dem Inhalt und dem Rahmen.
Rahmen (Border): Die Linie um das Element herum.
Außenabstand (Margin): Der Abstand zwischen dem Element und anderen Elementen.

Bedeutung des Kastenmodells: Das Kastenmodell ist wichtig, um die Größe und Position von Elementen zu verstehen. Die Eigenschaften width und height bestimmen standardmäßig nur die Größe des Inhalts. Die Eigenschaften padding und border werden ebenfalls zur Gesamtgröße des Elements hinzugefügt. Dieses Verhalten kann mit der Eigenschaft box-sizing geändert werden.

Beispiel:


.kutu {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 30px;
}

In diesem Beispiel ist der Inhalt der Box 200px breit und 100px hoch. Der Innenabstand beträgt 20px, der Rahmen 5px und der Außenabstand 30px. Die Gesamtbreite der Box beträgt 200px + 2 * 20px + 2 * 5px + 2 * 30px = 310px. Die Gesamthöhe der Box beträgt 100px + 2 * 20px + 2 * 5px + 2 * 30px = 210px.

Die folgende Tabelle zeigt die Eigenschaften und Standardwerte der verschiedenen Komponenten des Kastenmodells:

Eigenschaft	Beschreibung	Standardwert
width	Die Breite des Elements	auto
height	Die Höhe des Elements	auto
padding	Der Innenabstand des Elements	0
border	Der Rahmen des Elements	none
margin	Der Außenabstand des Elements	0

CSS-Layouttechniken

CSS bietet verschiedene Layouttechniken, um das Layout von Webseiten zu steuern. Die am häufigsten verwendeten Techniken sind:

Normaler Fluss (Normal Flow): Elemente werden in der Reihenfolge, in der sie im HTML erscheinen, von oben nach unten und von links nach rechts platziert.
Positionierung (Positioning): Wird verwendet, um die Position von Elementen zu ändern. Die position-Eigenschaft kann die Werte static, relative, absolute, fixed und sticky annehmen.
Float: Wird verwendet, um Elemente links oder rechts auszurichten. Besonders nützlich, um Bilder um Texte herum zu platzieren.
Flexbox: Das Flexible Box-Modell wird verwendet, um komplexe Layouts einfach zu erstellen.
Grid: Bietet ein zweidimensionales Layoutsystem. Ideal, um das Hauptlayout von Webseiten zu erstellen.

Positionierung:

static: Ist der Standardwert. Elemente werden im normalen Fluss platziert.
relative: Das Element wird wie im normalen Fluss platziert, kann aber später mit den Eigenschaften top, right, bottom und left positioniert werden.
absolute: Das Element wird aus dem normalen Fluss entfernt und relativ zum nächsten positionierten Elternelement positioniert. Wenn kein positioniertes Elternelement vorhanden ist, wird es relativ zum Dokument positioniert.
fixed: Das Element wird aus dem normalen Fluss entfernt und relativ zum Browserfenster positioniert. Es bleibt auch beim Scrollen der Seite fixiert.
sticky: Das Element wird wie im normalen Fluss platziert, wird aber fixiert, wenn ein bestimmter Scroll-Schwellenwert erreicht wird.

Flexbox:

Flexbox ist ein Layoutmodell, das verwendet wird, um Elemente flexibel zu platzieren. Es gibt zwei grundlegende Konzepte: den Hauptcontainer und die Elemente (Items).

Beispiel:


<div class="container">
  <div class="item">Element 1</div>
  <div class="item">Element 2</div>
  <div class="item">Element 3</div>
</div>

<style>
  .container {
    display: flex;
    flex-direction: row; /* Elemente horizontal anordnen */
    justify-content: space-around; /* Elemente mit gleichem Abstand platzieren */
    align-items: center; /* Elemente vertikal zentrieren */
  }
  .item {
    width: 100px;
    height: 50px;
    background-color: lightblue;
    border: 1px solid black;
    text-align: center;
    line-height: 50px;
  }
</style>

Grid:

Grid ist ein zweidimensionales Layoutsystem. Es wird verwendet, um Elemente zu platzieren, indem Zeilen und Spalten erstellt werden.

Beispiel:


<div class="container">
  <div class="item">Element 1</div>
  <div class="item">Element 2</div>
  <div class="item">Element 3</div>
  <div class="item">Element 4</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Zwei gleichmäßige Spalten erstellen */
    grid-gap: 10px; /* Abstand zwischen den Elementen */
  }
  .item {
    background-color: lightgreen;
    border: 1px solid black;
    text-align: center;
    padding: 20px;
  }
</style>

Media Queries in CSS

Media Queries werden verwendet, um unterschiedliche Stilregeln für verschiedene Geräte und Bildschirmgrößen zu definieren. Dies stellt sicher, dass Webseiten responsiv sind. Media Queries werden mit der @media-Regel definiert.

Beispiel:


/* Wenn die Bildschirmbreite kleiner als 768 Pixel ist */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .menu {
    display: none; /* Menü ausblenden */
  }
}

/* Wenn die Bildschirmbreite größer als 768 Pixel ist */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
  .menu {
    display: block; /* Menü anzeigen */
  }
}

Häufige Anwendungsbereiche für Media Queries:

Erstellen unterschiedlicher Layouts für unterschiedliche Bildschirmgrößen.
Verwenden unterschiedlicher Schriftgrößen und Farben für unterschiedliche Geräte (Desktop, Tablet, Mobil).
Definieren spezieller Stilregeln für den Druck.
Anwenden unterschiedlicher Stilregeln je nach Bildschirmausrichtung (Portrait oder Landscape).

Die folgende Tabelle zeigt gängige Media-Query-Eigenschaften und ihre Verwendung:

Eigenschaft	Beschreibung	Beispiel
max-width	Maximale Bildschirmbreite	@media (max-width: 768px)
min-width	Minimale Bildschirmbreite	@media (min-width: 768px)
orientation	Bildschirmausrichtung (Portrait oder Landscape)	@media (orientation: portrait)
print	Stilregeln für den Druck	@media print

CSS-Präprozessoren

CSS-Präprozessoren sind Tools, die verwendet werden, um CSS leistungsfähiger und flexibler zu machen. Die beliebtesten CSS-Präprozessoren sind:

Sass (Syntactically Awesome Style Sheets): Bietet Funktionen wie Variablen, verschachtelte Regeln, Mixins und Funktionen.
Less (Leaner Style Sheets): Bietet ähnliche Funktionen wie Sass.
Stylus: Ist ein CSS-Präprozessor mit einer flexiblen Syntax.

Vorteile von CSS-Präprozessoren:

Code-Wiederholungen reduzieren: Reduziert Code-Wiederholungen dank Variablen und Mixins.
Bessere Organisation: Ermöglicht eine bessere Organisation des Codes dank verschachtelter Regeln und modularer Strukturen.
Einfachere Wartung: Ermöglicht die einfache Verwaltung von Stiländerungen dank Variablen.
Funktionen: Ermöglicht die Verwendung von Funktionen für komplexe Berechnungen und Stilmanipulationen.

Sass-Beispiel:


/* Variablen */
$primary-color: #007bff;
$secondary-color: #6c757d;

/* Mixin */
@mixin button-style($color) {
  background-color: $color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Verschachtelte Regeln */
.container {
  width: 80%;
  margin: 0 auto;

  h1 {
    color: $primary-color;
    text-align: center;
  }
}

/* Mixin-Verwendung */
.btn-primary {
  @include button-style($primary-color);
}

.btn-secondary {
  @include button-style($secondary-color);
}

Dieser Sass-Code wird nach der Kompilierung in den folgenden CSS-Code umgewandelt:


.container {
  width: 80%;
  margin: 0 auto;
}

.container h1 {
  color: #007bff;
  text-align: center;
}

.btn-primary {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

CSS-Fallstudie: Entwurf einer responsiven Website

Nehmen wir an, wir möchten einen responsiven Entwurf für eine E-Commerce-Website erstellen. Dieser Entwurf sollte auf Desktops, Tablets und Mobilgeräten gut aussehen und die Benutzererfahrung maximieren.

Schritt 1: Erstellen der HTML-Struktur

Zuerst erstellen wir die grundlegende HTML-Struktur der Website:


<!DOCTYPE html>
<html>
<head>
  <title>E-Commerce Webseite</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>E-Commerce Seite</h1>
    <nav>
      <ul>
        <li><a href="#">Homepage</a></li>
        <li><a href="#">Produkte</a></li>
        <li><a href="#">Über uns</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="products">
      <h2>Produkte</h2>
      <div class="product-list">
        <div class="product">
          <img src="urun1.jpg" alt="Produkt 1">
          <h3>Produkt 1 Name</h3>
          <p>Produkt 1 Beschreibung</p>
          <span class="price">100 TL</span>
          <button>In den Warenkorb</button>
        </div>
        <div class="product">
          <img src="urun2.jpg" alt="Produkt 2">
          <h3>Produkt 2 Name</h3>
          <p>Produkt 2 Beschreibung</p>
          <span class="price">150 TL</span>
          <button>In den Warenkorb</button>
        </div>
      </div>
    </section>
  </main>
  <footer>
    <p>Alle Rechte vorbehalten © 2023</p>
  </footer>
</body>
</html>


/* Für mobile Geräte (Bildschirmbreite kleiner als 768px) */
@media (max-width: 768px) {
  nav ul {
    display: none; /* Menü ausblenden */
  }

  .product-list {
    flex-direction: column; /* Produkte in einer einzelnen Spalte anzeigen */
  }

  .product {
    width: 100%; /* Produktbreite auf 100% setzen */
  }
}

Diese Fallstudie zeigt, wie CSS das Aussehen und die Formatierung von Websites steuert und wie Media Queries verwendet werden, um responsives Design zu erstellen.