CSS-Tutorial - CSS-Tutorial Drucken E-Mail
Know How - Tutorials
Beitragsseiten
CSS-Tutorial
1. Einführung
2. CSS einsetzen
3. Farben und Hintergründe
4. Textformatierung
5. Gruppierung von Elementen
6. Kästchenmodell
7. Das Floating-Modell
8. Elemente positionieren
Alle Seiten
JPAGE_CURRENT_OF_TOTAL


4. Textformatierung

Im Gegensatz zu reinem HTML bietet CSS natürlich ebenso eine breite Palette zur Textformatierung an, ähnlich wie es bei Grafiken und Farben der Fall ist. In diesem Teil des Tutorials möchte ich Ihnen zeigen, was so alles mit dem Text angestellt werden kann.


4.1 Schriftart auswählen

Schriftarten lassen sich in CSS recht einfach über die Eigenschaft font-family: auswählen.

Beispiel:

p { font-family: arial; }

h1 { font-family: verdana, arial, sans-serif; }

h2 { font-family: “times new roman”, serif; }


Erläuterung:
Diese drei Beispiele bewirken unterschiedliches. Das erste Beispiel wählt einfach die Schriftart Arial für alle Standard-Texte aus.
Das zweite Beispiel hingegen wählt für alle Überschriften bevorzugt die Schriftart Verdana aus. Ist Verdana auf dem Rechner des Betrachters nicht verfügbar, wird die Schriftart Arial ausgewählt. Ist auch Arial nicht verfügbar, wird ein Zeichensatz aus den serifenlosen Schriften ausgewählt.
Beispiel drei zeigt, dass für die Überschrift die Schriftart Times New Roman gelten soll. Schriftarten, die Leerzeichen enthalten, müssen dabei in Anführungszeichen stehen. Ist Times New Roman nicht verfügbar, würde in diesem Beispiel eine andere Schriftart mit Serifen genommen werden.


4.2 Texte formatieren

CSS besitzt einige Möglichkeiten, die gewählten Schriftarten bzw. Texte zu formatieren.


4.2.1 Text ausrichten

Mit der Eigenschaft text-align: lässt sich der Text grundlegend ausrichten. Ähnlich wie bei dem HTML-Attribut lässt sich mit text-align: der Text in CSS linksbündig, rechtsbündig, zentriert oder in Blockschrift ausrichten.

Beispiel:

p { text-align: right; }

p { text-align: left; }

p { text-align: center; }

p { text-align: justify; }

 

4.2.2 Text einrücken

Mit CSS können Sie es sogar bewerkstelligen, dass Ihr Text in der ersten Zeile um einen bestimmten Wert eingerückt wird.

Beispiel:

p { text-indent: 20px; }


Erläuterung:
Mit diesem Beispiel würde jeder Text, der mit dem HTML-Tag <p> beginnt, um 20 Pixel eingerückt werden.


4.2.3 Texte und Schriftarten formatieren

CSS bietet verschiedene Möglichkeiten, Texte hervorzuheben. Dazu gibt es zwei Eigenschaften zur Auswahl: text-decoration, font-style oder font-weight.

Beispiel:

h1 { font-style: italic;
     font-weight: bold;
     text-decoration: overline;
   }


Erläuterung:
Mit diesem Beispiel würde die Überschrift kursiv, fett und überstrichen (ja, man kann Text mit CSS auch “überstreichen”) dargestellt werden.

Zusammengefasst habe ich eine Liste mit möglichen Textformatierungen zusammengestellt:


CSS-Eigenschaft

Erläuterung

text-decoration: underline;

Unterstrichener Text

text-decoration: overline;

„Überstrichener“ Text

text-decoration: line-through;

Durchgestrichener Text

text-decoration: blink;

Blinkender Text

 

 

font-style: italic;

Kursiver Schriftstil

font-style: oblique;

Schräggesteller Schriftstil

 

 

font-weight: bold;

Fettgedruckt

font-weight: bolder;

Extrafettgedruckt

font-weight: lighter;

Dünngedruckt

font-weight: 100, 200, … , 900

Druckstil extra dünn (100) bis extra fett (900) in 100er-Schritten

font-weight: normal;

normales Schriftgewicht

 

 

font-variant: small-caps;

Schriftvariante kapital (kleine Großbuchstaben)

 

 

font-size: xx-small;

winzige Schriftgröße

font-size: x-small;

sehr kleine Schriftgröße

font-size: small;

kleine Schriftgröße

font-size: medium;

mittlere Schriftgröße

font-size: large;

große Schriftgröße

font-size: x-large;

sehr große Schriftgröße

font-size: xx-large;

riesige Schriftgröße

 

Natürlich sind auch prozentuale, oder andere relative Angaben möglich, wie zum Beispiel:

font-size: 1em;

1em wäre die vom Benutzer im Browser standardmäßig eingestellte Schriftgröße

 

 

word-spacing: 0.5em;

Wortabstand 0.5em

letter-spacing: 0.3em;

Zeichenabstand 0.3em

 

Hier sind auch feste Angaben wie px, oder mm möglich.

 

 

text-transform: capitalize;

Wortanfänge sind Großbuchstaben

text-transform: uppercase;

Nur Großbuchstaben

text-transform: lowercase;

Nur Kleinbuchstaben

 


4.3 Verweise (Links) gestalten

Auch Links lassen sich mit CSS relativ einfach gestalten. In der folgenden Liste werden die Eigenschaften, die man verwenden kann, aufgelistet und erläutert. Prinzipiell kann man die Links nach seinen eigenen Vorstellungen mit den bereits bekannten Textformatierungen gestalten. Nach der Liste erhalten Sie ein Anwendungsbeispiel.

CSS-Eigenschaft

Erläuterung

a:link

Verweis zu noch nicht besuchten Seiten

a:visited

Verweis zu bereits besuchten Seiten

a:focus

Link, der gerade den Fokus hat (z.B. beim „Durchspringen“ der Links mit der Tabulator-Taste)

a:hover

Link, auf dem gerade der Mauszeiger ruht

a:active

Gerade aktiver Link


Beispiel:

a:link { text-decoration: none; color: red; }
a:visited { text-decoration: none; color: red; }
a:focus { text-decoration: none; color: red; }
a:hover { text-decoration: underline; color: blue; text-transform: uppercase; }
a:active { text-decoration: underline; color: blue; text-transform: uppercase; }

 

Erläuterung:
Mit diesem Beispiel würde ein Link auf Ihrer Seite im Standardzustand nicht unterstrichen und in roter Farbe dargestellt werden. Das gilt dabei sowohl für bereits besuchte, als auch für noch nicht besuchte Seiten.
Fährt der Benutzer jetzt aber mit dem Mauszeiger über den Link oder klickt ihn an, wird der Link unterstrichen und in blauer Farbe dargestellt. Dazu kommt, dass alle Buchstaben des Verweises in Großbuchstaben dargestellt werden.

Wie Sie sehen, lassen sich links so prinzipiell sehr frei formatieren. Das funktioniert übrigens mit so manchen Eigenschaften auch für andere selectoren. Beispielsweise könnten Sie Tabellenzellen beim Überfahren des Mauszeigers mit der Eigenschaft td:hover mit einer anderen Hintergrundfarbe versehen. Ihrer Fantasie sind dabei keine Grenzen gesetzt.


 
 

Weitere Artikel: