Hilfe:Stylesheets

Aus Stupidedia, der sinnfreien Enzyklopädie!
Wechseln zu: Navigation, Suche

Cascading Stylesheets (CSS) bieten eine Möglichkeit, das Layout von Seitenelementen zu verändern. Das geht von Text- und Hintergrundfarben über Schriftgrößen, -arten und -formatierungen bis zu Abständen und Elementausrichtung.

Werte zuweisen

Eine einzelne CSS-Definition entspricht folgendem Schema:
Eigenschaft: Wert;
Um beispielsweise die Textfarbe zu ändern, kann man folgende Definition nutzen:
color: green;

Das macht den Text grün.

Hier gibt es eine Liste mit in der Stupidedia oft verwendeten Definitionen. Eine umfangreichere Liste fast aller möglichen Eigenschaften gibt es auf SELFHTML, ebenso eine Liste mit möglichen Werten.

Stylesheets einsetzen

Es gibt mehrere Möglichkeiten, Stylesheets zu nutzen. Die Definitionen sehen in allen Fällen weitgehend gleich aus.

Ein Element direkt formatieren

Das ist die gebräuchlichste Methode. Dabei werden innerhalb des style-Attributs des jeweiligen Elements eine oder mehrere Definitionen notiert. Das könnte so aussehen:

<span style="Eigenschaft: Wert; Eigenschaft: Wert;">Beliebiger Text</span>

Nutzung einer CSS-Seite

Viele Benutzer legen sich persönliche CSS-Seiten an, um die Stupidedia global umzugestalten. Diese Änderungen wirken sich natürlich nur auf das eigene Benutzerkonto aus. Man kann sich eine CSS-Seite für alle Skins oder für einen bestimmten anlegen. Deine CSS-Seite für alle Skins liegt unter Benutzer:172.70.134.45/common.css, die für einzelne Skins jeweils unter Benutzer:172.70.134.45/skinname.css, z. B. Benutzer:172.70.134.45/vector.css.

Die Definitionen auf einer solchen Seite benötigen Selektoren (siehe Abschnitt weiter unten), da sie, anders als bei der Direktformatierung, sonst nicht mit einem Element assoziiert werden können. Das entspricht folgendem Schema:

Selektor,
Selektor {
    Eigenschaft: Wert;
    Eigenschaft: Wert;
    Eigenschaft: Wert;
}

Um z. B. die Textfarbe und den Hintergrund des Seiteninhalts zu ändern, kann man folgenden Code verwenden:

div#content {
    color: yellow;
    background: green;
}

Das macht den Text gelb und den Hintergrund grün.

Zusätzlich zu den persönlichen CSS-Seiten gibt es noch einige allgemeine, die allerdings nur von Diktatoren bearbeitet werden können, z. B. MediaWiki:Common.css.

Selektoren

Selektoren werden benötigt, um Definitionen Elementen zuzuweisen. Sie sind bei der Nutzung des style-Attributs irrelevant.

Im Folgenden werden die wichtigsten Selektoren aufgelistet:

  • elementname erfasst alle Elemente des angegebenen Typs, z. B. div-Elemente.
  • .klassenname selektiert alle Elemente einer bestimmten Klasse. Klassen werden im class-Attribut eines Elements notiert.
  • #id gilt für das Element mit der angegebenen ID, also das, dessen id-Attribut den Text hinter dem Doppelkreuz enthält. Jede ID darf nur ein einziges Mal vergeben werden.
  • :pseudoklasse erfasst Elemente anhand ihrer Eigenschaften. :hover z. B. gilt für alle Elemente, über die der Benutzer grad mit der Maus fährt. Siehe auch die SELFHTML-Seite zu Pseudoformaten.

Selektoren können kombiniert werden, um Elemente genauer ansprechen zu können. Folgendes Beispiel spricht ein div-Element mit der Klasse bla und der ID blubb an, das gerade mit der Maus berührt wird:

div.bla#blubb:hover

Ebenso ist es möglich, Leerzeichen zwischen Selektoren einzusetzen, um Elemente innerhalb anderer Elemente zu erfassen:

#mw-content-text a

Das gilt für alle a-Elemente (das sind Links, interne wie externe) innerhalb des Elements mit der ID mw-content-text (das ist der bearbeitbare Seiteninhalt).

Man kann Kommata einsetzen, um mehrere Selektorenkombinationen voneinander zu trennen, sodass die zugewiesenen Definitionen unabhängig für jede von ihnen gelten. Beispiel:

#mw-content-text a,
#mw-panel a {
    Eigenschaft: Wert;
    Eigenschaft: Wert;
    Eigenschaft: Wert;
}

Das lässt die Definitionen für alle Links innerhalb des Seiteninhalts und innerhalb der Sidebar greifen.

Weitere Selektoren werden auf dieser SELFHTML-Seite erklärt.

Siehe auch


Linktipps: Faditiva und 3DPresso