Lektion 5: Text
Texte zu formatieren, ist eine der Hauptaufgaben für jeden Webdesigner. In dieser Lektion werden wir zeigen, welche unglaublichen Möglichkeiten CSS bietet, um einen Text nach mehr aussehen zu lassen. Die folgenden Eigenschaften werden beschrieben:
Texteinrückung: die Eigenschaft ‘text-indent’
Die Eigenschaft text-indent
erlaubt es Ihnen, Ihrem Text einen eleganten Touch zu geben, indem Sie die erste Zeile eines Absatzes einrücken. Im folgenden Beispiel werden alle Absätze, die mit <p>
markiert sind, um 30px eingerückt:
p {
text-indent: 30px;
}
Textausrichtung: die Eigenschaft ‘text-align’
Die CSS-Eigenschaft text-align
ist mit dem Attribut align
vergleichbar, welches in älteren HTML-Versionen verwendet wurde. Text kann entweder left
(links), right
(rechts) oder center
(zentriert) ausgerichtet werden. Außerdem steht der Wert justify
für Blocksatz zur Verfügung, d.h. jede Zeile wird so gestreckt, dass alle gleich lang sind. Dies kennen Sie vielleicht aus Zeitungen und Zeitschriften.
Im unten stehenden Beispiel ist der Text in Tabellenköpfen <th>
(table header) rechts ausgerichtet, während er in normalen Tabellenzellen <td>
zentriert wird. Zusätzlich werden normale Absätze im Blocksatz geschrieben:
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
Textdekoration: die Eigenschaft ‘text-decoration’
Mit der Eigenschaft text-decoration
ist es möglich, Texte verschiedenartig zu “dekorieren” oder Ihnen “Effekte” zu verleihen. Sie können Texte unterstreichen, durchstreichen oder eine Linie darüber zeichnen lassen. Im folgenden Beispiel sind <h1>
-Überschriften unterstrichen, <h2>
-Überschriften haben eine Linie über dem Text und <h3>
-Überschriften sind durchgestrichen.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Laufweite (Abstand zwischen den Buchstaben): die Eigenschaft ‘letter-spacing’
Die Laufweite von Text kann mit der Eigenschaft letter-spacing
verändert werden. Der Wert, den die Eigenschaft annimmt, ist einfach der gewünschte Abstand der Buchstaben. Wenn Sie z.B. eine Laufweite von 3px für Ihre Textabsätze <p>
und 6px für <h1>
-Überschriften wünschen, kann der nachfolgende Code verwendet werden.
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Texttransformation: die Eigenschaft ‘text-transform’
Mit der Eigenschaft text-transform
kann man die Groß- und Kleinschreibung eines Textes kontrollieren. Sie können wählen zwischen capitalize, uppercase oder lowercase wählen, egal wie der Ursprungstext im HTML-Code aussieht.
Nehmen wir das Wort “überschrift”. Es kann dem Nutzer als “ÜBERSCHRIFT” oder “Überschrift” präsentiert werden. Nachfolgend stehen die vier möglichen Werte für text-transform
:
- capitalize
- Schreibt den ersten Buchstaben jedes Wortes groß, z.B.: “john doe” wird zu “John Doe”.
- uppercase
- Schreibt alle Buchstaben groß, z.B.: “john doe” wird zu “JOHN DOE”.
- lowercase
- Schreibt alle Buchstaben klein, z.B.: “JOHN DOE” wird zu “john doe”.
- none
- Keine Transformation – der Text wird so angezeigt, wie er im HTML-Code steht.
Als Beispiel nehmen wir eine Namensliste. Die Namen sind alle mit <li>
(Listenelement) markiert. Sagen wir, wir möchten, dass die Namen mit Großbuchstaben beginnen und Überschriften komplett in Großbuchstaben geschrieben werden sollen.
Schauen Sie bei diesem Beispiel auch in den Quellcode. Sie werden sehen, dass der Text eigentlich in Kleinbuchstaben geschrieben ist.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Zusammenfassung
In den letzten drei Lektionen haben Sie schon einige CSS-Eigenschaften kennengelernt, aber es gibt noch viel mehr. In der nächsten Lektion werfen wir einen Blick auf Links.