SELFHTML: CSS / Schnellformatierung im Text

SELFHTML/Quickbar CSS Style-Sheets Style-Sheets definieren

	Schnellformatierung im Text
	Einzelne HTML-Tags formatieren Bereiche mit <span> formatieren

Einzelne HTML-Tags formatieren

Anzeigebeispiel: So sieht's aus

Sie können einzelne HTML-Tags innerhalb des HTML-Dateikörpers mit Hilfe von Style-Sheet-Angaben formatieren. Die Formatierungsangaben gelten dann genau für den Geltungsbereich des betreffenden HTML-Tags. Das ist zum Beispiel für HTML-Tags zu Absatztypen und Textgestaltung oder für solche zu Tabellen sinnvoll.

Beispiel:

<html>
<head>
<title>Titel der Datei</title>
</head>
<body>
<div style="background-color:#FFFFE0">
<h1 style="color:red; font-size:36pt;">Überschrift 1. Ordnung</h1>
<p style="margin-left:1.5cm;">Ein Textabsatz</p>
</div>
</body>
</html>

Erläuterung:

Sie können Formatangaben für ein HTML-Tag bestimmen, indem Sie innerhalb des einleitenden HTML-Tags die Angabe style= und dahinter, in Anführungszeichen, die gewünschten Formatdefinitionen notieren. Innerhalb der Formatdefinitionen sind Style-Sheet-Angaben erlaubt. Jede Eigenschaftszuweisung besteht aus einem Namen, z.B. color und einem Wert, z.B. red, getrennt durch einen Doppelpunkt. Schließen Sie jede Formatdefinition jeweils durch einen Strichpunkt ab. Nur bei der letzten Formatdefinition vor der abschließenden geschweiften Klammer darf der Strichpunkt entfallen.

Wichtig: Zwar sind innerhalb einer Formatdefinition durchaus Leerzeichen erlaubt, aber der Netscape-Browser hat sich dabei als sehr empfindlich erwiesen - kurz gesagt, er ignoriert die Angaben. Obwohl es nicht so gut lesbar ist, ist es deshalb vorläufig auf jeden Fall besser, keine Leerzeichen innerhalb einer Formatdefinition zu verwenden.

Zu den einzelnen Formateigenschaften und ihren möglichen Werten siehe Style-Sheet-Angaben.

Im obigen Beispiel werden die individuellen Formatangaben zunächst auf ein <div>-Tag angewendet, das verschiedene weitere Elemente enthält, nämlich eine Überschrift 1. Ordnung und einen gewöhnlichen Textabsatz. Auch diese Elemente werden im Beispiel mit Hilfe von Style-Sheet-Angaben individuell formatiert.

Beachten Sie:

Style-Sheet-Angaben für HTML-Tags wie <p> oder <li> werden nur interpretiert, wenn Sie ein einleitendes und ein abschließendes Tag notieren.

Bereiche mit <span> formatieren

Anzeigebeispiel: So sieht's aus

Sie können Style-Sheet-Formatierungen an beliebigen Stellen innerhalb des normalen Textes definieren, ohne daß diese einem herkömmlichen HTML-Tag oder einer Unterklasse davon zugeordnet sind. Dafür steht ein neues HTML-Tag zur Verfügung, das sonst keine eigene Bedeutung hat und nur zum Definieren von Style-Sheet-Angaben dient. Dieses HTML-Tag eignet sich besonders dazu, um innerhalb des Geltungsbereichs anderer HTML-Tags einzelne Zeichen oder Wörter anders zu formatieren.

Beispiel:

<html>
<head>
<title>Titel der Datei</title>
</head>
<body>
<h1>&Uuml;berschrift 1. Ordnung mit <span style="color:blue;">blauem Text</span></h1>
<p>Normaler Textabsatz mit 
<span style="font-style:italic; color:red;">rotem kursiven Text</span></p>
</body>
</html>

Erläuterung:

Mit <span style=...> ... </span> können Sie Textabschnitte innerhalb anderer HTML-Tags nach Belieben formatieren (span = spannen). Hinter der Angabe style= notieren Sie die gewünschten Formateigenschaften. Die Angabe muß in Anführungszeichen stehen. Innerhalb der Formatdefinitionen sind Style-Sheet-Angaben erlaubt. Jede Eigenschaftszuweisung besteht aus einem Namen, z.B. font-style und einem Wert, z.B. italic, getrennt durch einen Doppelpunkt. Schließen Sie jede Formatdefinition jeweils durch einen Strichpunkt ab.

Zu den einzelnen Formateigenschaften und ihren möglichen Werten siehe Style-Sheet-Angaben.


weiter:	Maßeinheiten, Farbangaben, feste Angaben
zurück:	Zentrale Formate definieren

SELFHTML/Quickbar CSS Style-Sheets Style-Sheets definieren