CSS ist eine deklarative Sprache, die aus Regeln zur Gestaltung von HTML-Elementen besteht. Die Basisstruktur einer CSS-Regel umfasst Selektor, Eigenschaft und Wert. Dieses Kapitel behandelt die Syntax und Struktur von CSS sowie die Grundlagen des Schreibens und Organisierens von CSS-Code.
Eine CSS-Regel besteht aus einem Selektor und einem Deklarationsblock:
selektor {
eigenschaft: wert;
}p {
color: blue;
font-size: 16px;
}Diese Regel setzt die Textfarbe von <p>-Elementen
auf Blau und die Schriftgröße auf 16 Pixel.
CSS-Eigenschaften definieren das Styling eines Elements. Für jede Eigenschaft ist ein Wert erforderlich, der den Stil beeinflusst. Häufig genutzte Eigenschaften sind:
CSS unterstützt verschiedene Maßeinheiten:
px,
cm, mm): Feste Größen unabhängig von der
Bildschirmauflösung.em,
rem, %, vh, vw):
Größen relativ zur Schriftgröße oder zum Ansichtsfenster.Beispiel für verschiedene Einheiten:
h1 {
font-size: 2em; /* 2-mal die Schriftgröße des Elternelements */
}
div {
width: 50%; /* 50% der Breite des Elternelements */
}Kommentare helfen, den Code zu strukturieren und Notizen für spätere
Bearbeitungen zu hinterlassen. Kommentare in CSS werden durch
/* Kommentar */ definiert und können in jeder Zeile oder am
Ende einer Zeile stehen.
/* Dies ist ein Kommentar */
p {
color: green; /* Textfarbe grün */
}CSS kann auf verschiedene Weisen in eine HTML-Datei eingebunden werden:
Extern: Die CSS-Datei wird über
<link> im HTML-Header eingebunden. Dies ist die
empfohlene Methode, um Stile getrennt vom HTML zu organisieren.
<link rel="stylesheet" href="styles.css">Intern: CSS kann im
<style>-Tag innerhalb des HTML-Dokuments definiert
werden. Diese Methode wird meist für kleinere und einmalige Anpassungen
verwendet.
<style>
h1 {
color: red;
}
</style>Inline: Stile werden direkt im HTML-Tag festgelegt. Diese Methode ist am wenigsten flexibel und wird selten empfohlen.
<h1 style="color: blue;">Willkommen</h1>CSS steht für Cascading Style Sheets. Die Kaskade legt fest, welche CSS-Regeln angewendet werden, wenn mehrere Regeln auf ein Element zutreffen. Der Kaskadenmechanismus basiert auf:
CSS unterstützt auch Vererbung, was bedeutet, dass bestimmte Stileigenschaften automatisch auf untergeordnete Elemente angewendet werden.
/* Beispiel für Vererbung */
body {
font-family: Arial, sans-serif;
}
p {
font-size: 14px;
}Hier erben alle <p>-Elemente die Schriftfamilie
Arial vom <body>-Tag, während die
Schriftgröße explizit festgelegt wird.
Das CSS-Box-Modell ist ein zentrales Konzept in der Webgestaltung. Es beschreibt, wie HTML-Elemente auf einer Seite dargestellt und positioniert werden. Jedes HTML-Element wird als rechteckige Box dargestellt, die aus mehreren Bereichen besteht: dem Inhalt, dem Innenabstand (Padding), dem Rahmen (Border) und dem Außenabstand (Margin).
Ein Element im Box-Modell setzt sich aus folgenden Bereichen zusammen:
Eine Box wird folgendermaßen aufgebaut:
+---------------------------+
| Margin |
| +-----------------------+ |
| | Border | |
| | +-------------------+ | |
| | | Padding | | |
| | | +--------------+ | | |
| | | | Content | | | |
| | | +--------------+ | | |
| | +-------------------+ | |
| +-----------------------+ |
+---------------------------+.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}<p style="margin: 0;">Dies ist eine Box mit Breite, Höhe, Padding, Border und Margin.</p><div style="width: 200px; height: 100px; padding: 20px; border: 5px solid black; margin: 10px; background-color: #e0e0e0; position: relative;">
<p style="margin: 0;">Inhalt der Box</p>
<!-- Visualisierung des Innenabstands (Padding) -->
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 20px; pointer-events: none; background-color: rgba(255, 0, 0, 0.1);">
<span style="color: red; font-size: 12px; position: absolute; top: 5px; left: 5px;">Padding (20px)</span>
</div>
<!-- Visualisierung des Rahmens (Border) -->
<div style="position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border: 5px solid rgba(0, 0, 255, 0.3); pointer-events: none;">
<span style="color: blue; font-size: 12px; position: absolute; bottom: 0px; left: 5px;">Border (5px)</span>
</div>
<!-- Visualisierung des Außenabstands (Margin) -->
<div style="position: absolute; top: -30px; left: -15px; right: -15px; bottom: -15px; border: 1px dashed rgba(0, 255, 0, 0.5); pointer-events: none;">
<span style="color: green; font-size: 12px; position: absolute; top: 5px; left: 5px;">Margin (10px)</span>
</div>
</div>In diesem Beispiel:
Die Gesamtbreite der Box ergibt sich hier aus:
Gesamtbreite = Inhalt + Padding links + Padding rechts + Border links + Border rechts + Margin links + Margin rechts
= 200px + 20px + 20px + 5px + 5px + 10px + 10px = 270pxDie Gesamthöhe wird analog berechnet.
Standardmäßig vergrößern Padding und Border die Gesamtgröße einer
Box. Mit der CSS-Eigenschaft box-sizing lässt sich dieses
Verhalten ändern, sodass Padding und Border innerhalb der definierten
width und height bleiben:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
box-sizing: border-box;
}Durch box-sizing: border-box; wird die Gesamtgröße der
Box auf 200px Breite und 100px Höhe begrenzt, inklusive Padding und
Border.
Padding: Der Innenabstand kann für jede Seite einzeln festgelegt werden:
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 5px;Kurzform für alle Seiten:
padding: 10px 15px 20px 5px; /* Reihenfolge: oben, rechts, unten, links */Margin: Der Außenabstand verhält sich ähnlich und kann ebenfalls für jede Seite einzeln definiert werden:
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 5px;Kurzform:
margin: 10px 15px 20px 5px;Ein wichtiges Merkmal des Box-Modells ist die sogenannte Margin Collapse. Wenn zwei vertikale Margins aufeinandertreffen (z. B. von zwei benachbarten Elementen), werden sie zusammengefasst und nehmen den größeren der beiden Werte an, anstatt sie zu addieren. Beispiel:
<div class="box1"></div>
<div class="box2"></div>.box1, .box2 {
height: 50px;
margin-bottom: 20px;
margin-top: 30px;
}In diesem Fall wird der vertikale Abstand zwischen .box1
und .box2 nicht 50px betragen (20px + 30px), sondern nur
30px, da die beiden Margins kollabieren und nur der größere Wert
angewendet wird.
CSS bietet eine Vielzahl von Einheiten, um die Größe und Position von Elementen auf einer Webseite zu definieren. Die Wahl der richtigen Einheit hängt vom Kontext ab, in dem sie verwendet wird. Dieses Kapitel behandelt die wichtigsten Einheiten und ihre Verwendung im CSS-Layout.
Einheiten in CSS lassen sich grundsätzlich in absolute und relative Einheiten unterteilen:
px, cm, mm.em, rem,
%, vh, vw.px)px ist die am häufigsten verwendete Einheit für feste
Größenangaben, die unabhängig von der Schriftgröße oder des
übergeordneten Elements sein sollen.
p {
font-size: 16px; /* Feste Schriftgröße von 16 Pixel */
}<p style="font-size: 16px;">Dies ist ein Beispieltext mit fester Schriftgröße von 16px.</p>Relative Einheiten ermöglichen flexible Layouts, die sich an die Umgebung und Bildschirmgröße anpassen.
em)Die Einheit em bezieht sich auf die Schriftgröße des
direkten übergeordneten Elements. Sie ist nützlich für skalierbare
Layouts, bei denen sich der Abstand oder die Schriftgröße entsprechend
einer Basisgröße anpassen soll.
p {
font-size: 16px;
}
span {
font-size: 1.5em; /* 1.5-mal die Schriftgröße des übergeordneten Elements */
}In diesem Beispiel beträgt die Schriftgröße des
<span>-Elements 24px (1.5 × 16px), wenn das
<p>-Element eine Schriftgröße von 16px hat.
<p style="font-size: 16px;">
Text mit <span style="font-size: 1.5em;">größerer Schrift</span> basierend auf der Schriftgröße des übergeordneten Elements.
</p>rem)rem steht für „Root em“ und bezieht sich auf die
Schriftgröße des Root-Elements (<html>). Es ist eine
relative Einheit, jedoch im Vergleich zu em konstanter, da
sie unabhängig von der Verschachtelung ist.
html {
font-size: 16px;
}
p {
font-size: 1.25rem; /* 1.25 × 16px = 20px */
}Mit rem bleibt die Skalierung stabil, da sie sich immer
auf die Schriftgröße des Root-Elements bezieht.
<p style="font-size: 1.25rem;">Dieser Text nutzt eine Schriftgröße von 1.25rem, was 20px entspricht, wenn das Root-Element auf 16px gesetzt ist.</p>%)Die Prozentangabe ist eine flexible Einheit, die sich auf das übergeordnete Element bezieht. Sie eignet sich besonders für Breiten und Höhen, um Layouts an verschiedene Bildschirmgrößen anzupassen.
div {
width: 50%; /* 50% der Breite des übergeordneten Elements */
height: 100%; /* 100% der Höhe des übergeordneten Elements */
}<p style="margin: 0;">Dieses div nimmt 50% der Breite des übergeordneten Elements ein.</p>vh, vw)Viewport-Einheiten beziehen sich auf die Größe des Ansichtsfensters (Viewport). Sie sind ideal für responsives Design, da sie sich an die Bildschirmgröße anpassen:
Beispiele:
div {
width: 50vw; /* 50% der Breite des Viewports */
height: 30vh; /* 30% der Höhe des Viewports */
}<p style="text-align: center; padding-top: 15vh; margin: 0;">Dieses div nimmt 50% der Breite und 30% der Höhe des Viewports ein.</p>Viewport-Einheiten eignen sich gut für Fullscreen-Layouts, bei denen die Größe des Inhalts dynamisch an die Bildschirmgröße angepasst wird.
Farben spielen in CSS eine zentrale Rolle, um Designs ansprechend und strukturiert zu gestalten. CSS unterstützt mehrere Farbsysteme, die unterschiedliche Möglichkeiten zur Darstellung und Anpassung bieten: das Hexadezimal-System (Hex), RGB und HSL. Jedes dieser Systeme hat seine spezifischen Anwendungsbereiche und Vorteile.
Hexadezimale Farbcodes verwenden einen sechsstelligen Code, der mit
einem # beginnt und aus drei Zweiergruppen besteht, die
Rot, Grün und Blau darstellen. Jede Komponente (Rot, Grün, Blau) wird
durch zwei Hexadezimalstellen beschrieben und kann einen Wert von
00 bis FF annehmen.
/* Beispiel für Hex-Farbcode */
p {
color: #ff5733; /* Helles Orange */
}Jede Komponente repräsentiert: - #ff – maximaler Rotanteil - #57 – mittlerer Grünanteil - #33 – geringer Blauanteil
Hexadezimale Farben können auch in der Kurzform #rgb
verwendet werden, wenn jede Komponente denselben Wert für beide Stellen
hat:
p {
color: #f00; /* entspricht #ff0000, also reines Rot */
}Das RGB-Modell steht für Rot, Grün und Blau und nutzt Werte zwischen
0 und 255 für jede Komponente. Das RGB-Format
ist oft intuitiver und ermöglicht es, Farben direkt durch die Intensität
der einzelnen Komponenten zu definieren.
/* Beispiel für RGB */
p {
color: rgb(255, 87, 51); /* entspricht #ff5733 */
}Eine Variante von RGB ist rgba, bei der das „a“ für den
Alpha-Kanal steht und die Transparenz angibt. Der Wert für Alpha reicht
von 0 (vollständig transparent) bis 1
(vollständig deckend):
p {
color: rgba(255, 87, 51, 0.5); /* 50% Transparenz */
}HSL steht für Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness). Es ist besonders geeignet für harmonische Farbabstimmungen und intuitives Anpassen der Helligkeit und Sättigung. Die HSL-Darstellung erfolgt in folgendem Format:
color: hsl(hue, saturation, lightness);100% bedeutet volle Sättigung, 0% ergibt einen
Grauton.0% steht für Schwarz, 100% für
Weiß, und 50% für die Farbe in voller Helligkeit./* Beispiel für HSL */
p {
color: hsl(12, 100%, 60%); /* Helles Orange, entspricht #ff5733 */
}Ähnlich wie bei RGB gibt es auch für HSL eine Variante mit
Alpha-Kanal: hsla. Diese ermöglicht die Angabe von
Transparenz:
p {
color: hsla(12, 100%, 60%, 0.5); /* 50% Transparenz */
}CSS bietet verschiedene Möglichkeiten, Transparenzeffekte anzuwenden: - rgba/hsla: Ermöglicht es, die Transparenz nur auf die Farbe anzuwenden, ohne das gesamte Element zu beeinflussen. - opacity: Setzt die Transparenz eines gesamten Elements und beeinflusst dabei auch den Inhalt (wie Text und Bilder).
/* Beispiel für Opazität */
div {
background-color: #ff5733;
opacity: 0.7; /* gesamte Box inklusive Inhalt wird transparenter */
}