CSS

CSS ist die Abkürzung für Cascading Style Sheets. In Freewar wird die Sprache CSS zum Erstellen von Styles benötigt.

Eine einweisende Erkläuterung für CSS schrieb Lady Biene und ist auch in Lady Bienes Forum zu finden.

Eine wikifizierte Form des Artikels ist auch hier zu finden:

Erläuterungen zu CSS

Bevor die einzelnen Bereiche näher erläutert werden zuerst einige grundlegende Worte zu CSS.

Die ganze Datei ist in verschiedene Bereiche aufgeteilt, wie man zum Beispiel hier im Bereich über die verschiedenen Hintergrundfarben sehen kann:

/* bgcolors */
.body { background-color: #FFFFFF; }
.divider { background-color: #555555; }
.outline { background-color: #999999; }
.menubg  { background-color: #F1F1F1; }

Es steht immer erst ein beschreibender Teil dort, welcher sagt, was da bestimmt wird. In den { } Klammern stehen die Eigenschaften des entsprechenden Bereiches. Eigenschaften können Farben, Hintergrund oder die Höhe eines Frames, auch Fenster genannt, sein. Alle Eigenschaften müssen durch ein Semikolon ( ; ) getrennt werden. Es ist darauf zu achten, dass die Eigenschaften richtig geschrieben, da sie sonst nicht erkannt werden. Es wird nur stur gelesen, was der Browser machen soll und wenn es falsch geschrieben ist, dann liest er das so, als ob da garnichts stünde.

Selektor {Eigenschaft : Wert}

Und was gibt es da nun für Eigenschaften?

Folgende Eigenschaften können verwendet werden:

• color: #FFFF00 -> die Farbe, die eine Schrift haben soll (ACHTUNG!: Das "#" darf nicht vor dem Zahlen-Code vergessen werden!)
• background-color: #0000FF -> die Hintergrundfarbe (ACHTUNG!: Das "#" darf nicht vor dem Zahlen-Code vergessen werden!)
• background-image: url(www.domain.de/meinwunschbild.jpg) ->fügt ein Bild als Hintergrund ein. Kann auch mit "background-color" verwendet werden, wenn das Bild nicht alles ausfüllt (ACHTUNG!: Bei der Url die Klammern nicht vergessen!)

Kann man Bilder auch im Frame verschieben bzw. ausrichten?

Ja, das ist möglich. Es gibt verschiedene Formatierungsmöglichkeiten:

• background-repeat: no-repeat lässt das Bild nicht wiederholen
• background-repeat: y-repeat wiederholt sich auf der y-achse -> also nach oben/unten
• background-repeat: x repeat wiederholt sich auf der x-achse -> also nach rechts/links [ist nötig für kleine Bilder, die nicht den ganzen Frame ausfüllen sollen, z.B. kleine Figuren]
• background-position: jetzt kann man verschiedene sachen eingeben zB. top(oben), bottom(unten), right(rechts), left(links) oder center(mittig). ->Dies ist dazu da, um ein Bild zu positionieren, z.B. um es rechts oben hinzusetzten gibt man "background-position: top right" ein.
• "background-color: transparent" -> damit kann man den Hintergrund transparent machen, man kann also hindurch sehen [wenn nichts weiter festgelegr ist, bleibt der Hintergrund schwarz. ist z.B. wichtig, wenn man den Teil, wo die Überschrift der Feldbeschreibung ist, das Hintergrundbild dort auch noch sehen will.]
• background-attachment : fixed -> ist dazu da, um das Hintergrundbild zu fixieren, nur nötig beim chattext