Hilfe:CSS

Hilfeseiten
Allgemein: Erste Schritte Auskunft Einstellungen Tipps und Tricks
Seitengestaltung Artikel VisualEditor Bearbeitungshilfe Neuen Artikel anlegen Links Trivia Zitate und Quellen Dateien Bilder Sprites Pokémon-Ids Videos Audio Vorlagen Übersicht Farben Formatvorlagen ParserFunctions Tabellen Toggle Variablen Variables Kategorien
Community: Diskussionsseiten Abstimmungen Signatur Benutzerseiten Benutzergruppen
Spezielles: CSS Versionen kontrollieren

CSS (Cascading Style Sheets)^⁠ ist eine Auszeichnungssprache, mit der das Design von Webseiten verändert werden kann. Mithilfe von CSS-Stylesheets hat jeder registrierte Benutzer die Möglichkeit, den in den Einstellungen ausgewählten Skin anzupassen.

Eigene CSS-Seite

Jeder Benutzer hat eine eigene Seite, auf der er CSS eingeben kann, das auf allen Seiten eingebunden wird. Diese hat folgenden Namen:
Meine Benutzerseite/common.css

Skinspezifisches CSS, beispielsweise für „PokeWiki“, würde unter Meine Benutzerseite/pokewiki.css angelegt werden. Wichtig ist, dass der Name des Skins komplett in Kleinbuchstaben geschrieben ist.

CSS-Syntax

Eine CSS-Anweisung ist folgendermaßen aufgebaut:
Objekt { zuweisung; }
Im Objekt wird festgelegt, worauf sich die Zuweisung bezieht, und die Zuweisung beinhaltet die style-Befehle, die dem Objekt zugewiesen werden sollen.

einfache Elemente

Um einen Text blau zu färben, schreibt man: <span style="color:blue;">Text</span>.
Dies kann man genau so gut auch mit CSS machen:
span { color:blue; }
Schreibt man nun in einem Artikel <span>Text</span>, wird dieser Text blau gefärbt. Bei diesem CSS-Beispiel ist span für das Objekt eingetragen worden, d. h. die Zuweisung bezieht sich auf den Text, der innerhalb von <span></span>-Tags steht. Als Zuweisung wurde nun eingetragen "color:blue;" also wird dem Objekt automatisch folgendes style-Attribut hinzugefügt: style="color:blue;". In der Zuweisung darf jedoch nur stehen, was sich bei einem normalen style-Attribut innerhalb der Anführungszeichen befindet. <span style="zuweisung;"></span> wäre in CSS also nur { zuweisung; }.

Der Nachteil bei diesem Beispiel ist, dass nun im ganzen Wiki alles blau dargestellt wird, was innerhalb von <span></span>-Tags steht, und nicht nur in dem Beispiel, in dem die blaue Farbe gewollt war.

class und id

Mit einer class- oder einer id-Zuweisung kann genauer ausgewählt werden, welchen Elementen die CSS-Anweisung zugewiesen werden soll.
<span class="blau">Text</span><span>Text</span>
Wenn man nun als Objekt nicht "span" nimmt, sondern nur den Teil auswählt, dem die class="blau" zugewiesen ist, wird auch nur dieser Teil gefärbt. Um dem Computer zu signalisieren, dass man eine class-Zuweisung als Objekt nimmt, muss man den Namen der class mit einem Punkt davor einsetzen:
.blau { color:blue; }
Jetzt wird nur das blau gefärbt, was innerhalb von <span class="blau"></span> steht.

Genauso wie mit class funktioniert es auch mit id (<span id="blau">Text</span>), der einzige Unterschied ist, dass für eine id als Signal ein Doppelkreuz (#) statt einem Punkt eingefügt werden muss:
#blau { color:blue; }

alle Zuweisungen

Generell kann jeder Text, dem ein style-Attribut hinzugefügt wird, als Objekt ausgewählt werden:
<span style="font-size:20px;">Text</span><span>Text</span> (das ergäbe TextText)
Auf den vergrößerten Text kann man nun folgendermaßen zugreifen: span[style="font-size:20px;"] { color:blue; }
Das funktioniert nicht nur mit style sondern auch mit allen anderen Attributen, d. h. eine class-Zuweisung .blau könnte auch mit [class="blau"] umschrieben werden.

Sonstiges

Man kann unterscheiden, ob eine class-Zuweisung in einem span- oder in einem div-Tag stattfindet:

span.blau { color:blue; }
div.blau { color:red; }

<span class="blau">Text1</span><div class="blau">Text2</div> ergibt dann Text1Text2.

Mehreren class-Attributen kann man dasselbe zuweisen mithilfe eines Kommas:
.blau, .blue { color:blue; } Jetzt macht es keinen Unterschied, ob man class="blau" oder class="blue" schreibt.

Um mehreren, ineinander verschachtelten Zuweisungen einzeln Attribute zuweisen zu können, gibt es Kombinatoren. Der einfachste Kombinator ist ein Leerzeichen. Dieses bedeutet, dass nur auf das Objekt zugegriffen wird, dem beide Attribute zugewiesen werden:
<div class="text"><div id="1">Text1</div></div><div class="text">Text2</div><div id="1">Text3</div>
.text #1 { color:blue; } färbt nur "Text1" blau. Bei einem Leerzeichen muss außerdem das zweite Objekt eine Zuweisung innerhalb des ersten Objekts sein, d. h. <div id="1"><div class="text">Text4</div></div> würde nicht eingefärbt werden.

Außerdem gibt es Zusätze, die weitere Zuweisungen ermöglichen:
.text:hover { zuweisung; } → Zuweisung findet nur statt, wenn sich der Mauszeiger über dem Objekt class="text" befindet.

Für eine vollständige Liste aller Möglichkeiten, ein Objekt auszuwählen, siehe hier^⁠.

Liste der Objekte

Hier werden einige Objekte aufgelistet, auf die man im PokéWiki mit CSS zugreifen kann. Um selbst herauszufinden, auf was man wie zugreifen kann, muss man sich den Quelltext der Seite anzeigen lassen (Rechtsklick → Seitenquelltext anzeigen / Quellcode anzeigen o.ä.)

body { zuweisung; } → kompletter Seitenhintergrund
#content { zuweisung; } → Artikelhintergrund
textarea { zuweisung; } → Bearbeitungsfenster

#p-navigation { zuweisung; } → Sidebar-Abschnitt Navigation
#p-search { zuweisung; } → Sidebar-Abschnitt Suche
#footer { zuweisung; } → Leiste ganz unten mit Copyright-Hinweisen etc.

.page-Hauptseite { zuweisung; } → Wird nur der Hauptseite zugewiesen

a { zuweisung; } → Links
a:visited { zuweisung; } → besuchte Links
a.new { zuweisung; } → Links auf noch nicht angelegte Seiten
a.external { zuweisung; } → Links auf externe Seiten

h1, h2, h3, h4, h5 { zuweisung; } → Überschriften in absteigender Ebene

.toc, #toc { zuweisung; } → Inhaltsverzeichnis

Beispiele

Hier werden nun verschiedene Beispiele beschrieben:

Hintergrund

Wikipedia-Symbol:

body { background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ec/Wikipedia-logo-v2-de.png);background-repeat:repeat; }

Ebenso können auch Gradienten als Hintergrund verwendet werden.

Letzte Änderungen

Mit diesem CSS werden die „Unterschied“-Links auf der Seite der letzten Änderungen durchgestrichen, die man bereits gesehen hat. Das eignet sich vor allem für diejenigen, die möglichst alle Änderungen mitverfolgen möchten.

.page-Spezial_Letzte_Änderungen #bodyContent li a:visited {
  color: #2222d0 !important;
}
.page-Spezial_Letzte_Änderungen #bodyContent li > a:first-child:visited {
  color: #7d7dff !important;
  font-size:96%;
  text-decoration:line-through;
}

So kann man Benutzer farblich besonders markieren:

.page-Spezial_Letzte_Änderungen a[title="Name des ersten Users"],
.page-Spezial_Letzte_Änderungen a[title="Name des zweiten Users"],
.page-Spezial_Letzte_Änderungen a[title="Name des dritten Users"],
[...]
.page-Spezial_Letzte_Änderungen a[title="Name des letzten Users"]
{
color: farbe;
}