Hilfe:Stylesheets: Unterschied zwischen den Versionen

Aus Stupidedia, der sinnfreien Enzyklopädie!
Wechseln zu: Navigation, Suche
K
K
 
(2 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
<div class="hs-box" style="border:2px solid firebrick; background:#E0EEEE;">
+
<div style="border: 3px double #800000; padding: 10px;">
<div style=color: #000; font-weight:bold;" class="emblem">
+
'''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.
<br>
 
<big>
 
<center>'''Willkommen in der Hilfe zu Stylesheets für Benutzer'''</center>
 
</big>
 
<br>
 
Jeder angemeldete Benutzer kann seine eigenen Stylesheets erstellen, mit denen er das Aussehen der Stupidedia an seine Wünsche anpassen kann.
 
  
== Was sind eigentlich „Stylesheets“? ==
+
== Werte zuweisen ==
Ein Stylesheet ist eine Sammlung von Informationen, mit denen man das Aussehen einer Internetseite verändern kann. Man kann Farben, Schriften, Größen und vieles mehr mit Stylesheets beeinflussen.
+
Eine einzelne CSS-Definition entspricht folgendem Schema: <syntaxhighlight lang="css">Eigenschaft: Wert;</syntaxhighlight>
  
== Aufbau von Stylesheets ==
+
Um beispielsweise die Textfarbe zu ändern, kann man folgende Definition nutzen: <syntaxhighlight lang="css">color: green;</syntaxhighlight>
Ein Stylesheet beinhaltet die Styleinformationen für einen Bereich oder für Gruppen von Bereichen innerhalb von geschweiften Klammern. Wenn man die selben Informationen für mehrere Elemente anwenden will, müssen sie mit einem Komma getrennt werden.
 
  
Dieses Beispiel zeigt, wie die Benachrichtigung über neue Nachrichten verändert wird:
+
Das macht den Text grün.
<pre>
+
 
.usermessage{
+
[[/Gebräuchliche Syntaxen|Hier]] gibt es eine Liste mit in der Stupidedia oft verwendeten Definitionen. Eine umfangreichere Liste fast aller möglichen Eigenschaften gibt es auf [http://de.selfhtml.org/css/eigenschaften/index.htm SELFHTML], ebenso eine [http://de.selfhtml.org/css/formate/wertzuweisung.htm Liste mit möglichen Werten].
background:   #123456;
+
 
color:        #aabbff;
+
== Stylesheets einsetzen ==
font-family: Times New Roman;
+
Es gibt mehrere Möglichkeiten, Stylesheets zu nutzen. Die Definitionen sehen in allen Fällen weitgehend gleich aus.
border:       #ffffff dashed 5px;
+
 
font-size:   20px;
+
=== 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:
 +
<syntaxhighlight lang="html5"><span style="Eigenschaft: Wert; Eigenschaft: Wert;">Beliebiger Text</span></syntaxhighlight>
 +
 
 +
=== 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:{{CURRENTUSER}}/common.css]], die für einzelne Skins jeweils unter ''Benutzer:{{CURRENTUSER}}/skinname.css'', z. B. [[Benutzer:{{CURRENTUSER}}/vector.css]].
 +
 
 +
Die Definitionen auf einer solchen Seite benötigen Selektoren (siehe [[#Selektoren|Abschnitt weiter unten]]), da sie, anders als bei der Direktformatierung, sonst nicht mit einem Element assoziiert werden können. Das entspricht folgendem Schema:
 +
<syntaxhighlight lang="css">
 +
Selektor,
 +
Selektor {
 +
    Eigenschaft: Wert;
 +
    Eigenschaft: Wert;
 +
    Eigenschaft: Wert;
 
}
 
}
</pre>
+
</syntaxhighlight>
''(Eine Liste mit vielen Befehlen gibt es in der [[Hilfe:Liste der CSS-Befehle]])''
 
  
== Wie erstelle ich sie ==
+
Um z. B. die Textfarbe und den Hintergrund des Seiteninhalts zu ändern, kann man folgenden Code verwenden:
Jeder Benutzer kann seinen persönlichen Stylesheet erstellen. Gespeichert wird er ''(ähnlich wie bei [[Hilfe:Javascripts|Javascripts]])'' in einem Unterverzeichnis der Benutzerseite. Stylesheets speichert man unter „[[Spezial:Mypage/vector.css|Benutzer:{{CURRENTUSER}}/vector.css]]“. Dort kann man die Styleinformationen speichern und anschließend wie oben auf der Seite beschrieben aktivieren.
+
<syntaxhighlight lang="css">
 +
div#content {
 +
    color: yellow;
 +
    background: green;
 +
}
 +
</syntaxhighlight>
 +
Das macht den Text gelb und den Hintergrund grün.
  
=== Darstellen von Farben ===
+
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]].
Siehe: [[Hilfe:Liste der CSS-Befehle]]
 
  
== Wofür kann ich sie einsetzen? ==
+
== Selektoren ==
Mit Hilfe von Stylesheets kann man fast jedes Element auf Stupidedia.org grafisch verändern.
+
Selektoren werden benötigt, um Definitionen Elementen zuzuweisen. Sie sind bei der Nutzung des style-Attributs irrelevant.
  
Man kann z.B. eine andere Hintergrundfarbe verwenden, die Textfarbe ändern, andere Schriftarten verwenden oder die „Sie haben neue Nachrichten“-Message völlig umgestalten.
+
Im Folgenden werden die wichtigsten Selektoren aufgelistet:
 +
* <tt>elementname</tt> erfasst alle Elemente des angegebenen Typs, z. B. div-Elemente.
 +
* <tt>.klassenname</tt> selektiert alle Elemente einer bestimmten Klasse. Klassen werden im class-Attribut eines Elements notiert.
 +
* <tt>#id</tt> 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.
 +
* <tt>:pseudoklasse</tt> erfasst Elemente anhand ihrer Eigenschaften. <tt>:hover</tt> z. B. gilt für alle Elemente, über die der Benutzer grad mit der Maus fährt. Siehe auch die [http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm SELFHTML-Seite zu Pseudoformaten].
  
'''ACHTUNG!!!!!''' In der nachfolgenden Tabelle sind fast alle nennenswerten Elemente aufgelistet. Dabei ist zu beachten, dass die Arten der Elemente ''(IDs und Klassen)'' jeweils anders angesprochen werden.
+
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:
 +
<syntaxhighlight lang="css">div.bla#blubb:hover</syntaxhighlight>
  
* Bei einer Klasse ist vor den Namen immer ein. (''Punkt'') zu setzen.
+
Ebenso ist es möglich, Leerzeichen zwischen Selektoren einzusetzen, um Elemente innerhalb anderer Elemente zu erfassen:
* Bei IDs muss ein # (''Rautezeichen'') davor gesetzt werden.
+
<syntaxhighlight lang="css">#mw-content-text a</syntaxhighlight>
 +
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).
  
{|id="Elemente" style="background: #6200ff;" width="70%" align="center"
+
Man kann Kommata einsetzen, um mehrere Selektorenkombinationen voneinander zu trennen, sodass die zugewiesenen Definitionen unabhängig für jede von ihnen gelten. Beispiel:
|style="background: #629dff; font-size: 16px;"|Element:
+
<syntaxhighlight lang="css">
|style="background: #629dff; font-size: 16px;"|Name:
+
#mw-content-text a,
|style="background: #629dff; font-size: 16px;"|Art:
+
#mw-panel a {
|-style="background: #62c4ff;"
+
    Eigenschaft: Wert;
|Hauptbereich
+
    Eigenschaft: Wert;
|content
+
    Eigenschaft: Wert;
|ID
+
}
|-style="background: #62c4ff;"
+
</syntaxhighlight>
|Benachrichtigung ''(über neue Nachrichten)''
+
Das lässt die Definitionen für alle Links innerhalb des Seiteninhalts und innerhalb der Sidebar greifen.
|usermessage
 
|Klasse
 
|-style="background: #62c4ff;"
 
|Inhaltsverzeichnisse
 
|toc
 
|ID
 
|-style="background: #62c4ff;"
 
|Aufzählung der Kategorien eines Artikels
 
|catlinks
 
|ID
 
|-style="background: #62c4ff;"
 
|Reiter über dem Hauptbereich (alle)<br>Reiter über dem Hauptbereich (ausgewählte)
 
|p-cactions li a<br>p-cactions li.selected a
 
|ID
 
|}
 
 
 
== Worauf muss ich achten? ==
 
  
Wenn du eigene Stylesheets verwendest, werden diese Styleinformationen nicht für andere Benutzer angewandt. Daher kann es sein, dass (''insbesondere, wenn du Schriftarten, Hintergrundfarben, e.t.c. veränderst'',) die Seite nicht so aussieht, wie es eigentlich sein sollte. Daher solltest du vor allem beim Ändern von Schriftarten vorsichtig sein.
+
Weitere Selektoren werden auf [http://de.selfhtml.org/css/formate/zentrale.htm dieser SELFHTML-Seite] erklärt.
  
== Befehle ==
+
== Siehe auch ==
Eine Sammlung vieler Befehle befindet sich in der [[Hilfe:Liste der CSS-Befehle]]!
+
* [[/Gebräuchliche Syntaxen|Liste in der Stupi häufig verwendeter Codes]]
 +
* [[/Generator|Interaktiver Generator für Stylesheets (inkl. Kästen)]]
 +
* [http://de.selfhtml.org/css/index.htm SELFHTML-Portal zu CSS]
 +
* [http://de.selfhtml.org/navigation/syntax.htm#css Alphabetische Liste von CSS-Syntaxen]
 +
* [[Wikipedia:de:Cascading Style Sheets|Wikipediaartikel zu CSS]]
 +
* [http://de.html.net/tutorials/css/introduction.php CSS-Einführungskurs]

Aktuelle Version vom 28. Oktober 2013, 09:49 Uhr

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.135.46/common.css, die für einzelne Skins jeweils unter Benutzer:172.70.135.46/skinname.css, z. B. Benutzer:172.70.135.46/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