CSS Style Sheets
Werbung
CSS Style Sheets
Eines vorneweg, diese Lektion ist für Fortgeschrittene. Durch Style Sheets lassen sich jedoch
mit geringem Aufwand interessante Effekte erzielen, die die eigene Seite aufpeppen und von
der Masse ein wenig abheben können.
Denjenigen die sich mit dieser Lektion beschäftigen sei gesagt, daß ich diese der Einfachheit
halber und mangels Zeit als Word Doc einblende, was natürlich weniger komfortabel ist als
ein mit html dargestellter Text. Wer sich aber wirklich in dem Thema fit machen will, den
sollte etwas blättern und die fehlende Übersicht nicht entmutigen.
1. Style Sheets einbinden
1.1 Definition
Style-Sheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um
eine Sprache zur Definition von Formateigenschaften einzelner HTML-Befehle. So
können Sie beliebige Bereiche einer HTML-Datei mit einer eigenen Hintergrundfarbe,
einem eigenen Hintergrundbild (Wallpaper) oder mit diversen Rahmen versehen. Sie
können beliebige Elemente, sei es eine Grafik, ein Textabsatz, eine Tabelle oder ein
Bereich aus mehreren solcher Elemente, pixelgenau im Anzeigefenster des WWWBrowsers positionieren.
Ein weiteres wichtiges Leistungsmerkmal von Style-Sheets ist es, daß Sie
Definitionen zentral angeben können. So können Sie beispielsweise im Kopf einer
HTML-Datei zentrale Definitionen zum Aussehen einer Tabellenzelle notieren. Alle
Tabellenzellen der entsprechenden HTML-Datei erhalten dann die
Formateigenschaften, die einmal zentral definiert sind. Das spart Kodierarbeit und
macht die HTML-Dateien kleiner. Sie können Ihre Style-Sheet-Definitionen sogar in
separaten Dateien notieren. Solche Style-Sheet-Dateien können Sie in beliebig vielen
HTML-Dateien referenzieren. Auf diese Weise können Sie für große Projekte
einheitliche Layouts entwerfen. Mit ein paar kleinen Änderungen in einer zentralen
Style-Sheet-Datei können Sie dann für hunderte von HTML-Dateien ein anderes
Layout bewirken.
Sie können innerhalb einer HTML-Datei einen Bereich für Style-Sheet-Angaben
definieren.
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-/* ... Style-Sheet-Angaben ... */
//-->
</style>
</head>
<body>
</body>
</html>
Mit dem Befehl <style...> ... </style> im Kopf der HTML-Datei definieren Sie einen
Bereich für Style-Sheet-Angaben (style = Stil, Format). Im einleitenden <style>-Tag
müssen Sie den Typ der Formatdefinition angeben. Das geschieht bei allen hier
beschriebenen Formatiermöglichkeiten durch die Angabe type="text/css". Zwischen
dem einleitenden Tag und dem abschließenden </style> können Sie dann die
eigentlichen Style-Sheet-Angaben definieren.Damit WWW-Browser, die keine StyleSheets kennen, die Style-Sheet-Angaben nicht irrtümlich als anzuzeigenden Text
interpretieren, können Sie den Bereich der eigentlichen Style-Sheet-Angaben in einen
mehrzeiligen HTML-Kommentar <!-- ... //--> einbinden, so wie im obigen Beispiel.
In vielen Fällen werden Sie einheitliche Formate für alle HTML-Dateien Ihres
Projekts haben wollen. In diesem Fall brauchen Sie die Angaben nicht in jeder Datei
zu wiederholen. Stattdessen können Sie die Style-Sheet-Angaben in einer separaten
Textdatei notieren und diese Datei einfach in jeder gewünschten HTML-Datei
einbinden. Wenn Sie die Angaben in der separaten Datei ändern, wirken sich die
Änderungen einheitlich auf alle Dateien aus, in denen diese separate Datei
eingebunden ist.
2. Definition durch separate Dateien
<html>
<head>
<title>Titel der Datei</title>
<link rel=stylesheet type="text/css" href="formate.css">
<style type="text/css">
<!-... Extra-Style-Sheet-Angaben ...
//-->
</style>
</head>
<body>
</body>
</html>
Im Dateikopf einer HTML-Datei können Sie mit einem HTML-Befehl des
Typs <link...> eine Datei referenzieren, die Style-Sheet-Angaben enthält (link
= Verweis). Innerhalb dieses Befehls sollten immer die Angaben rel=stylesheet
type="text/css" stehen (rel = relation = Bezug, type = Typ).
Bei der referenzierten Datei muß es sich um eine reine Textdatei handeln, die
die Endung .css haben sollte. Die Datei sollte nichts anderes als
Formatdefinitionen enthalten, also auch keine HTML-Befehle. Eine solche
Datei können Sie mit jedem einfachen Texteditor erstellen.
/* Zeilen wie diese, die mit Schraegstrich und Stern */
/* beginnen und mit Stern und Schraegstrich enden, sind */
/* Kommentarzeilen. */
body { margin-top:10px; margin-bottom:10px; }
/* margin-top = Abstand zwischen Fensterrand und Inhalt oben */
/* margin-bottom = Abstand zwischen Fensterrand und Inhalt unten */
/* 10px = 10 Pixel, Wert aenderbar */
p,h1,h2,h3,h4,ul,ol,li,div,td,th,address,blockquote,nobr,b,i
{ font-family:Arial,sans-serif; }
/* font-family = Schriftart fuer Textelemente */
/* Arial,sans-serif = Arial und serifenlose Schrift, Wert aenderbar */
h1 { font-size:18pt; }
/* font-size = Schriftgroesse */
/* 18pt = 18 Punkt, Wert aenderbar */
p,ul,ol,li,div,td,th,address,nobr,b,i { font-size:10pt; }
/* normaler Text */
/* font-size = Schriftgroesse */
/* 10pt = 10 Punkt, Wert aenderbar */
pre { font-family:Courier New,Courier; font-size:10pt; color:#0000C0; }
/* Quelltext-Beispiele */
/* font-family = Schriftart */
/* Courier New,Courier = Schriftarten, Wert aenderbar */
/* font-size = Schriftgroesse */
/* 10pt = 10 Punkt, Wert aenderbar */
/* color = Farbe */
/* #0000C0 = blau, Wert aenderbar */
.doc { background-color:#EEEEEE; }
/* Layout-Elemente mit hellgrauem Hintergrund */
/* background-color = Hintergrundfarbe */
/* #EEEEEE = helles Grau, Wert aenderbar */
a:link { color:#AA5522; text-decoration:underline; }
a:visited { color:#772200; text-decoration:underline; }
a:active { color:#000000; text-decoration:none; }
/* a:link = Verweise zu noch nicht besuchten Seiten */
/* a:visited = Verweise zu bereits besuchten Seiten */
/* a:active = Verweise, die gerade angeklickt werden */
/* color = Farbe */
/* #AA5522 = kotzbeige, Wert aenderbar */
/* #772200 = scheissbraun, Wert aenderbar */
/* #000000 = schwarz, Wert aenderbar */
/* text-decoration = Tesxtstil */
/* underline = unterstrichen, Default-Wert, Wert aenderbar */
/* none = nicht unterstrichen, Wert aenderbar */
Wenn Sie mit <link...> eine Datei mit Style-Sheet-Angaben referenzieren,
brauchen Sie keinen Bereich <style...>...</style>. Im obigen Beispiel wird
dennoch ein solcher Bereich definiert. Das soll zeigen, daß Sie beide Arten,
Style-Sheet-Angaben zu definieren, durchaus kombinieren können. Wenn Sie
beide Arten benutzen, haben Formate, die direkt innerhalb von
<style...>...</style> definiert werden, im Konfliktfall Vorrang vor den
referenzierten Formaten. So können Sie etwa immer wieder verwendete
Formate importieren und einige davon mit dateispezifischen Formaten
überschreiben.
Um Ihre Formatdefinitionen intern auszukommentieren, steht eine spezielle, an
die Programmiersprache C angelehnte Syntax zur Verfügung.
<title>Titel der Datei</title>
<style type="text/css">
<!-p { color:blue; } /* Format für blauen Text, kreiert am 4.1.1998 */
//-->
</style>
Sie können dem Browser in einer HTML-Datei mit Hilfe einer Meta-Angabe
ausdrücklich mitteilen, daß diese Datei Style-Sheet-Definitionen in einer
bestimmten Definitionssprache enthält.Die Angabe dient dazu, um dem Client
(also dem WWW-Browser) und dem WWW-Server einen Befehl zur
Verfügung zu stellen, der beiden Seiten helfen soll, sich vor dem Interpretieren
der Datei über die zu verwendende Style-Sheet-Syntax zu einigen.
Beispiel:
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>
3. Tags definieren
Sie können für gewöhnliche HTML-Tags, zum Beispiel für HTML-Tags zu Absatztypen und
Textgestaltung oder für Tabellen, mit Hilfe von Style-Sheet-Angaben Formate definieren.
Wenn Sie das entsprechende HTML-Tag dann in der HTML-Datei verwenden, werden alle
Formate angewendet, die Sie für das betreffende HTML-Tag definiert haben.
<title>Titel der Datei</title>
<style type="text/css">
<!-h1 { font-size:48pt; color:#FF0000; font-style:italic; }
p,li { font-size:12pt;
line-height:14pt;
font-family:Helvetica,Arial;
letter-spacing:0.2mm;
word-spacing:0.8mm; }
//-->
</style></head>
Dazu notieren Sie zuerst das gewünschte HTML-Tag, und zwar ohne spitze Klammern. Im
obigen Beispiel werden die HTML-Tags h1 (Überschrift 1. Ordnung), p (Textabsatz) und li
(Listeneintrag) auf diese Weise notiert. Wenn Sie gleichartige Formate für mehrere HTMLTags definieren wollen, geben Sie alle gewünschten Tags an und trennen Sie diese durch
Kommata, so wie im obigen Beispiel p,li.
Dahinter folgen die dazugehörigen, gewünschten Formatdefinitionen, und zwar in
geschweiften Klammern { und }. 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.
Style-Sheet-Angaben für HTML-Tags wie <p> oder <li> werden möglicherweise nur
interpretiert, wenn Sie ein einleitendes und ein abschließendes Tag notieren.
Sie können mit Hilfe von Style-Sheets Unterklassen von gewöhnlichen HTML-Tags
definieren. Das ist vor allem für HTML-Tags zu Absatztypen und Textgestaltung oder für
solche zu Tabellen sinnvoll. So können Sie beispielsweise vom HTML-Tag für Überschriften
1. Ordnung zwei Varianten erzeugen, etwa eine mit schwarzer und eine mit roter Schrift.
Dazu vergeben Sie Namen für die entsprechenden Unterklassen.
<style type="text/css">
<!-p.normal { font-size:10pt; color:black; }
p.gross { font-size:12pt; color:black; }
p.klein { font-size:8pt; color:black; }
all.rot { color:red; }
.blau { color:blue; }
//-->
</style></head>
<body>
<p class="normal">Normaler Textabsatz mit Schrift 10 Punkt schwarz</p>
<p class="gross">Textabsatz mit Schrift 12 Punkt schwarz</p>
<p class="klein">Textabsatz mit Schrift 8 Punkt schwarz</p>
<p class="rot">roter Textabsatz</p>
<address class="rot">roter Absatz für Adressen</address>
<blockquote class="blau">blaues Zitat</blockquote>
Unterklassen von HTML-Tags bilden Sie dort, indem Sie zuerst das Tag notieren, im obigen
Beispiel p. Dahinter folgt ein Punkt und dahinter ein Name für die Unterklasse.Anstelle eines
bestimmten HTML-Tags können Sie auch das Schlüsselwort all (=alle) notieren. Dadurch
definieren Sie eine Unterklasse mit Formatierungen, die Sie anschließend auf irgendein
HTML-Tag anwenden können. Es ist auch erlaubt, Schlüsselwort all wegzulassen. In diesem
Fall beginnt die Formatdefinition mit einem Punkt.
Innerhalb des Dateikörpers können Sie definierte Unterklassen anwenden. Dazu notieren Sie
im einleitenden HTML-Tag die Angabe class= und dahinter den Namen der Unterklasse, den
Sie zuvor vergeben haben.
Einfach ist das Arbeiten mit prozentualen Angaben, die in Style-Sheets ebenfalls erlaubt sind.
So könnten Sie beispielsweise eine allgemeingültige Unterklasse all.Meine { fontsize:150%;} definieren. Wenn Sie diese Unterklasse dann einem HTML-Tag zuweisen, wird
der darin enthaltene Text einfach in 1½facher Größe dargestellt, und zwar in Bezug auf die
sonst übliche Größe.
1.4 Formate definieren
Sie können Formate vordefinieren, die Sie anschließend auf beliebige geeignete HTML-Tags
anwenden können. So können Sie z.B. ein unabhängiges Format mit der Eigenschaft
fett/kursiv definieren. Dieses unabhängige Format können Sie dann innerhalb von HTMLTags zusätzlich zu anderen Formaten anwenden, die für das betreffende Tag definiert sind.
<style type="text/css">
<!-p,li,dd,dt,blockquote { color:red;font-family:Times; margin-top:1cm; margin-left:1cm; }
#fettkursiv { font-weight:bold; font-style:italic; }
//-->
</style></head><body>
<p id="fettkursiv">Extra-Formatierung</p>
<p>Das ist formatierter Text mit <em id="fettkursiv">Extra-Formatierung</em></p>
Im Beispiel wird für Fließtext-Standard-Tags wie <p>, <li>, <dt>, <dd> und <blockquote>
ein einheitliches Format mit verschiedenen Angaben definiert. Ferner wird ein unabhängiges
Format mit dem Namen fettkursiv definiert. Namen von unabhängigen Formaten müssen ein
Gatterzeichen # vorangestellt bekommen.
Im Dateikörper können Sie freie Formate innerhalb von HTML-Tags anwenden. Dazu
notieren Sie im einleitenden HTML-Tag die Angabe id= und dahinter, in Anführungszeichen,
den Namen des unabhängigen Formats ohne Gatterzeichen (id = identifier = Bezeichner).
Dadurch werden dem Inhalt zwischen dem einleitenden und seinem abschließenden Tag die
Eigenschaften des definierten unabhängigen Formats zugewiesen. Im obigen Beispiel wird
das unabhängige Format fettkursiv einmal innerhalb eines einleitenden <p>-Tags und einmal
innerhalb eines einleitenden <em>-Tags angegeben. Daraus können Sie ersehen, wie
unabhängige Formate einsetzbar sind, und wie sie andere Formate additiv ergänzen.
Pseudo-Elemente sind Elemente innerhalb einer HTML-Datei, die sich jedoch nicht durch ein
eindeutiges HTML-Tag ausdrücken lassen, z.B. ein "noch nicht besuchter Verweis" oder der
erste Buchstabe eines Absatzes. Zum Definieren solcher Pseudo-Elemente gibt es eine
bestimmte Syntax innerhalb der Style-Sheet-Sprache CSS.
<style type="text/css">
a:link { color:#FF0000; font-weight:bold }
a:visited { color:#990000; }
a:active { color:#0000FF; font-style:italic }</style>
Bei Style-Sheet-Definitionen von Pseudo-Elementen notieren Sie zuerst das betroffene
HTML-Tag, im Beispiel das <a>-Tag für Verweise. Dahinter folgt ein Doppelpunkt und
dahinter eine erlaubte Angabe, im Beispiel etwa link oder visited. Beachten Sie, daß dies
keine frei wählbaren Namen sind, sondern feste Schlüsselwörter.
Sie können einzelne HTML-Tags innerhalb des HTML-Dateikörpers mit Hilfe von StyleSheet-Angaben formatieren. Die Formatierungsangaben gelten dann genau für den
Geltungsbereich des betreffenden HTML-Tags.
<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>
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.
Bei allen numerischen Angaben innerhalb von CSS-Style-Sheets, also etwa bei Schriftgrößen,
Absatzabständen oder Rändern, stehen Ihnen alle weit verbreiteten Maßeinheiten zur
Verfügung. Dabei sind absolute Angaben (z.B. Millimeter) und relative Angaben (z.B.
Prozent gegenüber "normal") möglich.
p { font-size:12pc; text-indent:14mm; margin-left:3em; }
Em steht für für die Elementeigene Schrifthöhe.
Folgende Farbwörter sind erlaubt:
activeborder = Farbe der aktiven Fenstertitelzeile.
activecaption = Farbe der Überschrift in der aktiven Fenstertitelzeile.
appworkspace = Farbe des Hintergrunds der aktiven Anwendung.
background = Farbe des Desktop-Hintergrunds.
buttonface = Farbe von Buttons in Dialogfenstern.
buttonhighlight = Farbe für 3D-Schatten von Buttons in Dialogfenstern.
buttontext = Farbe von Texten beschrifteter Buttons in Dialogfenstern.
captiontext = Farbe von Überschriften in Dialogfenstern.
greytext = Farbe von deaktiviertem Text Dialogfenstern.
highlight = Farbe von ausgewählten Einträgen in Auswahllisten.
highlighttext = Farbe von selektiertem Text.
inactiveborder = Farbe einer nicht aktiven Fenstertitelzeile.
inactivecaption = Farbe der Überschrift in einer nicht aktiven Fenstertitelzeile.
infobackground = Farbe für Tooltips und Hints (kleine Popup-Hilfen).
infotext = Textfarbe für Tooltips und Hints (kleine Popup-Hilfen).
menu = Farbe für Menüleisten.
menutext = Farbe für Menüeinträge.
scrollbar = Farbe der Scroll-Leiste in Fenstern.
threeddarkshadow = Dunkle Farbe bei Schatten von 3D-Elementen.
threedface = Farbe von 3D-Elementen.
threedhighlight = Farbe von gerade angeklickten 3D-Elementen.
threedlightshadow = Helle Farbe bei Schatten von 3D-Elementen.
threedshadow = Dunkle Farbe bei Schatten von 3D-Elementen.
window = Hintergrundfarbe von Dokumentfenstern.
windowframe = Farbe von Fensterrahmen.
windowtext = Farbe von normalem Text in Dokumentfenstern.
2. Die Style Sheet Befehle
2.1 Schriftart und Ausrichtung
Mit font: können Sie verschiedene Schriftformatierungen mischen.
<p style="font:bold italic 12pt Palatino, serif">Text</p>
Mit dem hier beschriebenen Befehl können Sie Schriftarten angeben, ohne sich darum zu
kümmern, ob und wie die Schriftart beim Anwender angezeigt werden kann. Falls die
angegebene Schriftart nicht angezeigt werden kann, bleibt die Angabe wirkungslos.
<style type="text/css">
h1,h2,h3 { font-familiy:Avantgarde,Arial }
</style>
Folgende Schriftfamilien sind fest vordefiniert - diese Angaben können Sie also neben
Schriftartnamen benutzen: serif, sans-serif, cursive, fantasy und monospace.
<p style="font-size:130%">Text</p>
Alternativ zu numerischen Angaben sind auch folgende "ungenaue" Angaben möglich:
xx-small = winzig.
x-small = sehr klein.
small = klein.
medium = mittel.
large = groß.
x-large = sehr groß.
xx-large = riesig.
smaller = sichtbar kleiner als normal.
larger = sichtbar größer als normal.
dt { font-weight:bold }
Mit font-weight: können Sie das Schriftgewicht bestimmen. Folgende Angaben sind möglich:
bold = fett.
bolder = extra-fett.
lighter = dünner.
100,200,300,400,500,600,700,800,900 = extra-dünn (100) bis extra-fett (900). normal =
normales Schriftgewicht.
Mit dieser Angabe können Sie den Abstand zwischen Wörtern im Text bestimmen.
h3 { word-spacing:8mm }
Zeichenabstand: <b style="letter-spacing:3em">fetter breiter Text</b>
Mit text-decoration: können Sie das Schriftgewicht bestimmen. Folgende Angaben sind
möglich: strong { text-decoration:underline }
underline = unterstrichen.
overline = überstrichen.
line-through = durchgestrichen.
blink = blinkend.
none = normal (keine Text-Dekoration).
Der MS Internet Explorer interpretiert die Angabe blink nicht.
Beispiel:
<style><!-A{text-decoration: none;}
a:link {color:#0080ff;}
a:visited {color:#3000ff;}
A:hover { color="red";}
--></style>
Dies sind die Styles, die die Linx auf meine Seiten ausmachen, wobei a:link der unbesuchte
und a:visited der Besuchte Link ist. Die angabe hover bewirkt bei berühren mit dem
Mauszeiger eine rote Unterlegung.
Mit text-shadow: können Sie einen Textschatten erzwingen. Erlaubt sind Farbangaben oder
der Wert none:
<p style="text-shadow:black; font-size:24pt;">Text</p>
Dieser Befehl, der zur Version 2.0 der CSS Style-Sheets gehört, wird von Netscape und MS
Internet Explorer in den Versionen 4.x noch nicht interpretiert.
Sinnvoll sind die hier beschriebenen Angaben für alle HTML-Tags, die einen eigenen Absatz
erzeugen bzw. einen Block bilden, also etwa für <h[1-6]>, <p>, <blockquote>, <address>
oder <pre>. Blockelemente sind aber auch HTML-Tags wie <div>, <table>, <tr>, <th> und
<td>. Auch auf <body> lassen sich die hier aufgelisteten Style-Sheet-Angaben anwenden - in
diesem Fall wird der gesamte sichtbare Körper einer HTML-Datei wie ein Block behandelt.
Rand bzw. Abstand bedeutet: der Rand/Abstand des aktuellen Elements zu seinem logischen
"Eltern-Element".
Mit negativen Werten, also Angaben wie beispielsweise -18mm, können Sie für besondere
gestalterischen Zwecke erreichen, daß sich Elemente überlappen.
<style type="text/css"> h1,h2,h3 { margin-top:2cm; }
div.beispiel { margin-top:30px; } div.beispiel h1,h2,h3 { margin-top:1cm; }
</style>
Sie können mit margin-bottom den unteren Abstand/Rand eines Elements zu seinem
nachfolgenden Element festlegen.
Mit margin-left (right): können Sie den Rand/Abstand links (rechts) bestimmen.
body { margin:2cm; } /* 2cm oben, rechts, unten und links */
p.typC { margin: 1cm 2cm 3cm 4cm; } /* 1cm oben, 2cm rechts, 3 cm unten und 4 cm links
*/
Sie können für einen mehrzeiligen Fließtext bestimmen, daß die erste Zeile eingerückt wird.
Dieses Gestaltungselement ist in Büchern und Zeitschriften sehr verbreitet.
<p style="text-indent:7.5mm">viel Text</p>
Sie können für Elemente mit viel Fließtext die Zeilenhöhe bestimmen. Diese Angabe ist vor
allem in Verbindung mit einer Angabe zur Schriftgröße interessant.
<style type="text/css">
p.gross { font-size:14pt; line-height:16pt; }
p.klein { font-size:8pt; line-height:8pt; }
</style>
Sie können nebeneinanderstehende Elemente mit unterschiedlicher Höhe, zum Beispiel
Tabellenzellen in einer Tabellenzeile oder Textpsassagen mit unterschiedlicher Schriftgröße
innerhalb einer Zeile im Verhältnis zueinander ausrichten.
<table>
<tr>
<td style="vertical-align:top">...</td>
<td style="vertical-align:middle">...</td>
<td style="vertical-align:bottom">...</td>
</tr>
</table>
Mit vertical align: können Sie die vertikale Ausrichtung bestimmen. Folgende Angaben sind
möglich:
top = obenbündig ausrichten.
middle = mittig ausrichten.
bottom = untenbündig ausrichten.
baseline = an der Basislinie ausrichten (oder untenbündig, wenn es keine Basislinie gibt).
sub = tieferstellen (ohne die Schriftgröße zu reduzieren).
super = höherstellen (ohne die Schriftgröße zu reduzieren).
text-top = am oberen Schriftrand ausrichten.
text-bottom = am unteren Schriftrand ausrichten.
Mit text-align: oder alignment: können Sie gewünschte Elemente für Textinhalte ausrichten.
Folgende Angaben sind möglich:
left = linksbündig ausrichten (Voreinstellung).
center = zentriert ausrichten.
right = rechtsbündig ausrichten.
justify = als Blocksatz ausrichten.
<style type="text/css">
p,blockquote { text-align:justify }
Sie können für einen Rahmen, die Sie für bestimmte oder alle Seiten eines Elements
definieren, das Erscheinungsbild des Rahmens festlegen.
Mit border-style: können Sie den Rahmentyp festlegen. Erlaubt ist eine der folgenden
Angaben:
none = kein Rahmen (bzw. unsichtbarer Rahmen).
dotted = gepunktet.
dashed = gestrichelt.
solid = durchgezogen.
double = doppelt durchgezogen.
groove = 3D-Effekt.
ridge = 3D-Effekt.
inset = 3D-Effekt.
outset = 3D-Effekt.
Netscape 4.x interpretiert die Angabe border-style nur, wenn außerdem die Rahmendicke
(border-width) notiert wird, also etwa:
<p style="border-style:solid; border-width:thin">
Um für beide Browser zu schreiben, müssen Sie also eine Syntax wie in dem voranstehenden
Beispiel wählen und beide Angaben notieren.
Der MS Internet Explorer zieht den Rahmen über die gesamte zur Verfügung stehende Breite,
während Netscape den Rahmen nur so weit zieht, wie der Absatz/der Block an Breite
benötigt. Eine einheitlichere Darstellung erreichen Sie mit Angaben zur Breite von Elementen
arbeiten, z.B. mit Angaben wie width:100% oder width:500px.
Einige der Effekte (z.B. groove) kommen nur zustande, wenn Sie eine Farbe angeben, die sich
von schwarz unterscheidet.
Mit border-top/bottom/left/right können auch die einzelnen Teile des Rahmens angesprochen
werden.
Innenabstände sind vor allem in Verbindung mit Rahmen, Hintergrundfarben und
Hintergrundbildern sinnvoll. Mit der hier beschriebenen Angabe können Sie den
Zwischenraum zwischen Elementinhalt und oberer Elementgrenze (sichtbar bei Rahmen,
Farben usw.) bestimmen.
<style type="text/css">
td { padding-top:3mm; }
th { padding-top:5mm; }
p.LinieOben { border-top:thin solid red; padding-top:5mm; }
</style>
Auch bei unterem Innenabstand und innerhalb von Tags:<p style="border-bottom:thick
groove silver; padding-bottom:10px;">Text</p>
STatt top kann auch left und right angesprochen werden oder der Innenabstand allgemein
definiert werden (padding:10px).
2.2 Grafik, Verweise und Cursor
Mit background-color: können Sie eine Hintergrundfarbe bestimmen. Oder ein
Hintergrundbild: <p style="background-image:url(back.gif);">Text</p>
Mit background-image:url([Dateiname]): können Sie eine Hintergrundgrafik bestimmen. Per
Voreinstellung wird die Hintergrundgrafik als Wallpaper (Tapetenmuster) wiederholt, so wie
bei der Angabe eines Hintergrundbildes im HTML-Tag <body>. . Sie können jedoch ein
anderes Verhalten erzwingen.
<style type="text/css">
body { background-image:url(back.gif); background-repeat:no-repeat; }
</style>
Oder auch:
repeat = wiederholen (Voreinstellung).
repeat-x = nur "eine Zeile lang" waagerecht wiederholen.
repeat-y = nur "eine Spalte lang" senkrecht wiederholen.
no-repeat = nicht wiederholen, nur als Einzelbild anzeigen.
Mit background-position: können Sie festlegen, wo die linke obere Ecke der
Hintergrundgrafik sein soll. Bezugspunkt ist das HTML-Element, für das die
Hintergrundgrafik definiert wird. Erlaubt sind entweder zwei numerische Werte, der erste für
den Abstand von links und der zweite für den Abstand von oben. Oder eine oder sinnvolle
Kombinationen der folgenden Angaben.
top = vertikal obenbündig.
center = horizontal zentriert.
middle = vertikal mittig.
bottom = vertikal untenbündig.
left = horizontal linksbündig.
right = horizontal rechtsbündig.
<style type="text/css">
body { background-image:url(back.gif); background-position:1cm 2cm; }
</style>
Sie können eine eigene geeignete Grafik als Bullet-Zeichen für Aufzählungslisten
bestimmen.Mit list-style-image:url([Dateiname]) können Sie eine Grafik für das eigene
Bulletzeichen angeben. Als Grafikdateitypen sollten Sie wie in HTML üblich GIF- oder JPGGrafiken benutzen.
<style type="text/css">
ul { list-style-image:url(point.gif) }
</style>
Sie können das Erscheinungsbild von Verweisen zu noch nicht besuchten Seiten, zu bereits
besuchten Seiten und zu Verweisen, die gerade angeklickt werden, bestimmen.
<style type="text/css">
a:link { color:#FF0000; font-weight:bold }
a:visited { color:#990000; }
a:active { color:#0000FF; font-style:italic }
</style>
Sie können für ein HTML-Element einen Cursor definieren. Wenn der Anwender mit der
Maus über die Fläche fährt, die das Element einnimmt, nimmt der Mauscursor die
angegebene Gestalt an.
<p style="cursor:hand; color:blue" onClick="window.location.href='datei2.htm'">Verweis,
der nicht unterstrichen ist</p>
Mit cursor: können Sie das Aussehen des Mauscursors für den Fall definieren, daß der
Anwender mit der Maus über den entsprechenden Bereich fährt. Folgende Angaben sind
erlaubt:
auto = automatischer Cursor (Normaleinstellung).
default = Plattformunabhängiger Standard-Cursor.
crosshair = Cursor in Form eines einfachen Fadankreuzes.
pointer = Cursor in Form eines Zeigers.
move = Cursor in Form eines Kreuzes, das die Fähigkeit zum Bewegen des Elements
signalisiert.
n-resize = Cursor in Form Pfeils, der nach oben zeigt (n = Norden).
ne-resize = Cursor in Form Pfeils, der nach rechts oben zeigt (ne = Nordost).
e-resize = Cursor in Form Pfeils, der nach rechts zeigt (e = Osten).
se-resize = Cursor in Form Pfeils, der nach rechts unten zeigt (se = Südost).
s-resize = Cursor in Form Pfeils, der nach unten zeigt (s = Süden).
sw-resize = Cursor in Form Pfeils, der nach links unten zeigt (sw = Südwest).
w-resize = Cursor in Form Pfeils, der nach links zeigt (w = Westen).
nw-resize = Cursor in Form Pfeils, der nach links oben zeigt (nw = Nordwest).
text = Cursor in einer Form, die normalen Text symbolisiert.
wait = Cursor in Form eines Symbols, das einen Wartezustand signalisiert.
help = Cursor in Form Symbols, das Hilfe zu dem Element signalisiert.
url([Datei]) = Beliebiger Cursor, [Datei] sollte eine GIF- oder JPG-Grafik sein.
2.3 Filter
Mit filter: können Sie einen Effekt-Filter bestimmen. Hinter dem Doppelpunkt folgt der
Aufruf eines Filters. Einige Filter erwarten Parameter, andere nicht. Die Parameter und Ihre
Wertangaben zu den Filtern notieren Sie in Klammern unmittelbar hinter dem Filternamen, so
wie im obigen Beispiel (strength=50) als Parameter an den Filter Blur übergeben wird. Wenn
ein Filter keine Parameter erwartet, notieren Sie trotzdem die Klammern, lassen den Inhalt
dazwischen aber leer.
<img src="grafik.gif" style="filter:Blur(strength=50)">
<img src="grafik.gif" style="filter:Blur(strength=50) FlipH();">
Sie können auch mehrere Filter kombinieren. Im zweiten der obigen Beispiele werden etwa
die beiden Filter Blur() und FlipH() kombiniert. Dazu dürfen Sie nur einmal das
Schlüssenwort filter: notieren. Zwischen diesem Schlüsselwort und dem nächsten Semikolon
(;) zum Abschließen der Style-Sheet-Angabe können Sie mehrere Filter notieren. Trennen Sie
die Filter durch ein Leerzeichen vor dem Namen des nächsten Filters, so wie im Beispiel vor
FlipH().
Die Filter sind für die folgenden HTML-Tags gedacht (bei anderen funktionieren sie nicht):
<body> (Effekt betrifft die gesamte angezeigte Seite)
<button> (Effekt betrifft die Schaltfläche)
<div> (Effekt betrifft den Bereich in Verbindung mit den Style-Sheet-Angaben width:
und/oder height: und/oder position:)
<img> (Effekt betrifft die referenzierte Grafik)
<input> (Effekt betrifft das Eingabefeld)
<marquee> (Effekt betrifft den Lauftext)
<span> (Effekt betrifft den Bereich in Verbindung mit den Style-Sheet-Angaben width:
und/oder height: und/oder position:)
<table> (Effekt betrifft die Tabelle)
<td> (Effekt betrifft die Datenzelle einer Tabelle)
<textarea> (Effekt betrifft das mehrzeilige Eingabefeld)
<tfoot> (Effekt betrifft den Fußbereich einer Tabelle)
<th> (Effekt betrifft die Kopfzelle einer Tabelle)
<thead> (Effekt betrifft den Kopfbereich einer Tabelle)
<tr> (Effekt betrifft die Zeile einer Tabelle)
2.3.1 Verschmelz Effekt
Mit diesem Filter können Sie Vordergrundelemente mit Hintergrundelementen farblich
verschmelzen. Der Filter erlaubt verschiedene Möglichkeiten, wie ein Vordergrundelement
aus seinem Hintergrund "heraustreten" kann.
Beispiel (Style-Sheet-Definition für HTML-Tag im Text):
<p style="background-image:url(back.jpg); padding:10pt;" align=center>
<img src="xdance1.gif" style="filter:Alpha(opacity=100, finishopacity=0, style=2)"
width=247 height=383>
</p>
Erläuterung:
Mit Alpha(): können Sie Vordergrundelemente und Hintergrundelemente ineinander
verschmelzen. Geeignet ist der Filter z.B. für Grafiken, die auf Hintergrundgrafiken
erscheinen. Dieser Filter erwartet folgende Parameter:
opacity=
Deckgrad am Urpsrung der Verschmelzung. Erlaubt sind Werte zwischen 0 und 100. Wert 0
bedeutet: vollkommen transparent (Hintergrund scheint voll durch), Wert 100 bedeutet:
vollkommen abdeckend (Hintergrund scheint nicht durch).
finishopacity=
Deckgrad am Ende der Verschmelzung. Erlaubt sind Werte zwischen 0 und 100. Wert 0
bedeutet: vollkommen transparent (Hintergrund scheint voll durch), Wert 100 bedeutet:
vollkommen abdeckend (Hintergrund scheint nicht durch).
style=
Art, in der der Filter wirkt. Erlaubt sind die Werte 0, 1, 2 und 3.
0 bedeutet: Hintergrund und Vordergrund werden farblich addiert. Das Vordergrundelement
wird farblich entsprechend manipuliert. Keine Verschmelzung. Angaben zu den anderen
Parametern sind in diesem Fall nicht erforderlich, d.h. Alpha(style=0) genügt.
1 bedeutet: linearer Verlauf von einem selbst definierbaren Anfangspunkt zu einem selbst
definierbaren Endpunkt. Am Anfangspunkt gilt der Wert, der bei opacity= angegeben wird.
Ab dem Endpunkt verliert der Wert für opacity= seinen Einfluß, und der Wert für
finishopacity= dominiert. Den Anfangspunkt bestimmen Sie durch startx= und starty=, den
Endpunkt durch finishx= und finishy=.
2 bedeutet: radialer (elliptischer) Verlauf von innen nach außen. Ganz innen gilt der
angegebene Wert für opacity=, ganz außen der angegebene Wert für finishopacity=. In diesem
Fall können Sie Angaben zu startx=, starty=, finishx= und finishy= weglassen, so wie im
obigen Beispiel.
3 bedeutet: rechteckiger Verlauf von innen nach außen. Ganz innen gilt der angegebene Wert
für opacity=, ganz außen der angegebene Wert für finishopacity=. In diesem Fall können Sie
Angaben zu startx=, starty=, finishx= und finishy= weglassen, so wie im obigen Beispiel.
startx=
Anfangspunkt in Pixel horizontal vom linken Rand des Vordergrundelements. Nur in
Verbindung mit style=1 von Bedeutung.
starty=
Anfangspunkt in Pixel vertikal vom oberen Rand des Vordergrundelements. Nur in
Verbindung mit style=1 von Bedeutung.
finishx=
Endpunkt in Pixel horizontal vom linken Rand des Vordergrundelements. Nur in Verbindung
mit style=1 von Bedeutung.
finishy=
Endpunkt in Pixel vertikal vom oberen Rand des Vordergrundelements. Nur in Verbindung
mit style=1 von Bedeutung.
2. Verwisch-Effekt
Dieser Filter erlaubt es, Grafiken in HTML mit Verwisch-Effekt
auszustatten.
Beispiel (Style-Sheet-Definition für HTML-Tag im Text):
<img src="grafik.jpg" style="filter:Blur(direction=45, strength=30)">
Mit Blur(): können Sie einen Verwisch-Effekt definieren. Geeignet ist
der Filter für Grafiken. Dieser Filter erwartet folgende Parameter:
add=
Diesen Parameter brauchen Sie nur anzugeben, wenn Sie add=0
notieren wollen. Dann erscheinen die Konturen der Grafik gar nicht
mehr, und am Bildschirm erscheint nur noch die Verwischspur. Der
Effekt wird dadurch sehr stark, die eigentliche Grafik ist oft nicht mehr
zu erkennen.
direction=
Mit diesem Parameter geben Sie die Richtung an, in die die
Verwischspur führt. Es wirkt dann so, als ob die Grafik aus dieser
Richtung kommt. Erlaubt sind die Werte 0, 45, 90, 135, 180, 225, 270,
315:
0 bedeutet: Die Verwischspur zeigt nach oben.
45 bedeutet: Die Verwischspur zeigt nach oben rechts.
90 bedeutet: Die Verwischspur zeigt nach rechts.
135 bedeutet: Die Verwischspur zeigt nach unten rechts.
180 bedeutet: Die Verwischspur zeigt nach unten.
225 bedeutet: Die Verwischspur zeigt nach unten links.
270 bedeutet: Die Verwischspur zeigt nach links.
315 bedeutet: Die Verwischspur zeigt nach oben links.
strength=
Mit diesem Parameter bestimmen Sie, wie stark der Verwisch-Effekt
sein soll. 0 bedeutet keinen Verwisch-Effekt, jeder höhere Wert die
Verwischspur in Pixeln. Beachten Sie jedoch, daß die Grafik innerhalb
ihrer normalen Bildgröße dargestellt wird. Verwischspuren von
Konturen, die sehr nah am Bildrand sind, werden nur bis zum Bildrand
gezogen.
3. Transparenzfarbe
Mit diesem Filter können Sie bei Grafiken eine Farbe als transparent
definieren. Anders als bei transparenten GIF-Grafiken werden jedoch
auch alle anderen Farben der Grafik betroffen.
Beispiel (Style-Sheet-Definition für HTML-Tag im Text):
<img src="grafik.gif" style="filter:Chroma(color=#FFFFCC)">
Mit Chroma(): können Sie eine Farbe in einer Grafik als transparent
definieren. Der Filter erwartet folgenden Parameter:
color=
Eine HTML-gerechte Hexadezimalangabe der Farbe, die als
transparent definiert werden soll (siehe Farben definieren in HTML).
4. Schattenwurf
Dieser Filter bewirkt einen Schatten-Effekt für alle Konturen eines
Elements. Bei Text sind bilden die Zeichen die Konturen, bei Grafiken
sollten Sie nur solche für den Filter benutzen, die eindeutige Konturen
haben, z.B. Cliparts.
Beispiel (Style-Sheet-Definition für HTML-Tag im Text):
<div style="width:100%; font-size:64pt; color:blue;
filter:DropShadow(color=#C0C0C0, offx=3, offy=3)">Text</div>
Mit DropShadow(): können Sie einen Schattenwurf erzwingen. Der
Filter erwartet folgende Parameter:
color=
Eine HTML-gerechte Hexadezimalangabe der Farbe, die als Schatten
definiert werden soll (siehe Farben definieren in HTML).
offx=
Anzahl für den Schatteneffekt horizontal in Pixeln. Positive Zahlen
bewirken einen Schatteneffekt rechts, negative mit Minuszeichen davor
einen Schatteneffekt links.
offy=
Anzahl für den Schatteneffekt vertikal in Pixeln. Positive Zahlen
bewirken einen Schatteneffekt unten, negative mit Minuszeichen davor
einen Schatteneffekt oben.
positive=
Diesen Parameter sollten Sie nur angeben, wenn Sie nur für die
transparenten Pixel einer Grafik (siehe transparenten GIF-Grafiken)
einen Schatteneffekt erzwingen wollen. Dazu sollte dieser Parameter
den Wert 1 erhalten.
Beachten Sie:
Für verlaufende Schatten können Sie den Filter für Schatten filter:Shadow() verwenden.
5. Horizontal spiegeln
Mit diesem Filter können Sie eine Grafik vertikal spiegelverkehrt
anzeigen.
Beispiel (Style-Sheet-Definition für HTML-Tag im Text):
<img src="grafik.gif" style="filter:FlipV()">
Mit FlipV(): bewirken Sie die vertikale Spiegelung. Geeignet ist der
Filter für Grafiken in HTML. Dieser Filter erwartet keine Parameter.
6. Glühender Rand
Dieser Filter bewirkt einen "Heiligenschein" um ein Text- oder
Grafikobjekt.
Beispiel (Style-Sheet-Definition für HTML-Tag im Text):
<div style="width:100%; font-size:100pt; color:000000;
filter:Glow(color=#0000FF, strength=10)">Text</div>
Mit Glow(): können Sie einen glühenden Rand definieren. Dieser Filter
erwartet folgende Parameter:
color=
Eine HTML-gerechte Hexadezimalangabe der Farbe, die als Glühfarbe
definiert werden soll (siehe Farben definieren in HTML).
strength=
Stärke der Wirkung. Erlaubt sind Werte zwischen 1 und 255,
praxisgerecht sind aber in den meisten Fällen nur Werte zwischen 1
und etwa 20.
7. Graustufen
Dieser Filter entfernt alle Farbinformationen aus einem Elment oder
einer Grafik und wandelt sie stattdessen in Graustufen um.
Beispiel (Style-Sheet-Definition für HTML-Tag im Text):
<img src="grafik.jpg" style="filter:Gray()">
Mit Gray(): können Sie Graustufen erzwingen. Geeignet ist der Filter
besonders für Grafiken. Dieser Filter erwartet keine Parameter.
8. Invertieren filter
Dieser Filter invertiert farbige Elemente und Grafiken. Alle Farben
werden bei der Anzeige in ihre Komplementärfarben verwandelt.
Beispiel (Style-Sheet-Definition für HTML-Tag im Text):
<img src="grafik.jpg" style="filter:Invert()">
Mit Invert(): können Sie invertieren. Geeignet ist der Filter besonders
für Grafiken. Dieser Filter erwartet keine Parameter.
9. Transparenzmaske
Dieser Filter ist für transparente GIF-Grafiken gedacht. Er ersetzt alle
transparenten Pixel der Grafik durch eine gewünschte Farbe und
stattdessen alle nicht-transparenten Pixel der Grafik durch die Farbe,
die in der Grafik als transparent definiert ist.
Beispiel (Style-Sheet-Definition für HTML-Tag im Text):
<img src="grafik.gif" style="filter:Mask(color=#FFFFCC)">
Mit Mask(): können Sie für eine transparente GIF-Grafik eine
Transparenzmaske definieren. Der Filter erwartet folgenden Parameter:
color=
Eine HTML-gerechte Hexadezimalangabe der Farbe, in der die Pixel
erscheinen sollen, die in der GIF-Grafik eigentlich als transparent
definiert sind (siehe Farben definieren in HTML).
10. Schatten
Dieser Filter bewirkt einen Verlaufsschatten um die Konturen eines
Elements.
Beispiel (Style-Sheet-Definition für HTML-Tag im Text):
<div style="width:100%; font-size:48pt; color:black;
filter:Shadow(color=#808080, direction=135)">Text</div>
Mit Shadow(): können Sie einen Schatten erzeugen. Dieser Filter
erwartet folgende Parameter:
color=
Eine HTML-gerechte Hexadezimalangabe der Schattenfarbe (siehe
Farben definieren in HTML).
direction=
Mit diesem Parameter geben Sie die Richtung an, in die der
Schatteneffekt führt. Erlaubt sind die Werte 0, 45, 90, 135, 180, 225,
270, 315:
0 bedeutet: Der Schatteneffekt zeigt nach oben.
45 bedeutet: Der Schatteneffekt zeigt nach oben rechts.
90 bedeutet: Der Schatteneffekt zeigt nach rechts.
135 bedeutet: Der Schatteneffekt zeigt nach unten rechts.
180 bedeutet: Der Schatteneffekt zeigt nach unten.
225 bedeutet: Der Schatteneffekt zeigt nach unten links.
270 bedeutet: Der Schatteneffekt zeigt nach links.
315 bedeutet: Der Schatteneffekt zeigt nach oben links.
11. Wellenartige Störung
Dieser Filter bewirkt eine wellenförmige Verzerrung des betroffenen
Text- oder Grafikobjekts.
Beispiel (Style-Sheet-Definition für HTML-Tag im Text):
<div style="width:100%; font-size:64pt; color:#FFCCFF;
filter:Wave(freq=5, light=20, phase=50, strength=6);">Text</div>
Mit Wave(): können Sie eine wellenartige Verzerrung definieren.
Dieser Filter erwartet folgende Parameter:
freq=
Die Wellenfrequenz. Je höher der Wert, desto kleiner die Wellen, je
niedriger, desto größer die einzelnen Wellen. Praxisnah sind etwa
Werte zwischen 5 und 50.
light=
Stärke des Lichts im Welleneffekt in Prozent. Werte zwischen 0 und
100.
phase=
Beginn der Sinus-Wellenphase in Prozent. Werte zwischen 0 und 100.
Bei 0 beginnt der Welleneffekt normal, bei 25 etwa beginnt er bei 90°.
strength=
Stärke des gesamten Effekts. Praxisnah sind z.B. Werte zwischen 1 und
10.
add=
Wenn der Effekt auf eine Grafik angewendet wird, bewirkt add=1, daß
die Originalgrafik zu der verzerrten Grafik hinzugefügt wird. Bei
add=0 wird die Originalgrafik nicht hinzugefügt.
12. Foto-Negativ-Effekt
Dieser Filter konvertiert alle Farben eines Elements oder einer Grafik in Graustufen und
bewirkt einen Effekt wie ein Foto-Negativ.
Beispiel (Style-Sheet-Definition für HTML-Tag im Text):
<img src="grafik.jpg" style="filter:XRay()">
Mit XRay(): können Sie den Foto-Negativ-Effekt erzwingen. Dieser Filter erwartet keine
Parameter.