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 geschwungenen 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 dort gar nichts 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. Die ersten beiden Stellen nach dem Nummernzeichen, das auf gar keinen Fall vergessen werden darf, steht für rot, die mittleren beiden geben die Menge des Grüns an und die letzten beiden Stellen die des Blaus. Angegeben werden können alle Zahlen von 0-9, so wie die Buchstaben A-F. Alternativ kann die Farbe auch mit color: rgb(250, 0, 0) angegeben werden. Hierbei gilt die Gleiche Reihenfolge wie im Hexadezimalcode (Rot-Grün-Gelb), jedoch dürfen hierbei nur Zahlen - von 0-255 - angegeben werden.
• background-color: #0000FF → die Hintergrundfarbe (siehe "color:")
• 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!)
• font-family: Arial → definiert Arial als Schrifttyp. In dieser Schriftart wird der Text ausgegeben. Falls eine Schriftart mit Leerzeichen gewählt wird, sollte der Name der Schriftart in Apostrophen stehen, z. B. font-family: 'Times New Roman')

Kann man Bilder auch im Frame verschieben oder ausrichten?

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

• background-repeat: no-repeat lässt das Bild nicht wiederholen
• background-repeat: repeat-y wiederholt das Bild auf der Y-Achse → also nach oben/unten
• background-repeat: repeat-x 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 z. B. 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 → hiermit kann man den Hintergrund transparent machen, man kann also hindurch sehen (wenn nichts weiter festgelegt ist, bleibt der Hintergrund schwarz. Ist beispielsweise wichtig, wenn man im 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

Weblinks

Selfhtml - Für genauere Beschreibungen und weitere Eigenschaften