6.2.1.2 Fortgeschrittene Textformatoptionen zur Formatierung beliebiger Textabschnitte: html-Attribute versus CSS-Klassen
Die im vorhergehenden Kursmodul erlernte Technik zur Textformatierung mit Element-Selektoren ist mächtig und kann fortgeschrittenes Gestalten umfangreicher Websites sehr vereinfachen. Allerdings ist es häufig so, dass nicht alle Paragraphen bzw. alle Tags in der selben Weise mit identischen Formatenausgestattet werden sollen , sondern eher Textabschitte bestimmter Länge. Um dies zu erreichen, gibt es zwei Möglichkeiten, einmal mit und einmal ohne CSS.
Möglichkeit 1: Farb-, Schriftart- und relative Größenattribute mit Attributen des Tags <font>
Diese Möglichkeit bedient sich der klassischen html-Sprache, teilweise kennen wir sie schon. Wenn Sie z.B. relative Größenattribute angeben (Schriftgrößen 1-7 bzw. +1,2,3 - 1,2,3 im Schriftgrößen-Pulldownmenu von GoLive werden die entsprechenden Attribute zum Font-Tag hinzugefügt. Auch wenn Sie Ihre Texte mit der Farbpalette einfärben, werden Attribute hinzugefügt.
Beispiel: Textgröße 5, Textgröße -2 und Textgröße 4, rot
Der entsprechende Quellcode für obige Zeile lautet:
<p>Beispiel: <font size="5">Textgröße 5</font>, <font size="-1">Textgröße -2</font> und <font size="4" color="#ef0000">Textgröße 4, rot</font></p>
Zum entsprechenden Tagpaar <font> </font> wurden also die Attribute size="(wert)", color="(RGB-Wert)" oder auch beide hinzugefügt. Tatsächlich macht der Font-Tag ja nur im Zusammenhang mit Attributen Sinn.
Sie können nach dieser Methode auch Schriftarten für definierte Textbereiche verwenden. Markieren Sie hierzu den Text und gehen ins Menu Text / Schrift. Wählen Sie dort eine Schriftart bzw. eine Schriftsammlung aus.
Beispiel: Dieser Text ist in Schriftart Courier New.
Hierzu lautet der Quellcode:
<p>Beispiel: <font face="Courier New,Courier,Monaco">Dieser Text ist in Schriftart Courier New.</font></p>
Es wurde also mit Hilfe des Font-Tag-Attributes face eine Schriftensammlung zugeordnet. Analog zum letzten Modul wird hier die erste Schrift verwendet, sofern auf dem Benutzercomputer vorhanden, ansonsten die zweite bzw. dritte. Falls die auch nicht da ist, wird die Standardschrift des Benutzerbrowsers verwendet.
Das war's dann aber auch schon mit den klassischen Formatmöglichkeiten in html. Außerdem sollen in zukünftigen Versionen von html (dann xhtml) die Font-Attribute nicht mehr unterstützt werden. Ein weiterer Grund, um mit Style-Sheets, in diesem Fall mit Style-Sheet-Klassen zu arbeiten:
Möglichkeit 2: Farb-, Schriftart-, Größenattribute und weitere Formatoptionen mit Hilfe von CSS-Klassenselektoren
Mit der CSS-Stylesheet-Spracherweiterung von html können Sie auch komplexe Formatkombinationen definieren, die Sie nicht wie im vorherigen Kapitel bestimmten Tags bzw. Pseudotags zuordnen, sondern beliebigen Textabschnitten.
Hierzu müssen wir CSS-Klassen erstellen. Legen Sie hierzu in der im vorhergehenden Modul beschriebenen Weise ein internes oder externes Stylesheet an und wählen Sie aus der Werkzeugleiste für die Einträge nun jeweils "Klassenselektoren" (rote 1 in untenstehender Abbildung).
|
Ich habe für unser Beispiel eine ganze Fülle von Klassen angelegt (.rotbraun, .blau14 etc.). Die Namen sind wieder beliebig (wie üblich keine Umlaute, Leerzeichen, Sonderzeichen), müssen aber den Klassenpunkt vorne tragen. Die Definition von Formaten und deren Kombination geschah wiederum im Inspektor, analog zum vorhergehenden Kapitel. Für die Klasse .spacing habe ich übrigens zusätzlich einen farbigen Hintergrund ausgewählt, dies geschah im Hintergrundreiter des Style-Sheet-Inspektors (siehe Abbildung unten). Ich hätte sogar ein Hintergrundbild für diesen Stil auswählen können. |
 |
 |
|
Nun muss noch die Zuordnung der Klassen zu den jeweiligen Textteilen geschehen. Selektieren Sie dazu im Layout-Fenster einen Textteil beliebiger Länge und rufen das Ansichtsfenster im Inspektor auf (Abb. rechts). Rechts wird z.B. gerade der Klassenstil .blau14 zugeordnet. Wenn nur Teile eines Absatzes markiert werden, sollte die Option Inline aktiviert werden. Sie können einen Stil aucheinem ganzen Absatz zuordnen. Platzieren Sie den Cursor im Absatz und aktivieren im Inspektor/Stil die Option Absz. (Alles, was zwischen <p> und </p> steht, wird damit entsprechend formatiert. Wenn Sie stattdessen Trenn aktivieren, wird nicht nur der ganze Absatz, sondern ein ganzer Block (Division, der zwischen den Tags <div> und </div> steht,) formatiert. Genauso wie einem Absatz können Sie einer Division als Stil sogar weitere Attribute wie einen farbigen Rand zuordnen sowie Abstände bzw. Überlappungen zwischen den Blöcken angeben (siehe Abbildungen unten). Ob derartige Optionen (Rand, Abstände) auch für einen inline-Stil angezeigt werden können, hängt vom Browser ab. Wenn Sie irgendwohin in Ihren Text klicken und einen Stil mit Option Ber. (Bereich=area) zuordnen, wird alles, was im Body steht, mit dem entsprechenden Stil versehen. Sie können auch verschachteln. Innerhalb eines mit Stil versehenen Absatzes können Sie weitere Textteile mit einem anderen inline-Stil versehen. Auch innerhalb eines Textabschnittes, der mit inline-Style versehen ist, können Sie kürzere Textabschnitte mit einem weiteren inline-Style versehen. Der jeweils innerste Style ist maßgeblich. Darstellung: mal wieder kommt es auf den Browser an, ob alles wie gewünscht dargestellt wird. Für die Klasse .spacing habe ich z.B. einen Doppelrand gewählt, der aber in IE 5 und Netscape Navigator 6 nur als einfacher Rand gezeigt wird. |
 |
|
Hier die beiden Reiter innerhalb des CSS-Inspektors, die die Einstellungen für Ränder und Abstände ermöglichen.
 |
 |
Hier nun ein Beispiel in klassischer html-Formatierung, ohne Textfarben, Textgrößen und Schriftart-Auszeichnung
Nun dasselbe Beispiel mit CSS-Klassen-Formatierung, basierend auf obigem Beispiel.
Im Vorschau-Modus von GoLive (und vielleicht in zukünftigen Browsern) würde der doppelte Rand auftreten, dafür der ebenfalls mit der Klasse .spacing ausgestattete letzte inline-Text zwar Hintergrundfarbe, aber keinen Rand anzeigen (Screenshot).
Zu guter Letzt schauen wir uns noch den Quellcode des obigen Beispiels an (Fenster größer ziehen). Sie werden sehen, die Syntax ist gar nicht kompliziert, jedenfalls gut nachvollziehbar.
In Rot markiert habe ich den Quellcode für das inline-Stylesheet, welches die Klassen definiert (vgl. Sie mit obigen Abbildungen). Im Body werden diese Klassen dann jeweiligen Textabschnitten zugeordnet (Blau markiert). Inline-Textabschnitte werden mit <span class="klassennamen">inhalt</span> markiert, klassenformatierte Abschnitte und Dividers mit <p class="klassennamen">abschnittsinhalt</p> bzw. <div class="klassennamen">abschnittsinhalt</div> (letzteres ist nicht in unserem Beispiel enthalten).
(Sie können das Extra-Fenster hier wieder schließen).
Hinweis und Tipp: Immer wieder finden Sie Seiten im Web, in denen keine eigentlichen Stylesheets angelegt wurden, die dann über Tags (Element-Selektoren) oder Klassenzuordnung einzelner Textabschnitte (unser Beispiel) zugeordnet werden, sondern bei denen direkt im body des Dokumentes die Styledefinition an der jeweils benötigten Stelle erfolgt. Dies sieht z.B. so aus:
<body>
<h3 style="color:#0000ff;font-size:18px;font-style:monaco">Mein Titel</h3>
...
</body>
Hier wurde quasi ein kleines Stylesheet angelegt. Funktioniert natürlic auch mit anderen Tags, wie <p>, <div>, <font> etc. Wenn Sie umfassende Formatierungen vornehmen wollen, sollten Sie dies aus zwei Gründen vermeiden:
- Der Quellcode wird unnötig lang, wenn für viele Textbereiche immer wieder die gleichen Styles definiert werden.
- Diese Art von Formatierung soll in Zukunft nicht mehr von den Browsern unterstützt werden (kann aber noch Jahre dauern, bis es so weit ist).
Wenn Sie aber nur mal eine Überschrift schnell mit besonderen Stilen formatieren wollen (z.B. noch nen Rahmen drumherum), ist dieses Vorgehen deutlich schneller, als ein ganzes internes oder externes Stylesheet anzulegen.
Im Kursanhang werden Sie noch einige Zusätze zur Syntax von Element- und Klassenstylesheets finden, so dass Sie ihre gewünschten Formatierungen auch von Hand erarbeiten können. Bevor wir die Style-Sheets aber verlassen, sollten Sie unbedingt noch einen weiteren Typ von Style-Sheet-Elementen kennenlernen, nämlich die CSS-IDs, die ich hier mal Formatcontainer nennen möchte. Sie sind essenziell, um exakte Positionierung von Elementen auf Ihrer Seite zu definieren und können darüberhinaus als dhtml animiert werden (siehe Modul 6.2.2).
Hinweis: Wir behandeln hier ausschließlich die Cascading-Style-Sheet-Spezifikation Level 1. Inzwischen existiert bereits Level 2, was viele weitere Möglichkeiten bringt. So verbinden Level-2-Klassen Element-Selektoren mit Klassen (auch dazu mehr im Kursanhang).
|
Tipp: Um besser beurteilen zu können, ob bzw. wie Ihr Style-Sheet in den jeweiligen Browsern angezeigt wird, gehen Sie in den Seiteninspektor und dort unter Ansicht. Wählen Sie aus dem Pulldown-Menu Stamm-CSS die gewünschte Vorschau (s. nebenstehende Abb.) |
 |
