Hilfe:Benutzung von CSS im Wiki
Einführung[Quelltext bearbeiten]
CSS bedeutet "Cascaded Style Sheets" und ist eine Webseiten-Formatierungssprache, die zusätzlich zu der eigentlichen Internetseitensprache "HTML" benutzt wird. Die meisten neueren Anzeigeprogramme (Web-Browser) unterstützen CSS. Allerdings ist gerade der Internet-Explorer <7.0 berüchtigt für falsche Darstellungen im Sinne von fehlerhafter Interpretation des CSS-3.0-Standards.
Das heißt:
- Der Computer ruft vor dem Anzeigen der jeweiligen Seite den HTML-Quelltext ab.
- Dann ruft er die eingebundenen CSS-Dateien ab.
- Dann erzeugt er abhängig von den dort gemachten Formatierungsanweisungen die Artikelansicht, so wie sie im Browser gezeigt wird.
Dabei werden die css-Ebenen übereinander gelegt, wobei die Einstellungen der unteren Schichten durch die der oberen Schichten überschrieben werden können; wenn bspw. die Schriftfarbe für externe Links in mehreren css-Dateien definiert ist, wird die Einstellung verwendet, die aus der obersten Schicht kommt.
css-Ebenen im Wiki[Quelltext bearbeiten]
| css-Ebene | Stylesheet | Editierbarkeit; Auswirkungen |
|---|---|---|
| 1 | shared.css | Benutzer mit FTP-Zugang zum Server; wird für alle Skins verwendet |
| 2 | MediaWiki:Common.css | jeder Moderator; Änderungen wirken sich auf alle Skins aus. |
| 3 | Vorgegebene CSS des gewählten Skins:
|
Benutzer mit FTP-Zugang zum Server. |
| 4 | Angepasstes CSS des gewählten Skins: | jeder Moderator. |
| 5 | Gruppenabhängiges CSS:
|
jeder Moderator. |
| 6 |
Benutzer:Benutzername/common.css |
jeder Benutzer kann seine eigene css anlegen, diese ergänzt dann die obigen Einstellungen für alle Skins (common.css) oder den gewählten Skin (monobook.css / vector.css); im Konfliktfall zwischen allgemeiner und persönlicher CSS-Einstellungen haben die persönlichen Einstellungen Vorrang (siehe Hilfe:Personalisieren des Wikiaussehens). Jeder Benutzer kann nur seine eigene css bearbeiten, mit Ausnahme von Moderatoren, die alle Benutzer-css bearbeiten können. |
Daneben gibt es noch noscript.css (für Nutzer, die javascript deaktiviert haben), Filepage.css (für die Darstellung von Dateibeschreibungsseite), Geshi.css (für die Syntaxhervorhebung durch Extension:SyntaxHighlight), commonPrint.css und MediaWiki:Print.css (für die Druckansicht) sowie diff.css (für die Änderungsanzeige). MediaWiki:Handheld.css wurde früher für mobile Geräte verwendet.
Dank Extension:CSS ist es auch möglich, CSS nur auf bestimmten Seiten einzufügen. Z.B. könnte man die Hintergrundfarbe ändern...
{{#css:
body {
background: pink;
}
}}
Mögliche Änderungen[Quelltext bearbeiten]
Im Prinzip kann die gesamte Formatierung auf eigene Wünsche zugeschnitten werden.
Dazu braucht man allerdings Kenntnisse über die vorhandenen Elemente und die nötigen Änderungen; das CSS-Tutorial von de.selfhtml.org ist eine gute Anlaufstelle, um sich diese anzueignen.
Beispiele[Quelltext bearbeiten]
| class bzw. HTML-Tag | Bedeutung | Beispielformatierung | Was kann man daran ändern bzw. Vorschläge |
|---|---|---|---|
| a | damit werden alle Links formatiert | a {
text-decoration: none;
color: #995522;
font-weight: bold;
}
|
man kann das Aussehen von Links entweder global ändern oder sogar spezifisch auf bestimmte Links eine Anpassung machen. Siehe auch Hilfe:Links per CSS mit eigenen Grafiken versehen |
| a:active a:visited |
damit werden alle geklickten alle besuchten Links formatiert |
/* on-click-Event */
a:active {
text-decoration: underline;
color: #995522;
font-weight: bold;
}
a:visited {
text-decoration: none;
color: #995522;
font-weight: bold;
}
|
man kann das Aussehen von Links entweder global ändern oder sogar spezifisch auf bestimmte Links eine Anpassung machen. Siehe auch Hilfe:Links per CSS mit eigenen Grafiken versehen |
| a:new a:hover |
damit werden alle neuen (nicht ex.Artikel) bzw. Tooltipps (mit Maus drüber fahren) Links formatiert |
/* rot für "neue Artikel" */
a.new {
color: #FF8000;
}
/* on-mouse-over-Event=Tooltips*/
a:hover {
text-decoration: underline;
color: #995522;
font-weight: bold;
}
|
man kann das Aussehen von Links entweder global ändern oder sogar spezifisch auf bestimmte Links eine Anpassung machen. Siehe auch Hilfe:Links per CSS mit eigenen Grafiken versehen |
| class="extiw" | Formatierung der (externen) InterWiki-Links, also alles was zu einem anderen Wiki führt (sofern es zum Interwikiverbund gehört) | #bodyContent a.extiw,
#bodyContent a.extiw:active {
color: #3366bb;
background: none;
padding: 0;
}
|
s.o. Farbe, Icon, etc. |
| body | die Darstellung des Seiteninhalts z. B. auch Hintergrundbilder, etc. | Hintergrund, etc. verändern |
Links[Quelltext bearbeiten]
- Hilfe:Personalisieren des Wikiaussehens - Personalisieren mittels CSS
- de.SelfHTML.org - Hilfe zu css und html
- validator.w3.org - Tool zum Überprüfen einer Webseite auf Konformität zu HTML5
