Style-Sheets

Style-Sheets

Style-Sheets werden von Netscape und Internet-Explorer ab der Version 4.0 unterstützt.
Leider aber nicht jedes Style-Sheet von beiden Brwosern.

Welcher Browser welche Styles unterstützt findet Ihr hier:
http://www.projectcool.com/develop/reference/css_style.html#font

Style-Sheets sind sehr nützlich, um einer Website ein einheitliches Aussehe zu geben.
Uebershriften, Links, Tabellen, Tags etc. könnnen definiert werden, und wo gewünscht in eine HTML-Datei eingefügt werden.
Wollen Änderungen vorgenommen werden, können diese am Style-Sheet gemacht werden, und wirken sich auf der ganzen Website aus, überall dort wo dieses Style-Sheet in eine Datei eingefügt wurde.

Eine weitere Eigenschaft ist, dass mit Style-Sheets Layers definiert werden können.
Layers sind Ebenen in diese Bilder, Tabellen, Text, etc, eigefügt und irgendwo possitioniert werden können.
Diese Layer können mit einem Event Handler gezeigt und auch wieder zum Verschwinden gebracht werden, oder sich auf unzählige Arten über den Bildschirm bewegen; dies wird als DHTML bezeichnet.

Möchten sie mehr über DHTML wissen, kann ich Ihnen folgenden Link empfehlen:
http://msdn.microsoft.com/workshop/c-frame.htm?937573312942#/workshop/author/default.asp

Ein Style-Sheet definieren

Frei wählbare Namen definieren
.Haupttitel {font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 14pt;
                    font-weight: bold;
                    color: #4C38A0;
                 }

Der Name Haupttittel ist frei wählbar. Wichtig ist, dass frei wählbare Style-Namen mit einem Punkt beginnen.
darauf foltgt die geschweifte Klammer, der zu definierende format-name, der Doppelpunkt und darauf die einzelenen Formatdefinitionen, mit einem Komme von einander abgetrennt.
Sie Sehen ein Style-Sheet, kann mehrere Formatdefinitionen beinhalten. Jede wird mit einem Strichpunkt von einanderabgetrennt. Das Style-Sheet wird mit einer geschweiften Klammer beendet.

Wichtig: Eine Style-definition sollte ohne Abstände geschrieben werden, da Netscape 4.0 Schwierigkeiten machen kann, wenn Abstände gebraucht werden. Also besser so:
.Haupttitel{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14pt;font-weight:bold;color:#000000;}

Ein "Tag" definieren
a { font-family: Arial, Helvetica, sans-serif }

Jedes beliebige "Tag" kann so definiert werden.
Noch ein Beispiel:
BODY {font-family:Arial,Helvetica,sans-serif; background-color:#FFFFCC;}

Damit kann die Body-Definition ganz einfach geändert werden, und wirkt sich auf alle Dokumente sofort aus, doch der "Body" darf dann natürlich in den einzelnen Dokuementen nicht noch zusätzlich definiert werden.

Es geschieht fast genau gleich, wie bei den frei wählbaren Namen, nur dass vor dem "tag" kein Punkt stehen darf.
Diese Styles-Sheets müssen jedoch nicht mehr zugewiesen werden, denn dies geschieht automatisch, überall dort, wo das entsprechende "Tag" vorkommt.
Hier bei <a href="...."> jedoch nur dann, wenn die Links nicht bereits im "Body" definiert wurden.

Style-Definitionen innerhalb einer HTML-Datei oder in einer seperaten CSS-Datei

Meines erachtens ist es nur sinnvoll mit Style-Sheets zu arbeiten, wenn diese in einer externen CSS-Datei abgelegt werden. Nur so wirken sich Änderungen auf alle Dokumente einer ganzen Website aus, und können daher einfach verändert werden.
So macht man es:

In irgend einem Text-Editor, definieren Sie ihre gewünschten Styles-Sheets, wie in den Beispielen oben, und speichern diese unter einem beliebigen Namen jedoch mit der Endung (.css)

Hier ein Beispiel style.css

Im HTML-Dokument erstellen Sie einen Link auf diese Datei:

Da es doch einmal vorkommen könnte, dass Sie innerhalb eines HTML-Dokumentes ein Style-Sheet definieren möchten;

So wird es gemacht:

Sie können dies im "Head" machen und das Style danach ganz gwöhnlich dem gewünschten Absatz zuweisen
<style type="text/css">

.Lauftext{font-family:Arial,Helvetica,sans-serif;font-size:10pt;color:#000000;font-weight:normal;}
< /style>

Sie können mehrere CSS-Dateien im Head improtieren, und zusätzlich lokale Style-Sheet definieren, jedoch darf nie zweimal der selbe Name oder das Selbe "Tag" definiert werden.

Das Style-Sheet zuweisen:

Das ist der Haupttittel

<p class="Haupttitel">Haupttittel</p>
<p> erzeugt einen Abstand

Das ist ein Haupttittel <span class="Haupttitel">Haupttittel</span>
<Span> erzeugt keinen Abstand

Das ist ein Haupttittel

<div class="Haupttitel">Haupttittel</div>
Mit <div> entsteht ein Zeilenumbruch

Es kann gesagt werden, dass class="...." jedem beliebigen "Tag" übergeben werden kann und dass das Stylesheet so lange auf einen Text-abschnitt wirkt, bis es mit dem End-Tag beendet wird. Diesem Textabschnitt hier, habe ich das Style-sheet "Lauftext" übergeben mit <p class="lauftext>
Mit <span class=".....l">"Tag"</span> kann ein neues Styles-sheet übergeben werden, ohne dass das zur Zeit aktive Style abgeschlossen werden muss.

Mehr Informationen zum arbeiten mit Styles-Sheets findet Ihr hier:

http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtmlrefs.asp
http://www.projectcool.com/simplenet/devframe.html
http://www.projectcool.com/develop/ Hilfeleistungen für alles Mögliche im Bereich Web-Gestaltung

erufer@bluewin.ch