SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheets definieren
![]() |
Schnellformatierung im Text |
![]() |
|
![]() |
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.
<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> |
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.
Style-Sheet-Angaben für HTML-Tags wie <p> oder <li> werden nur interpretiert, wenn Sie ein einleitendes und ein abschließendes Tag notieren.
![]() ![]() |
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.
<html> <head> <title>Titel der Datei</title> </head> <body> <h1>Ü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> |
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:![]() |
![]() |
zurück:![]() |
![]() |