Typografie für das Web
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Einführung
Vor der Entwicklung von CSS verwendeten Webentwickler font-Tags, um Farbe, Größe und Darstellung von Text in verschiedenen Teilen einer Webseite festzulegen:
Auch wenn diese Methode recht effektiv war, um die Darstellung von Schriften zu beeinflussen, hatte die Technik eine Reihe von Einschränkungen. Die häufige Verwendung von font-Tags in vielen Seiten hatte zur Folge, dass Aktualisierungen äußerst zeitaufwändig waren und die Dateigröße von Webdokumenten unnötig aufgebläht wurde. Zudem war dieses Verfahren sehr fehleranfällig. CSS hilft Ihnen, diese Design- und Wartungsprobleme zu vermeiden. Hierzu eine kleine Demonstration. Umgeben Sie etwas Inhalt mit p-Tags:
<p>Hallo Welt!</p>
Nun können Sie im Kopfteil des Dokuments festlegen, wie der Absatz dargestellt werden soll:
<style type="text/css" media="all">
p {
color: blue;
font-size: small;
font-family: Verdana, Arial, sans-serif;
}
</style>
Durch diese Technik werden die Struktur des Absatzes und dessen visuelle Darstellung voneinander getrennt. Dadurch werden Bearbeitung und Wartung der Gestaltung einer Website stark vereinfacht. Änderungen an der Darstellung können nun in einem Stylesheet vorgenommen werden, ohne hierfür den eigentlichen Inhalt manipulieren zu müssen.
Gegenüber früheren Techniken bedeutet dies für Webentwickler nicht nur ein leichteres Editieren, sondern auch eine wesentlich feinere Kontrolle über die Typografie. Neben Möglichkeiten, um Farbe, Stil und Größe von Schriften zu beeinflussen, zeigen wir in diesem Kapitel auch Techniken, um Versalien zu benutzen, visuell ansprechende "Pull Quotes" ("Lockzitate") zu erstellen, den Durchschuss zu verändern und vieles mehr.
- Schriftarten festlegen
- Schriftgrößen und -maße festlegen
- Schriftgrößen besser kontrollieren
- Schriftgrößen selbst festlegen
- Text zentrieren
- Text im Blocksatz darstellen
- Leerraum zwischen Überschriften und Absätzen entfernen
- Versalien zu Beginn eines Absatzes
- Größere und zentrierte Versalien
- Bilder als Versalien
- Überschriften mit Stil
- Überschriften mit Rahmen
- Überschriftentext mit einem Bild versehen
- Gestaltung einer Pull Quote mit HTML-Text
- Pull Quotes mit Rahmen
- Pull Quotes mit Bildern
- Die erste Zeile eines Absatzes einrücken
- Ganze Absätze einrücken
- Hängende Einzüge
- Die erste Zeile eines Absatzes mit Stildefinitionen versehen
- Die erste Zeile eines Absatzes mit einem Bild versehen
- Textteile hervorheben
- Zeilenabstände ändern
- HTML-Text mit Grafiken überlagern
- Text mit Schatten hinterlegen
- Den Abstand zwischen Buchstaben und Wörtern anpassen
<< zurück | vor >> |
Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln