Mega Man Wiki

CSS bedeutet ausgeschrieben „Cascading Stylesheets“. Diese Stylesheets sind der Standard, wenn es darum geht HTML oder auch XML optisch aufzuwerten. Im folgenden ein kleiner Crashkurs der helfen soll, CSS besser zu verstehen und auch anzuwenden.

Hinweis: CSS sollte nach Möglichkeit nur in Tabellen verwendet werden. Im Fließtext ist es, ich sagmal unerwünscht, da das Nachbearbeiten durch dritte schwerer fallen kann, wenn derjenige nicht über ausreichende Kenntnisse in CSS verfügt.

2. Hinweis: CSS ist ein zweischneidiges Schwert. Zwar kann man damit eine Menge gestalten, jedoch kann es passieren das die verschiedenen Browser CSS anders darstellen als wiederum andere Browser. Dies soll euch aber nicht davon abhalten herumzu experimentieren, denn für den Fall der Fälle gibts ja ganz unten schöne Verweise wo CSS mit allen Ecken und Kanten erklärt wird ;)

Grundlegende Syntax[]

  style=""

Erläuterung: damit sagen wir Wiki, hey, pass auf! Jetzt beginnt ein CSS-Bereich! Der Bereich an sich ist zwischen den beiden ". Dort kommen dann später unsere Anweisungen hin.


In einer Tabelle sieht das dann so aus:

  {| style=""
  | 1 || 2 || 3
  |-
  | 4 || 5 || 6
  |}

Erläuterung: Indem man das style in der selben Zeile wie das Beginne Tabelle-Zeichen schreibt spricht man demzufolge die ganze Tabelle an.

  {| style="background-color: black;"       // background-color-> damit sagen wir: Hintergrundfarbe des Elementes ändern wo das style steht, hier also
  | 1 || 2 || 3                             // die ganze Tabelle in ''black'', also in schwarz einfärben  
  |-
  | 4 || 5 || 6
  |}

Ergebnis:

1 2 3
4 5 6

Das ist jetzt allerdings ein bisschen blöd, wir sehen ja die Schrift nicht mehr, also, müssen wir die Schriftfarbe auch noch ändern, ich dachte da mal an ein schönes Rot:

  {| style="background-color: black; color: red;"       // color-> damit sagen wir: Schriftfarbe des Elementes ändern wo das style steht; 
  | 1 || 2 || 3                                         // red steht für rot     
  |-
  | 4 || 5 || 6
  |}

und voilà:

1 2 3
4 5 6

und wem rot nicht gefällt, dasselbe mit gelb (Syntax: style="background-color: black; color: yellow;")

1 2 3
4 5 6

Farben[]

Mögliche Farben für Schrift und Hintergund wären beispielsweise:

Name für CSS/ engl. -> ergibt diese Farbe
red rot
orange orange
yellow gelb
green grün
blue blau
violet violett
purple lila
gray grau
black schwarz
white weiß

Die Farben können statt über einen Namen auch über den Hex-Code angesprochen werden. Ihr werdet in den Artikeln häufiger Angaben finden wie diese hier: #f1f1f1. Das lässt sich schnell und einfach erklären: Alle vom Computer darstellbarem Farben befinden sich zwischen den Werten #000000 und #ffffff, wobei #000000 für schwarz steht und #ffffff demzu Folge für weiß. Alle anderen Farben liegen dazwischen.

Der Hex- Code aufgeschlüsselt:

# ff ff ff
bestimmt den Rot- Anteil bestimmt den Grün- Anteil bestimmt den Blau- Anteil

also:

  • wird die Angabe #ff0000 zu
    rot
  • wird die Angabe #00ff00 zu
    grün
  • wird die Angabe #0000ff zu
    blau

Quelltext:

also:
* wird die Angabe #ff0000 zu <div style="color: #ff0000">rot</div>
* wird die Angabe #00ff00 zu <div style="color: #00ff00">grün</div>
* wird die Angabe #0000ff zu <div style="color: #0000ff">blau</div>

Auf diese Art und Weise kann man nun auch Breite, Höhe, Schriftgröße, Rahmenarten und lauter solche Kleinigkeiten festlegen. Im folgenden nun einige Beispiele:

Beispiele[]

Angegeben sind zuerst die Wikisyntax und danach wie diese im fertigen Artikel aussieht. Die Syntax kann frei kopiert und verwendet werden.

Farbe und Hintergrundfarbe einer Tabelle ändern[]

{| style="background-color: black; color: white"
| Name || Rang || Bedeutung
|-
| Gabriel || Erzengel || Bote Gottes
|-
| Michael || Erzengel || Kämpfer Gottes
|}
Name Rang Bedeutung
Gabriel Erzengel Bote Gottes
Michael Erzengel Kämpfer Gottes

Farbe und Hintergrundfarbe einer Zeile ändern[]

  {|
  | Name || Rang || Bedeutung
  |- style="background-color: black; color: white"
  | Gabriel || Erzengel || Bote Gottes
  |- 
  | Michael || Erzengel || Kämpfer Gottes
  |}
Name Rang Bedeutung
Gabriel Erzengel Bote Gottes
Michael Erzengel Kämpfer Gottes

Abstände zwischen Spalten entfernen[]

Hinweis: cellpadding und cellspacing sind HTML- Elemente; nur mal gesagt um Verwechslungen auszuschließen

{| cellpadding="0" cellspacing="0"
| Name || Rang || Bedeutung
|- style="background-color: black; color: white"
| Gabriel || Erzengel || Bote Gottes
|- 
| Michael || Erzengel || Kämpfer Gottes
|}
Name Rang Bedeutung
Gabriel Erzengel Bote Gottes
Michael Erzengel Kämpfer Gottes

Die Spalten breiter machen[]

{| cellpadding="0" cellspacing="0"
| style="width: 200px;" | Name || style="width: 200px;" | Rang || style="width: 200px;" | Bedeutung
|- style="background-color: black; color: white"
| Gabriel || Erzengel || Bote Gottes
|- 
| Michael || Erzengel || Kämpfer Gottes
|}
Name Rang Bedeutung
Gabriel Erzengel Bote Gottes
Michael Erzengel Kämpfer Gottes

Text ausrichten[]

Hinweis: padding richtet den Text nach allen Richtungen (oben, unten, links und rechts) aus. Soll nur zu einer Richtung der Abstand ausgerichtet werden, so gibt es diese Formen von padding: padding-left, padding-right, padding-top, padding-bottom

{| cellpadding="0" cellspacing="0"
| style="width: 200px; padding: 10px;" | Name || style="width: 200px;" | Rang || Bedeutung
|- style="background-color: black; color: white"
| style="padding: 10px;" | Gabriel || Erzengel || Bote Gottes
|- 
| style="padding: 10px;" | Michael || Erzengel || Kämpfer Gottes
|}
Name Rang Bedeutung
Gabriel Erzengel Bote Gottes
Michael Erzengel Kämpfer Gottes

Schriftgröße ändern[]

{| cellpadding="0" cellspacing="0" style="font-size: 9px;"
| style="width: 200px; padding: 10px;" | Name || style="width: 200px;" | Rang || Bedeutung
|- style="background-color: black; color: white"
| style="padding: 10px;" | Gabriel || Erzengel || Bote Gottes
|- 
| style="padding: 10px;" | Michael || Erzengel || Kämpfer Gottes
|}
Name Rang Bedeutung
Gabriel Erzengel Bote Gottes
Michael Erzengel Kämpfer Gottes

Außenabstand der Tabelle zum Rand ändern/ Ausrichtung der Tabelle[]

Hinweis: margin ist das Gegenteil von padding und bestimmt den Abstand eines Bereiches (hier eine Tabelle) zum Rand von anderen Elementen.
Für einen Außenabstand in nur eine Richtung existieren wie bei padding auch: margin-right, margin-left, magin-top, margin-bottom

{| style="margin: 50px;" cellpadding="0" cellspacing="0"
| style="width: 200px; padding: 10px;" | Name || style="width: 200px;" | Rang || Bedeutung
|- style="background-color: black; color: white"
| style="padding: 10px;" | Gabriel || Erzengel || Bote Gottes
|- 
| style="padding: 10px;" | Michael || Erzengel || Kämpfer Gottes
|}
Name Rang Bedeutung
Gabriel Erzengel Bote Gottes
Michael Erzengel Kämpfer Gottes

Rahmenart ändern[]

Hinweis: border-style ändert den gesamten Rahmen der Tabelle außenherum, möchte man nur den untersten Rahmen der ersten Zeile ändern so schreibt man:

{| style="border-style: inset;" cellpadding="0" cellspacing="0"
| style="width: 200px; padding: 10px;" | Name || style="width: 200px;" | Rang || Bedeutung
|- style="background-color: black; color: white"
| style="padding: 10px; border-bottom-style: double;" | Gabriel || style="border-bottom-style: double;" | Erzengel || style="border-bottom-style: double;" | Bote Gottes
|- 
| style="padding: 10px;" | Michael || Erzengel || Kämpfer Gottes
|}
Name Rang Bedeutung
Gabriel Erzengel Bote Gottes
Michael Erzengel Kämpfer Gottes

Rahmebreite ändern[]

{| style="border-style: inset; border-width: 5px;" cellpadding="0" cellspacing="0"
| style="width: 200px; padding: 10px;" | Name || style="width: 200px;" | Rang || Bedeutung
|- style="background-color: black; color: white"
| style="padding: 10px; border-bottom-style: double;" | Gabriel || style="border-bottom-style: double;" | Erzengel || 
style="border-bottom-style: double;" | Bote Gottes
|- 
| style="padding: 10px;" | Michael || Erzengel || Kämpfer Gottes
|}
Name Rang Bedeutung
Gabriel Erzengel Bote Gottes
Michael Erzengel Kämpfer Gottes

Kurzform zum Rahmen ändern[]

über den Stylesheet "border" kann man schnell alle Werte für einen Rahmen festlegen, und zwar so: "border: 2px solid red" -> "Rahmen: Breitenangabe(In Alle Richtungen) Rahmenart(solid, double, dashed, ...) Farbe"

{| style="border: 1px solid red" cellpadding="0" cellspacing="0"
| style="width: 200px; padding: 10px;" | Name || style="width: 200px;" | Rang || Bedeutung
|- style="background-color: black; color: white"
| style="padding: 10px; border-bottom-style: double;" | Gabriel || style="border-bottom-style: double;" | Erzengel || 
style="border-bottom-style: double;" | Bote Gottes
|- 
| style="padding: 10px;" | Michael || Erzengel || Kämpfer Gottes
|}
Name Rang Bedeutung
Gabriel Erzengel

style="border-bottom-style: double;" | Bote Gottes

Michael Erzengel Kämpfer Gottes


Möchte man nun differenzieren, also eben nur den oberen Rahmen Teil ändern, so würde das folgendermaßen aussehen:


{| style="border-top: 1px solid red" cellpadding="0" cellspacing="0"
| style="width: 200px; padding: 10px;" | Name || style="width: 200px;" | Rang || Bedeutung
|- style="background-color: black; color: white"
| style="padding: 10px; border-bottom-style: double;" | Gabriel || style="border-bottom-style: double;" | Erzengel || 
style="border-bottom-style: double;" | Bote Gottes
|- 
| style="padding: 10px;" | Michael || Erzengel || Kämpfer Gottes
|}
Name Rang Bedeutung
Gabriel Erzengel

style="border-bottom-style: double;" | Bote Gottes

Michael Erzengel Kämpfer Gottes

Die Stylesheets für die Rahmen lauten wie folgt:

  • oberer Tabellen- oder Spaltenrahmen: border-top
  • rechter Tabellen- oder Spaltenrahmen: border-right
  • unterer Tabellen- oder Spaltenrahmen: border-bottom
  • linker Tabellen- oder Spaltenrahmen: border-left

"umfließen" von Text[]

Viele Vorlagen und auch die Bilder bieten diese Möglichkeit an. Bei einem Bild bestimmt das Wort right bzw. left ob das Element rechts bzw. links von Text "umflossen" werden soll. (Siehe Hierzu: Hilfe:Formatieren#Einbinden_von_Bildern)

Eine Wiki- Tabelle würde normalerweise einen Absatz erzeugen und der Text danach unterhalb der Tabelle fortgeführt werden.

{| border
| 1 || 2 
|-
| 3 || 4
|} Text Text Text

Ergebnis:

1 2
3 4

Text Text Text

Weisen wir der Tabelle aber folgenden Stylesheet zu, so umfließt der Text die Tabelle in der entgegengesetzten Richtung. In folgendem Falle also umfließt der Text die Tabelle von rechts.

{| border style="float: left;"
| 1 || 2 
|-
| 3 || 4
|} Text Text Text

Ergebnis:

1 2
3 4

Text Text Text


Soll dieses sogenannte umfließen aufhören wird ein <br style="clear: left"> benutzt.
Für ein Element das links umflossen wird, gilt logischweise ein <br style="clear: right">
Sollten nun mehrere Elemente vorhanden sein, die jeweils einmal links und einmal rechts von Text umflossen werden, so wird ein <br style="clear: both"> benutzt.

Verweise[]

  • selfhtml - Die Referenz für Script (JavaScript)-, Auszeichnungs (HTML)- und Formatierungs (CSS)- Sprachen schlechthin. Für Modem- oder ISDN- Benutzer steht die Referenz zum download jederzeit bereit: Zum Download (8,4 MB)
  • css4you - eine sehr gute CSS- Referenz mit zusätzlichen Tipps/ Tricks und Beispielen. Auch hier steht die Referenz zum download bereit: Zum Download (1,2 MB)