SELFHTML Forums-Auslese CSSBasierend 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, daß 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>
|
Beachten Sie bitte, daß Netscape 4.x die Angabe a:hover nicht interpetiert.
 
|
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">
<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>
|
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> |
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.
Sie können noch Style Sheets-Angaben zu Schriftformatierung oder zu Hintergrundfarben und -bilder
der Formularelemente <input>, <select> oder <textarea> verwenden. Beachten Sie jedoch, daß 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 Schaffeneffekt 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>
|
Mit positinierten 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 betimmen welcher Text im Vordergrund stehen soll.
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 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 man einige Regeln beachtet, können solche Fehler von vornherein vermieden werden.
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, daß 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.
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)
z.B. 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.
z.B.: font-size:14pt;.
Eine andere Fehlerquelle sind vergessene Semikolons. Oft reagieren Browser auf nicht
nachvollziehbare Weise bei einem fehlenden Semikolon. So kann es sein, daß, was in dem einen
Browser als fehlerfrei erscheint, in dem anderen zu einer fehlerhaften Darstellung führt.
Schließen Sie deshalb eine definierte Style-Sheets-Angabe stets mit einem Semikolon (;) ab.
z.B.: p { font-size:14pt; color:#0000ff; }
|
| |
weiter: |
Seitenlayouts mit positionierten Bereichen
|
zurück: |
HTML - Sonstiges
|
das Redaktionsteam
