Text-Formatierung mit CSS
Text ist ein wesentlicher Bestandteil fast jeder Webseite. Mit CSS haben Sie umfangreiche Möglichkeiten, das Erscheinungsbild von Text zu steuern und somit die Lesbarkeit und das visuelle Erlebnis für Ihre Besucher zu verbessern.
Schriftarten (font-family)
Abschnitt betitelt „Schriftarten (font-family)“Die font-family-Eigenschaft legt fest, welche Schriftart für Text verwendet werden soll. Sie können eine einzelne Schriftart oder eine Liste von Schriftarten angeben (Fallback-System):
p { font-family: Arial, Helvetica, sans-serif;}In diesem Beispiel versucht der Browser zuerst Arial zu verwenden. Wenn diese nicht verfügbar ist, wird Helvetica ausprobiert, und falls beide nicht vorhanden sind, wird eine generische sans-serif Schriftart verwendet.
Generische Schriftfamilien
Abschnitt betitelt „Generische Schriftfamilien“CSS definiert fünf generische Schriftfamilien:
serif– Schriften mit Serifen (z.B. Times New Roman)sans-serif– Schriften ohne Serifen (z.B. Arial)monospace– Schriften mit fester Zeichenbreite (z.B. Courier)cursive– Schriften, die handschriftlich wirkenfantasy– Dekorative Schriften
Webfonts
Abschnitt betitelt „Webfonts“Sie können auch externe Schriftarten einbinden, z.B. über Google Fonts:
<head> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" /></head>body { font-family: "Roboto", sans-serif;}Schriftgrösse und -gewicht
Abschnitt betitelt „Schriftgrösse und -gewicht“Schriftgrösse (font-size)
Abschnitt betitelt „Schriftgrösse (font-size)“Die Schriftgrösse kann in verschiedenen Einheiten angegeben werden:
h1 { font-size: 2rem; /* Relativ zur Schriftgrösse des Root-Elements */}
p { font-size: 16px; /* Absolute Grösse in Pixeln */}
.small-text { font-size: 0.8em; /* Relativ zur Schriftgrösse des Elternelements */}
.large-text { font-size: 150%; /* Prozentualer Wert relativ zum Elternelement */}Einheiten für Schriftgrössen
Abschnitt betitelt „Einheiten für Schriftgrössen“Absolute Einheiten:
px(Pixel) - am häufigsten verwendetpt(Punkt, 1pt = 1/72 Zoll)
Relative Einheiten (besser für Responsive Design):
em(relativ zur Schriftgrösse des Elternelements)rem(relativ zur Schriftgrösse des Root-Elements)%(Prozent, relativ zum Elternelement)vw(1% der Viewport-Breite)
Schriftgewicht (font-weight)
Abschnitt betitelt „Schriftgewicht (font-weight)“Das Schriftgewicht bestimmt, wie fett oder dünn der Text erscheint:
h1 { font-weight: bold; /* Schlüsselwort: normal oder bold */}
h2 { font-weight: 700; /* Numerische Werte: 100 bis 900 */}Die numerischen Werte reichen von 100 (sehr dünn) bis 900 (sehr fett), wobei:
- 400 entspricht
normal - 700 entspricht
bold
Schriftstil (font-style)
Abschnitt betitelt „Schriftstil (font-style)“Der Schriftstil kann normal, kursiv oder schräg sein:
.emphasis { font-style: italic; /* Kursiv */}
.normal-text { font-style: normal; /* Normal */}Textausrichtung und Zeilenabstand
Abschnitt betitelt „Textausrichtung und Zeilenabstand“Textausrichtung (text-align)
Abschnitt betitelt „Textausrichtung (text-align)“Die Textausrichtung bestimmt, wie Text innerhalb eines Elements positioniert wird:
h1 { text-align: center; /* Zentriert */}
p.right { text-align: right; /* Rechtsbündig */}
p.left { text-align: left; /* Linksbündig */}
p.justify { text-align: justify; /* Blocksatz */}Zeilenabstand (line-height)
Abschnitt betitelt „Zeilenabstand (line-height)“Der Zeilenabstand bestimmt den Abstand zwischen den Textzeilen:
p { line-height: 1.5; /* Als Faktor (1.5-fache der Schriftgrösse) */}
.tight-text { line-height: 1.2; /* Enger Zeilenabstand */}
.wide-text { line-height: 2; /* Weiter Zeilenabstand */}
.specific-height { line-height: 24px; /* Absolute Werte sind auch möglich */}Ein guter Zeilenabstand verbessert die Lesbarkeit erheblich. Für Fliesstext wird oft ein Wert zwischen 1.4 und 1.6 empfohlen.
Texteinrückung (text-indent)
Abschnitt betitelt „Texteinrückung (text-indent)“Die erste Zeile eines Absatzes kann eingerückt werden:
p { text-indent: 2em; /* Rückt die erste Zeile um 2em ein */}Textfarbe und Textdekoration
Abschnitt betitelt „Textfarbe und Textdekoration“Textfarbe (color)
Abschnitt betitelt „Textfarbe (color)“Die Farbe des Textes wird mit der color-Eigenschaft festgelegt:
h1 { color: blue; /* Benannte Farbe */}
p { color: #ff5733; /* Hexadezimal-Wert */}
.highlight { color: rgb(255, 0, 0); /* RGB-Wert */}
.transparent { color: rgba(0, 0, 0, 0.5); /* RGBA mit Transparenz */}Textdekoration (text-decoration)
Abschnitt betitelt „Textdekoration (text-decoration)“Die Textdekoration ermöglicht Unterstreichungen, Überstreichungen und mehr:
a { text-decoration: none; /* Entfernt die standardmässige Unterstreichung von Links */}
h2 { text-decoration: underline; /* Unterstreichung */}
.strike { text-decoration: line-through; /* Durchstreichung */}
.fancy { text-decoration: underline overline #ff3028; /* Kombination mit Farbe */}Texttransformation (text-transform)
Abschnitt betitelt „Texttransformation (text-transform)“Die Texttransformation ändert die Gross-/Kleinschreibung:
h1 { text-transform: uppercase; /* ALLES GROSSBUCHSTABEN */}
h2 { text-transform: lowercase; /* alles kleinbuchstaben */}
.title { text-transform: capitalize; /* Jedes Wort Beginnt Mit Grossbuchstaben */}Textschatten (text-shadow)
Abschnitt betitelt „Textschatten (text-shadow)“Mit der text-shadow-Eigenschaft können Sie Textschatten hinzufügen:
h1 { text-shadow: 2px 2px 4px #000000; /* horizontal-offset, vertical-offset, blur, color */}
.glow { text-shadow: 0 0 10px #ffffff; /* Glüheffekt */}
.multiple-shadows { text-shadow: 2px 2px 4px #000000, /* Erster Schatten */ -2px -2px 4px #ff0000; /* Zweiter Schatten */}Abstände zwischen Buchstaben und Wörtern
Abschnitt betitelt „Abstände zwischen Buchstaben und Wörtern“Buchstabenabstand (letter-spacing)
Abschnitt betitelt „Buchstabenabstand (letter-spacing)“Der Abstand zwischen einzelnen Buchstaben:
h1 { letter-spacing: 2px; /* Mehr Platz zwischen Buchstaben */}
.tight { letter-spacing: -1px; /* Weniger Platz zwischen Buchstaben */}Wortabstand (word-spacing)
Abschnitt betitelt „Wortabstand (word-spacing)“Der Abstand zwischen Wörtern:
p { word-spacing: 4px; /* Mehr Platz zwischen Wörtern */}Zusammenfassung der Text-Formatierung
Abschnitt betitelt „Zusammenfassung der Text-Formatierung“Diese praktische Kurzreferenz fasst die wichtigsten Eigenschaften zur Textformatierung zusammen:
p { font-family: "Roboto", Arial, sans-serif; /* Schriftart */ font-size: 16px; /* Schriftgrösse */ font-weight: 400; /* Schriftgewicht */ font-style: normal; /* Schriftstil */ text-align: left; /* Textausrichtung */ line-height: 1.5; /* Zeilenabstand */ color: #333333; /* Textfarbe */ text-decoration: none; /* Textdekoration */ text-transform: none; /* Texttransformation */ letter-spacing: normal; /* Buchstabenabstand */ word-spacing: normal; /* Wortabstand */}Übung: Text-Formatierung
Abschnitt betitelt „Übung: Text-Formatierung“Im nächsten Kapitel werden wir uns mit dem CSS Box-Modell beschäftigen und lernen, wie Sie Abstände, Rahmen und das Layout Ihrer Elemente kontrollieren können.