Webentwicklung: CSS

CSS steht für Cascading Style Sheets und ist die Technologie, die Webseiten visuellen Stil verleiht.

Während HTML die Struktur und den Inhalt einer Webseite bereitstellt, kümmert sich CSS um das Aussehen dieser Elemente. Mit CSS kannst du Farben, Schriftarten, Abstände, Layouts, Animationen und mehr definieren.

CSS folgt einer einfachen regelbasierten Syntax, die es dir ermöglicht, HTML-Elemente auszuwählen und visuelle Eigenschaften auf sie anzuwenden.

CSS-Selektoren sind Muster, die verwendet werden, um HTML-Elemente auszuwählen und zu gestalten. Der Selektor teilt dem Browser mit, welche Elemente von den Gestaltungsregeln betroffen sein sollen.

selektor {
    eigenschaft: wert;
    andere-eigenschaft: anderer-wert;
}

Hier sind einige der wichtigsten CSS-Selektoren:

• element - Wählt alle Elemente des angegebenen Typs aus (z.B. wählt p alle Absätze aus)
• #id - Wählt ein Element mit einer bestimmten ID aus (z.B. #header)
• .class - Wählt alle Elemente mit einer bestimmten Klasse aus (z.B. .content-box)
• element.class - Wählt nur Elemente des angegebenen Typs mit der Klasse aus (z.B. p.intro)
• parent > child - Wählt direkte Kinder eines Elternelements aus
• element1, element2 - Wählt mehrere Elemente aus
• element[attribute] - Wählt Elemente mit einem bestimmten Attribut aus
• :hover - Wählt Elemente aus, wenn du mit der Maus darüberfährst

Selektoren können kombiniert werden, um spezifischere Auswahlmuster zu erstellen. Je spezifischer ein Selektor ist, desto höher ist seine Priorität in der "Kaskade".

CSS-Eigenschaften definieren, wie ausgewählte HTML-Elemente angezeigt werden sollen. Jede Eigenschaft hat eine Reihe gültiger Werte und beeinflusst verschiedene Aspekte des Erscheinungsbilds eines Elements.

Hier sind einige wesentliche CSS-Eigenschaften nach Funktion kategorisiert:

Textstyling

• color - Legt die Textfarbe fest
• font-family - Bestimmt die Schriftart
• font-size - Legt die Textgröße fest
• font-weight - Steuert die Textstärke
• text-align - Richtet Text aus (links, rechts, zentriert, Blocksatz)
• text-decoration - Fügt Unterstreichungen, Überstreichungen usw. hinzu

Box-Modell-Eigenschaften

• width & height - Legen die Elementabmessungen fest
• padding - Innenabstand des Elements, zwischen Inhalt und Rand
• border - Der Umriss um ein Element
• margin - Außenabstand des Elements, zwischen dem Rand und anderen Elementen

Layout-Eigenschaften

• display - Steuert, wie ein Element angezeigt wird (block, inline, flex, grid usw.)
• position - Legt die Positionierungsmethode fest (static, relative, absolute, fixed)
• float - Erlaubt Elementen, nach links oder rechts zu fließen
• z-index - Steuert die Stapelreihenfolge positionierter Elemente

Visuelle Eigenschaften

• background-color - Legt die Hintergrundfarbe fest
• background-image - Fügt ein Hintergrundbild hinzu
• opacity - Steuert die Transparenz des Elements
• box-shadow - Fügt Schatteneffekte hinzu
• border-radius - Erzeugt abgerundete Ecken

.modern-button {
    background-color: #ffffff; /* Hintergrundfarbe */
    color: #333333; /* Textfarbe */
    padding: 12px 24px; /* Innenabstand */
    border: 1px solid #e0e0e0; /* Rand */
    border-radius: 4px; /* Abgerundete Ecken */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Schatten */
    font-family: 'Inter', sans-serif; /* Schriftart */
    font-weight: 500; /* Schriftstärke */
    transition: all 0.2s ease; /* Übergang für Hover-Effekt */
}

.modern-button:hover {
    background-color: #f8f8f8; /* Hintergrundfarbe beim Hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten beim Hover */
}

Das CSS Box-Modell ist ein grundlegendes Konzept, das beschreibt, wie Elemente im Browser dargestellt werden. Jedes HTML-Element wird als rechteckige Box behandelt, die aus Inhalts-, Innenabstands-, Rand- und Außenabstandsbereichen besteht.

• Inhalt (Content): Der tatsächliche Inhalt des Elements (Text, Bilder usw.)
• Innenabstand (Padding): Raum zwischen dem Inhalt und dem Rand
• Rand (Border): Linie, die den Innenabstand und den Inhalt umgibt
• Außenabstand (Margin): Raum außerhalb des Elements, der es von anderen Elementen trennt

Standardmäßig definieren die Eigenschaften width und height in CSS nur die Größe des Inhaltsbereichs. Das bedeutet, dass Innenabstand (Padding) und Rand (Border) zur Gesamtbreite und -höhe des Elements hinzugefügt werden.

.default-box {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    margin: 15px;
    /* Gesamtbreite: 300px (Inhalt) + 40px (Padding) + 2px (Border) = 342px */
}

.alternative-box {
    box-sizing: border-box; /* Ändert, wie Breite und Höhe berechnet werden */
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    margin: 15px;
    /* Gesamtbreite: 300px (beinhaltet Inhalt, Padding und Border) */
}

Die Eigenschaft box-sizing: border-box; ändert dieses Verhalten, indem sie Innenabstand (Padding) und Rand (Border) in die angegebene Breite und Höhe des Elements einschließt. Dies erleichtert das Erstellen von Layouts, ohne ständig die Gesamtabmessungen berechnen zu müssen.

Responsives Design ist ein Ansatz zur Erstellung von Websites, die auf jedem Gerät, unabhängig von der Bildschirmgröße, gut aussehen und funktionieren. Dies ist in der heutigen Welt mit vielen verschiedenen Geräten unerlässlich.

Schlüsselkomponenten des responsiven Designs:

Media Queries

Media Queries ermöglichen es dir, unterschiedliche CSS-Regeln basierend auf Bildschirmeigenschaften anzuwenden:

/* Basisstile für alle Bildschirmgrößen */
.container {
    width: 100%;
    padding: 15px;
}

/* Stile für Bildschirme breiter als 768px */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto; /* Zentriert den Container */
    }
}

/* Stile für Bildschirme breiter als 1200px */
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

Flexible Grids (Raster)

Modernes CSS bietet leistungsstarke Layoutsysteme wie Flexbox und Grid, die responsives Design erleichtern:

/* Flexbox Beispiel */
.flex-container {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch */
}

.flex-item {
    flex: 1 1 300px; /* Wachsen, Schrumpfen, Basisbreite */
    margin: 10px;
}

/* Grid Beispiel */
.grid-container {
    display: grid;
    /* Erstellt Spalten, die sich automatisch anpassen, min. 250px breit */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px; /* Abstand zwischen Grid-Elementen */
}

Responsive Einheiten

Die Verwendung relativer Einheiten anstelle von festen Pixeln hilft beim responsiven Design:

• % - Relativ zum Elternelement
• em - Relativ zur Schriftgröße des Elements
• rem - Relativ zur Schriftgröße des Wurzelelements (html)
• vw - Viewport-Breite (1vw = 1% der Viewport-Breite)
• vh - Viewport-Höhe (1vh = 1% der Viewport-Höhe)

Responsives Design bedeutet nicht nur das Anpassen von Layouts; es beinhaltet auch Überlegungen zu Touch-Oberflächen, variablen Verbindungsgeschwindigkeiten und unterschiedlichen Gerätefähigkeiten.