SELFHTML/Navigationshilfen Stylesheets CSS-Formate definieren | |
HTML-Elemente direktformatieren |
|
Sie können einzelne HTML-Elemente innerhalb des sichtbaren HTML-Dokuments mit Hilfe von Stylesheet-Eigenschaften formatieren. Die Formatdefinitionen gelten dann genau für den Geltungsbereich des betreffenden HTML-Elements und nach den Regeln der natürlichen Formatvererbung auch für Kindelemente des betreffenden Elements. Sinnvoll ist diese Möglichkeit, wenn Sie entweder sonst auf CSS verzichten und es nur mal für ein paar Ausnahmen benötigen, oder wenn Sie zentrale Formate verwenden, einzelne Elemente aber anders als mit den dort definierten Formatdefinitionen gestalten möchten.
Anzeigebeispiel: So sieht's aus
<html> <head> <title>Titel der Datei</title> <style type="text/css"> body { background-color:#000000; color:#E0E0E0 } </style> </head> <body> <h1>Die Seite mit dem besonderen Element</h1> <p>Hier sind zwar zentrale Formatdefinitionen vorhanden, aber das folgende Element soll etwas Besonderes sein:</p> <p style="background-color:#808040; color:#D8FD02; font-family:'Century Schoolbook',serif; font-size:2em; letter-spacing:3px; padding:40px; border:double #D8FD02 4px;" title="Zitat von Francis Picabia"> Unser Kopf ist rund, damit das Denken die Richtung wechseln kann! </p> </body> </html>
Sie können Formate für ein HTML-Element definieren, indem Sie innerhalb des einleitenden HTML-Tags das Attribut style
und dahinter die gewünschten Formatdefinitionen notieren. Innerhalb der Formatdefinitionen sind CSS-Eigenschaften erlaubt. Dabei gilt die gleiche Syntax wie innerhalb der geschweiften Klammern bei zentralen Formaten. Jede Eigenschaft besteht aus einem Namen, z.B. color
(Schriftfarbe) und einem Wert, z.B. #D8FD02
, getrennt durch einen Doppelpunkt. Schließen Sie jede Formatdefinition jeweils durch einen Strichpunkt ab. Nur bei der letzten Formatdefinition vor dem abschließenden Anführungszeichen darf der Strichpunkt entfallen.
Im obigen Beispiel werden die individuellen Formatangaben auf ein gewöhnliches p
-Element angewendet. Es erhält mit Hilfe der CSS-Eigenschaften für Hintergrundfarbe (background-color
), Schriftfarbe (color
), Schriftart (font-family
), Schriftgröße (font-size
), Zeichenabstand (letter-spacing
), Innenabstand zum Rand (padding
) und einem Rahmen (border
) ein Aussehen, das überhaupt nicht mehr an einen "Textabsatz" erinnert.
Kaskade - Anwendung von Stylesheets auf Dokumente | |
Zentrale Formate definieren | |
SELFHTML/Navigationshilfen Stylesheets CSS-Formate definieren |
© 2005 Impressum