Grundlagen von CSS
Was ist CSS und wozu dient es?
Abschnitt betitelt „Was ist CSS und wozu dient es?“CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die verwendet wird, um das Erscheinungsbild von HTML-Dokumenten zu gestalten. Während HTML für die Struktur und den Inhalt einer Webseite zuständig ist, bestimmt CSS das gesamte visuelle Design.
Mit CSS können Sie:
- Farben, Schriftarten und Schriftgrössen festlegen
- Abstände und Ränder definieren
- Layouts und Positionierungen erstellen
- Animationen und visuelle Effekte hinzufügen
- Das Erscheinungsbild für verschiedene Bildschirmgrössen anpassen
CSS ermöglicht die Trennung von Inhalt und Design, was zahlreiche Vorteile bietet:
- Bessere Wartbarkeit durch separierte Dateien
- Konsistentes Erscheinungsbild auf der gesamten Website
- Schnellere Ladezeiten durch Wiederverwendung von Styles
- Einfache Möglichkeit, das gesamte Design zu aktualisieren, ohne die HTML-Struktur zu ändern
Wie bindet man CSS ein?
Abschnitt betitelt „Wie bindet man CSS ein?“Es gibt drei Hauptmethoden, um CSS in Ihre HTML-Dokumente einzubinden:
1. Externe Stylesheet-Datei (empfohlen)
Abschnitt betitelt „1. Externe Stylesheet-Datei (empfohlen)“Sie erstellen eine separate CSS-Datei (z.B. styles.css) und binden diese im <head>-Bereich Ihres HTML-Dokuments ein:
<head> <link rel="stylesheet" href="styles.css"></head>Dies ist die bevorzugte Methode für die meisten Websites, da:
- Eine CSS-Datei für mehrere HTML-Seiten verwendet werden kann
- Browser die CSS-Datei cachen können, was die Ladezeiten verbessert
- Die Trennung von HTML und CSS die Wartung erleichtert
2. Internes Stylesheet
Abschnitt betitelt „2. Internes Stylesheet“Sie platzieren CSS-Code direkt im <head>-Bereich Ihres HTML-Dokuments:
<head> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; } h1 { color: navy; } </style></head>Diese Methode ist nützlich für:
- Einzelne Seiten mit einzigartigem Styling
- Schnelles Testen oder Prototyping
- Kleine Projekte mit nur einer HTML-Datei
3. Inline-Styles
Abschnitt betitelt „3. Inline-Styles“Sie fügen CSS direkt zu einzelnen HTML-Elementen hinzu:
<p style="color: red; font-size: 18px;">Dieser Text ist rot und grösser.</p>Diese Methode sollte sparsam verwendet werden, da:
- Sie die Trennung von Inhalt und Design aufhebt
- Styles nicht wiederverwendbar sind
- Der HTML-Code schwerer lesbar wird
- Die Wartung komplizierter ist
Selektoren, Eigenschaften und Werte
Abschnitt betitelt „Selektoren, Eigenschaften und Werte“CSS besteht aus drei Hauptkomponenten:
Selektoren
Abschnitt betitelt „Selektoren“Selektoren bestimmen, welche HTML-Elemente gestylt werden sollen. Hier sind die grundlegenden Selektortypen:
Elementselektoren
Abschnitt betitelt „Elementselektoren“Wählen alle Elemente eines bestimmten Typs aus:
p { /* Styles für alle Absätze */}
h1 { /* Styles für alle h1-Überschriften */}Klassenselektoren
Abschnitt betitelt „Klassenselektoren“Wählen Elemente basierend auf dem Klassenattribut aus:
.highlight { /* Styles für alle Elemente mit class="highlight" */}In HTML:
<p class="highlight">Dieser Absatz ist hervorgehoben.</p>ID-Selektoren
Abschnitt betitelt „ID-Selektoren“Wählen ein Element basierend auf seiner eindeutigen ID aus:
#header { /* Styles für das Element mit id="header" */}In HTML:
<div id="header">Kopfbereich</div>Kombinatoren
Abschnitt betitelt „Kombinatoren“Um komplexere Auswahlmuster zu erstellen:
/* Alle p-Elemente innerhalb eines div */div p { color: blue;}
/* Alle p-Elemente, die direkte Kinder eines div sind */div > p { font-weight: bold;}Eigenschaften
Abschnitt betitelt „Eigenschaften“Eigenschaften definieren, was Sie an den ausgewählten Elementen ändern möchten. Beispiele:
color: Textfarbefont-size: Schriftgrössebackground-color: Hintergrundfarbemargin: Aussenabstandpadding: Innenabstandborder: Rahmenwidth: Breiteheight: Höhe
Werte geben an, wie eine Eigenschaft angewendet werden soll:
h1 { color: blue; /* Farbname */ font-size: 24px; /* Pixelwert */ margin: 10px 20px 15px 5px; /* Mehrere Werte */ text-align: center; /* Schlüsselwort */ border: 1px solid #000000; /* Kombinierte Werte */}Grundlegende CSS-Syntax
Abschnitt betitelt „Grundlegende CSS-Syntax“Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock:
selektor { eigenschaft1: wert1; eigenschaft2: wert2; eigenschaft3: wert3;}Beispiel:
p { color: #333333; font-family: Arial, sans-serif; line-height: 1.6;}Kommentare in CSS
Abschnitt betitelt „Kommentare in CSS“Kommentare sind wichtig für die Dokumentation Ihres Codes und werden vom Browser ignoriert:
/* Dies ist ein CSS-Kommentar */
/* Mehrzeilige Kommentare sind auch möglich*/
body { color: black; /* Ein Kommentar am Ende einer Zeile */}Kommentare helfen Ihnen und anderen Entwicklern, den Code zu verstehen, besonders wenn Sie zu einem späteren Zeitpunkt zum Projekt zurückkehren.
Die Kaskade und Spezifität
Abschnitt betitelt „Die Kaskade und Spezifität“CSS steht für “Cascading Style Sheets” - der Begriff “Cascading” (Kaskade) ist entscheidend für das Verständnis, wie CSS funktioniert:
- Kaskade: Wenn mehrere Regeln auf dasselbe Element angewendet werden, werden sie in einer bestimmten Reihenfolge ausgewertet.
- Spezifität: Wenn widersprüchliche Regeln auf das gleiche Element angewendet werden, gewinnt die spezifischere Regel.
Die Spezifität wird folgendermassen berechnet (von höchster zu niedrigster Priorität):
- Inline-Styles (direkt im HTML mit dem style-Attribut)
- ID-Selektoren
- Klassenselektoren, Attributselektoren, Pseudoklassen
- Elementselektoren
Beispiel für Spezifität:
#main-content p { color: blue; /* Höhere Spezifität */}
p { color: red; /* Niedrigere Spezifität */}In diesem Fall würden Absätze innerhalb des Elements mit id="main-content" blau sein, während alle anderen Absätze rot wären.
Übung: Erste Schritte mit CSS
Abschnitt betitelt „Übung: Erste Schritte mit CSS“Im nächsten Kapitel werden wir uns mit der Textformatierung in CSS beschäftigen und lernen, wie wir Schriftarten, -grössen, -farben und weitere Texteigenschaften anpassen können.