Basierend auf einem Forums-Beitrag vom 05.September.1998, von:
Stefan Muenz, muenz@csi.com
Sie möchten für Links verschiedene Farben verwenden. Aber Sie möchten auch, dass bereits
besuchte Links immer die gleiche Farbe aufweisen. Mit Verwendung von CSS Klassen-Angaben
können Sie dies verwirklichen.
Im Dateikopf:
<style type="text/css">
<!--
a.type_1:link { color:#FF0000; }
a.type_2:link { color:#FF00FF; }
a.type_1:visited { color:#009900; }
a.type_2:visited { color:#009900; }
a.type_1:hover { color:#006600; }
a.type_2:hover { color:#006600; }
-->
</style>
Und in den Verweisen:
<a class="type_1" href="...">Verweis</a>
<a class="type_2" href="...">Verweis</a>
|
Hinweis
Beachten Sie bitte, dass Netscape 4.x die Angabe a:hover
nicht interpretiert.
Basierend auf einem Forums-Beitrag vom 26.August.1998 von:
Andrea Weissenseel, andrea.weissenseel@start.de
Sie verwenden in Ihren Seiten Formularfelder, die Sie farbig an Ihre Bedürfnisse anpassen
möchten. Unter Netscape erscheint jedoch um die Radiobuttons und Checkboxen statt die gewählte
Hintergrundfarbe die Farbe, die Sie für <body> definiert haben. Um dieses Problem zu umgehen,
können Sie für das <input> -Tag Style Sheets Angaben zur Hintergrundfarbe verwenden.
<style type="text/css">
<!--
input { background-color:#c0c0c0 }
-->
</style>
<body bgcolor="black">
<form method="POST" action="...">
<table bgcolor="#c0c0c0">
<tr>
<td align="right">Sind Sie:</td>
<td><input type="radio" name="Geschlecht" value="Mann"> ein Mann?</td>
<td><input type="radio" name="Geschlecht" checked value="Frau"> eine Frau?</td>
</tr><tr>
<td align="right">Sie mögen:</td>
<td><input type="checkbox" name="Vorliebe" checked value="Urlaub">Urlaub</td>
<td><input type="checkbox" name="Vorliebe" value="Geld">Geld</td>
</tr>
</table>
</form>
</body>
|
Erläuterung
Das Beispiel zeigt auch, wie Sie mit Hilfe einer 
blinden Tabelle Beschriftung und Eingabefelder eines
Formulars ordentlich formatieren können.
Basierend auf einem Forums-Beitrag vom 25.August.1998 von:
Stefan Muenz, muenz@csi.com
Mit Hilfe von style="..." -Angaben können sie die Breite und Höhe von Formularelementen
festlegen. Da Netscape diese Angaben jedoch nicht interpretiert, müssen Sie die Attribute
width= und height= im <input> -Tag notieren.
<input size="40" width="200" style="width:200px;">
<select width="150" style="width:150px;">
<textarea cols="40" rows="10" width="250" style="width:250px;"></textarea>
|
Erklärung
Die Angaben zu size und cols sind für Netscape 3 und andere alte Browser gedacht. width= und
height= sind HTML-Syntax nach Netscape 4. Die style="..."-Angaben werden vom Internet Explorer
interpretiert.
Hinweis
Sie können noch Style Sheets-Angaben zu Schriftformatierung oder zu Hintergrundfarben und -bilder
bei den Formularelementen <input>, <select> oder <textarea> verwenden. Beachten Sie jedoch, dass diese
Angaben teilweise bisher nur vom Internet Explorer ab Version 4 unterstützt werden.
Basierend auf einem Beitrag von:
Thomas J. Sebestyen, a9105535@unet.univie.ac.at
Wie man die Höhe und Breite von Klickbuttons festlegen kann, können Sie unter dem Beitrag
Breite und Höhe von Formularfeldern festlegen nachlesen.
Basierend auf einem Forums-Beitrag vom 18.Dezember.1998 von:
Thomas J.Sebestyen, a9105535@unet.univie.ac.at
Mit Style Sheets-Angaben zur Schriftformatierung, können Sie den Text für
Listeneinträge <li> definieren. Da Netscape die Angaben für <li> jedoch nur auf die
Aufzählungszeichen (Bullet) oder auf die alphabetischen bzw. metrischen Numerierungszeichen
anwendet, müssen Sie diese Angaben für die Listenart definieren.
ol { font-family:Arial; font-size:12pt; color:#008000; }
<ol>
<li>grün</li>
<li>grüner</li>
<li>am grünsten</li>
</ol>
|
Basierend auf einem Forums-Beitrag vom 16.und 17.Dezember.1998 von:
Peter Rampitsch, peter.rampitsch@young-world.com
Thomas J.Sebestyen, a9105535@unet.univie.ac.at
André Laugks, Andre.Laugks@netcologne.de
Sebastian Martschat, sebhm@aol.com
Schatteneffekte sind ein beliebtes Stylemittel bei Logos oder bei Überschriften. Das Beispiel zeigt, wie
Sie einen Schatteneffekt für einen beliebigen Text erstellen können.
<style type="text/css">
<!--
#front { position:absolute; top:10px; left:10px; width:300px; z-index:2; color:#000080; }
#shadow { position:absolute; top:8px; left:13px; width:300px; z-index:1; color:#b0c4de; }
.hallo { font-family:Arial; font-size:36pt; }
-->
</style>
<body>
<div id="front" class="hallo">Hallo Welt</div>
<div id="shadow" class="hallo">Hallo Welt</div>
</body>
|
Erklärung
Mit positionierten Bereichen lässt sich ein Schatteneffekt erzielen, wenn Sie den gleichen Text in einem
<div>-Bereich, wie im Beispiel, zwei Pixel weiter oben und drei Pixel weiter rechts positionieren. Mit der Angabe zu
z-index:; können Sie dann bestimmen welcher Text im Vordergrund stehen soll.
Weitere Möglichkeiten
Eine andere Möglichkeit, Schatteneffekte für Text zu erzeugen, wird in SELFHTML im Kapitel
Style-Sheet-Angaben: Schriftformatierung beschrieben. Jedoch wird der Befehl text-shadow:, der
zur Version 2.0 der CSS Style-Sheets gehört, weder von Netscape noch vom MS Internet Explorer in den Versionen 4.x interpretiert.
Die weiteren, in SELFHTML unter Style-Sheet-Angaben: Cursor und Microsoft-Spezialfilter
gezeigten Möglichkeiten werden nur vom Internet Explorer 4.x interpretiert.
Wie Sie um Grafiken einen Schatteneffekt erzeugen können, erfahren Sie im Forum-Auslesebeitrag Schatteneffekte für Grafiken erzeugen.
Basierend auf SELFHTML vom 27.04.1998 von:
Stefan Münz, muenz@csi.com
Wenn Sie erreichen möchten, dass Verweise nicht mehr unterstrichen erscheinen, notieren Sie für das <a>
Tag die folgende CSS-Angabe
in Ihren globalen CSS-Anweisungen:
a {
text-decoration:none;
}
direkt im <a> Tag (z.B. für einzelne Verweise):
<a href="[Verweisziel]" style="text-decoration:none;"> nicht unterstrichener Verweistext</a>
|
Basierend auf einem Forums-Beitrag von:
Thomas J.S., a9105535@unet.univie.ac.at
Sollten Sie aus gestalterischen Gründen ein leeres, farbig hinterlegtes Rechteck erzeugen wollen, können Sie sich folgender CSS-Anweisungen bedienen:
Im Dateikopf:
<style type="text/css">
<!--
#farbe {
position:relative;
width:200px;
height:200px;
background-color:#339900;
layer-background-color:#339900;
border:none;
}
-->
</style>
In der Datei:
<div id="farbe"></div>
|
Hinweise:
Bitte beachten Sie, dass die im Beispiel verwendete Angabe layer-background-color:#339900; nur von Netscape 4.x interpretiert
wird und nicht zum 
offiziellen CSS Standard des W3-Konsortiums gehört.
Basierend auf einem Forums-Beitrag von:
Thomas J.S., a9105535@unet.univie.ac.at
Mit Hilfe des folgenden Quellcodes können Sie um eine Tabelle einen Rahmen legen (im Beispiel beträgt die Rahmendicke 1 Pixel):
<html>
<head>
<title>Tabelle mit Rahmen</title>
<style type="text/css">
<!--
.rahmen {
width:400px;
border:solid 1px #ff0000;
}
-->
</style>
</head>
<body>
<div class="rahmen">
<table border="0" cellpadding="0" cellspacing="0" width="400">
<tr>
<td>Tabelleninhalt</td>
<td>Tabelleninhalt</td>
<td>Tabelleninhalt</td>
</tr>
</table>
</div>
</body>
</html>
|
Erklärung
Damit sowohl der Internet Explorer ab Version 4.x als auch Netscape 4.x den Rahmen gleich breit zieht, müssen Sie für das
<div> Element und für die darin enthaltene Tabelle die selbe Breite angeben (im Beispiel width:400px;).
Die Rahmendicke legen Sie mit der Anweisung border:solid Xpx #ff0000; fest (ersetzen Sie Xpx durch die gewünschte Pixel-Breite, z.B. 5px).
Im SELFHTML-Kapitel Rahmen und Innenabstände finden Sie weitere Angaben
zur Gestaltung von Rahmen.
Diese Konstruktion können Sie auch anwenden, wenn sie eine Tabelle absolut positionieren möchten. Wie sich ein <div> Element absolut
positionieren lässt, können Sie im SELFHTML-Abschnitt Elemente positionieren nachlesen.
Hinweis
Es ist auch möglich, einen Rahmen für die Tabelle ohne den umgebenden <div> Bereich zu erstellen. Dazu notieren Sie die folgende
Angaben in Ihrem Style-Sheet:
table {
border-collapse:collapse;
border-width:1px;
border-style:solid;
border-color:#ff0000;
}
|
Bitte beachten Sie jedoch, dass diese Angaben bisher nur vom Internet Explorer ab Version 4.x interpretiert werden
Basierend auf einem Forums-Beitrag vom 12.4.1999 von:
Boris Hoeller, bho@bonnanwalt.de
Der Internet Explorer und der Netscape Navigator interpretieren relative Pfadangaben innerhalb von CSS-Anweisungen unterschiedlich. Wenn Sie auf Ihrem Server mehrere Verzeichnisse haben und in einer separaten CSS-Datei
ein Hintergrundbild definiert haben, kann es vorkommen, dass dieses in dem einen Browser angezeigt wird, in dem anderen aber nicht.
Dieses Problem können Sie umgehen, in dem Sie anstelle einer relativen eine absolute Pfadangabe verwenden.
body {
background-image:url('http://www.ihrdomain.de/verzeichniss/image.gif');
}
|
Basierend auf einem Forums-Beitrag vom 24.03.1999 von:
Stefan Einspender, stefan.einspender@gmx.net
und 03.05.1999 von:
Thomas J.S., a9105535@unet.univie.ac.at
CSS-Anweisungen für das <a> Tag erfordern eine bestimmte Reihenfolge:
a:link { color:#336600; }
a:visited { color:#0000cc; }
a:hover { color:#ff6600; }
a:active { color:#ff3399; }
|
Erklärung
Die Anweisung a:hover muss nach den Angaben a:link und a:visited notiert werden, da diese sonst die für a:hover definierten Eigenschaften überlagern. Dies gilt auch für a:active, da diese als letzte der Angaben ausgeführt wird (nämlich
dann, wenn der Link angeklickt wird).
Basierend auf einem Beitrag von:
Thomas J. Sebestyen, a9105535@unet.univie.ac.at
Im Vergleich zu HTML gibt es bei der Notierung von Style-Sheets-Angaben Unterschiede. Diese
unterschiedliche Notierungsweise ist ein Quelle vieler, aber leicht vermeidbarer Fehler.
Wenn Sie einige Regeln beachten, können Sie solche Fehler von vornherein vermeiden.
Unter Netscape werden keine Style-Sheets-Angaben angezeigt:
- Sie benützen einen Netscape Browser der Generation 3 oder älter. Netscape interpretiert
Style-Sheets-Angaben erst ab Version 4.
- JavaScript oder Style-Sheets ist in ihrem Netscape Browser deaktiviert. Netscape in den
Versionen 4.x kann bei ausgeschaltetem JavaScript die Style-Sheets-Angaben nicht darstellen.
Die Style-Sheets-Angaben werden nur teilweise oder fehlerhaft dargestellt:
- Wenn Sie HTML-Elemente mit Style-Sheets formatieren, ist es wichtig, dass Sie auf saubere
Kodierung der HTML-Tags achten. Es ist notwendig, alle geöffneten Tags zu schließen, auch wenn das abschließende Tag laut der
zur Zeit gültigen HTML 4.0 Spezifikation optional ist. So
sollten Sie z.B. alle <p>, <td> und <li> -Tags schließen.
Vergleich HTML-/CSS-Angaben:
- Manche Style-Sheets-Angaben haben eine Entsprechung unter den HTML-Tags. Aber anders als
bei der Notierung von Attributen in HTML-Tags, wo ein = (ist gleich Zeichen) verwendet wird,
benützt man in Style-Sheets stattdessen einen : (Doppelpunkt). Zum Beispiel entspricht die HTML-Angabe: color="#000000" der Style-Sheets-Angabe: color:#000000 .
Worauf Sie beim Setzen von Leerzeichen in den Style-Sheets-Angaben achten sollten:
- Es ist möglich, Angaben wie folgt zu notieren: font-size : 14pt; , font-size :14pt; oder
font-size:14pt; , aber es ist falsch, ein Leerzeichen zwischen einer metrischen Angabe und deren
Wert zu setzen: font-size:14 pt;. Um aus solch fehlerhafter Notierung entstehenden Fehlern
vorzubeugen, ist es sinnvoll, wenn Sie die Angaben ohne Leerzeichen notieren. Beispiel: font-size:14pt;.
Weitere Hinweise:
- Eine andere Fehlerquelle sind vergessene Semikolons. Oft reagieren Browser auf nicht
nachvollziehbare Weise bei einem fehlenden Semikolon. Das, was in dem einen
Browser als fehlerfrei erscheint, kann in dem anderen zu einer fehlerhaften Darstellung führen.
Schließen Sie deshalb eine definierte Style-Sheets-Angabe stets mit einem Semikolon (;) ab. Beispiel: p { font-size:14pt; color:#0000ff; }
- Schriftnamen, die mindestens ein Leerzeichen enthalten (Beispiel: Courier New), sollten stets zwischen Anführungszeichen notiert werden: font-family:"Courier New";.
© 2000 das Redaktionsteam
SELFHTML 
Verschiedene Farben für Verweise (Links)
Nicht unterstrichene Links 
Allgemeine Hinweise und oft begangene Fehler
